fast-calorie/public/js/index.js

import Litedom from '/js/litedom.es.js';
import store from '/js/store.js';

Litedom({
    el: '#app',
    data: {
        settings: {
            goal: 1500,
        },
        history: [],
        selected: {},
        today: (new Date()).toLocaleDateString('en-US').replaceAll('/', '-'),
        used: (state) => {
            return state.history.reduce((prev, curr) => {
                return prev + curr.value;
            }, 0);
        },
        left: (state) => {
            return (state.settings.goal - state.used);
        },
        date: () => {
            return (new Date()).toLocaleDateString(undefined, {
                weekday: 'long',
                month: 'long',
                day: 'numeric'
            });
        }
    },
    init() {
        // load todays history
        this.data.history = store.get(this.data.today) || [];

        // set focus
        document.getElementById('calories').focus();

        // start service worker
        // this.worker();
    },
    details(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // set seleted history index
        this.data.selected = {idx: idx, ...this.data.history[idx]};

        console.log('selected', idx, this.data.selected);
    },
    remove(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // remove entry from history
        this.data.history.splice(idx, 1);

        // save history
        this.data.history = store.set(this.data.today, this.data.history);
    },
    modify(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // TODO: capture modal form data
    },
    save() {
        // capture quick form entry
        let calories = document.getElementById('calories');
        let name = document.getElementById('name');

        // get todays latest history
        let history = store.get(this.data.today) || [];

        // source of calories
        let source = (calories) => {
            let value = Number(calories.value);

            if(value) {
                return (value > 0) ? 'Food' : 'Exercise';
            } else {
                return 'Drink'
            }
        }

        // entry payload
        history.push({
            target: 'calorie',
            name: String(name.value),
            type: source(calories),
            value: Number(calories.value)
        });

        // update todays history
        this.data.history = store.set(this.data.today, history);

        // reset form
        document.getElementById('entry').reset();

        // set focus
        document.getElementById('calories').focus();
    },
    worker() {

    },
    created() {
        // start service worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('/sw.js')
                    .then((reg) => console.log(reg.scope))
                    .catch((err) => console.error(err));
            });
        }

        this.init();
    },
    updated() {
        // [M]aterial date picker
        let pickers = document.querySelector('.datepicker');
        M.Datepicker.init(pickers, {});

        // [M]aterial modal
        let modal = document.querySelector('#detailsModal');
        M.Modal.init(modal, {});
    },
    removed() {}
});