Rewrite frontend merchant setup page. Include actions for non-pos client.

controllers/home.js

@@ -197,7 +197,7 @@ module.exports = {
             });
     },
 
-    createMerchant: function(req, res){
+    createMerchantClover: function(req, res){
         let data = JSON.parse(req.body.data);
 
         axios.get(`https://apisandbox.dev.clover.com/v3/merchants/${merchantId}?access_token=${token}`)
@@ -256,6 +256,12 @@ module.exports = {
             });
     },
 
+    createMerchantNone: function(req, res){
+        let data = JSON.parse(req.body.data);
+        
+        console.log(data);
+    },
+
     addMerchantIngredient: function(req, res){
         if(!req.session.user){
             return res.render("error");

routes.js

@@ -10,7 +10,8 @@ module.exports = function(app){
 
     //Merchant
     app.get("/merchant/recipes/update", home.updateRecipes);
-    app.post("/merchant/create", home.createMerchant);
+    app.post("/merchant/clover/create", home.createMerchantClover);
+    app.post("/merchant/none/create", home.createMerchantNone);
     app.post("/merchant/ingredients/create", home.addMerchantIngredient);
     app.post("/merchant/ingredients/remove", home.removeMerchantIngredient);
     app.post("/merchant/ingredients/update", home.updateMerchantIngredient);

views/merchantSetupPage/addIngredients.js

@@ -0,0 +1,82 @@
+addIngredientsObj = {
+    isPopulated: false,
+
+    display: function(){
+        controller.clearScreen();
+        controller.addIngredientsStrand.style.display = "flex";
+
+        if(!this.isPopulated){
+            this.populate();
+            this.isPopulated = true;
+        }
+    },
+
+    populate: function(){
+        let tbody = document.querySelector("#ingredient-display tbody");
+    
+        for(let ingredient of ingredients){
+            let row = document.createElement("tr");
+            row.id = ingredient._id;
+            tbody.appendChild(row);
+        
+            let add = document.createElement("td");
+            row.appendChild(add);
+
+            let checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            add.appendChild(checkbox);
+            
+            let name = document.createElement("td");
+            name.innerText = ingredient.name;
+            row.appendChild(name);
+        
+            let category = document.createElement("td");
+            category.innerText = ingredient.category;
+            row.appendChild(category);
+        
+            let quantity = document.createElement("td");
+            row.appendChild(quantity);
+
+            let quantityInput = document.createElement("input");
+            quantityInput.type = "number";
+            quantityInput.step = "0.01";
+            quantityInput.min = "0";
+            quantity.appendChild(quantityInput);
+            
+            let unit = document.createElement("td");
+            unit.innerText = ingredient.unit;
+            row.appendChild(unit);
+        }
+    },
+
+    submit: function(){
+        controller.data.ingredients = [];
+
+        let tbody = document.querySelector("#ingredient-display tbody");
+        let isValid = true;
+        for(let row of tbody.children){
+            if(row.children[0].children[0].checked){
+                let quantity = row.children[3].children[0].value;
+
+                if(validator.ingredient.quantity(quantity)){
+                    controller.data.ingredients.push({
+                        ingredient: {
+                            id: row.id,
+                            name: row.children[1].innerText,
+                            category: row.children[2].innerText,
+                            unit: row.children[4].innerText
+                        },
+                        quantity: quantity
+                    });
+                }else{
+                    isValid = false;
+                    break;
+                }
+            }
+        }
+
+        if(isValid){
+            createIngredientsObj.display();
+        }
+    }
+}

views/merchantSetupPage/basicInfo.js

@@ -0,0 +1,26 @@
+basicInfoObj = {
+    display: function(){
+        controller.clearScreen();
+        controller.basicInfoStrand.style.display = "flex";
+    },
+
+    submit: function(){
+        event.preventDefault();
+
+        let name = document.querySelector("#regName").value;
+        let email = document.querySelector("#regEmail").value;
+        let password = document.querySelector("#regPass").value;
+        let confirmPassword = document.querySelector("#regConfirmPass").value;
+
+        let nameCheck = validator.merchant.name(name);
+        let passCheck = validator.merchant.password(password, confirmPassword);
+
+        if(nameCheck && passCheck){
+            controller.data.name = name;
+            controller.data.email = email;
+            controller.data.password = password;
+
+            addIngredientsObj.display();
+        }
+    }
+}

views/merchantSetupPage/controller.js

@@ -2,10 +2,11 @@ let controller = {
     data: {},  //For storing all data from user to pass to backend
 
     //Component divs
-    addIngredientsComp: document.querySelector("#addIngredients"),
-    newIngredientsComp: document.querySelector("#newIngredients"),
-    createRecipesComp: document.querySelector("#createRecipes"),
-    newRecipesComp: document.querySelector("#newRecipes"),
+    basicInfoStrand: document.querySelector("#basicInfoStrand"),
+    addIngredientsStrand: document.querySelector("#addIngredientsStrand"),
+    createIngredientsStrand: document.querySelector("#createIngredientsStrand"),
+    nameRecipesStrand: document.querySelector("#nameRecipesStrand"),
+    createRecipesStrand: document.querySelector("#createRecipesStrand"),
 
     //General purpose data validator
     checkValid: function(valueToCheck, inputField){
@@ -17,12 +18,13 @@ let controller = {
     },
 
     clearScreen: function(){
-        this.addIngredientsComp.style.display = "none";
-        this.newIngredientsComp.style.display = "none";
-        this.createRecipesComp.style.display = "none";
-        this.newRecipesComp.style.display = "none";
+        this.basicInfoStrand.style.display = "none";
+        this.addIngredientsStrand.style.display = "none";
+        this.createIngredientsStrand.style.display = "none";
+        this.nameRecipesStrand.style.display = "none";
+        this.createRecipesStrand.style.display = "none";
     }
 }
 
 //Run first function
-ingredientSetup.existingIngredients();
+basicInfoObj.display();

views/merchantSetupPage/createIngredients.js

@@ -0,0 +1,114 @@
+let createIngredientsObj = {
+    display: function(){
+        controller.clearScreen();
+        controller.createIngredientsStrand.style.display = "flex";
+    },
+
+    //Creates a new, empty row in table to input data
+    newIngredientField: function(){
+        let tbody = document.querySelector("#inputField tbody");
+
+        let row = document.createElement("tr");
+        tbody.appendChild(row);
+    
+        let name = document.createElement("td");
+        row.appendChild(name);
+
+        let nameInput = document.createElement("input");
+        nameInput.type = "text";
+        nameInput.onblur = ()=>{controller.checkValid("name", nameInput)};
+        name.appendChild(nameInput);
+        
+        let category = document.createElement("td");
+        row.appendChild(category);
+
+        let categoryInput = document.createElement("input");
+        categoryInput.type = "text"
+        categoryInput.onblur = ()=>{controller.checkValid("category", categoryInput)};
+        category.appendChild(categoryInput);
+        
+        let quantity = document.createElement("td");
+        row.appendChild(quantity);
+
+        let quantityInput = document.createElement("input");
+        quantityInput.type = "number";
+        quantityInput.step = "0.01";
+        quantityInput.onblur = ()=>{controller.checkValid("quantity", quantityInput)};
+        quantity.appendChild(quantityInput);
+    
+        let unit = document.createElement("td");
+        row.appendChild(unit);
+
+        let unitInput = document.createElement("input");
+        unitInput.type = "text";
+        unitInput.onblur = ()=>{controller.checkValid("unit", unitInput)};
+        unit.appendChild(unitInput);
+    
+        let removeTd = document.createElement("td");
+        row.appendChild(removeTd);
+
+        let removeButton = document.createElement("button");
+        removeButton.innerText = "-";
+        removeButton.onclick = ()=>{row.parentNode.removeChild(row);};
+        removeTd.appendChild(removeButton);
+    },
+
+    submit: function(){
+        let tbody = document.querySelector("#inputField tbody");
+        let isValid = true;
+
+        let newIngredients = [];
+        
+        for(let row of tbody.children){
+            let name = row.children[0].children[0].value;
+            let category = row.children[1].children[0].value;
+            let quantity = row.children[2].children[0].value;
+            let unit = row.children[3].children[0].value;
+
+            let checkName = validator.ingredient.name(name);
+            let checkCategory = validator.ingredient.category(category);
+            let checkQuantity = validator.ingredient.quantity(quantity);
+            let checkUnit = validator.ingredient.unit(unit);
+
+            if(checkName && checkCategory && checkQuantity && checkUnit){
+                newIngredients.push({
+                    name: name,
+                    category: category,
+                    unit: unit
+                });
+            }else{
+                isValid = false;
+                break;
+            }
+        }
+
+        if(isValid){
+            axios.post("/ingredients/create", newIngredients)
+                .then((ingredients)=>{
+                    for(let ingredient of ingredients.data){
+                        controller.data.ingredients.push({
+                            ingredient: {
+                                id: ingredient._id,
+                                name: ingredient.name,
+                                category: ingredient.category,
+                                unit: ingredient.unit
+                            },
+                            quantity: quantity
+                        });
+                    }
+
+                    banner.createNotification("All ingredients have been created and added to your inventory");
+
+                    if(recipes){
+                        createRecipesObj.display();
+                    }else{
+                        nameRecipesObj.display();
+                    }
+                })
+                .catch((err)=>{
+                    banner.createError("There has been an error and your ingredients have not been saved");
+                    console.log(err);
+                });
+        }
+    }
+}

views/merchantSetupPage/createRecipes.js

@@ -0,0 +1,162 @@
+let createRecipesObj = {
+    recipeIndex: 0,
+    
+    display: function(){
+        controller.clearScreen();
+        controller.createRecipesStrand.style.display = "flex";
+
+        if(recipes){
+            controller.data.recipes = recipes;
+        }
+
+        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 = controller.data.recipes[this.recipeIndex].name;
+    
+        let tbody = document.querySelector("#recipeTable tbody");
+        for(let recipeIngredient of controller.data.recipes[this.recipeIndex].ingredients){
+            let row = document.createElement("tr");
+            tbody.appendChild(row);
+    
+            let ingredientTd = document.createElement("td");
+            row.appendChild(ingredientTd);
+            let ingredientName = document.createElement("select");
+            for(let inventoryIngredient of controller.data.ingredients){
+                let newOption = document.createElement("option");
+                newOption.innerText = inventoryIngredient.name;
+                newOption.value = inventoryIngredient.id;
+                if(inventoryIngredient.id === recipeIngredient.id){
+                    newOption.selected = "selected";
+                }
+                ingredientName.appendChild(newOption);
+            }
+            ingredientTd.appendChild(ingredientName);
+    
+            let quantityTd = document.createElement("td");
+            row.appendChild(quantityTd);
+
+            let ingQuant = document.createElement("input");
+            ingQuant.type = "number";
+            ingQuant.step = "0.01";
+            ingQuant.value = recipeIngredient.quantity;
+            ingQuant.onblur = ()=>{checkValid("quantity", ingQuant)};
+            quantityTd.appendChild(ingQuant);
+        }
+    
+        let nextButton = document.querySelector("#next");
+        nextButton.onclick = ()=>{this.changeRecipe(1)};
+        if(this.recipeIndex === controller.data.recipes.length - 1){
+            nextButton.innerText = "Finish";
+        }else{
+            nextButton.innerText = "Next Recipe";
+        }
+    
+        let previousButton = document.querySelector("#previous");
+        if(this.recipeIndex === 0){
+            previousButton.style.display = "none";
+        }else{
+            previousButton.style.display = "inline-block";
+        }
+    },
+
+    //Adds ingredient data to recipeData
+    //Empties all data in the table
+    //Changes recipeDataIndex
+    //Hands off to showRecipe function
+    changeRecipe: function(num){
+        let tbody = document.querySelector("#recipeTable tbody");
+        controller.data.recipes[this.recipeIndex].ingredients = [];
+        let isValid = true;
+    
+        for(let row of tbody.children){
+            let quantity = row.children[1].children[0].value;
+
+            if(validator.ingredient.quantity(quantity)){
+                controller.data.recipes[this.recipeIndex].ingredients.push({
+                    id: row.children[0].children[0].value,
+                    quantity: quantity
+                });
+            }else{
+                isValid = false;
+                break;
+            }
+        }
+
+        if(isValid){
+            if(this.recipeIndex >= controller.data.recipes.length - 1){
+                this.submit();
+            }else{
+                while(tbody.children.length > 0){
+                    tbody.removeChild(tbody.firstChild);
+                }
+
+                this.recipeIndex += num;
+                this.showRecipe();
+            }
+        }
+    },
+
+    //Creates a new, empty row in table to input data
+    addRecipeIngredientField: function(){
+        let tbody = document.querySelector("#recipeTable tbody");
+    
+        let row = document.createElement("tr");
+        tbody.appendChild(row);
+    
+        let ingTd = document.createElement("td");
+        row.appendChild(ingTd);
+
+        let ingName = document.createElement("select");
+        for(let ingredient of controller.data.ingredients){
+            let newOption = document.createElement("option");
+            newOption.innerText = ingredient.ingredient.name;
+            newOption.value = ingredient.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";
+        ingQuant.onblur = ()=>{controller.checkValid("quantity", ingQuant)};
+        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);
+    },
+
+    //Add all recipes to data variable
+    //Creates a form and submits data
+    submit: function(){
+        console.log("something");
+        
+        let form = document.createElement("form");
+        form.method = "post";
+        form.action = recipes ? "/merchant/clover/create" : "/merchant/none/create";
+        
+        let dataInput = document.createElement("input");
+        dataInput.type = "hidden";
+        dataInput.name = "data";
+        console.log(controller.data);
+        dataInput.value = JSON.stringify(controller.data);
+    
+        form.appendChild(dataInput);
+        document.body.appendChild(form);
+        form.submit();
+    }
+}

views/merchantSetupPage/ingredientSetup.js

@@ -1,183 +0,0 @@
-let ingredientSetup = {
-    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
-    existingIngredients: function(){
-        let tBody = document.createElement("tbody");
-    
-        for(let ingredient of ingredients){
-            let row = document.createElement("tr");
-            row.id = ingredient._id;
-        
-            let add = document.createElement("td");
-            let checkbox = document.createElement("input");
-            checkbox.type = "checkbox";
-            add.appendChild(checkbox);
-            row.appendChild(add);
-        
-            let name = document.createElement("td");
-            name.innerText = ingredient.name;
-            row.appendChild(name);
-        
-            let category = document.createElement("td");
-            category.innerText = ingredient.category;
-            row.appendChild(category);
-        
-            let quantity = document.createElement("td");
-            let quantityInput = document.createElement("input");
-            quantityInput.type = "number";
-            quantityInput.step = "0.01";
-            quantityInput.min = "0";
-    
-            quantity.appendChild(quantityInput);
-            row.appendChild(quantity);
-            let unit = document.createElement("td");
-            unit.innerText = ingredient.unit;
-            row.appendChild(unit);
-        
-            let idField = document.createElement("input");
-            idField.type = "hidden";
-            idField.value = ingredient._id;
-        
-            tBody.appendChild(row);
-            let oldTBody = document.querySelector("#ingredient-display tbody");
-            oldTBody.parentNode.replaceChild(tBody, oldTBody);
-            this.existingIngredientElements.push(row);
-        }
-    },
-
-    redisplayExistingIngredients: function(){
-        controller.clearScreen();
-        controller.addIngredientsComp.style.display = "flex";
-    },
-
-    //Display new ingredients table
-    //Hide other tables
-    createIngredients: function(){
-        controller.clearScreen();
-        controller.newIngredientsComp.style.display = "flex";
-    },
-
-    //Creates a new, empty row in table to input data
-    newIngredientField: function(){
-        let body = document.querySelector("#inputField tbody");
-        let row = document.createElement("tr");
-    
-        let name = document.createElement("td");
-        let nameInput = document.createElement("input");
-        nameInput.type = "text";
-        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 = ()=>{controller.checkValid("category", categoryInput)};
-        category.appendChild(categoryInput);
-        row.appendChild(category);
-    
-        let quantity = document.createElement("td");
-        let quantityInput = document.createElement("input");
-        quantityInput.type = "number";
-        quantityInput.step = "0.01";
-        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 = ()=>{controller.checkValid("unit", unitInput)};
-        unit.appendChild(unitInput);
-        row.appendChild(unit);
-    
-        let removeTd = document.createElement("td");
-        let removeButton = document.createElement("button");
-        removeButton.innerText = "-";
-        removeButton.onclick = ()=>{this.removeRow(row)};
-        removeTd.appendChild(removeButton);
-        row.appendChild(removeTd);
-    
-        body.appendChild(row);
-        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){
-                this.newIngredientElements.splice(i, 1);
-            }
-        }
-        row.parentNode.removeChild(row);
-    },
-
-    //refactor
-    //nothin should run unless everything is valid
-    createIngredientsList: function(){
-        controller.data.ingredients = [];
-        for(let ingredient of this.existingIngredientElements){
-            if(ingredient.children[0].children[0].checked){
-                controller.data.ingredients.push({
-                    id: ingredient.id,
-                    name: ingredient.children[1].textContent,
-                    quantity: ingredient.children[3].children[0].value,
-                    unit: ingredient.children[4].textContent
-                });
-            }
-        }
-    
-        let newIngredient = [];
-        let newIngredientQuantity = [];
-        for(let ingredient of this.newIngredientElements){
-            newIngredient.push({
-                name: ingredient.children[0].children[0].value,
-                category: ingredient.children[1].children[0].value,
-                unit: ingredient.children[3].children[0].value
-            });
-            newIngredientQuantity.push({
-                name: ingredient.children[0].children[0].value,
-                quantity: ingredient.children[2].children[0].value
-            });
-        }
-    
-        let isValid = true;
-        for(let i = 0; i < newIngredient.length; i++){
-            if(!validator.ingredient.all(newIngredient[i], newIngredientQuantity[i].quantity)){
-                isValid = false;
-                controller.data.ingredients = [];
-                break;
-            }
-        }
-    
-        if(isValid){
-            axios.post("/ingredients/create", newIngredient)
-                .then((result)=>{
-                    for(let ingredient of result.data){
-                        let newIngredient = {
-                            id: ingredient._id,
-                            name: ingredient.name,
-                            unit: ingredient.unit
-                        }
-    
-                        for(let item of newIngredientQuantity){
-                            if(ingredient.name === item.name){
-                                newIngredient.quantity = item.quantity;
-                            }
-                        }
-    
-                        controller.data.ingredients.push(newIngredient);
-                    }
-                    banner.createNotification("All ingredients have been created and added to your inventory");
-                    recipeSetup.createRecipePage();
-                })
-                .catch((err)=>{
-                    banner.createError("There has been an error and your ingredients have not been saved");
-                    console.log(err);
-                });
-        }
-    }
-};

views/merchantSetupPage/merchantSetup.css

@@ -4,13 +4,7 @@ table{
     margin: 20px;
 }
 
-#recipeName{
-    color: #ff626b;
-}
 
-.container.hide{
-    display: none;
-}
 
 .anticolumn{
     border: none;
@@ -20,7 +14,6 @@ table{
 }
 
 .container{
-    display: flex;
     flex-direction: column;
     align-items: center;
 }
@@ -65,4 +58,33 @@ table{
     display: none;
     flex-direction: column;
     align-items: center;
-}
+}
+
+#basicInfoStrand{
+    display: flex;
+}
+
+    #basicInfoStrand form{
+        display: flex;
+        flex-direction: column;
+    }
+
+#addIngredientsStrand{
+    display: none;
+}
+
+#createIngredientsStrand{
+    display: none;
+}
+
+#nameRecipesStrand{
+    display: none;
+}
+
+#createRecipesStrand{
+    display: none;
+}
+
+    #recipeName{
+        color: #ff626b;
+    }

