Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

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.

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Výsledok teraz vyzerá takto:

Your page
localhost

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ť.


 

Stiahnuť

Stiahnuté 25x (3.08 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Predchádzajúci článok
Dokončenie objektového diáre v JavaScripte
Všetky články v sekcii
Objektovo orientované programovanie v JavaScriptu
Článok pre vás napísal Šimon Raichl
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje hlavně tvorbě všemožných věcí v JS
Aktivity (1)

 

 

Komentáre

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!