Create add new ingredient layout

controllers/renderer.js

@@ -126,8 +126,6 @@ module.exports = {
                                 });
                         })
                         .catch((err)=>{
-                            console.log("Fucking bitch error");
-                            console.log(err);
                             let errorMessage = "There was an error and we could not retrieve your transactions from Clover";
 
                             merchant.password = undefined;

views/dashboardPage/components/addIngredients.ejs

@@ -8,5 +8,33 @@
     
     <h1>Add New Ingredients</h1>
 
-    <input type="text">
+    <div id="addIngredientList"></div>
+
+    <template id="addIngredientsCategory">
+        <div class="addIngredientsCategory">
+            <div class="categoryHeader">
+                <h5></h5>
+                
+                <button>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="18 15 12 9 6 15"></polyline>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="addIngredientsIngredients"></div>
+        </div>
+    </template>
+
+    <template id="addIngredientsIngredient">
+        <div class="addIngredientsIngredient">
+            <input type="checkbox">
+            <p></p>
+            <input type="number" min="0" step="0.01">
+        </div>
+    </template>
 </div>

views/dashboardPage/components/components.css

@@ -183,7 +183,7 @@
         visibility: hidden;
     }
 
-.sidebar button:first-of-type{
+.sidebarIconButton{
     background: none;
     border: none;
     cursor: pointer;
@@ -192,7 +192,7 @@
     margin-right: auto;
 }
 
-    .sidebar button:first-of-type:hover{
+    .sidebarIconButton:hover{
         background: rgb(0, 27, 45);
         color: white;
     }
@@ -203,11 +203,25 @@
     margin: 25px;
 }
 
+/* Add Ingredients */
 #addIngredients{
     flex-direction: column;
     width: 100%;
 }
 
+    #addIngredientList{
+        overflow-y: auto;
+    }
+
+    .addIngredient{
+        display: flex;
+        justify-content: space-between;
+        padding: 10px;
+        background: rgb(240, 252, 255);
+        border: 1px solid black;
+        border-radius: 5px;
+    }
+
 #ingredientDetails{
     flex-direction: column;
     align-items: center;
@@ -233,6 +247,54 @@
         padding: 10px;
     }
 
+    .addIngredientsCategory{
+        width: 90%;
+    }
+
+        .categoryHeader{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            border: 1px solid black;
+            background: rgb(240, 252, 255);
+            border-radius: 5px;
+            padding: 5px;
+        }
+
+            .categoryHeader > button{
+                display: flex;
+                align-items: center;
+                background: none;
+                border: none;
+                padding: 5px;
+                border-radius: 5px;
+                cursor: pointer;
+            }
+
+            .categoryHeader > button:hover{
+                background: rgb(0, 27, 45);
+                color: white;
+            }
+
+        .addIngredientsIngredients{
+            flex-direction: column;
+            padding: 0 20px;
+        }
+
+        .addIngredientsIngredient{
+            display: flex;
+            justify-content: left;
+            align-items: center;
+            margin: 5px;
+        }
+
+        .addIngredientsIngredient input[type=number]{
+            width: 100px;
+            margin-left: auto;
+        }
+
+/* Recipe Details */
 #recipeDetails{
     flex-direction: column;
     align-items: center;

views/dashboardPage/ingredients.js

@@ -62,19 +62,60 @@ window.ingredientsStrandObj = {
     //Open or close the list of ingredients for a category
     toggleCategory: function(div, button){
         if(div.style.display === "none"){
-            button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
+            button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';
             div.style.display = "flex";
         }else if(div.style.display === "flex"){
-            button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+            button.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
             div.style.display = "none";
         }
     },
 
     displayAddIngredients: function(){
         let sidebar = document.querySelector("#addIngredients");
+        let addIngredientsDiv = document.getElementById("addIngredientList");
+        let categoryTemplate = document.getElementById("addIngredientsCategory");
+        let ingredientTemplate = document.getElementById("addIngredientsIngredient");
+
+        let categories = categorizeIngredients();
+        console.log(categories);
+
+        for(let i = 0; i < categories.length; i++){
+            let categoryDiv = categoryTemplate.content.children[0].cloneNode(true);
+            categoryDiv.children[0].children[0].innerText = categories[i].name;
+            categoryDiv.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(categoryDiv)};
+            categoryDiv.children[1].style.display = "none";
+            categoryDiv.children[0].children[1].children[1].style.display = "none";
+
+            addIngredientsDiv.appendChild(categoryDiv);
+            
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let ingredientDiv = ingredientTemplate.content.children[0].cloneNode(true);
+                ingredientDiv.children[1].innerText = categories[i].ingredients[j].name;
+
+                categoryDiv.children[1].appendChild(ingredientDiv);
+            }
+        }
+
         openSidebar(sidebar);
     },
 
+    toggleAddIngredient: function(categoryElement){
+        let button = categoryElement.children[0].children[1];
+        let ingredientDisplay = categoryElement.children[1];
+
+        if(ingredientDisplay.style.display === "none"){
+            ingredientDisplay.style.display = "flex";
+
+            button.children[0].style.display = "none";
+            button.children[1].style.display = "block";
+        }else{
+            ingredientDisplay.style.display = "none";
+
+            button.children[0].style.display = "block";
+            button.children[1].style.display = "none";
+        }
+    },
+
     displayIngredient: function(ingredient, category){
         sidebar = document.querySelector("#ingredientDetails");
         openSidebar(sidebar);