3I_WTL_2025/25_fetch_await/script.js

const inputId = document.getElementById("userId");
const btnNajdi = document.getElementById("btnNajdi");
const btnVse = document.getElementById("btnVse");
const stav = document.getElementById("stav");
const vysledek = document.getElementById("vysledek");
const postyKontejner = document.getElementById("posty-kontejner");
const btnPosty = document.getElementById("btnPosty");

let aktualniUserId = null;

// FUNKCE 1 : Načtení všech uživatelů
async function nactiVsechny() {
    vysledek.innerHTML = "";
    stav.innerText = "Načítám seznam všech uživatelů";

    try{
        const odpoved = await fetch("https://jsonplaceholder.typicode.com/users")
        if (!odpoved.ok){
            throw new Error("Nepodařilo se stáhnout seznam uživatelů")
        }
        const data = await odpoved.json();

        //Vytvoření seznam (createElement/appendChild)
        const ul = document.createElement("ul");
        data.forEach(u => {
            const li = document.createElement("li");
            li.innerText = u.name
            ul.appendChild(li);
        });
        vysledek.appendChild(ul)
        stav.innerText = "Seznam Načten"


    } catch (e) {
        stav.innerText = "CHYBA:" + e.message;
    }

}

async function nactiJednoho() {
    const id = inputId.value;
    vysledek.innerHTML = "";
    postyKontejner.innerHTML = "";
    btnPosty.disabled = true;
    aktualniUserId = null;
    stav.innerText = `Hledám uživatele s ID: ${id}`;

    try{
        const odpoved = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
        if(!odpoved.ok) {
            throw new Error(`Uživatel s ID ${id} neexistuje (HTTP ${odpoved.status})`);            
        }

        const u = await odpoved.json();
        vysledek.innerHTML = `
            <div class="user-card">
                <h3>${u.name} (ID:${u.id})</h3>
                <ul>
                    <li>${u.username}</li>
                    <li>${u.email}</li>
                    <li>${u.address.city}</li>
                </ul>
            </div>
        `;//AltGR + ý = ` (Template literal)
        stav.innerText = "Uživatel nalezen"
        //aktivace vyhledávání postů
        aktualniUserId = u.id;
        btnPosty.disabled = false;
        btnPosty.innerText = `Načíst příspvěky (autor: ${u.name})`

    } catch (error) {
        stav.innerText = "Došlo k chybě";
        vysledek.innerHTML = `<p style="color:red">Chyba:${error.message}</p>`
        console.error("Podropbnosti chyby:",error) 
    } finally {
        console.log(`Pokus o načtení ID ${id} dokončen`);
    }
}

async function nactiPosty() {
    //Pojistka pokud nemame ID
    if(!aktualniUserId) return;
    postyKontejner.innerHTML = "<p>Načítám příspěvky</p>";
    btnPosty.disabled = true; //zabráníme opakovanému klikání během načítaní

    try {
        const odpoved = await fetch(`https://jsonplaceholder.typicode.com/users/${aktualniUserId}/posts`)
        if(!odpoved.ok) {
            throw new Error(`Uživatel s ID ${id} neexistuje (HTTP ${odpoved.status})`);            
        }
        const posty = await odpoved.json();
        const html = posty.map(p => `
            <div class="post">
                <strong>${p.title}</strong>
                <p>${p.body}</p>
            </div> 
        `).join("");
        
        postyKontejner.innerHTML = `<h4>Příspěvky autora (${posty.length})</h4>` +html;
        stav.innerText = "Data načtena"
    } catch(e){
        postyKontejner.innerHTML = `<p style="color:red">chyba:${e.message}</p>`
    } finally {
        btnPosty.disabled = false
    }
}

btnVse.addEventListener("click",nactiVsechny);
btnNajdi.addEventListener("click",nactiJednoho);
btnPosty.addEventListener("click",nactiPosty)