Add submitting of new sub ingredients.

Does not yet save to the backend.

views/dashboardPage/ejs/modal.ejs

@@ -66,17 +66,21 @@
                     <div id="editSubCurrentIng"></div>
                 </div>
 
-                <button id="submitEditSubIngredients" class="button">CONFIRM</button>
+                <div class="buttonBox">
+                    <button id="cancelEditSubIngredients" class="dangerButton">CANCEL</button>
+
+                    <button id="submitEditSubIngredients" class="button">CONFIRM</button>
+                </div>
 
                 <template id="selectedSubIngredient">
                     <div class="selectedIngredient">
+                        <p></p>
+                        
                         <div>
-                            <p></p>
-            
+                            <input type="number" min="0" step="0.01" placeholder="QUANTITY">
+
                             <button class="newOrderRemove">REMOVE</button>
                         </div>
-                        
-                        <input type="number" min="0" step="0.01" placeholder="QUANTITY">
                     </div>
                 </template>
             </div>

views/dashboardPage/js/classes/Ingredient.js

@@ -88,13 +88,19 @@ class Ingredient{
 
     addIngredients(ingredients){
         for(let i = 0; i < ingredients.length; i++){
-            this.subIngredients.push({
+            this._subIngredients.push({
                 ingredient: this._parent.getIngredient(ingredients[i].ingredient).ingredient,
                 quantity: ingredients[i].quantity
             });
         }
     }
 
+    replaceIngredients(ingredients){
+        this._subIngredients = [];
+
+        this.addIngredients(ingredients);
+    }
+
     getBaseUnitSize(){
         return this._unitSize;
     }

views/dashboardPage/js/modal.js

@@ -154,6 +154,8 @@ let modal = {
     editSubIngredients: function(ingredient){
         document.getElementById("modalEditSubIngredients").style.display = "flex";
 
+        document.getElementById("cancelEditSubIngredients").onclick = ()=>{controller.closeModal()};
+
         let left = document.getElementById("editSubAllIng");
         let right = document.getElementById("editSubCurrentIng");
         let template = document.getElementById("selectedSubIngredient").content.children[0];
@@ -174,13 +176,36 @@ let modal = {
         rightHeader.innerText = "SUB INGREDIENTS";
         right.appendChild(rightHeader);
 
+        let addIngredient = (button, ingredient)=>{
+            button.parentElement.removeChild(button);
+
+            let div = template.cloneNode(true);
+            div.children[0].innerText = ingredient.name;
+            div.children[1].children[0].value = 0;
+            div.children[1].children[1].onclick = ()=>{removeIngredient(div, ingredient)};
+            div.ingredient = ingredient;
+            right.appendChild(div);
+        }
+
+        let removeIngredient = (div, ingredient)=>{
+            div.parentElement.removeChild(div);
+
+            let button = document.createElement("button");
+            button.innerText = ingredient.name;
+            button.classList.add("choosable");
+            button.onclick = ()=>{addIngredient(button, ingredient)};
+            left.appendChild(button);
+        }
+
         for(let i = 0; i < merchant.ingredients.length; i++){
             let skip = false;
             for(let j = 0; j < ingredient.subIngredients.length; j++){
                 if(merchant.ingredients[i].ingredient === ingredient.subIngredients[j].ingredient){
                     let div = template.cloneNode(true);
-                    div.children[0].children[0].innerText = merchant.ingredients[i].ingredient.name;
-                    div.children[1].value = ingredient.subIngredients[j].quantity;
+                    div.children[0].innerText = merchant.ingredients[i].ingredient.name;
+                    div.children[1].children[0].value = ingredient.subIngredients[j].quantity;
+                    div.children[1].children[1].onclick = ()=>{removeIngredient(div, ingredient.subIngredients[j].ingredient)};
+                    div.ingredient = merchant.ingredients[i].ingredient;
                     right.appendChild(div);
                     skip = true;
                     break;
@@ -191,8 +216,21 @@ let modal = {
             let button = document.createElement("button");
             button.innerText = merchant.ingredients[i].ingredient.name;
             button.classList.add("choosable");
+            button.onclick = ()=>{addIngredient(button, merchant.ingredients[i].ingredient)};
             left.appendChild(button);
         }
+
+        //SUBMIT SUB INGREDIENTS
+        document.getElementById("submitEditSubIngredients").onclick = ()=>{
+            let subIngredients = [];
+
+            for(let i = 0; i < right.children.length; i++){
+                subIngredients.push(right.children[i].ingredient);
+            }
+
+            controller.closeModal();
+            controller.createBanner("YOUR SUB-INGREDIENTS WILL NOT BE SAVED UNTIL YOU SUBMIT CHANGES", "alert");
+        }
     }
 };