add initial template

2025-08-01 23:41:32 +02:00 · 2025-08-01 23:41:32 +02:00 · 45a93e5a23
commit 45a93e5a23
parent 4ed1e88dc2
13 changed files with 457 additions and 13 deletions
--- a/app/README.md
+++ b/app/README.md
--- a/app/index.html
+++ b/app/index.html
@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Template APP</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .button-group {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            margin-bottom: 30px;
+        }
+        button {
+            padding: 15px 30px;
+            font-size: 16px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .btn-get {
+            background-color: #4CAF50;
+            color: white;
+        }
+        .btn-get:hover {
+            background-color: #45a049;
+        }
+        .btn-post {
+            background-color: #2196F3;
+            color: white;
+        }
+        .btn-post:hover {
+            background-color: #1976D2;
+        }
+        .result {
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            padding: 20px;
+            margin-top: 20px;
+            white-space: pre-wrap;
+            font-family: monospace;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .status {
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 10px;
+        }
+        .success {
+            background-color: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+        .error {
+            background-color: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚀 Simple Fullstack App</h1>
+        
+        <div class="button-group">
+            <button class="btn-get" onclick="getData()">📥 GET Data</button>
+            <button class="btn-post" onclick="createData()">📤 POST Data</button>
+        </div>
+        
+        <div id="status"></div>
+        <div id="result" class="result" style="display: none;"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html> 
--- a/app/script.js
+++ b/app/script.js
@ -0,0 +1,76 @@
+const API_BASE_URL = 'http://localhost:8000';
+
+// Funzione per mostrare messaggi di status
+function showStatus(message, isSuccess = true) {
+    const statusDiv = document.getElementById('status');
+    statusDiv.innerHTML = `<div class="status ${isSuccess ? 'success' : 'error'}">${message}</div>`;
+}
+
+// Funzione per mostrare i risultati
+function showResult(data) {
+    const resultDiv = document.getElementById('result');
+    resultDiv.style.display = 'block';
+    resultDiv.textContent = JSON.stringify(data, null, 2);
+}
+
+// GET: Ottiene dati dal database
+async function getData() {
+    try {
+        console.log('📥 Richiesta GET in corso...');
+        showStatus('📥 Richiesta GET in corso...', true);
+        
+        const response = await fetch(`${API_BASE_URL}/api/data`);
+        const data = await response.json();
+        
+        if (response.ok) {
+            showStatus('✅ Dati ottenuti con successo!', true);
+            showResult(data);
+        } else {
+            showStatus(`❌ Errore: ${data.detail || 'Errore sconosciuto'}`, false);
+        }
+    } catch (error) {
+        console.error('Errore GET:', error);
+        showStatus(`❌ Errore di connessione: ${error.message}`, false);
+    }
+}
+
+// POST: Inserisce dati nel database
+async function createData() {
+    try {
+        console.log('📤 Richiesta POST in corso...');
+        showStatus('📤 Richiesta POST in corso...', true);
+        
+        const response = await fetch(`${API_BASE_URL}/api/data`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            showStatus('✅ Dato inserito con successo!', true);
+            showResult(data);
+        } else {
+            showStatus(`❌ Errore: ${data.detail || 'Errore sconosciuto'}`, false);
+        }
+    } catch (error) {
+        console.error('Errore POST:', error);
+        showStatus(`❌ Errore di connessione: ${error.message}`, false);
+    }
+}
+
+// Test di connessione all'avvio
+window.addEventListener('load', async () => {
+    try {
+        const response = await fetch(`${API_BASE_URL}/`);
+        if (response.ok) {
+            console.log('✅ Backend connesso!');
+        } else {
+            console.log('❌ Backend non raggiungibile');
+        }
+    } catch (error) {
+        console.log('❌ Backend non raggiungibile:', error.message);
+    }
+});