views/merchantSetupPage/merchantSetup.ejs

@@ -10,7 +10,33 @@
 
         <% include ../shared/banner %>
 
-        <div id="addIngredients" class="container">
+        <div id="basicInfoStrand" class="container">
+            <h1>Basic Information</h1>
+
+            <form onsubmit="basicInfoObj.submit()">
+                <% if(!locals.recipe){ %>
+                    <label>Name
+                        <input id="regName" type="text">
+                    </label>
+                <% } %>
+
+                <label>Email
+                    <input id="regEmail" type="email" required>
+                </label>
+
+                <label>Password
+                    <input id="regPass" type="password" required>
+                </label>
+
+                <label>Confirm Password
+                    <input id="regConfirmPass" type="password" required>
+                </label>
+
+                <input type="Submit" value="Create Account">
+            </form>
+        </div>
+
+        <div id="addIngredientsStrand" class="container">
             <h1>Add your first set of ingredients to your pantry</h1>
 
             <h3>Choose from our list of ingredients</h3>
@@ -30,10 +56,10 @@
                 <tbody></tbody>
             </table>
 
-            <button onclick="ingredientSetup.createIngredients()">Next</button>
+            <button onclick="addIngredientsObj.submit()">Next</button>
         </div>
 
-        <div id="newIngredients" class="container hide">
+        <div id="createIngredientsStrand" class="container">
             <h1>Add your first set of ingredients to your pantry</h1>
 
             <h3>Create your own ingredients</h3>
