fast-calorie/public/js/index.js

import Litedom from '/vendor/js/litedom.es.js';
import db from '/js/db.js';

Litedom({
    el: '#app',
    data: {
        settings: {
            goal: 1500,
        },
        delay: 0,
        choices: [],
        current: {
            date: new Date(),
            day: '',
            entries: [],
            entry: {}
        },
        used: (state) => {
            return state.current.entries.reduce((prev, curr) => {
                return prev + curr.value;
            }, 0);
        },
        left: (state) => {
            return (state.settings.goal - state.used);
        }
    },
    async init() {
        // load today
        this.setDate(0);

        // set focus
        document.getElementById('calories').focus();
    },
    search() {
        clearTimeout(this.data.delay);

        this.data.delay = setTimeout(async () => {
            let calories = document.getElementById('calories');

            if(calories.value === '') {
                this.data.choices = [];
                return;
            }

            // load matches
            this.data.choices = await db.catalog.where({ value: Number(calories.value)}).toArray();

        }, 500);
    },
    details(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // set seleted history index
        this.data.current.entry = {idx: idx, ...this.data.current.entries[idx]};
    },
    remove(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // delete entry
        db.entries.delete(this.data.history[idx].id).then(() => {
            // update entries
            this.setDate(0);
        });
    },
    modify(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // TODO: capture modal form data
    },
    order(e) {
        // get selected index
        let idx = e.target.getAttribute('idx');

        // select choice
        let choice = this.data.choices[idx];

        // add entry based on choice
        db.entries.add({
            name: choice.name,
            description: choice.description,
            target: 'calorie',
            type: choice.type,
            value: choice.value,
            day: this.data.today,
            created: Date.now(),
            modified: Date.now(),
        }).then(() => {
            // refresh entries
            this.setDate(0);

            // clear choices
            this.data.choices = [];

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

            // set focus
            document.getElementById('calories').focus();
        });
    },
    save() {
        // capture quick form entry
        let calories = document.getElementById('calories');

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

            if(value) {
                return (value > 0) ? 'FOOD' : 'EXERCISE';
            } else {
                return 'DRINK'
            }
        }

        // add new entry
        db.entries.add({
            name: '',
            target: 'calorie',
            type: source(calories),
            value: Number(calories.value),
            day: this.data.current.day,
            created: Date.now(),
            modified: Date.now(),
        }).then(async () => {
            // update
            this.setDate(0);

            // clear choices
            this.data.choices = [];
        }).catch((err) => {
            console.error(err);
        });

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

        // set focus
        document.getElementById('calories').focus();
    },
    async setDate(change = 0) {

        let current;

        // currently selected date
        if (this.data.current.day) {
            current = new Date(Date.parse(this.data.current.day));
        } else {
            current = new Date();
        }

        // date back one day
        let alter = new Date(current.setDate(current.getDate() + Number(change)));

        // tokenize for db
        let day = alter.toLocaleDateString('en-US').replaceAll('/', '-');

        // nice formated date string
        let label = alter.toLocaleDateString(undefined, {
            weekday: 'long',
            month: 'long',
            day: 'numeric'
        });

        // update current view
        this.data.current = {
            date: label,
            day: day,
            entries: await db.entries.where({ day: day }).toArray(),
            entry: {}
        }
    },
    async back() {
        await this.setDate(-1);
    },
    async today() {
        await this.setDate(0);
    },
    async forward() {
        await this.setDate(+1);
    },
    addWeight() {
        console.log('add weight');
    },
    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 - calorie detail
        let modal = document.querySelector('#detailsModal');
        M.Modal.init(modal, {});

        // [M]aterial modal - add weight
        let weight = document.querySelector('#weightModal');
        M.Modal.init(weight, {});

        var sidebar = document.querySelectorAll('.sidenav');
        M.Sidenav.init(sidebar, {});
    },
    removed() {},
    populate() {

        db.catalog.bulkAdd([
            {
                name: 'Water',
                description: 'Tap, Bottled, Filtered, Spring',
                type: 'DRINK',
                target: 'calorie',
                value: 0,
                brand: '',
                created: Date.now(),
                modified: Date.now(),
            },
            {
                name: 'Dr Zevia',
                description: 'Zero Calorie Soda',
                type: 'DRINK',
                target: 'calorie',
                value: 0,
                brand: 'Zevia',
                created: Date.now(),
                modified: Date.now(),
            },
            {
                name: 'Popcorn',
                description: 'Air Popped Popcorn',
                type: 'FOOD',
                target: 'calorie',
                value: 20,
                brand: '',
                created: Date.now(),
                modified: Date.now(),
            },
        ]).then((r) => {
            console.log('results', r);
        })
    }
});