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

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

        this.vypisElement.innerHTML += `<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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Výsledek nyní vypadá takto:

Your page
localhost

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>u 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.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š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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 46x (3.08 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
OOP diář v JavaScriptu - Ukládání, řazení, seskupování
Všechny články v sekci
Objektově orientované programování v JavaScriptu
Článek pro vás napsal Šimon Raichl
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje hlavně tvorbě všemožných věcí v JS
Aktivity (3)

 

 

Komentáře

Avatar
prokop.mejstrik:2. dubna 23:39

Ahoj, pokud někdo narazil na problém, že tlačítka na mazání záznamů nefungují, tak je to z důvodu, že změna vlastnosti .innerHTML při překreslování ruší eventListenery na podobjektech. (Alespoň tak jsem to jako začátečník pochopil. :D )
Řešením je použití .insertAdjacen­tHTML(position, text) - více na MDN nebo pomocí JQuery metody .append().

Ani v přiloženém zdrojovém souboru mi to nefungovalo správně, a opozornil bych že soubor pod touto lekcí neodpovídá lekci :) (chybí tam ty tlačítka na to mazání).

Je to ale skvělý tutoriál, díky moc!

Editováno 2. dubna 23:39
 
Odpovědět
2. dubna 23:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.