@@ -50,12 +76,22 @@
                 </thead>
                 <tbody></tbody>
             </table>
-            <button onclick="ingredientSetup.newIngredientField()">+</button>
-            <button onclick="ingredientSetup.createIngredientsList()">Create Ingredients</button>
-            <button onclick="ingredientSetup.redisplayExistingIngredients()">Back</button>
+            <button onclick="createIngredientsObj.newIngredientField()">+</button>
+            <button onclick="createIngredientsObj.submit()">Create Ingredients</button>
+            <button onclick="addIngredientsObj.display()">Back</button>
+        </div>
+
+        <div id="nameRecipesStrand" class="container">
+            <h1>Name your recipes</h1>
+
+            <button onclick="nameRecipesObj.addNameField()">Add Recipe</button>
+
+            <div id="nameList"></div>
+
+            <button onclick="nameRecipesObj.submit()">Submit</button>
         </div>
 
-        <div id="createRecipes" class="container hide">
+        <div id="createRecipesStrand" class="container">
             <h1>Add ingredients to your recipes</h1>
 
             <h2 id="recipeName"></h2>
@@ -71,19 +107,9 @@
                 <tbody></tbody>
             </table>
 
-            <button onclick="recipeSetup.addRecipeIngredientField()">+</button>
+            <button onclick="createRecipesObj.addRecipeIngredientField()">+</button>
             <button id="next"></button>
