Add new validation for ingredients

views/dashboardPage/components/addIngredients.ejs

@@ -14,6 +14,8 @@
 
     <button class="button addIngredientsBtn" onclick="addIngredientsComp.submitAddIngredients()">Add</button>
 
+    <button class="button addIngredientsBtn" onclick="newIngredientComp.display()">Create New</button>
+
     <template id="addIngredientsCategory">
         <div class="addIngredientsCategory">
             <div class="categoryHeader">

views/dashboardPage/components/components.css

@@ -414,4 +414,25 @@
         flex-direction: column;
         align-items: center;
         width: 100%;
-    }
+    }
+
+/* New Ingredient */
+#newIngredient{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+    #newIngredient label{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        background: rgb(240, 252, 255);
+        border-radius: 5px;
+        border: 1px solid black;
+        padding: 10px;
+    }
+
+    

views/dashboardPage/components/components.js

@@ -248,5 +248,31 @@ let newOrderComp = {
                     banner.createError("Something went wrong.  Try refreshing the page");
                 });
         }
+    },
+}
+
+let newIngredientComp = {
+    display: function(){
+        openSidebar(document.querySelector("#newIngredient"));
+
+        document.querySelector("#newIngName").value = "";
+        document.querySelector("#newIngCategory").value = "";
+        document.querySelector("#newIngQuantity").value = 0;
+        document.querySelector("#newIngUnit").value = ""
+    },
+
+    submit: function(){
+        let newIngredient = {
+            ingredient: {
+                name: document.querySelector("#newIngName").value,
+                category: document.querySelector("#newIngCategory").value,
+                unit: document.querySelector("#newIngUnit").value
+            },
+            quantity: document.querySelector("#newIngQuantity").value
+        }
+
+        if(validator.ingredient(newIngredient)){
+            console.log("all good");
+        }
     }
 }

views/dashboardPage/components/newIngredient.ejs

@@ -0,0 +1,30 @@
+<div id="newIngredient">
+    <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 Ingredient</h1>
+
+    <label>Name:
+        <input id="newIngName" type="text">
+    </label>
+
+    <label>Category:
+        <input id="newIngCategory" type="text">
+    </label>
+
+    <label>Quantity:
+        <input id="newIngQuantity" type="number" min="0" step="0.01">
+    </label>
+
+    <label>Unit:
+        <input id="newIngUnit" type="text">
+    </label>
+
+    <button class="button" onclick="newIngredientComp.submit()">Create</button>
+</div>

views/dashboardPage/dashboard.ejs

@@ -110,6 +110,8 @@
         <div id="sidebarDiv" class="sidebarHide">
             <% include ./components/addIngredients %>
 
+            <% include ./components/newIngredient %>
+
             <% include ./components/ingredientDetails %>
 
             <% include ./components/recipeDetails %>

views/shared/validation.js

