Refactor and comment merchant setup page

views/merchantSetupPage/controller.js

@@ -1,9 +1,11 @@
-let data = {};
+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"
@@ -12,4 +14,5 @@ let checkValid = (valueToCheck, inputField)=>{
     }
 }
 
+//Run first function
 ingredientSetup.populateIngredients();

views/merchantSetupPage/ingredientSetup.js

@@ -1,7 +1,9 @@
 let ingredientSetup = {
-    existingIngredientElements: [],
-    newIngredientElements: [],
+    existingIngredientElements: [], // each object in list is a full tr for one ingredient
+    newIngredientElements: [],  // each object in list is a full tr for one ingredient
 
+    //Loops through all ingredients passed from database
+    //Creates a row for each ingredient and adds it to table
     populateIngredients: function(){
         let tBody = document.createElement("tbody");
     
@@ -48,18 +50,23 @@ let ingredientSetup = {
         }
     },
 
+    //Display existing ingredients table
+    //Hide other tables
     displayExistingIngredients: function(){
         addIngredients.style.display = "flex";
         newIngredients.style.display = "none";
         createRecipes.style.display = "none";
     },
 
+    //Display new ingredients table
+    //Hide other tables
     displayNewIngredients: function(){
         addIngredients.style.display = "none";
         newIngredients.style.display = "flex";
         createRecipes.style.display = "none";
     },
 
+    //Creates a new, empty row in table to input data
     newIngredientField: function(){
         let body = document.querySelector("#inputField tbody");
         let row = document.createElement("tr");
@@ -104,6 +111,7 @@ let ingredientSetup = {
         this.newIngredientElements.push(row);
     },
 
+    //Remove row from new ingredients table
     removeRow: function(row){
         for(let i = 0; i < this.newIngredientElements.length; i++){
             if(this.newIngredientElements[i] === row){
@@ -177,38 +185,5 @@ let ingredientSetup = {
                     console.log(err);
                 });
         }
-    },
-
-    addRecipeIngredientField: function(){
-        let body = document.querySelector("#recipes tbody");
-    
-        let row = document.createElement("tr");
-        body.appendChild(row);
-    
-        let ingTd = document.createElement("td");
-        row.appendChild(ingTd);
-        let ingName = document.createElement("select");
-        for(let ingredient of data.ingredients){
-            let newOption = document.createElement("option");
-            newOption.innerText = ingredient.name;
-            newOption.value = ingredient.id;
-            ingName.appendChild(newOption);
-        }
-        ingTd.appendChild(ingName);
-    
-        let quantTd = document.createElement("td");
-        row.appendChild(quantTd);
-        let ingQuant = document.createElement("input");
-        ingQuant.type = "number";
-        ingQuant.step = "0.01";
-        ingQuant.min = "0";
-        quantTd.appendChild(ingQuant);
-    
-        let removeTd = document.createElement("td");
-        row.appendChild(removeTd);
-        let removeButton = document.createElement("button");
-        removeButton.innerText = "-";
-        removeButton.onclick = ()=>{row.parentNode.removeChild(row)};
-        removeTd.appendChild(removeButton);
     }
 };

views/merchantSetupPage/recipeSetup.js

@@ -1,7 +1,9 @@
 let recipeSetup = {
-    recipeData: [],
-    recipeDataIndex: 0,
+    recipeData: [],  //stores data from recipes, including ingredients
+    recipeDataIndex: 0,  //index for recipeData, which one is currently displaying
 
+    //Display recipe page and hide others
+    //Populate recipeData with data from Clover
     createRecipePage: function(){
         addIngredients.style.display = "none";
         newIngredients.style.display = "none";
@@ -20,6 +22,9 @@ let recipeSetup = {
         this.showRecipe();
     },
 
+    //Loops through recipeData to create td's
+    //Displays each ingredient for current recipe
+    //Create and display correct buttons for navigation
     showRecipe: function(){
         let title = document.querySelector("#recipeName");
         title.innerText = this.recipeData[this.recipeDataIndex].name;
@@ -69,6 +74,9 @@ let recipeSetup = {
         }
     },
 
+    //Empties all data in the table
+    //Changes recipeDataIndex
+    //Hands off to showRecipe function
     changeRecipe: function(num){
         let body = document.querySelector("#recipes tbody");
     
@@ -87,6 +95,8 @@ let recipeSetup = {
         this.showRecipe();
     },
 
+    //Add all recipes to data variable
+    //Creates a form and submits data
     submitAll: function(){
         let body = document.querySelector("#recipes tbody");
         data.recipes = [];
@@ -102,7 +112,7 @@ let recipeSetup = {
     
             body.removeChild(row);
         }
-    
+
         for(let recipe of this.recipeData){
             let newRecipe = {
                 cloverId: recipe.id,
@@ -132,6 +142,7 @@ let recipeSetup = {
         form.submit();
     },
 
+    //Creates a new, empty row in table to input data
     addRecipeIngredientField: function(){
         let body = document.querySelector("#recipes tbody");