fast-calorie/public/js/index.js

172 lines
4.6 KiB
JavaScript

import Litedom from '/js/litedom.es.js';
import db from '/js/db.js';
Litedom({
el: '#app',
data: {
settings: {
goal: 1500,
},
delay: 0,
history: [],
choices: [],
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'
});
}
},
async init() {
// load todays history
this.entries();
// set focus
document.getElementById('calories').focus();
},
async entries() {
this.data.history = await db.entries.where({ day: this.data.today }).toArray();
},
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.selected = {idx: idx, ...this.data.history[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 list
this.entries();
});
},
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.entries();
// 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');
let name = document.getElementById('name');
// 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: String(name.value),
target: 'calorie',
type: source(calories),
value: Number(calories.value),
day: this.data.today,
created: Date.now(),
modified: Date.now(),
}).then(async () => {
// update todays history
this.entries();
}).catch((err) => {
console.error(err);
});
// reset form
document.getElementById('entry').reset();
// set focus
document.getElementById('calories').focus();
},
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() {}
});