Add displaying of ingredients for new orders

views/dashboardPage/components/components.css

@@ -399,4 +399,16 @@
 
     #recipeUpdate{
         margin: 25px 0 0 0;
+    }
+
+/* New Order */
+#newOrder{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #newOrderCategories{
+        width: 100%;
     }

views/dashboardPage/components/components.js

@@ -149,4 +149,39 @@ let recipeDetailsComp = {
             }
         }
     }
+}
+
+let newOrderComp = {
+    display: function(){
+        openSidebar(document.querySelector("#newOrder"));
+
+        console.log(merchant.inventory);
+        let categories = categorizeIngredients(merchant.inventory);
+        let categoriesList = document.querySelector("#newOrderCategories");
+        let template = document.querySelector("#addIngredientsCategory").content.children[0];
+        let ingredientTemplate = document.querySelector("#addIngredientsIngredient").content.children[0];
+
+        for(let i = 0; i < categories.length; i++){
+            let category = template.cloneNode(true);
+
+            category.children[0].children[0].innerText = categories[i].name;
+            category.children[0].children[1].onclick = ()=>{addIngredientsComp.toggleAddIngredient(category)};
+            category.children[0].children[1].children[1].style.display = "none";
+            category.children[1].style.display = "none";
+            
+            categoriesList.appendChild(category);
+
+            for(let j = 0; j < categories[i].ingredients.length; j++){
+                let ingredientDiv = ingredientTemplate.cloneNode(true);
+
+                ingredientDiv.children[1].innerText = categories[i].ingredients[j].name;
+                ingredientDiv._id = categories[i].ingredients[j].id;
+                ingredientDiv._name = categories[i].ingredients[j].name;
+                ingredientDiv._unit = categories[i].ingredients[j].unit;
+                ingredientDiv._category = categories[i].name;
+
+                category.children[1].appendChild(ingredientDiv);
+            }
+        }
+    }
 }

views/dashboardPage/components/newOrder.ejs

@@ -0,0 +1,14 @@
+<div id="newOrder">
+    <div class="sidebarIconButtons">
+        <button class="iconButton" onclick="closeSidebar()">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+        </button>
+    </div>
+
+    <h1>New Order</h1>
+
+    <div id=newOrderCategories></div>
+</div>

views/dashboardPage/dashboard.css

@@ -31,6 +31,13 @@ body{
     padding: 0;
 }
 
+.strandHead{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+}
+
 /* Cards */
 .card{
     margin: 0 15px;
@@ -165,14 +172,6 @@ body{
     margin-bottom: 100px;
 }
 
-#ingredientHead{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 50px;
-    width: 100%;
-}
-
 #ingredientHead button{
     display: flex;
     align-items: center;
@@ -186,6 +185,7 @@ body{
     align-items:center;
     overflow-y: auto;
     width: 80%;
+    margin-top: 50px;
 }
 
 .categoryDiv > div:first-of-type{

views/dashboardPage/dashboard.ejs

@@ -54,7 +54,7 @@
             </div>
 
             <div id="ingredientsStrand" class="strand">
-                <div id="ingredientHead">
+                <div class="strandHead">
                     <h1 class="strandTitle">Ingredient Inventory</h1>
 
                     <button class="button" onclick="addIngredientsComp.display()">
@@ -67,7 +67,7 @@
             </div>
 
             <div id="recipeBookStrand" class="strand">
-                <div id="recipeHead">
+                <div class="strandHead">
                     <h1 class="strandTitle">Recipe Book</h1>
 
                     <% if(merchant.pos === "none"){ %>
@@ -82,7 +82,14 @@
             </div>
 
             <div id="ordersStrand" class="strand">
-                <h1 class="strandTitle">Orders</h1>
+                <div class="strandHead">
+                    <h1 class="strandTitle">Orders</h1>
+
+                    <button class="button" onclick="newOrderComp.display()">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        add
+                    </button>
+                </div>
 
                 <table id="orderList">
                     <thead>
@@ -115,6 +122,8 @@
             <% include ./components/recipeDetails %>
 
             <% include ./components/addRecipe %>
+
+            <% include ./components/newOrder %>
         </div>
 
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>