navigate date forward/backward by one day

public/css/styles.css

@@ -33,3 +33,5 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+.selectable {cursor: pointer}

public/index.html

@@ -67,9 +67,13 @@
 
                 <section class="section">
                     <div class="row">
-                        <div class="col s2"></div>
+                        <div class="col s2 selectable" @click="back">
-                        <div class="col s8 center"><h5 class="marginless">{this.date}</h5> </div>
+                            <i class="material-icons">chevron_left</i>
-                        <div class="col s2 right"></div>
+                        </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>
 

public/js/index.js

@@ -8,36 +8,29 @@ Litedom({
             goal: 1500,
         },
         delay: 0,
-        history: [],
         choices: [],
-        selected: {},
+        current: {
-        today: (new Date()).toLocaleDateString('en-US').replaceAll('/', '-'),
+            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');
     },