Refactor controller.js to be an object

views/merchantSetupPage/controller.js

@@ -1,19 +1,3 @@
-// let data = {}; //For storing all data from user to pass to backend
-
-// //Divs to switch out to show different pages
-// let addIngredients = document.querySelector("#addIngredients");
-// let newIngredients = document.querySelector("#newIngredients");
-// let createRecipes = document.querySelector("#createRecipes");
-
-// //General purpose  data validator
-// let checkValid = (valueToCheck, inputField)=>{
-//     if(!validator.ingredient[valueToCheck](inputField.value, createBanner = false)){
-//         inputField.classList += " input-error"
-//     }else{
-//         inputField.classList.remove("input-error");
-//     }
-// }
-
 let controller = {
     data: {},  //For storing all data from user to pass to backend
 
@@ -22,10 +6,6 @@ let controller = {
     newIngredientsComp: document.querySelector("#newIngredients"),
     createRecipesComp: document.querySelector("#createRecipes"),
 
-    run: function(){
-        
-    },
-
     //General purpose data validator
     checkValid: function(valueToCheck, inputField){
         if(!validator.ingredient[valueToCheck](inputField.value, createBanner = false)){
@@ -43,4 +23,4 @@ let controller = {
 }
 
 //Run first function
-controller.run();
+ingredientSetup.existingIngredients();

views/merchantSetupPage/ingredientSetup.js

@@ -4,7 +4,7 @@ let ingredientSetup = {
 
     //Loops through all ingredients passed from database
     //Creates a row for each ingredient and adds it to table
-    populateIngredients: function(){
+    existingIngredients: function(){
         let tBody = document.createElement("tbody");
     
         for(let ingredient of ingredients){
@@ -45,25 +45,19 @@ let ingredientSetup = {
             let oldTBody = document.querySelector("#ingredient-display tbody");
             oldTBody.parentNode.replaceChild(tBody, oldTBody);
             this.existingIngredientElements.push(row);
-
-            this.displayExistingIngredients();
         }
     },
 
-    //Display existing ingredients table
-    //Hide other tables
-    displayExistingIngredients: function(){
-        controller.addIngredients.style.display = "flex";
-        controller.newIngredients.style.display = "none";
-        controller.createRecipes.style.display = "none";
+    redisplayExistingIngredients: function(){
+        controller.clearScreen();
+        controller.addIngredientsComp.style.display = "flex";
     },
 
     //Display new ingredients table
     //Hide other tables
-    displayNewIngredients: function(){
-        addIngredients.style.display = "none";
-        newIngredients.style.display = "flex";
-        createRecipes.style.display = "none";
+    createIngredients: function(){
+        controller.clearScreen();
+        controller.newIngredientsComp.style.display = "flex";
     },
 
     //Creates a new, empty row in table to input data
@@ -74,14 +68,14 @@ let ingredientSetup = {
         let name = document.createElement("td");
         let nameInput = document.createElement("input");
         nameInput.type = "text";
-        nameInput.onblur = ()=>{checkValid("name", nameInput)};
+        nameInput.onblur = ()=>{controller.checkValid("name", nameInput)};
         name.appendChild(nameInput);
         row.appendChild(name);
     
         let category = document.createElement("td");
         let categoryInput = document.createElement("input");
         categoryInput.type = "text"
-        categoryInput.onblur = ()=>{checkValid("category", categoryInput)};
+        categoryInput.onblur = ()=>{controller.checkValid("category", categoryInput)};
         category.appendChild(categoryInput);
         row.appendChild(category);
     
@@ -89,14 +83,14 @@ let ingredientSetup = {
         let quantityInput = document.createElement("input");
         quantityInput.type = "number";
         quantityInput.step = "0.01";
-        quantityInput.onblur = ()=>{checkValid("quantity", quantityInput)};
+        quantityInput.onblur = ()=>{controller.checkValid("quantity", quantityInput)};
         quantity.appendChild(quantityInput);
         row.appendChild(quantity);
     
         let unit = document.createElement("td");
         let unitInput = document.createElement("input");
         unitInput.type = "text";
-        unitInput.onblur = ()=>{checkValid("unit", unitInput)};
+        unitInput.onblur = ()=>{controller.checkValid("unit", unitInput)};
         unit.appendChild(unitInput);
         row.appendChild(unit);
     
@@ -124,10 +118,10 @@ let ingredientSetup = {
     //refactor
     //nothin should run unless everything is valid
     createIngredientsList: function(){
-        data.ingredients = [];
+        controller.data.ingredients = [];
         for(let ingredient of this.existingIngredientElements){
             if(ingredient.children[0].children[0].checked){
-                data.ingredients.push({
+                controller.data.ingredients.push({
                     id: ingredient.id,
                     name: ingredient.children[1].textContent,
                     quantity: ingredient.children[3].children[0].value,
@@ -154,7 +148,7 @@ let ingredientSetup = {
         for(let i = 0; i < newIngredient.length; i++){
             if(!validator.ingredient.all(newIngredient[i], newIngredientQuantity[i].quantity)){
                 isValid = false;
-                data.ingredients = [];
+                controller.data.ingredients = [];
                 break;
             }
         }
@@ -175,7 +169,7 @@ let ingredientSetup = {
                             }
                         }
     
-                        data.ingredients.push(newIngredient);
+                        controller.data.ingredients.push(newIngredient);
                     }
                     banner.createNotification("All ingredients have been created and added to your inventory");
                     recipeSetup.createRecipePage();

views/merchantSetupPage/merchantSetup.ejs

@@ -30,7 +30,7 @@
                 <tbody></tbody>
             </table>
 
-            <button onclick="ingredientSetup.displayNewIngredients()">Next</button>
+            <button onclick="ingredientSetup.createIngredients()">Next</button>
         </div>
 
         <div id="newIngredients" class="container hide">
@@ -52,7 +52,7 @@
             </table>
             <button onclick="ingredientSetup.newIngredientField()">+</button>
             <button onclick="ingredientSetup.createIngredientsList()">Create Ingredients</button>
-            <button onclick="ingredientSetup.displayExistingIngredients()">Back</button>
+            <button onclick="ingredientSetup.redisplayExistingIngredients()">Back</button>
         </div>
 
         <div id="createRecipes" class="container hide">
@@ -76,15 +76,12 @@
             <button id="previous" onclick="recipeSetup.changeRecipe(-1)">Previous Recipe</button>
         </div>
 
-        <script>
-            let ingredients = <%- JSON.stringify(ingredients) %>;
-            if(locals.recipes){
-                console.log("something");
-                
-            }
-        </script>
+        <% if(locals.recipes){ %>
+            <script>let recipes = <%- JSON.stringify(recipes) %>;</script>
+        <% } %>
+        <script>let ingredients = <%- JSON.stringify(ingredients) %>;</script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-        <script src="../shared/validation.js"></script>
+        <script src="/shared/validation.js"></script>
         <script src="/merchantSetupPage/recipeSetup.js"></script>
         <script src="/merchantSetupPage/ingredientSetup.js"></script>
         <script src="/merchantSetupPage/controller.js"></script>

views/merchantSetupPage/recipeSetup.js

@@ -10,13 +10,11 @@ let recipeSetup = {
         createRecipes.style.display = "flex";
 
         for(let recipe of recipes.elements){
-            this.recipeData.push(
-                {
+            this.recipeData.push({
                     id: recipe.id,
                     name: recipe.name,
                     ingredients: []
-                }
-            )
+            });
         }
 
         this.showRecipe();
@@ -37,7 +35,7 @@ let recipeSetup = {
             let ingTd = document.createElement("td");
             row.appendChild(ingTd);
             let ingName = document.createElement("select");
-            for(let ingredient of data.ingredients){
+            for(let ingredient of controller.data.ingredients){
                 let newOption = document.createElement("option");
                 newOption.innerText = ingredient.name;
                 newOption.value = ingredient.id;
@@ -112,7 +110,7 @@ let recipeSetup = {
     submitAll: function(){
         this.recipeData[this.recipeDataIndex].ingredients = [];
         let body = document.querySelector("#recipes tbody");
-        data.recipes = [];
+        controller.data.recipes = [];
         let isValid = true;
 
         for(let row of body.children){
@@ -142,7 +140,7 @@ let recipeSetup = {
                         quantity: ingredient.quantity
                     });
                 }
-                data.recipes.push(newRecipe);
+                controller.data.recipes.push(newRecipe);
             }
             
             let form = document.createElement("form");
@@ -152,7 +150,7 @@ let recipeSetup = {
             let dataInput = document.createElement("input");
             dataInput.type = "hidden";
             dataInput.name = "data";
-            dataInput.value = JSON.stringify(data);
+            dataInput.value = JSON.stringify(controller.data);
         
             form.appendChild(dataInput);
             document.body.appendChild(form);
@@ -170,7 +168,7 @@ let recipeSetup = {
         let ingTd = document.createElement("td");
         row.appendChild(ingTd);
         let ingName = document.createElement("select");
-        for(let ingredient of data.ingredients){
+        for(let ingredient of controller.data.ingredients){
             let newOption = document.createElement("option");
             newOption.innerText = ingredient.name;
             newOption.value = ingredient.id;
@@ -184,7 +182,7 @@ let recipeSetup = {
         ingQuant.type = "number";
         ingQuant.step = "0.01";
         ingQuant.min = "0";
-        ingQuant.onblur = ()=>{checkValid("quantity", ingQuant)};
+        ingQuant.onblur = ()=>{controller.checkValid("quantity", ingQuant)};
         quantTd.appendChild(ingQuant);
     
         let removeTd = document.createElement("td");