Lekce 9 - OOP diář v JavaScriptu - Formátování a mazání záznamů

V minulé lekci, OOP diář v JavaScriptu - Ukládání, řazení, seskupování, jsme do našeho OOP diáře přidali ukládání, řazení a seskupování.

Formátování data a splněnosti

Jelikož formát data a splněnost úkolu není ideální, je třeba tyto výpisy upravit do "lidštější" podoby Pamatujete na vlastnost jazyk, kterou můžeme ovlivnit v konstruktoru? Nyní jí využijeme k lepšímu výpisu data a zároveň si vylepšíme výpis splněnosti úkolů:

vypisZaznamy() {
    this.seradZaznamy();
    this.vypisElement.innerHTML = "";
    let posledniDatum = null;
    for (const zaznam of this.zaznamy) {
        if (zaznam.datum !== posledniDatum) {
            const datum = new Date(zaznam.datum).toLocaleDateString(this.jazyk, {
                weekday: "long",
                day: "numeric",
                month: "short",
                year: "numeric"
            });
            this.vypisElement.insertAdjacentHTML("beforeend", `<h3>${datum}</h3>`);
        }
        posledniDatum = zaznam.datum;

        this.vypisElement.insertAdjacentHTML("beforeend", `<strong>${zaznam.nazev}</strong><br>úkol ${!zaznam.splneno ? "ne" : ""}splněn<hr>`);
    }
}

Vytvoříme instanci objektu Date z našeho data a použijeme její metodu toLocaleString(), kam předáme jako první parametr vlastnost jazyk naší třídy a jako druhý parametr formátovací objekt, jehož vlastnosti udávají jak přesně se má datum vypsat.

U splněnosti úkolu jsme použili jednoduchý ternární operátor, podle nesplněnosti přidáme "ne" nebo prázdný string.

Výsledek nyní vypadá takto:

Mazání záznamů

Budeme pokračovat základní interakcí s našimi úkoly, budeme je moci mazat, nebo je označit jako splněné. Začneme mazáním.

Uložení záznamů

Jelikož po smazání bude nutné záznamy znovu uložit, vyčleňme si uložení záznamů z metody nastavUdalosti() do samostatné metody ulozZaznamy():

ulozZaznamy() {
    localStorage.setItem("zaznamy", JSON.stringify(this.zaznamy));
}

V metodě nastavUdalosti() nyní metodu ulozZaznamy() zavoláme:

nastavUdalosti() {
    this.potvrditButton.onclick = () => { // this zůstane nyní stále this
        const zaznam = new Zaznam(this.nazevInput.value, this.datumInput.value);
        this.zaznamy.push(zaznam);
        this.ulozZaznamy();
        this.vypisZaznamy();
    };
}

Tlačítko

Ke každému záznamu vygenerujeme tlačítko na jeho odstranění. To vytvoříme jako nový element <button> pomocí metody document.createElement() a do <div> s výpisem záznamů jej vložíme pomocí appendChild(). Tlačítku rovněž přidáme událost reakce na kliknutí, kdy daný záznam odstraníme z pole, záznamy takto přeuložíme do localStorage a znovu vypíšeme. Metoda vypisZaznamy() bude po přidání mazacího tlačítka vypadat takto:

vypisZaznamy() {
    this.seradZaznamy();
    this.vypisElement.innerHTML = "";
    let posledniDatum = null;
    for (const zaznam of this.zaznamy) {
        if (zaznam.datum !== posledniDatum) {
            const datum = new Date(zaznam.datum).toLocaleDateString(this.jazyk, {
                weekday: "long",
                day: "numeric",
                month: "short",
                year: "numeric"
            });
            this.vypisElement.insertAdjacentHTML("beforeend", `<h3>${datum}</h3>`);
        }
        posledniDatum = zaznam.datum;

        this.vypisElement.insertAdjacentHTML("beforeend", `<strong>${zaznam.nazev}</strong>
        <br>úkol ${!zaznam.splneno ? "ne" : ""}splněn`);
        const smazatButton = document.createElement("button");
        smazatButton.onclick = () => {
            if (confirm("Opravdu si přejete odstranit úkol?")) {
                this.zaznamy = this.zaznamy.filter(z => z !== zaznam); // Ponechá vše co není rovné proměnné zaznam
                this.ulozZaznamy();
                this.vypisZaznamy();
            }
        };
        smazatButton.innerText = "Smazat záznam";
        this.vypisElement.appendChild(smazatButton);
        this.vypisElement.insertAdjacentHTML("beforeend", "<br>");
    }
}

Všimněte si použití potvrzujícího dialogu confirm(), odstranění záznamu je určitě akce, kterou nechceme udělat omylem

Možná by vás napadlo vložit tlačítko rovnou do HTML kódu jako text a přiřadit mu do data atributu index záznamu v poli, který má smazat. Taková tlačítka by se poté někde všechna vybrala a obsloužila tak, aby z pole smazala prvek pod daným indexem. Problém by ovšem nastal, kdybychom diář otevřeli ve více záložkách najednou. Když bychom v jedné záložce smazali nějakou položku a druhou záložku neobnovili, tato položka by zde stále byla, ale v localStorage by pod tímto indexem již byla položka jiná. Mohli bychom tak na neobnovené záložce nechtěně smazat jiný úkol. Proto budeme veškerou manipulaci s položkami vždy dělat přímo pomocí anonymních funkcí, kam tuto jednu konkrétní položku předáme.

Pokud kroutíte hlavou nad kódem odstraňujícím položku:

this.zaznamy = this.zaznamy.filter(z => z !== zaznam);

Je to v současné době bohužel nejjednodušší způsob, jak v JavaScriptu smazat prvek v poli, jehož index neznáme a nechceme jej zbytečně zjišťovat. Kód profiltruje dané pole tak, že v něm zůstanou jen záznamy, které se nerovnají záznamu, který chceme odstranit.

V další lekci, Dokončení objektového diáře v JavaScriptu, do našeho diáře přidáme tlačítko na splnění úkolu, validaci data a jednoduché CSS styly

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.