Display modal for unmatching unit types when creating a new recipe.

views/dashboardPage/css/modal.css

@@ -178,4 +178,35 @@
 
     #modalCircularReference div > *{
         margin: 10px;
-    }
+    }
+
+    #modalUnitConversion{
+        flex-direction: column;
+        background: white;
+        align-items: center;
+        padding: 25px;
+        max-height: 90%;
+        overflow-y: auto;
+    }
+
+        #unitConversions{
+            width: 100%;
+        }
+
+        .convertUnitOption{
+            display: flex;
+            justify-content: space-between;
+            /* background: rgb(0, 27, 45); */
+            margin: 10px;
+            height: 35px;
+        }
+
+            .convertUnitOption div{
+                display: flex;
+                align-items: center;
+                width: 33%;
+            }
+
+            .convertUnitOption input{
+                max-width: 75%;
+            }

views/dashboardPage/ejs/modal.ejs

@@ -90,13 +90,39 @@
                 </template>
             </div>
 
-            <div id="modalCircularReference" style="display:none";>
+            <div id="modalCircularReference" style="display:none">
                 <h2></h2>
 
                 <div></div>
 
                 <button id="circularReferenceButton" class="button">OK</button>
             </div>
+
+            <div id="modalUnitConversion" style="display:none">
+                <h2>Some of your ingredients' units do not match</h2>
+
+                <h3>Please enter conversion rates for the following ingredients in this recipe</h3>
+
+                <div id="unitConversions"></div>
+
+                <template id="convertUnitOption">
+                    <div class="convertUnitOption">
+                        <div>
+                            <input type="number" step="0.01">
+
+                            <h2></h2>
+                        </div>
+
+                        <h1>=</h1>
+
+                        <div>
+                            <input type="number" step="0.01">
+
+                            <h2></h2>
+                        </div>
+                    </div>
+                </template>
+            </div>
         </div>
     </div>
 </div>

views/dashboardPage/js/classes/Ingredient.js

@@ -113,6 +113,10 @@ class Ingredient{
         return `${this._name} (${this._unit.toUpperCase()})`;
     }
 
+    /*
+    Show matching unit types for this ingredient
+    return = [String]
+    */
     getPotentialUnits(){
         let mass = ["g", "kg", "oz", "lb"];
         let volume = ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"];

views/dashboardPage/js/dashboard.js

@@ -274,6 +274,9 @@ controller = {
             case "circularReference":
                 modalScript.circularReference(data);
                 break;
+            case "alternateUnitConversion":
+                modalScript.alternateUnit(data);
+                break;
         }
     },
 

views/dashboardPage/js/modal.js

@@ -285,6 +285,25 @@ let modal = {
         }
 
         document.getElementById("circularReferenceButton").onclick = ()=>{controller.closeModal()};
+    },
+
+    alternateUnit: function(data){
+        document.getElementById("modalUnitConversion").style.display = "flex";
+        let container = document.getElementById("unitConversions");
+        let template = document.getElementById("convertUnitOption").content.children[0];
+
+        while(container.children.length > 0){
+            container.removeChild(container.firstChild);
+        }
+
+        for(let i = 0; i < data.length; i++){
+            let conversion = template.cloneNode(true);
+            conversion.children[0].children[0].value = 0;
+            conversion.children[0].children[1].innerText = data[i].newIngredient.unit.toUpperCase();
+            conversion.children[2].children[0].value = 1;
+            conversion.children[2].children[1].innerText = data[i].ingredient.unit.toUpperCase();
+            container.appendChild(conversion);
+        }
     }
 };
 

views/dashboardPage/js/sidebars/newRecipe.js

@@ -4,7 +4,7 @@ let newRecipe = {
     display: function(){
         document.getElementById("sidebarDiv").classList.add("sidebarWide");
 
-        document.getElementById("submitNewRecipe").onclick = ()=>{this.submit()};
+        document.getElementById("submitNewRecipe").onclick = ()=>{this.gatherData()};
         document.getElementById("recipeFileUpload").onclick = ()=>{controller.openModal("recipeSpreadsheet")};
         document.getElementById("newRecipeSearch").onkeyup = ()=>{this.populateChoices()};
 
@@ -53,24 +53,37 @@ let newRecipe = {
         document.getElementById("newRecipeChosenList").appendChild(element);
     },
 
-    submit: function(){
+    gatherData: function(){
         let data = {
             name: document.getElementById("newRecipeName").value,
             category: document.getElementById("newRecipeCategory").value,
             price: parseInt(document.getElementById("newRecipePrice").value * 100),
             ingredients: []
         };
-
+    
+        let mismatchUnits = [];
         let ingredients = document.getElementById("newRecipeChosenList").children;
         for(let i = 0; i < ingredients.length; i++){
             let ingredient = ingredients[i].ingredient;
-
-            data.ingredients.push({
+            let newIngredient = {
                 ingredient: ingredient.id,
-                quantity: controller.baseUnit(ingredients[i].children[1].children[0].value, ingredient.unit)
-            });
+                quantity: ingredients[i].children[1].children[0].value,
+                unit: ingredients[i].children[1].children[1].value
+            }
+    
+            if(ingredient.getPotentialUnits().includes(newIngredient.unit) === false) mismatchUnits.push({ingredient: ingredient, newIngredient: newIngredient});
+    
+            data.ingredients.push(newIngredient);
         }
 
+        if(mismatchUnits.length === 0){
+            this.submit(data);
+            return;
+        }
+        controller.openModal("alternateUnitConversion", mismatchUnits);
+    },
+
+    submit: function(data){
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";