added matched calorie choices

This commit is contained in:
Geoff Doty 2020-09-19 20:38:56 -04:00
parent 731b96282f
commit 65ea28afba
2 changed files with 63 additions and 6 deletions

View File

@ -64,7 +64,19 @@
</div> </div>
<div class="col s4"> <div class="col s4">
<label for="">Calories</label> <label for="">Calories</label>
<input type="number" id="calories" placeholder="Item Calories"> <input type="number" id="calories" placeholder="Item Calories" @keyup="search">
</div>
</div>
<div :if="this.choices.length" class="collection ">
<div :for="item, i in this.choices" class="row collection-item" idx="{i}">
<div class="col s2 grey-text text-lighten-1" idx="{i}">{item.type}</div>
<div class="col s8" idx="{i}">{item.name} - <em>{item.description}</em></div>
<div class="col s2" idx="{i}">
<button class="btn brown right" idx="{i}" @click="order">
Add
<i class="material-icons left">add_circle_outline</i>
</button>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -102,6 +114,7 @@
<h6 class="col s2"><span class="right" style="margin-right: 1rem;">{this.used}</span> </h6> <h6 class="col s2"><span class="right" style="margin-right: 1rem;">{this.used}</span> </h6>
</div> </div>
</section> </section>
</main> </main>
<footer class="layout-footer orange"> <footer class="layout-footer orange">
<div class="container"> <div class="container">

View File

@ -7,7 +7,9 @@ Litedom({
settings: { settings: {
goal: 1500, goal: 1500,
}, },
delay: 0,
history: [], history: [],
choices: [],
selected: {}, selected: {},
today: (new Date()).toLocaleDateString('en-US').replaceAll('/', '-'), today: (new Date()).toLocaleDateString('en-US').replaceAll('/', '-'),
used: (state) => { used: (state) => {
@ -32,21 +34,32 @@ Litedom({
// set focus // set focus
document.getElementById('calories').focus(); document.getElementById('calories').focus();
// start service worker
// this.worker();
}, },
async entries() { async entries() {
this.data.history = await db.entries.where({ day: this.data.today }).toArray(); 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) { details(e) {
// get selected index // get selected index
let idx = e.target.getAttribute('idx'); let idx = e.target.getAttribute('idx');
// set seleted history index // set seleted history index
this.data.selected = {idx: idx, ...this.data.history[idx]}; this.data.selected = {idx: idx, ...this.data.history[idx]};
console.log('selected', idx, this.data.selected);
}, },
remove(e) { remove(e) {
// get selected index // get selected index
@ -64,6 +77,37 @@ Litedom({
// TODO: capture modal form data // 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() { save() {
// capture quick form entry // capture quick form entry
let calories = document.getElementById('calories'); let calories = document.getElementById('calories');