fix 11e4

2026-02-11 23:24:30 +01:00
parent 1e3ff291ce
commit 11e4d607c9
4 changed files with 102 additions and 71 deletions
--- a/API/04_ricerca_post/index.html
+++ b/API/04_ricerca_post/index.html
@@ -28,7 +28,7 @@
        </div>

        <!-- RISULTATI -->
-        <div id="resultsContainer" class="results-container"></div>
+        <div id="results" class="results-container"></div>
    </div>

    <script src="script.js"></script>
--- a/API/04_ricerca_post/script.js
+++ b/API/04_ricerca_post/script.js
@@ -1,42 +1,33 @@
 // ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
-const BASE_URL = 'http://localhost:3000/api';
+const BASE_URL = 'http://192.168.1.7:3000/api';
 const keyword = document.querySelector('#keyword');
 const loading = document.querySelector('#loading');
-const resultsContainer = document.querySelector('#resultsContainer');
+const results = document.querySelector('#results');
 const btnSearch = document.querySelector('#btnSearch');


 /**
- * FUNZIONE: Crea la card HTML per un autore e i suoi post trovati
+ * FUNZIONE: Crea la card HTML per un singolo post con autore a fianco
 * 
 * Funzione già fatta - non modificare
 */
-function createAuthorCard(author, posts) {
-    const postsHTML = posts.map(post => `
-        <div class="post-item">
-            <div class="post-title">${post.titolo}</div>
-            <div class="post-preview">${post.contenuto}</div>
-            <div class="post-meta">
-                <span>📅 ${post.data}</span>
-                <span>❤️ ${post.likes} likes</span>
-            </div>
-        </div>
-    `).join('');
-
-    return `
-        <div class="author-section">
-            <div class="author-header">
-                <img src="${author.avatar}" alt="Avatar" class="author-avatar">
-                <div class="author-info">
-                    <h3>${author.nome} ${author.cognome}</h3>
-                    <p>📧 ${author.email}</p>
+function creaElementoPost(post, autore) {
+    results.innerHTML += `
+        <div class="post-row">
+            <div class="row-author">
+                <img src="${autore.avatar}" alt="Avatar" class="row-avatar">
+                <div class="row-author-info">
+                    <strong>${autore.nome} ${autore.cognome}</strong>
+                    <small>${autore.email}</small>
                </div>
            </div>
-            <div class="posts-list">
-                <div style="font-weight: 600; margin-bottom: 10px; color: #333;">
-                    Post trovati (${posts.length})
+            <div class="row-post">
+                <div class="post-title">${post.titolo}</div>
+                <div class="post-preview">${post.contenuto}</div>
+                <div class="post-meta">
+                    <span>📅 ${post.data}</span>
+                    <span>❤️ ${post.likes} likes</span>
                </div>
-                ${postsHTML}
            </div>
        </div>
    `;
@@ -50,7 +41,7 @@ function createAuthorCard(author, posts) {
 * Funzione già fatta - non modificare
 */
 function handleError(message) {
-    resultsContainer.innerHTML = `
+    results.innerHTML = `
        <div class="error">
            <strong>❌ ${message}</strong>
        </div>
@@ -59,50 +50,27 @@ function handleError(message) {
 }


-/**
- * FUNZIONE: Visualizza i risultati della ricerca
- * 
- * Raggruppa i post per autore e mostra le card
- * Funzione già fatta - non modificare
- */
-function displayResults(results) {
-    if (results.length === 0) {
-        resultsContainer.innerHTML = `
-            <div class="empty">
-                Nessun post trovato con la parola chiave
-            </div>
-        `;
-        return;
-    }
-
-    const cardsHTML = results.map(item => 
-        createAuthorCard(item.author, item.posts)
-    ).join('');
-
-    resultsContainer.innerHTML = cardsHTML;
-}
-
-
 /**
 * ESERCIZIO 5: Ricerca Post con Autori
 * 
 * Devi completare questa funzione:
- * 1. Leggi la parola chiave dall'input
- * 2. Valida che non sia vuota (usa trim)
- * 3. Mostra lo spinner di caricamento
- * 4. Apri un blocco try/catch
- * 5. Fai una GET a /posts
- * 6. Filtra i post dove titolo O contenuto contiene la keyword (case-insensitive)
- * 7. Se nessun post trovato, usa handleError() e return
- * 8. Estrai gli ID univoci degli utenti che hanno scritto questi post
- * 9. Fai una GET a /users
- * 10. Crea un array di risultati: [{author: userObj, posts: [...]}, ...]
- *    dove posts sono solo quelli trovati per quell'autore
- * 11. Chiama displayResults(results)
- * 12. Gestisci gli errori con handleError()
- * 13. Nascondi lo spinner di caricamento
+ *  1. Leggi la parola chiave dall'input
+ *  2. Svuota il contenuto dei risultati (results.innerHTML = '')
+ *  3. Valida che non sia vuota (usa trim)
+ *  4. Mostra lo spinner di caricamento
+ *  5. Apri un blocco try/catch
+ *  6. Fai una GET a /posts
+ *  7. Filtra i post dove titolo O contenuto contiene la keyword
+ *     (ricorda minuscole per la ricerca)
+ *  8. Se nessun post trovato, usa handleError() e return
+ *  9. Per ogni post trovato:
+ *     - Prendi l'id autore e fai una GET a /users?id=[id]
+ *     - Crea un nuovo elemento della lista dei risultati con creaElementoPost(post, autore)
+ * 10. Gestisci gli errori con handleError()
+ * 11. Nascondi lo spinner di caricamento
 */
 async function fetchPostsByKeyword() {
+    //TODO
 }


--- a/API/04_ricerca_post/style.css
+++ b/API/04_ricerca_post/style.css
@@ -100,7 +100,68 @@ h1 {
 .results-container {
    display: flex;
    flex-direction: column;
-    gap: 20px;
+    gap: 15px;
+}
+
+.post-row {
+    background: white;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    animation: slideIn 0.3s ease-out;
+    min-height: 100px;
+    border: 1px solid #f0f0f0;
+}
+
+.row-author {
+    background: #f5f5f5;
+    color: #333;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 130px;
+    flex-shrink: 0;
+    gap: 8px;
+    border-right: 1px solid #e0e0e0;
+}
+
+.row-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #ddd;
+}
+
+.row-author-info {
+    text-align: center;
+    width: 100%;
+}
+
+.row-author-info strong {
+    display: block;
+    font-size: 0.85rem;
+    margin-bottom: 3px;
+    word-break: break-word;
+    color: #333;
+    font-weight: 600;
+}
+
+.row-author-info small {
+    font-size: 0.7rem;
+    color: #999;
+    word-break: break-word;
+}
+
+.row-post {
+    flex: 1;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }

 .author-section {
--- a/API/05_todo_app_crud/script.js
+++ b/API/05_todo_app_crud/script.js
@@ -63,10 +63,10 @@ function handleError(message) {
 * ESERCIZIO 4: Todo App CRUD Completa
 * 
 * Devi implementare 4 funzioni:
- * 1. fetchTodosUtente()  - GET /todos?userId={id}
- * 2. addTodo()           - POST /todos
- * 3. toggleTodo()        - PUT /todos/{id}
- * 4. deleteTodo()        - DELETE /todos/{id}
+ * 1. fetchTodosUtente()  - GET /todos?userId={id}  (READ)
+ * 2. addTodo()           - POST /todos             (CREATE)
+ * 3. toggleTodo()        - PUT /todos/{id}         (UPDATE)
+ * 4. deleteTodo()        - DELETE /todos/{id}      (DELETE)
 */

 /**
@@ -85,6 +85,8 @@ function handleError(message) {
 * 10. Salva l'ID utente in currentUserId (e localStorage)
 */
 async function fetchTodosUtente() {
+    // TODO Rimuovi questa riga e completa la funzione
+    handleError('Codice non implementato - Completa la funzione fetchTodosUtente()');
 }