-            <button id="previous" onclick="recipeSetup.changeRecipe(-1)">Previous Recipe</button>
-        </div>
-
-        <div id="newRecipes">
-            <h1>Name your recipes</h1>
-
-            <button onclick="recipeSetup.addNameField()">Add Recipe</button>
-
-            <div id="nameList"></div>
-
-            <button onclick="recipeSetup.createNames()">Submit</button>
+            <button id="previous" onclick="createRecipesObj.changeRecipe(-1)">Previous Recipe</button>
         </div>
 
         <script>
@@ -92,8 +118,11 @@
         </script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="/shared/validation.js"></script>
-        <script src="/merchantSetupPage/recipeSetup.js"></script>
-        <script src="/merchantSetupPage/ingredientSetup.js"></script>
+        <script src="/merchantSetupPage/basicInfo.js"></script>
+        <script src="/merchantSetupPage/addIngredients.js"></script>
+        <script src="/merchantSetupPage/createIngredients.js"></script>
+        <script src="/merchantSetupPage/nameRecipes.js"></script>
+        <script src="/merchantSetupPage/createRecipes.js"></script>
         <script src="/merchantSetupPage/controller.js"></script>
     </body>
 </html>

views/merchantSetupPage/nameRecipes.js

@@ -0,0 +1,38 @@
+let nameRecipesObj = {
+    display: function(){
+        controller.clearScreen();
+        controller.nameRecipesStrand.style.display = "flex";
+
+        this.addNameField();
+    },
+
+    //Add another input box to input another recipe name
+    addNameField: function(){
+        let nameList = document.querySelector("#nameList");
+
+        let nameDiv = document.createElement("div");
+        nameList.appendChild(nameDiv);
+
+        let nameInput = document.createElement("input");
+        nameInput.type = "text";
+        nameDiv.appendChild(nameInput);
+
+        let nameRemove = document.createElement("button");
+        nameRemove.innerText = "Remove";
+        nameRemove.onclick = ()=>{nameDiv.parentNode.removeChild(nameDiv)};
+        nameDiv.appendChild(nameRemove);
+    },
+
+    submit: function(){
+        controller.data.recipes = [];
+
+        for(let nameDiv of document.querySelector("#nameList").children){
+            controller.data.recipes.push({
+                name: nameDiv.children[0].value,
+                ingredients: []
+            });
+        }
+
+        createRecipesObj.display();
+    }
+}

