9. diel - OOP diár v JavaScripte - Formátovanie a mazanie záznamov

Formátovanie dáta a splněnosti

Keďže formát dátumu a splněnost úlohy nie je ideálne, je potrebné tieto výpisy upraviť do "ľudskejší" podoby:) Pamätáte na vlastnosť jazyk, ktorú môžeme ovplyvniť v konstruktoru? Teraz jej využijeme k lepšiemu výpisu dáta a zároveň si vylepšíme výpis splněnosti úloh:

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.innerHTML += `<h3>${datum}</h3>`
        }
        posledniDatum = zaznam.datum;

        this.vypisElement.innerHTML += `<strong>${zaznam.nazev}</strong><br>úkol ${!zaznam.splneno ? "ne" : ""}splněn<hr>`;
    }
}

Vytvoríme inštanciu objektu Date z nášho dátumu a použijeme jej metódu toLocaleString(), kam odovzdáme ako prvý parameter vlastnosť jazyk našej triedy a ako druhý parameter formátovacie objekt, ktorého vlastnosti udávajú ako presne sa má dátum vypísať.

U splněnosti úlohy sme použili jednoduchý ternárne operátor, podľa nesplněnosti pridáme "ne" alebo prázdny string.

Výsledok teraz vyzerá takto:

Mazanie záznamov

Budeme pokračovať základné interakcií s našimi úlohami, budeme ich môcť mazať, alebo ich označiť ako splnené. Začneme mazaním.

Uloženie záznamov

Keďže po zmazaní bude potrebné záznamy znova uložiť, vyčlení si uloženie záznamov z metódy nastavUdalosti() do samostatnej metódy ulozZaznamy():

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

V metóde nastavUdalosti() teraz metódu 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čidlo

Ku každému záznamu vygenerujeme tlačidlo na jeho odstránenie. To vytvoríme ako nový element <button> pomocou metódy document.createElement() a do <div> us výpisom záznamov ho vložíme pomocou appendChild(). Tlačidlu takisto pridáme udalosť reakcie na kliknutie, kedy daný záznam odstránime z poľa, záznamy takto přeuložíme do localStorage a znova vypíšeme. Metóda vypisZaznamy() bude po pridaní mazacieho tlačidla vyzerať 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.innerHTML += `<h3>${datum}</h3>`
        }
        posledniDatum = zaznam.datum;

        this.vypisElement.innerHTML += `<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.innerHtml += "<br>";
    }
}

Všimnite si použitie potvrdzujúceho dialógu confirm(), odstránenie záznamu je určite akcia, ktorú nechceme urobiť omylom:)

Možno by vás napadlo vložiť tlačidlo rovno do HTML kódu ako text a priradiť mu do dátumu atribútu index záznamu v poli, ktorý má zmazať. Takáto tlačidla by sa potom niekde všetky vybrala a obslúžila tak, aby z poľa zmazala prvok pod daným indexom. Problém by však nastal, keby sme diár otvorili vo viacerých záložkách naraz. Keď by sme v jednej záložke zmazali nejakú položku a druhú záložku neobnovili, táto položka by tu stále bola, ale v localStorage by pod týmto indexom už bola položka iná. Mohli by sme tak na prvotne záložke nechtiac zmazať inú úlohu. Preto budeme všetku manipuláciu s položkami vždy robiť priamo pomocou anonymných funkcií, kam túto jednu konkrétnu položku odovzdáme.

Ak krútite hlavou nad kódom odstraňujúcim položku:

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

Je to v súčasnej dobe žiaľ najjednoduchší spôsob, ako v JavaScripte zmazať prvok v poli, ktorého index nepoznáme a nechceme ho zbytočne zisťovať. Kód prefiltrujú dané pole tak, že v ňom zostanú len záznamy, ktoré sa nerovnajú záznamu, ktorý chceme odstrániť.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.