218 lines
5.9 KiB
JavaScript
218 lines
5.9 KiB
JavaScript
import Litedom from '/vendor/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');
|
|
|
|
// 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.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();
|
|
},
|
|
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);
|
|
})
|
|
}
|
|
});
|