Refactor modal.js to keep it DRY and easier to work with.

views/dashboardPage/js/modal.js

@@ -183,9 +183,7 @@ let modal = {
             }
         }
 
-        let addIngredient = (button, newIngredient)=>{
-            button.parentElement.removeChild(button);
-
+        let addIngredient = (newIngredient)=>{
             let div = template.cloneNode(true);
             div.children[0].children[0].innerText = newIngredient.name;
             div.children[0].children[1].onclick = ()=>{removeIngredient(div, newIngredient)};
@@ -195,13 +193,16 @@ let modal = {
             right.appendChild(div);
 
             if(newIngredient.convert.toMass > 0){
-                createOptGroup(div.children[1].children[0].children[1], "Mass", ["g", "kg", "oz", "lb"])
+                createOptGroup(div.children[1].children[0].children[1], "MASS", ["g", "kg", "oz", "lb"])
             }
             if(newIngredient.convert.toVolume > 0){
-                createOptGroup(div.children[1].children[0].children[1], "Volume", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
+                createOptGroup(div.children[1].children[0].children[1], "VOLUME", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
             }
             if(newIngredient.convert.toLength > 0){
-                createOptGroup(div.children[1].children[0].children[1], "Length", ["mm", "cm", "m", "in", "ft"]);
+                createOptGroup(div.children[1].children[0].children[1], "LENGTH", ["mm", "cm", "m", "in", "ft"]);
+            }
+            if(newIngredient.unit === "each"){
+                createOptGroup(div.children[1].children[0].children[1], "OTHER", ["each"]);
             }
             div.children[1].children[0].children[1].value = newIngredient.unit;
 
@@ -221,55 +222,23 @@ let modal = {
             let button = document.createElement("button");
             button.innerText = newIngredient.name;
             button.classList.add("choosable");
-            button.onclick = ()=>{addIngredient(button, newIngredient)};
+            button.onclick = ()=>{addIngredient(newIngredient)};
             left.appendChild(button);
         }
 
         for(let i = 0; i < merchant.inventory.length; i++){
-            let merchIngredient = merchant.inventory[i].ingredient;
-            if(ingredient.id === merchIngredient.id) continue;
-            let skip = false;
-            for(let j = 0; j < ingredient.subIngredients.length; j++){
-                if(merchIngredient === ingredient.subIngredients[j].ingredient){
-                    let div = template.cloneNode(true);
-                    div.children[0].children[0].innerText = merchIngredient.name;
-                    div.children[0].children[1].onclick = ()=>{removeIngredient(div, ingredient.subIngredients[j].ingredient)};
-                    div.children[1].children[0].children[0].value = parseFloat((ingredient.subIngredients[j].quantity).toFixed(3));
-                    div.children[1].children[2].children[0].value = controller.unitMultiplier(controller.getBaseUnit(ingredient.unit), ingredient.unit);
-                    div.ingredient = merchIngredient;
-                    right.appendChild(div);
-
-                    let conversions = merchIngredient.convert;
-                    if(conversions.toMass !== undefined){
-                        createOptGroup(div.children[1].children[0].children[1], "Mass", ["g", "kg", "oz", "lb"]);
-                    }
-                    if(conversions.toVolume !== undefined){
-                        createOptGroup(div.children[1].children[0].children[1], "Volume", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
-                    }
-                    if(conversions.toLength !== undefined){
-                        createOptGroup(div.children[1].children[0].children[1], "Length", ["mm", "cm", "m", "in", "ft"]);
-                    }
-                    div.children[1].children[0].children[1].value = merchIngredient.unit;
-
-                    createOptGroup(
-                        div.children[1].children[2].children[1],
-                        controller.getUnitType(ingredient.unit),
-                        ingredient.getPotentialUnits()
-                    );
-                    div.children[1].children[0].children[1].value = ingredient.subIngredients[j].unit;
-                    div.children[1].children[2].children[1].value = ingredient.unit;
-
-                    skip = true;
-                    break;
-                }
+            let baseIngredient = merchant.inventory[i].ingredient;
+            if(ingredient.subIngredients.find(j => j.ingredient.id === baseIngredient.id) === undefined){
+                let button = document.createElement("button");
+                button.innerText = baseIngredient.name;
+                button.classList.add("choosable");
+                button.onclick = ()=>{
+                    button.parentElement.removeChild(button);
+                    addIngredient(baseIngredient)};
+                left.appendChild(button);
+            }else{
+                addIngredient(baseIngredient);
             }
-            if(skip === true) continue;
-
-            let button = document.createElement("button");
-            button.innerText = merchant.inventory[i].ingredient.name;
-            button.classList.add("choosable");
-            button.onclick = ()=>{addIngredient(button, merchant.inventory[i].ingredient)};
-            left.appendChild(button);
         }
 
         //SUBMIT SUB INGREDIENTS