added matched calorie choices

public/index.html

@@ -64,7 +64,19 @@
                             </div>
                             <div class="col s4">
                                 <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 class="row">
@@ -102,6 +114,7 @@
                         <h6 class="col s2"><span class="right" style="margin-right: 1rem;">{this.used}</span> </h6>
                     </div>
                 </section>
+
             </main>
             <footer class="layout-footer orange">
                 <div class="container">

public/js/index.js

@@ -7,7 +7,9 @@ Litedom({
         settings: {
             goal: 1500,
         },
+        delay: 0,
         history: [],
+        choices: [],
         selected: {},
         today: (new Date()).toLocaleDateString('en-US').replaceAll('/', '-'),
         used: (state) => {
@@ -32,21 +34,32 @@ Litedom({
 
         // set focus
         document.getElementById('calories').focus();
-
-        // start service worker
-        // this.worker();
     },
     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]};
-
-        console.log('selected', idx, this.data.selected);
     },
     remove(e) {
         // get selected index
@@ -64,6 +77,37 @@ Litedom({
 
         // 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');