Frontend updated to work with non-pos clients

controllers/home.js

@@ -88,7 +88,7 @@ module.exports = {
     merchantSetupNone: function(req, res){
         Ingredient.find()
             .then((ingredients)=>{
-                return res.render("merchantSetupPage/merchantSetup", {ingredients: ingredients});
+                return res.render("merchantSetupPage/merchantSetup", {ingredients: ingredients, recipes: null});
             })
             .catch((err)=>{
                 console.log(err);

models/recipe.js

@@ -1,10 +1,7 @@
 const mongoose = require("mongoose");
 
 const RecipeSchema = new mongoose.Schema({
-    posId: {
-        type: String,
-        required: true
-    },
+    posId: String,
     merchant: {
         type: mongoose.Schema.Types.ObjectId,
         ref: "Merchant",

views/merchantSetupPage/controller.js

@@ -5,6 +5,7 @@ let controller = {
     addIngredientsComp: document.querySelector("#addIngredients"),
     newIngredientsComp: document.querySelector("#newIngredients"),
     createRecipesComp: document.querySelector("#createRecipes"),
+    newRecipesComp: document.querySelector("#newRecipes"),
 
     //General purpose data validator
     checkValid: function(valueToCheck, inputField){
@@ -19,6 +20,7 @@ let controller = {
         this.addIngredientsComp.style.display = "none";
         this.newIngredientsComp.style.display = "none";
         this.createRecipesComp.style.display = "none";
+        this.newRecipesComp.style.display = "none";
     }
 }
 

views/merchantSetupPage/merchantSetup.css

@@ -59,4 +59,10 @@ table{
 
 .input-error{
     border-color: red;
+}
+
+#newRecipes{
+    display: none;
+    flex-direction: column;
+    align-items: center;
 }

views/merchantSetupPage/merchantSetup.ejs

@@ -56,11 +56,11 @@
         </div>
 
         <div id="createRecipes" class="container hide">
-            <h1>Create your recipes</h1>
+            <h1>Add ingredients to your recipes</h1>
 
             <h2 id="recipeName"></h2>
 
-            <table id="recipes">
+            <table id="recipeTable">
                 <thead>
                     <tr>
                         <th>Ingredient</th>
@@ -76,10 +76,20 @@
             <button id="previous" onclick="recipeSetup.changeRecipe(-1)">Previous Recipe</button>
         </div>
 
-        <% if(locals.recipes){ %>
-            <script>let recipes = <%- JSON.stringify(recipes) %>;</script>
-        <% } %>
-        <script>let ingredients = <%- JSON.stringify(ingredients) %>;</script>
+        <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>
+        </div>
+
+        <script>
+            let ingredients = <%- JSON.stringify(ingredients) %>;
+            let recipes = <%- JSON.stringify(recipes) %>;
+        </script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="/shared/validation.js"></script>
         <script src="/merchantSetupPage/recipeSetup.js"></script>

views/merchantSetupPage/recipeSetup.js

@@ -5,15 +5,53 @@ let recipeSetup = {
     //Display recipe page and hide others
     //Populate recipeData with data from Clover
     createRecipePage: function(){
-        addIngredients.style.display = "none";
-        newIngredients.style.display = "none";
-        createRecipes.style.display = "flex";
+        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();
+    },
 
-        for(let recipe of recipes.elements){
+    //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({
-                    id: recipe.id,
-                    name: recipe.name,
-                    ingredients: []
+                name: nameDiv.children[0].value,
+                ingredients: []
             });
         }
 
@@ -24,10 +62,13 @@ let recipeSetup = {
     //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("#recipes tbody");
+        let body = document.querySelector("#recipeTable tbody");
         for(let ing of this.recipeData[this.recipeDataIndex].ingredients){
             let row = document.createElement("tr");
             body.appendChild(row);
@@ -78,7 +119,7 @@ let recipeSetup = {
     //Changes recipeDataIndex
     //Hands off to showRecipe function
     changeRecipe: function(num){
-        let body = document.querySelector("#recipes tbody");
+        let body = document.querySelector("#recipeTable tbody");
         this.recipeData[this.recipeDataIndex].ingredients = [];
         let isValid = true;
     
@@ -109,7 +150,7 @@ let recipeSetup = {
     //Creates a form and submits data
     submitAll: function(){
         this.recipeData[this.recipeDataIndex].ingredients = [];
-        let body = document.querySelector("#recipes tbody");
+        let body = document.querySelector("#recipeTable tbody");
         controller.data.recipes = [];
         let isValid = true;
 
@@ -160,7 +201,7 @@ let recipeSetup = {
 
     //Creates a new, empty row in table to input data
     addRecipeIngredientField: function(){
-        let body = document.querySelector("#recipes tbody");
+        let body = document.querySelector("#recipeTable tbody");
     
         let row = document.createElement("tr");
         body.appendChild(row);