Преглед на файлове

Sub-ingredient modal now displays unit comparison for main ingredient.

Lee Morgan преди 5 години
родител
ревизия
81d43b3ecd
променени са 4 файла, в които са добавени 67 реда и са изтрити 57 реда
  1. 11 34
      views/dashboardPage/css/modal.css
  2. 1 1
      views/dashboardPage/dashboard.ejs
  3. 13 3
      views/dashboardPage/ejs/modal.ejs
  4. 42 19
      views/dashboardPage/js/modal.js

+ 11 - 34
views/dashboardPage/css/modal.css

@@ -135,7 +135,7 @@
         flex-direction: column;
         align-items: center;
         background: white;
-        min-width: 500px;
+        width: 75vw;
         max-height: 100%;
     }
 
@@ -167,6 +167,15 @@
                     width: 100%;
                 }
 
+        #editSubcurrentIng input{
+            max-width: 75px;
+        }
+
+        .editSubRightRight {
+            display: flex;
+            justify-content: flex-end;
+        }
+
     #modalCircularReference{
         flex-direction: column;
         background: white;
@@ -178,36 +187,4 @@
 
     #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;
-            flex-direction: column;
-            margin: 10px 0;
-            border-bottom: 3px solid rgb(255, 99, 107);
-        }
-
-            .convertInputBox{
-                margin: 0 10px;
-            }
-
-            .convertInputBox > input{
-                max-width: 150px;
-            }
-
-            .convertUnitOption > div{
-                display: flex;
-            }
+    }

+ 1 - 1
views/dashboardPage/dashboard.ejs

@@ -7,7 +7,7 @@
         <link rel="icon" type="img/png" href="/shared/images/logo.png">
         <link rel="stylesheet" href="/dashboardPage/bundle.css">
         <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet"> 
-        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+        <!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
     </head>
     <body>
         <% include ./ejs/menu.ejs %>

+ 13 - 3
views/dashboardPage/ejs/modal.ejs

@@ -86,9 +86,19 @@
                         </div>
                         
                         <div>
-                            <input type="number" min="0" step="0.01" placeholder="QUANTITY">
-
-                            <select></select>
+                            <div>
+                                <input type="number" min="0" step="0.01">
+    
+                                <select></select>
+                            </div>
+
+                            <p>PER</p>
+                            
+                            <div class="editSubRightRight">
+                                <input type="number" min="0" step="0.01">
+    
+                                <select></select>
+                            </div>
                         </div>
                     </div>
                 </template>

+ 42 - 19
views/dashboardPage/js/modal.js

@@ -1,7 +1,5 @@
 const Merchant = require("./classes/Merchant.js");
 
-const newRecipe = require("./sidebars/newRecipe.js");
-
 let modal = {
     feedback: function(){
         let form = document.getElementById("modalFeedback");
@@ -185,35 +183,47 @@ let modal = {
             }
         }
 
-        let addIngredient = (button, ingredient)=>{
+        let addIngredient = (button, newIngredient)=>{
             button.parentElement.removeChild(button);
 
             let div = template.cloneNode(true);
-            div.children[0].children[0].innerText = ingredient.name;
-            div.children[0].children[1].onclick = ()=>{removeIngredient(div, ingredient)};
-            div.children[1].children[0].value = 0;
-            div.ingredient = ingredient;
+            div.children[0].children[0].innerText = newIngredient.name;
+            div.children[0].children[1].onclick = ()=>{removeIngredient(div, newIngredient)};
+            div.children[1].children[0].children[0].value = 1;
+            div.children[1].children[2].children[0].value = 1;
+            div.ingredient = newIngredient;
             right.appendChild(div);
 
+            if(newIngredient.convert.toMass !== undefined){
+                createOptGroup(div.children[1].children[0].children[1], "Mass", ["g", "kg", "oz", "lb"])
+            }
+            if(newIngredient.convert.toVolume !== undefined){
+                createOptGroup(div.children[1].children[0].children[1], "Volume", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
+            }
+            if(newIngredient.convert.toLength !== undefined){
+                createOptGroup(div.children[1].children[0].children[1], "Length", ["mm", "cm", "m", "in", "ft"]);
+            }
+            div.children[1].children[0].children[1].value = newIngredient.unit;
+
             if(ingredient.convert.toMass !== undefined){
-                createOptGroup(div.children[1].children[1], "Mass", ["g", "kg", "oz", "lb"])
+                createOptGroup(div.children[1].children[2].children[1], "Mass", ["g", "kg", "oz", "lb"])
             }
             if(ingredient.convert.toVolume !== undefined){
-                createOptGroup(div.children[1].children[1], "Volume", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
+                createOptGroup(div.children[1].children[2].children[1], "Volume", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
             }
             if(ingredient.convert.toLength !== undefined){
-                createOptGroup(div.children[1].children[1], "Length", ["mm", "cm", "m", "in", "ft"]);
+                createOptGroup(div.children[1].children[2].children[1], "Length", ["mm", "cm", "m", "in", "ft"]);
             }
-            div.children[1].children[1].value = ingredient.unit;
+            div.children[1].children[2].children[1].value = ingredient.unit;
         }
 
-        let removeIngredient = (div, ingredient)=>{
+        let removeIngredient = (div, newIngredient)=>{
             div.parentElement.removeChild(div);
 
             let button = document.createElement("button");
-            button.innerText = ingredient.name;
+            button.innerText = newIngredient.name;
             button.classList.add("choosable");
-            button.onclick = ()=>{addIngredient(button, ingredient)};
+            button.onclick = ()=>{addIngredient(button, newIngredient)};
             left.appendChild(button);
         }
 
@@ -225,21 +235,34 @@ let modal = {
                     let div = template.cloneNode(true);
                     div.children[0].children[0].innerText = merchant.inventory[i].ingredient.name;
                     div.children[0].children[1].onclick = ()=>{removeIngredient(div, ingredient.subIngredients[j].ingredient)};
-                    div.children[1].children[0].value = ingredient.subIngredients[j].quantity;
+                    div.children[1].children[0].children[0].value = ingredient.subIngredients[j].quantity;
+                    div.children[1].children[2].children[0].value = 1;
                     div.ingredient = merchant.inventory[i].ingredient;
                     right.appendChild(div);
 
                     let conversions = merchant.inventory[i].ingredient.convert;
                     if(conversions.toMass !== undefined){
-                        createOptGroup(div.children[1].children[1], "Mass", ["g", "kg", "oz", "lb"]);
+                        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 = merchant.inventory[i].ingredient.unit;
+
+                    conversions = ingredient.convert;
+                    if(conversions.toMass !== undefined){
+                        createOptGroup(div.children[1].children[2].children[1], "Mass", ["g", "kg", "oz", "lb"]);
                     }
                     if(conversions.toVolume !== undefined){
-                        createOptGroup(div.children[1].children[1], "Volume", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
+                        createOptGroup(div.children[1].children[2].children[1], "Volume", ["ml", "l", "tsp", "tbsp", "ozfl", "cup", "pt", "qt", "gal"]);
                     }
                     if(conversions.toLength !== undefined){
-                        createOptGroup(div.children[1].children[1], "Length", ["mm", "cm", "m", "in", "ft"]);
+                        createOptGroup(div.children[1].children[2].children[1], "Length", ["mm", "cm", "m", "in", "ft"]);
                     }
-                    div.children[1].children[1].value = merchant.inventory[i].ingredient.unit;
+                    div.children[1].children[2].children[1].value = merchant.inventory[i].ingredient.unit;
 
                     skip = true;
                     break;