navigate date forward/backward by one day
This commit is contained in:
parent
1bf6c04cfe
commit
b234b6ac7b
|
|
@ -33,3 +33,5 @@ input::-webkit-inner-spin-button {
|
|||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.selectable {cursor: pointer}
|
||||
|
|
@ -67,9 +67,13 @@
|
|||
|
||||
<section class="section">
|
||||
<div class="row">
|
||||
<div class="col s2"></div>
|
||||
<div class="col s8 center"><h5 class="marginless">{this.date}</h5> </div>
|
||||
<div class="col s2 right"></div>
|
||||
<div class="col s2 selectable" @click="back">
|
||||
<i class="material-icons">chevron_left</i>
|
||||
</div>
|
||||
<div class="col s8 center" @click="today"><h5 class="marginless">{this.current.date}</h5> </div>
|
||||
<div class="col s2 selectable" @click="forward">
|
||||
<i class="material-icons right">chevron_right</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s4 center">
|
||||
|
|
@ -115,12 +119,12 @@
|
|||
|
||||
<div class="divider"></div>
|
||||
|
||||
<section :if="this.history.length">
|
||||
<section :if="this.current.entries.length">
|
||||
<ul class="collection with-header">
|
||||
<li class="collection-header">
|
||||
<h5>Today's Entries<span class="right" style="margin-right: 1rem;">{this.history.length}</span></h5>
|
||||
<h5>Today's Entries<span class="right" style="margin-right: 1rem;">{this.current.entries.length}</span></h5>
|
||||
</li>
|
||||
<li :for="entry, i in this.history" idx="{i}" class="collection-item row modal-trigger" @click="details"
|
||||
<li :for="entry, i in this.current.entries" idx="{i}" class="collection-item row modal-trigger" @click="details"
|
||||
data-target="detailsModal">
|
||||
<div class="col s2 grey-text text-lighten-1" idx="{i}">{entry.type}</div>
|
||||
<div class="col s8" idx="{i}">{entry.name || 'Add Entry Description'}</div>
|
||||
|
|
@ -166,18 +170,18 @@
|
|||
<table>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<td>{this.selected.name}</td>
|
||||
<td>{this.current.entry.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Calories</th>
|
||||
<td>{this.selected.value}</td>
|
||||
<td>{this.current.entry.value}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
<button class="btn red" @click="remove" idx="{this.selected.idx}">Remove Entry</button>
|
||||
<button class="btn red" @click="remove" idx="{this.current.entry.idx}">Remove Entry</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,36 +8,29 @@ Litedom({
|
|||
goal: 1500,
|
||||
},
|
||||
delay: 0,
|
||||
history: [],
|
||||
choices: [],
|
||||
selected: {},
|
||||
today: (new Date()).toLocaleDateString('en-US').replaceAll('/', '-'),
|
||||
current: {
|
||||
date: new Date(),
|
||||
day: '',
|
||||
entries: [],
|
||||
entry: {}
|
||||
},
|
||||
used: (state) => {
|
||||
return state.history.reduce((prev, curr) => {
|
||||
return state.current.entries.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();
|
||||
this.today();
|
||||
|
||||
// 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);
|
||||
|
||||
|
|
@ -59,7 +52,7 @@ Litedom({
|
|||
let idx = e.target.getAttribute('idx');
|
||||
|
||||
// set seleted history index
|
||||
this.data.selected = {idx: idx, ...this.data.history[idx]};
|
||||
this.data.current.entry = {idx: idx, ...this.data.current.entries[idx]};
|
||||
},
|
||||
remove(e) {
|
||||
// get selected index
|
||||
|
|
@ -145,6 +138,46 @@ Litedom({
|
|||
// set focus
|
||||
document.getElementById('calories').focus();
|
||||
},
|
||||
async setDate(date, change) {
|
||||
// currently selected data
|
||||
let current = new Date(Date.parse(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() {
|
||||
// currently selected data
|
||||
let current = new Date(Date.parse(this.data.current.day));
|
||||
|
||||
await this.setDate(current, -1);
|
||||
},
|
||||
async today() {
|
||||
await this.setDate(new Date(), 0);
|
||||
},
|
||||
async forward() {
|
||||
// currently selected data
|
||||
let current = new Date(Date.parse(this.data.current.day));
|
||||
|
||||
await this.setDate(current, +1);
|
||||
},
|
||||
addWeight() {
|
||||
console.log('add weight');
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue