10-24-2024

templates/items/item.html

@@ -88,6 +88,9 @@
                     <div class="col s6">
                         <button class="btn btn-small btn-flat right modal-trigger green lighten-4 black-text" data-target="web-modal" style="margin-top: 5px; padding-bottom: 10px;">Add Link</button>
                     </div>
+                    <div id="tags_container" class="col s12 chips">
+                        <!-- This holds open for tags pills -->
+                    </div>
                     <div class="col s12 p-3">
                         <div id="weblinks">
                         </div>
@@ -150,7 +153,7 @@
                     </div>
                     <div id="food_info" class="col s12">
                         <div class="row" style="gap: 10px; padding-top: 10px;">
-                            <div id="food_groups_container" class="col s12 chips">
+                            <div id="food_groups_container" class="col s12 chips chips-initial">
                                 <!-- This holds open for food groups pills -->
                             </div>
                             <div id="ingrediants_container" class="col s12 chips">
@@ -209,7 +212,7 @@
     let logistics_info = {};
     let food_groups = [];
     let ingrediants = [];
-    
+    let tags = [];
 
     document.addEventListener('DOMContentLoaded', async function() {
         document.getElementById("title").innerHTML = String(item[2])
@@ -223,6 +226,8 @@
         var elems = document.querySelectorAll('.modal');
         var instances = M.Modal.init(elems, {});
 
+        await propagateInfo()
+
 
         var elem = document.getElementById('food_groups_container');
         M.Chips.init(elem, {
@@ -231,17 +236,26 @@
             onChipDelete: deleteFoodGroup,
             onChipAdd: addFoodGroup,
         });
-
         var elem = document.getElementById('ingrediants_container');
         M.Chips.init(elem, {
             placeholder: 'Add Ingrediant...',
             secondaryPlaceholder: 'Add Ingrediant...',
             onChipDelete: deleteIngrediant,
+            onChipAdd: addIngrediant,
+        });
+
+        var elem = document.getElementById('tags_container');
+        M.Chips.init(elem, {
+            placeholder: 'Add Tag...',
+            secondaryPlaceholder: 'Add Tag...',
+            onChipDelete: deleteTag,
+            onChipAdd: addTag,
         });
 
         await propagateInfo()
-        refreshFoodGroups()
+        //refreshFoodGroups()
-        refreshIngrediants()
+        refreshChips('food_groups_container', food_groups, item[33])
+        refreshChips('ingrediants_container', ingrediants, item[34])
         populateReferences(item[23], 'shopping_list')
         populateReferences(item[24], 'recipe')
         populateReferences(item[25], 'group')
@@ -256,17 +270,20 @@
         itemType.value = item[11];
         await propagateLinks()
 
-        food_groups = item[33];
+        //food_groups = item[33];
-        ingrediants = item[34];
+        //ingrediants = item[34];
-    }
+        tags = item[5];
-
-    function refreshFoodGroups(){
-        let instance = M.Chips.getInstance(document.getElementById('food_groups_container'));
-        for (let i=0; i < food_groups.length; i++){
-            instance.addChip({tag: String(food_groups[i])});
-        ;}
     };
 
+    function refreshChips(elem_id, chips_array, initial_chips){
+        let tags_array = [];
+        let instance = M.Chips.getInstance(document.getElementById(elem_id));
+        for (let i=0; i < initial_chips.length; i++){
+            instance.addChip({tag: String(initial_chips[i])});
+        }
+    };
+
+    
     function addFoodGroup(e, chip){
         chipText = chip.textContent.replace('close', '').trim()
         console.log(chipText)
@@ -274,6 +291,20 @@
         console.log(food_groups)
     }
 
+    function addIngrediant(e, chip){
+        chipText = chip.textContent.replace('close', '').trim()
+        console.log(chipText)
+        ingrediants.push(chipText)
+        console.log(ingrediants)
+    }
+
+    function addTag(e, chip){
+        chipText = chip.textContent.replace('close', '').trim()
+        console.log(chipText)
+        tags.push(chipText)
+        console.log(tags)
+    }
+
     function deleteFoodGroup(e, chip){
         chipText = chip.textContent.replace('close', '').trim()
         food_groups = food_groups.filter(chip => chip !== chipText);
@@ -284,12 +315,10 @@
         ingrediants = ingrediants.filter(chip => chip !== chipText);
     }
 
-    function refreshIngrediants(){
+    function deleteTag(e, chip){
-        let instance = M.Chips.getInstance(document.getElementById('ingrediants_container'));
+        chipText = chip.textContent.replace('close', '').trim()
-        for (let i=0; i < ingrediants.length; i++){
+        tags = tags.filter(chip => chip !== chipText);
-            instance.addChip({tag: String(ingrediants[i])});
+    }
-        ;}
-    };
 
     async function propagateLinks(){
         var element = document.getElementById("weblinks");