@@ -1,95 +1,134 @@
 let validator = {
-    ingredient: {
-        name: function(ingName, createBanner = true){
-            //Check for special chars
-            if(!validator.isSanitary(ingName)){
-                if(createBanner){
-                    banner.createError("Your inputs contain illegal characters");
-                }
-                return false;
-            }
-
-            //Check for length
-            if(ingName.length < 2){
-                if(createBanner){
-                    banner.createError("Ingredient name must contain at least 2 characters");
-                }
-                return false;
-            }
-
-            return true;
-        },
-
-        category: function(ingCategory, createBanner = true){
-            //Check for special chars
-            if(!validator.isSanitary(ingCategory)){
-                if(createBanner){
-                    banner.createError("Your inputs contain illegal characters");
-                }
-
-                return false;
-            }
-
-            //Check for length
-            if(ingCategory.length < 3){
-                if(createBanner){
-                    banner.createError("Category name must contain at least 3 characters");
-                }
-                return false;
-            }
-
-            return true;
+    /*
+    ingredient = {
+        ingredient: {
+            name: name of ingredient,
+            category: category of ingredient,
+            unit: unit measure for ingredient
         },
+        quantity: quantity of ingredient for current merchant
+    }
+    */
+    ingredient: function(ingredient, createBanner = true){
+        let errors = [];
+        if(!this.isSanitary(ingredient.ingredient.name) ||
+        !this.isSanitary(ingredient.ingredient.category) ||
+        !this.isSanitary(ingredient.ingredient.unit)){
+            errors.push("Contains illegal characters");
+        }
 
-        quantity: function(num, createBanner = true){
-            if(isNaN(num) || num === ""){
-                if(createBanner){
-                    banner.createError("Must enter a valid number");
-                }
-
-                return false;
-            }
-
-            if(num < 0){
-                if(createBanner){
-                    banner.createError("Quantity cannot be a negative number");
-                }
-
-                return false;
-            }
+        if(isNaN(ingredient.quantity) || ingredient.quantity === ""){
+            errors.push("Must enter a valid number");
+        }
 
-            return true;
-        },
+        if(ingredient.quantity < 0){
+            banner.createError("Quantity cannot be a negative number");
+        }
 
-        unit: function(ingUnit, createBanner = true){
-            //Check for special chars
-            if(!validator.isSanitary(ingUnit)){
-                if(createBanner){
-                    banner.createError("Your inputs contain illegal characters");
+        if(errors.length > 0){
+            if(createBanner){
+                for(let i = 0; i < errors.length; i++){
+                    banner.createError(errors[i]);
                 }
-
-                return false;
             }
 
-            return true;
-        },
-
-        //Check all parts of ingredient, return true if all pass
-        //Quantity passed seperately and optional
-        all: function(ingObject, quantity = 0, createBanner = true){
-            let nameCheck = this.name(ingObject.name, createBanner);
-            let categoryCheck = this.category(ingObject.category, createBanner);
-            let unitCheck = this.unit(ingObject.unit, createBanner);
-            let quantityCheck = this.quantity(quantity, createBanner);
-
-            if(!nameCheck || !categoryCheck || !quantityCheck || !unitCheck){
-                return false;
-            }
-
-            return true;
+            return false;
         }
+
+        return true;
     },
 
+    // ingredient: {
+    //     name: function(ingName, createBanner = true){
+    //         //Check for special chars
+    //         if(!validator.isSanitary(ingName)){
+    //             if(createBanner){
+    //                 banner.createError("Your inputs contain illegal characters");
+    //             }
+    //             return false;
+    //         }
+
+    //         //Check for length
+    //         if(ingName.length < 2){
+    //             if(createBanner){
+    //                 banner.createError("Ingredient name must contain at least 2 characters");
+    //             }
+    //             return false;
+    //         }
+
+    //         return true;
+    //     },
+
+    //     category: function(ingCategory, createBanner = true){
+    //         //Check for special chars
+    //         if(!validator.isSanitary(ingCategory)){
+    //             if(createBanner){
+    //                 banner.createError("Your inputs contain illegal characters");
+    //             }
+
+    //             return false;
+    //         }
+
+    //         //Check for length
+    //         if(ingCategory.length < 3){
+    //             if(createBanner){
+    //                 banner.createError("Category name must contain at least 3 characters");
+    //             }
+    //             return false;
+    //         }
+
+    //         return true;
+    //     },
+
+    //     quantity: function(num, createBanner = true){
+    //         if(isNaN(num) || num === ""){
+    //             if(createBanner){
+    //                 banner.createError("Must enter a valid number");
+    //             }
+
+    //             return false;
+    //         }
+
+    //         if(num < 0){
+    //             if(createBanner){
+    //                 banner.createError("Quantity cannot be a negative number");
+    //             }
+
+    //             return false;
+    //         }
+
+    //         return true;
+    //     },
+
+    //     unit: function(ingUnit, createBanner = true){
+    //         //Check for special chars
+    //         if(!validator.isSanitary(ingUnit)){
+    //             if(createBanner){
+    //                 banner.createError("Your inputs contain illegal characters");
+    //             }
+
+    //             return false;
+    //         }
+
+    //         return true;
+    //     },
+
+    //     //Check all parts of ingredient, return true if all pass
+    //     //Quantity passed seperately and optional
+    //     all: function(ingObject, quantity = 0, createBanner = true){
+    //         let nameCheck = this.name(ingObject.name, createBanner);
+    //         let categoryCheck = this.category(ingObject.category, createBanner);
+    //         let unitCheck = this.unit(ingObject.unit, createBanner);
+    //         let quantityCheck = this.quantity(quantity, createBanner);
+
+    //         if(!nameCheck || !categoryCheck || !quantityCheck || !unitCheck){
+    //             return false;
+    //         }
+
+    //         return true;
+    //     }
+    // },
+
     merchant: {
         password: function(pass, confirmPass, createBanner = true){
             if(pass !== confirmPass){