Dny v řadě

Než se návyk ujme, chvíli to trvá, a nic vás nepožene vpřed tolik jako série: počet dní v řadě, kdy jste splnili všechny návyky. Když už jich pár máte, nebudete ji chtít přerušit.

Na konci dne kliknete na Ukončit den. Pokud je všechno hotovo, série se zvýší o jedna, a pokud ne, začne znovu od nuly. Pak se u všech návyků zaškrtnutí zruší, aby byly připravené na zítřek. Skutečná aplikace by to mohla dělat i sama o půlnoci, podle data; s tlačítkem si to vyzkoušíte hned, bez čekání na další den.

Série musí vydržet i zavření stránky, a tak ji také vytvoříte pomocí useLocalStorage, pod vlastním klíčem. Právě k tomu composables jsou: jeden řádek a ukládá se další hodnota.

const serie = useLocalStorage("serie", 0);

function ukonciDen() {
    if (vseHotovo.value) {
        serie.value++;
    } else {
        serie.value = 0;
    }
    for (const navyk of navyky.value) {
        navyk.hotovo = false;
    }
}

vseHotovo je vypočítaná hodnota z postupu, takže ve skriptu potřebuje .value. Cyklus projde všechny návyky a zruší jim zaškrtnutí. Každou změnu uloží sledování v useLocalStorage.

Série a tlačítko přijdou na konec <template v-else>, pod formulář:

<div class="den">
    <p>Dny v řadě: {{ serie }}</p>
    <button @click="ukonciDen">Ukončit den</button>
</div>