8. diel - Dokončenie objektového diáre v JavaScripte

V minulej lekcii, Vylepšenia objektového diáre v JavaScripte , sme do nášho objektového diára v JavaScripte pridali niekoľko ďalších funkcií. Dnes budeme pokračovať v podobnom duchu a aplikáciu úplne dokončíme.

Zmena splněnosti záznamov

Posledné tlačidlo, ktoré nám chýba, je tlačidlo na splnenie úlohy.

Parametrizácie

Pretože tlačidlo na splnenie úlohy bude vyzerať a fungovať veľmi podobne ako mazacie tlačidlo, nebudeme do aplikácie zbytočne vkladať duplicitné kód, ale upravíme ten súčasný. Vytvoríme si pomocnú metódu na vloženie tlačidlá k úlohe:

_pridejTlacitko(titulek, callback) {
    const button = document.createElement("button");
    button.onclick = callback;
    button.innerText = titulek;
    this.vypisElement.appendChild(button);
}

Metóda _pridejTlacitko() robí presne to, čo sme mali u pridanie mazacieho tlačidla. Titulok a obslužnú metódu tlačidlá však nastavuje z parametra, takže ju môžeme použiť pre vloženie rôznych tlačidiel s rôznymi titulkami a funkciami.

Miesto všetkého kódu pre mazacie tlačidlo teraz stačí do metódy vypisZaznamy() vložiť len:

this._pridejTlacitko("Smazat", () => {
    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();
    }
});

Pomocnú metódu sme si vytvorili zámerne až teraz a nie už pred pridaním prvého tlačidla. To aby sme si ukázali, ako sa v praxi rieši situácie, keď potrebujete do aplikácie vložiť nejaký veľmi podobný kód. Kód existujúce vyčleníte do pomocnej metódy a parametrizuje ho. Prezencia duplicitného kódu porušuje princíp DRY, jedno z najdôležitejších pravidiel kvalitného objektového návrhu.

Privátne metódy

Všimnite si, že názov metódy začína na podčiarkovník. Pomocné metódy, ktoré by na našej triede nemal zvonku nikto volať, by sa mali ideálne skryť. JavaScript v súčasnosti žiaľ neumožňuje metódy rozumne zapouzdřit. Ďalej v kurze si síce ukážeme, že je to možné, ale len pomocou hack, čo kód vo Výsled znepřehlední. Označenie privátnych vlastností a metód pomocou podčiarknutia je pomerne dobrý návyk a robí sa tak často aj v ostatných jazykoch, ktoré nepodporujú modifikátory prístupu.

Aby bol náš kód naozaj dobre napísaný, označme si podčiarknikom aj metódu _nastavUdalosti(). Rovnako sa jedná len o pomocnú funkcionalitu, ktorá by zvonku nemala byť volaná.

_nastavUdalosti() {
    // ...
}

Nezabudnite premenovať aj volanie metódy v konstruktoru:

constructor(jazyk = "cs-CZ") {
    // ...
    this._nastavUdalosti();
}

Tlačidlo na splnenie zázname

Po malej odbočke sa vráťme späť k novému tlačidlu. To teraz vložíme pomocou pripravenej metódy _pridejTlacitko():

this._pridejTlacitko("Označit jako " + (zaznam.splneno ? "nesplněný" : "splněný"), () => {
    zaznam.splneno = !zaznam.splneno;
    this.ulozZaznamy();
    this.vypisZaznamy();
});

Výsledok si môžete vyskúšať

Ošetrenie vstupu

Máme teda plne funkčný diár s ukladaním do localStorage. Jediné, čo nám ešte chýba, je ošetriť vstup, pretože ak používateľ nezadá dátum, bude sa nám vypisovať ako "Invalid Date". Upravíme si teda metódu _nastavUdalosti() a urobíme tu jednoduchú validáciu. Vďaka tomu, že <input type="date"> vracia value ako prázdny string, keď je dátum neúplné, nie je ťažké užívateľa na tento stav upozorniť:

_nastavUdalosti() {
    this.potvrditButton.onclick = () => { // this zůstane nyní stále this
        if (this.datumInput.value !== "") {
            const zaznam = new Zaznam(this.nazevInput.value, this.datumInput.value);
            this.zaznamy.push(zaznam);
            this.ulozZaznamy();
            this.vypisZaznamy();
        } else
            alert("Musíte vyplnit datum!");
    };
}

Takže ak nebude zadané dátum správne, upozorníme užívateľa funkcií alert(), že ho má zadať správne, inak nový záznam uložíme.

Dizajn

Teraz už zostáva len nejaký dizajn, ktorý si rýchlo preletíme a len minimálne upravíme v JS. Vytvoríme si v projekte zložku css/, a nový súbor styly.css. Jeho obsah bude nasledujúci:

* {
    font-family: Segoe UI Light, "Calibri Light", sans-serif;
}

button {
    padding: 10px 16px;
    font-weight: 600;
    background: #2792e0;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: .5s;
}

button:hover {
    background: #2954c2;
}

button:active {
    background: #204199;
}

input {
    min-width: 250px;
    padding: 8px;
    border: 1px solid #909090;
    height: 20px;
}

button, input {
    margin-top: 1rem;
    outline: none;
}

.ukol {
    width: 75%;
    padding: 2rem;
    margin: 1rem auto;
    border: 1px solid #c5c5c5;
    box-shadow: 2px 2px 4px #b1b1b1;
}

Štýly nalinkuje v index.html:

<link href="css/styly.css" rel="stylesheet">

A teraz len ľahko upravíme výpis každého záznamu:

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

výsledok:

Tak a je hotovo! Máme teda celkom pekne vyzerajúce diár, ktorý ukladá dáta a možno ho reálne používať Ak ste mali s čímkoľvek problém, pod článkom si môžete stiahnuť kompletnú zdrojové kódy a nájsť si chybu.

Nabudúce, v lekcii OOP diár v JavaScripte - Formátovanie a mazanie záznamov , sa posunieme zas ďalej a pozrieme sa na dedičnosť a polymorfizmus.

V budúcej lekcii, Vylepšenia objektového diáre v JavaScripte , do nášho objektového diára v JavaScripte pridáme niekoľko ďalších funkcií.