Finish merchant setup page. Smalle bug fixes needed.

controllers/home.js

@@ -1,3 +1,5 @@
+const axios = require("axios");
+
 const Merchant = require("../models/merchant");
 const Ingredient = require("../models/ingredient");
 
@@ -24,11 +26,29 @@ module.exports = {
     merchantSetup: (req, res)=>{
         Ingredient.find()
             .then((ingredients)=>{
-                return res.render("merchantSetupPage/merchantSetup", {ingredients: ingredients});
+                axios.get(`https://apisandbox.dev.clover.com/v3/merchants/${merchantId}/items?access_token=${token}`)
+                    .then((recipes)=>{
+                        return res.render("merchantSetupPage/merchantSetup", {ingredients: ingredients, recipes: recipes.data});
+                    })
+                    .catch((err)=>{
+                        console.log(err);
+                        return res.render("error");
+                    });
             })
             .catch((err)=>{
                 console.log(err);
                 return res.render("error");
             })
+    },
+
+    getRecipes: (req, res)=>{
+        axios.get(`https://apisandbox.dev.clover.com/v3/merchants/${merchantId}/items?access_token=${token}`)
+            .then((recipes)=>{
+                
+                return res.json(recipes);
+            })
+            .catch((err)=>{
+                return res.json(err);
+            });
     }
 }

models/ingredient.js

@@ -12,7 +12,7 @@ const IngredientSchema = new mongoose.Schema({
     },
     unitType: {
         type: String,
-        require: [true, "You must provide the measurment unit for this item"]
+        required: [true, "You must provide the measurment unit for this item"]
     },
     recipes: [{
         type: mongoose.Schema.Types.ObjectId,

models/merchant.js

@@ -14,8 +14,11 @@ const MerchantSchema = new mongoose.Schema({
         ref: "Recipe"
     }],
     ingredients: [{
-        type: mongoose.Schema.Types.ObjectId,
-        ref: "Ingredient"
+        id: {
+            type: mongoose.Schema.Types.ObjectId,
+            ref: "Ingredient"
+        },
+        quantity: String
     }]
 });
 

package-lock.json

@@ -26,6 +26,15 @@
         "lodash": "^4.17.11"
       }
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      }
+    },
     "bluebird": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
@@ -175,6 +184,24 @@
         "unpipe": "~1.0.0"
       }
     },
+    "follow-redirects": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+      "requires": {
+        "debug": "=3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -215,6 +242,11 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
       "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
     },
+    "is-buffer": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+      "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+    },
     "kareem": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.3.1.tgz",

package.json

