Tage in Folge

Eine Gewohnheit braucht Zeit, um sich zu festigen, und nichts hält dich so bei der Stange wie eine Serie: die Anzahl der Tage in Folge, an denen du alle Gewohnheiten erledigt hast. Hast du erst ein paar Tage zusammen, willst du sie nicht mehr abreißen lassen.

Am Ende des Tages klickst du auf Tag abschließen. Ist alles erledigt, steigt die Serie um eins; wenn nicht, beginnt sie wieder bei null. Dann wird bei allen Gewohnheiten der Haken entfernt, bereit für morgen. Eine echte App könnte das auch von selbst um Mitternacht tun, mit Datumsangaben; mit einem Button kannst du es ausprobieren, ohne einen Tag zu warten.

Die Serie muss auch das Schließen der Seite überleben, also bekommt sie das Composable, unter einem eigenen Schlüssel. Dafür sind Composables da: eine Zeile, und ein weiterer Wert wird gespeichert.

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

function tagAbschliessen() {
    if (alleErledigt.value) {
        serie.value++;
    } else {
        serie.value = 0;
    }
    for (const gewohnheit of gewohnheiten.value) {
        gewohnheit.erledigt = false;
    }
}

alleErledigt ist der berechnete Wert aus dem Fortschritt, also braucht er im Script .value. Die Schleife geht durch alle Gewohnheiten und entfernt ihre Haken, und der Watcher in useLocalStorage speichert jede Änderung.

Die Serie und der Button kommen ans Ende von <template v-else>, unter das Formular:

<div class="tag">
    <p>Tage in Folge: {{ serie }}</p>
    <button @click="tagAbschliessen">Tag abschließen</button>
</div>