103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
// ⚠️ COMPILARE PRIMA DI INIZIARE
|
|
// Inserisci l'URL del server corretto
|
|
const BASE_URL = 'http://192.168.1.7:3000/api';
|
|
|
|
// ELEMENTI DEL DOM (controlla che siano corretti)
|
|
const userId = document.querySelector('#userId');
|
|
const loading = document.querySelector('#loading');
|
|
const result = document.querySelector('#result');
|
|
|
|
|
|
/**
|
|
* FUNZIONE: Crea utente card
|
|
*
|
|
* Crea la card completa dell'utente e la inserisce nell'elemento result
|
|
* L'oggetto user ha questa struttura:
|
|
* {
|
|
* id: number,
|
|
* nome: string,
|
|
* cognome: string,
|
|
* email: string,
|
|
* avatar: string (url),
|
|
* dataNascita: string (formato YYYY-MM-DD),
|
|
* comune: string,
|
|
* attivo: boolean
|
|
* }
|
|
*/
|
|
function createUserCard(user) {
|
|
result.innerHTML = `
|
|
<div class="user-card">
|
|
<div class="card-header">
|
|
<img src="${user.avatar}" alt="Avatar" class="avatar">
|
|
<div class="user-info">
|
|
<h2>${user.nome} ${user.cognome}</h2>
|
|
<p class="email">${user.email}</p>
|
|
<p class="comune">${user.comune}</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="detail">
|
|
<strong>Data Nascita:</strong>
|
|
<span>${user.dataNascita}</span>
|
|
</div>
|
|
<div class="detail">
|
|
<strong class="status ${user.attivo ? 'attivo' : 'inattivo'}">
|
|
Status:
|
|
</strong>
|
|
<span>${user.attivo ? 'Attivo' : 'Inattivo'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
|
|
/**
|
|
* FUNZIONE: Gestione errori
|
|
*
|
|
* Mostra un messaggio di errore nell'elemento result
|
|
* e logga l'errore in console (per debug)
|
|
*/
|
|
function handleError(message) {
|
|
result.innerHTML = '';
|
|
|
|
let div = document.createElement('div');
|
|
div.className = 'error';
|
|
|
|
let strong = document.createElement('strong');
|
|
strong.textContent = `❌ ${message}`;
|
|
|
|
div.appendChild(strong);
|
|
result.appendChild(div);
|
|
console.error('Errore:', message);
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* FUNZIONE: Fetch singolo utente
|
|
*
|
|
* Questa funzione deve recuperare l'ID utente dall'input,
|
|
* fare una chiamata GET a BASE_URL + "/users/" + id e mostrare i dati
|
|
*
|
|
* Passi:
|
|
* 1. Leggi l'ID utente dall'input
|
|
* 2. Controlla che l'ID sia valido, ovvero un numero tra 1 e 40
|
|
* In caso contrario, mostra un messaggio di errore (usa handleError()) e return
|
|
* 3. Mostra lo spinner di caricamento (rimuovi la classe nascosto)
|
|
* 4. Fai una fetch GET a /users/{id}
|
|
* 5. Se la risposta non è OK, usa handleError() per mostrare un messaggio e return
|
|
* 6. Converti la risposta in JSON
|
|
* 7. Mostra i dati dell'utente chiamando createUserCard(user)
|
|
* 8. Nascondi lo spinner di caricamento (aggiungi la classe nascosto)
|
|
*/
|
|
async function fetchUser() {
|
|
// PLACEHOLDER - Rimuovi questa riga quando completi
|
|
handleError('Codice non implementato - Completa la funzione fetchUser()');
|
|
}
|
|
|
|
|
|
// COLLEGA IL BOTTONE AL CLICK
|
|
document.getElementById('btnFetch').addEventListener('click', fetchUser);
|
|
|