@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/The-Subline/Inventory-Management#readme",
   "dependencies": {
+    "axios": "^0.19.0",
     "ejs": "^2.7.1",
     "express": "^4.17.1",
     "mongoose": "^5.7.1"

routes.js

@@ -3,4 +3,5 @@ const home = require("./controllers/home");
 module.exports = function(app){
     app.get("/", home.displayInventory);
     app.get("/merchant/new", home.merchantSetup);
+    app.get("/getrecipes", home.getRecipes);
 }

views/merchantSetupPage/merchantSetup.css

@@ -4,6 +4,10 @@ table{
     margin: 20px;
 }
 
+#recipeName{
+    color: #ff626b;
+}
+
 .container{
     display: flex;
     flex-direction: column;

views/merchantSetupPage/merchantSetup.ejs

@@ -36,20 +36,44 @@
             <h3>Create your own ingredients</h3>
 
             <table id="inputField">
-                <tr>
-                    <th>Ingredient Name</th>
-                    <th>Category</th>
-                    <th>Quantity</th>
-                    <th>Measurement Unit</th>
-                </tr>
+                <thead>
+                    <tr>
+                        <th>Ingredient Name</th>
+                        <th>Category</th>
+                        <th>Quantity</th>
+                        <th>Measurement Unit</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
             </table>
             <button onclick="newIngredientField()">+</button>
-            <button onclick="updateState(1)">Next</button>
+            <button onclick="updateState(1)">Create Ingredients</button>
             <button onclick="updateState(-1)">Back</button>
         </div>
 
+        <div id="createRecipes" class="container">
+            <h1>Create your recipes</h1>
+
+            <h2 id="recipeName"></h2>
+
+            <table id="recipes">
+                <thead>
+                    <tr>
+                        <th>Ingredient</th>
+                        <th>Quantity</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+
+            <button onclick="addRecipeIngredientField()">+</button>
+            <button id="next"></button>
+            <button onclick="changeRecipe(-1)">Previous Recipe</button>
+        </div>
+
         <script>
             let ingredients = <%- JSON.stringify(ingredients) %>;
+            let recipes = <%- JSON.stringify(recipes) %>;
         </script>
         <script src="/merchantSetupPage/merchantSetup.js"></script>
     </body>

views/merchantSetupPage/merchantSetup.js

@@ -1,24 +1,47 @@
+console.log(ingredients);
+console.log(recipes);
+
 let state = 0;
 let data = {};
 
 let addIngredients = document.querySelector("#addIngredients");
 let newIngredients = document.querySelector("#newIngredients");
+let createRecipes = document.querySelector("#createRecipes");
 let existingIngredientElements = [];
 let newIngredientElements = [];
+let recipeData = [];
+let recipeDataIndex = 0;
+
+for(let recipe of recipes.elements){
+    recipeData.push(
+        {
+            id: recipe.id,
+            name: recipe.name,
+            ingredients: []
+        }
+    )
+}
 
 let updateState = (num)=>{
     state += num;
     if(state === 0){
         addIngredients.style.display = "flex";
         newIngredients.style.display = "none";
+        createRecipes.style.display = "none";
     }else if(state === 1){
         addIngredients.style.display = "none";
         newIngredients.style.display = "flex";
+        createRecipes.style.display = "none";
     }else if(state === 2){
-        collectNewIngredients();
+        addIngredients.style.display = "none";
+        newIngredients.style.display = "none";
+        createRecipes.style.display = "flex";
+        createIngredientsList();
+        showRecipe();
     }
 }
 
+//Ingredient functions
 let populateIngredients = ()=>{
     let tBody = document.createElement("tbody");
 
@@ -33,7 +56,6 @@ let populateIngredients = ()=>{
         row.appendChild(add);
     
         let name = document.createElement("td");
-        
         name.innerText = ingredient.name;
         row.appendChild(name);
     
@@ -49,7 +71,6 @@ let populateIngredients = ()=>{
 
         quantity.appendChild(quantityInput);
         row.appendChild(quantity);
-    
         let unit = document.createElement("td");
         unit.innerText = ingredient.unitType;
         row.appendChild(unit);
@@ -80,7 +101,6 @@ let newIngredientField = ()=>{
     categoryInput.type = "text"
     category.appendChild(categoryInput);
     row.appendChild(category);
-
     let quantity = document.createElement("td");
     let quantityInput = document.createElement("input");
     quantityInput.type = "number";
@@ -98,6 +118,131 @@ let newIngredientField = ()=>{
     newIngredientElements.push(row);
 }
 
+let createIngredientsList = ()=>{
+    data.existing = [];
+    for(let ingredient of existingIngredientElements){
+        if(ingredient.childNodes[0].childNodes[0].checked){
+            data.existing.push({
+                id: ingredient.id,
+                name: ingredient.childNodes[1].childNodes[0].nodeValue,
+                category: ingredient.childNodes[2].childNodes[0].nodeValue,
+                quantity: ingredient.childNodes[3].childNodes[0].value
+            });
+        }
+    }
+
+    data.new = [];
+    let id = 0;
+    for(let ingredient of newIngredientElements){
+        data.new.push({
+            id: id,
+            name: ingredient.childNodes[0].childNodes[0].value,
+            category: ingredient.childNodes[1].childNodes[0].value,
+            quantity: ingredient.childNodes[2].childNodes[0].value,
+            unitType: ingredient.childNodes[3].childNodes[0].value
+        });
+        id++;
+    }
+}
+
+//Recipe functions
+let showRecipe = ()=>{
+    let title = document.querySelector("#recipeName");
+    title.innerText = recipeData[recipeDataIndex].name;
+
+    let body = document.querySelector("#recipes tbody");
+    for(let ing of recipeData[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 data.existing){
+            let newOption = document.createElement("option");
+            newOption.innerText = ingredient.name;
+            newOption.value = ingredient.id;
+            ingName.appendChild(newOption);
+        }
+        for(let ingredient of data.new){
+            let newOption = document.createElement("option");
+            newOption.innerText = ingredient.name;
+            newOption.value = ingredient.name;
+            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.name;
+        quantTd.appendChild(ingQuant);
+    }
+
+    let nextButton = document.querySelector("#next");
+    if(recipeDataIndex === recipeData.length - 1){
+        nextButton.innerText = "Finish";
+        nextButton.onclick = submitAll;
+    }else{
+        nextButton.innerText = "Next Recipe";
+        nextButton.onclick = ()=>{changeRecipe(1)};
+    }
+}
+
+let addRecipeIngredientField = ()=>{
+    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.existing){
+        let newOption = document.createElement("option");
+        newOption.innerText = ingredient.name;
+        newOption.value = ingredient.id;
+        ingName.appendChild(newOption);
+    }
+    for(let ingredient of data.new){
+        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 changeRecipe = (num)=>{
+    let body = document.querySelector("#recipes tbody");
+
+    let recipeIngredients = [];
+    while(body.hasChildNodes()){
+        let row = body.firstChild;
+        recipeIngredients.push({
+            id: row.childNodes[0].childNodes[0].value,
+            quantity: row.childNodes[1].childNodes[0].value
+        });
+
+        body.removeChild(row);
+    }
+    recipeDataIndex += num;
+    showRecipe();
+}
+
+let submitAll = ()=>{
+    console.log("something");
+}
 
 populateIngredients();
 updateState(0);