views/merchantSetupPage/recipeSetup.js

@@ -1,236 +0,0 @@
-let recipeSetup = {
-    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(){
-        if(recipes){
-            for(let recipe of recipes.elements){
-                this.recipeData.push({
-                        id: recipe.id,
-                        name: recipe.name,
-                        ingredients: []
-                });
-            }
-
-            this.showRecipe();
-        }else{
-            this.createOwnRecipes();
-        }
-    },
-
-    //Display page to create recipe names
-    createOwnRecipes: function(){
-        controller.clearScreen();
-        controller.newRecipesComp.style.display = "flex";
-
-        this.addNameField();
-    },
-
-    //Add another input box to input another recipe name
-    addNameField: function(){
-        let nameList = document.querySelector("#nameList");
-
-        let nameDiv = document.createElement("div");
-        nameList.appendChild(nameDiv);
-
-        let nameInput = document.createElement("input");
-        nameInput.type = "text";
-        nameDiv.appendChild(nameInput);
-
-        let nameRemove = document.createElement("button");
-        nameRemove.innerText = "Remove";
-        nameRemove.onclick = ()=>{nameDiv.parentNode.removeChild(nameDiv)};
-        nameDiv.appendChild(nameRemove);
-    },
-
-    //Adds the names of the recipes
-    //Calls showRecipe to carry on 
-    createNames: function(){
-        for(let nameDiv of document.querySelector("#nameList").children){
-            this.recipeData.push({
-                name: nameDiv.children[0].value,
-                ingredients: []
-            });
-        }
-
-        this.showRecipe();
-    },
-
-    //Loops through recipeData to create td's
-    //Displays each ingredient for current recipe
-    //Create and display correct buttons for navigation
-    showRecipe: function(){
-        controller.clearScreen();
-        controller.createRecipesComp.style.display = "flex";
-
-        let title = document.querySelector("#recipeName");
-        title.innerText = this.recipeData[this.recipeDataIndex].name;
-    
-        let body = document.querySelector("#recipeTable tbody");
-        for(let ing of this.recipeData[this.recipeDataIndex].ingredients){
-            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 controller.data.ingredients){
-                let newOption = document.createElement("option");
-                newOption.innerText = ingredient.name;
-                newOption.value = ingredient.id;
-                if(ingredient.id === ing.id){
-                    newOption.selected = "selected";
-                }
-                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.value = ing.quantity;
-            ingQuant.onblur = ()=>{checkValid("quantity", ingQuant)};
-            quantTd.appendChild(ingQuant);
-        }
-    
-        let nextButton = document.querySelector("#next");
-        if(this.recipeDataIndex === this.recipeData.length - 1){
-            nextButton.innerText = "Finish";
-            nextButton.onclick = ()=>{this.submitAll()};
-        }else{
-            nextButton.innerText = "Next Recipe";
-            nextButton.onclick = ()=>{this.changeRecipe(1)};
-        }
-    
-        let previousButton = document.querySelector("#previous");
-        if(this.recipeDataIndex === 0){
-            previousButton.style.display = "none";
-        }else{
-            previousButton.style.display = "inline-block";
-        }
-    },
-
-    //Adds ingredient data to recipeData
-    //Empties all data in the table
-    //Changes recipeDataIndex
-    //Hands off to showRecipe function
-    changeRecipe: function(num){
-        let body = document.querySelector("#recipeTable tbody");
-        this.recipeData[this.recipeDataIndex].ingredients = [];
-        let isValid = true;
-    
-        for(let row of body.children){
-            newIngredient ={
-                id: row.children[0].children[0].value,
-                quantity: row.children[1].children[0].value
-            };
-
-            this.recipeData[this.recipeDataIndex].ingredients.push(newIngredient);
-            if(!validator.ingredient.quantity(newIngredient.quantity)){
-                isValid = false;
-                break;
-            }
-        }
-
-        if(isValid){
-            while(body.children.length > 0){
-                body.removeChild(body.firstChild);
-            }
-
-            this.recipeDataIndex += num;
-            this.showRecipe();
-        }
-    },
-
-    //Add all recipes to data variable
-    //Creates a form and submits data
-    submitAll: function(){
-        this.recipeData[this.recipeDataIndex].ingredients = [];
-        let body = document.querySelector("#recipeTable tbody");
-        controller.data.recipes = [];
-        let isValid = true;
-
-        for(let row of body.children){
-            newIngredient ={
-                id: row.children[0].children[0].value,
-                quantity: row.children[1].children[0].value
-            };
-            
-            this.recipeData[this.recipeDataIndex].ingredients.push(newIngredient);
-            if(!validator.ingredient.quantity(newIngredient.quantity)){
-                isValid = false;
-                break;
-            }
-        }
-
-        if(isValid){
-            for(let recipe of this.recipeData){
-                let newRecipe = {
-                    posId: recipe.id,
-                    name: recipe.name,
-                    ingredients: []
-                };
-
-                for(let ingredient of recipe.ingredients){
-                    newRecipe.ingredients.push({
-                        ingredient: ingredient.id,
-                        quantity: ingredient.quantity
-                    });
-                }
-                controller.data.recipes.push(newRecipe);
-            }
-            
-            let form = document.createElement("form");
-            form.method = "post";
-            form.action = "/merchant/create"
-            
-            let dataInput = document.createElement("input");
-            dataInput.type = "hidden";
-            dataInput.name = "data";
-            dataInput.value = JSON.stringify(controller.data);
-        
-            form.appendChild(dataInput);
-            document.body.appendChild(form);
-            form.submit();
-        }
-    },
-
-    //Creates a new, empty row in table to input data
-    addRecipeIngredientField: function(){
-        let body = document.querySelector("#recipeTable 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 controller.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";
-        ingQuant.onblur = ()=>{controller.checkValid("quantity", ingQuant)};
-        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/shared/validation.js

@@ -54,6 +54,17 @@ let validator = {
     },
 
     merchant: {
+        name: function(name, createBanner = true){
+            if(name.length < 3){
+                if(createBanner){
+                    banner.createError("Your name is too short");
+                }
+                return false;
+            }
+
+            return true;
+        },
+
         password: function(pass, confirmPass, createBanner = true){
             if(pass !== confirmPass){
                 if(createBanner){