added matched calorie choices
This commit is contained in:
parent
731b96282f
commit
65ea28afba
|
@ -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">
|
||||||
|
|
|
@ -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');
|
||||||
|
|
Loading…
Reference in New Issue