Implement ability to add ingredients to merchant inventory. New or existing.

controllers/home.js

@@ -1,5 +1,4 @@
 const axios = require("axios");
-// const session = require("express-session");
 
 const Merchant = require("../models/merchant");
 const Ingredient = require("../models/ingredient");
@@ -148,26 +147,35 @@ module.exports = {
     },
 
     createIngredient: function(req, res){
-        Ingredient.create(req.body.ingredient)
+        Ingredient.create(req.body.ingredient.ingredient)
             .then((ingredient)=>{
-                Merchant.updateOne(
-                    {cloverId: merchantId},
-                    {$push: {inventory: {
-                        ingredient: ingredient._id.toString(), 
-                        quantity: req.body.quantity
-                    }}}
-                    )
+                Merchant.findOne({_id: req.body.merchantId})
                     .then((merchant)=>{
-                        return res.json(merchant);
+                        let item = {
+                            ingredient: ingredient,
+                            quantity: req.body.ingredient.quantity
+                        }
+                        merchant.inventory.push(item);
+                        merchant.save()
+                            .then((merchant)=>{
+                                console.log("something");
+                                return res.json(merchant);
+                            })
+                            .catch((err)=>{
+                                console.log(err);
+                                return res.render("error");
+                            });
                     })
                     .catch((err)=>{
-                        return res.json(err);
+                        console.log(err);
+                        return res.render("error");
                     });
             })
             .catch((err)=>{
                 console.log(err);
-                return res.json("error");
+                return res.render("error");
             });
+            
     },
 
     displayRecipes: function(req, res){
@@ -269,7 +277,33 @@ module.exports = {
             });
     },
 
-    demoLogin: function(req, res){
-        return res.render("loginPage/login");
+    getIngredients: function(req, res){
+        Ingredient.find()
+            .then((ingredients)=>{
+                return res.json(ingredients);
+            })
+            .catch((err)=>{
+                console.log(err);
+                return res.render("error");
+            });
+    },
+
+    addMerchantIngredient: function(req, res){
+        Merchant.findOne({_id: req.body.merchantId})
+            .then((merchant)=>{
+                merchant.inventory.push(req.body.ingredient);
+                merchant.save()
+                    .then((newMerchant)=>{
+                        return res.json(newMerchant);
+                    })
+                    .catch((err)=>{
+                        console.log(err);
+                        return res.render("error");
+                    });
+            })
+            .catch((err)=>{
+                console.log(err);
+                return res.render("error");
+            });
     }
 }

routes.js

@@ -6,9 +6,11 @@ module.exports = function(app){
     app.get("/getrecipes", home.getCloverRecipes);
     app.post("/merchant/create", home.createMerchant);
     app.post("/merchant/update", home.updateMerchant);
-    app.post("/ingredients/create", home.createNewIngredients);  //update?
-    app.post("/ingredients/createone", home.createIngredient);  //update?
+    app.post("/ingredients/create", home.createNewIngredients);
+    app.post("/ingredients/createone", home.createIngredient);
     app.get("/recipes", home.displayRecipes);
-    app.post("/recipes/ingredients/remove", home.deleteRecipeIngredient);  //update?
+    app.post("/recipes/ingredients/remove", home.deleteRecipeIngredient);
     app.get("/recipes/update", home.updateRecipes);
+    app.get("/ingredients", home.getIngredients);
+    app.post("/merchant/ingredients/create", home.addMerchantIngredient);
 }

views/inventory/inventory.css

@@ -1,5 +1,9 @@
 *{margin:0;padding:0}
 
+.bold-text{
+    font-weight: bold;
+}
+
 .container{
     display: flex;
     flex-direction: column;
@@ -10,53 +14,54 @@
         margin: 10px;
     }
 
-    th{
-        border: 2px solid #ff626b;
-        background: #001b2d;
-        color: darkgray;
-        padding: 3px;
-        min-width: 150px;
-        cursor: pointer;
-    }
-    th:nth-of-type(5){
-        border: none;
-        background: none;
-        color: white;
-        min-width: 0;
-        cursor: auto;
-    }
+        th{
+            border: 2px solid #ff626b;
+            background: #001b2d;
+            color: darkgray;
+            padding: 3px;
+            min-width: 150px;
+            cursor: pointer;
+        }
 
-    td{
-        border: 1px solid black;
-        text-align: center;
-        padding: 1px 10px;
-    }
+        .container th:nth-of-type(5){
+            border: none;
+            background: none;
+            color: white;
+            min-width: 0;
+            cursor: auto;
+        }
 
-    td:nth-of-type(5n){
-        border: none;
-    }
+        td{
+            border: 1px solid black;
+            text-align: center;
+            padding: 1px 10px;
+        }
 
-    .input-new{
-        display: flex;
-        flex-wrap: nowrap;
-    }
+        .container td:nth-of-type(5n){
+            border: none;
+        }
 
-    .edit-button{
-        padding: 0;
-        margin: 0;
-    }
+        .input-new{
+            display: flex;
+            flex-wrap: nowrap;
+        }
 
-.add-ingredient{
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(11, 20, 8, 0.79);
-    opacity: 1;
-    visibility: hidden;
-    transform: scale(1.1);
-}
+        .edit-button{
+            padding: 0;
+            margin: 0;
+        }
+
+    .add-ingredient{
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(11, 20, 8, 0.79);
+        opacity: 1;
+        visibility: hidden;
+        transform: scale(1.1);
+    }
 
 .modal-content{
     position: absolute;
@@ -66,7 +71,16 @@
     background: white;
     border-radius: 25px;
     display: flex;
-    flex-direction: column;
     background-size: cover;
     padding: 50px;
-}
+}
+
+    th{
+        cursor: auto;
+    }
+
+    .modal-content th:nth-of-type(4){
+        background: none;
+        border: none;
+        min-width: 0;
+    }

views/inventory/inventory.ejs

@@ -32,23 +32,46 @@
 
         <div class="add-ingredient">
             <div class="modal-content" onclick="event.stopPropagation()">
-                <label>Ingredient name:
-                    <input type="text">
-                </label>
+                <div id="existingIngredient">
+                    <button id="createNew">Create New</button>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Ingredient</th>
+                                <th>Category</th>
+                                <th>Unit</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
+                </div>
 
-                <label>Category:
-                    <input type="text">
-                </label>
+                <div id="quantityInput">
+                    <h3 id="quantityInputTitle"></h3>
+                    <input type="number" step="0.01" required>
+                    <button id="addIngredient">Add Ingredient</button>
+                </div>
 
-                <label>Quantity:
-                    <input type="number" step="0.01">
-                </label>
+                <div id="newIngredient">
+                    <label>Ingredient Name:
+                        <input id="newName" type="text">
+                    </label>
 
-                <label>Unit:
-                    <input type="text">
-                </label>
+                    <label>Category:
+                        <input id="newCategory" type="text">
+                    </label>
 
-                <button onclick="addIngredient()">Create Ingredient</button>
+                    <label>Quantity:
+                        <input id="newQuantity" type="number" step="0.01">
+                    </label>
+
+                    <label>Unit:
+                        <input id="newUnit" type="text">
+                    </label>
+
+                    <button id="createIngredient">Create Ingredient</button>
+                </div>
             </div>
         </div>
 

views/inventory/inventory.js

@@ -70,7 +70,7 @@ let filter = ()=>{
                 name: item.ingredient.name,
                 category: item.ingredient.category,
                 quantity: item.quantity,
-                unit: item.ingredient.unitType
+                unit: item.ingredient.unit
             });
         }
     }
@@ -154,48 +154,113 @@ let removeIngredient = (id, row)=>{
 
 //Display the modal to allow for adding a new ingredient
 let displayAdd = ()=>{
+    document.querySelector("#existingIngredient").style.display = "block";
+    document.querySelector("#quantityInput").style.display = "none";
+    document.querySelector("#newIngredient").style.display = "none";
+    document.querySelector("#createNew").onclick = ()=>{displayNew();};
+
     let modal = document.querySelector(".add-ingredient");
 
     let removeModal = (modal)=>{modal.style.visibility = "hidden";}
 
-    modal.onclick = ()=>{removeModal(modal);}
+    modal.onclick = ()=>{removeModal(modal);};
 
     modal.style.visibility = "visible";
+
+    axios.get("/ingredients")
+        .then((ingredients)=>{
+            let tbody = document.querySelector("#existingIngredient table tbody");
+
+            while(tbody.children.length > 0){
+                tbody.removeChild(tbody.firstChild);
+            }
+
+            for(let ingredient of ingredients.data){
+                let row = document.createElement("tr");
+                tbody.appendChild(row);
+
+                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 unit = document.createElement("td");
+                unit.innerText = ingredient.unit;
+                row.appendChild(unit);
+
+                let addButton = document.createElement("button");
+                addButton.innerText = "Add";
+                addButton.onclick = ()=>{configureAddIngredient(ingredient);};
+                row.appendChild(addButton);
+            }
+        })
+        .catch((err)=>{
+            banner.createError("Failed to retrieve ingredients list");
+        });
 }
 
-//Update new ingredient on both the page and the database
-//Close the modal
-let addIngredient = ()=>{
-    let content = document.querySelector(".modal-content");
+let configureAddIngredient = (ingredient)=>{
+    document.querySelector("#existingIngredient").style.display = "none";
+    document.querySelector("#quantityInput").style.display = "block";
+    document.querySelector("#newIngredient").style.display = "none";
+    
+    document.querySelector("#quantityInputTitle").innerText = `${ingredient.name} (${ingredient.unit})`;
 
-    let newIngredient = {
+    let button = document.querySelector("#addIngredient");
+    let input = document.querySelector("#quantityInput input");
+
+    button.onclick = ()=>{addIngredient({ingredient: ingredient, quantity: input.value});};
+}
+
+let displayNew = ()=>{
+    document.querySelector("#existingIngredient").style.display = "none";
+    document.querySelector("#quantityInput").style.display = "none";
+    document.querySelector("#newIngredient").style.display = "block";
+    document.querySelector("#createIngredient").onclick = ()=>{createIngredient();};
+}
+
+let createIngredient = ()=>{
+    let newItem = {
         ingredient: {
-            name: content.children[0].children[0].value,
-            category: content.children[1].children[0].value,
-            unitType: content.children[3].children[0].value
+            name: document.querySelector("#newName").value,
+            category: document.querySelector("#newCategory").value,
+            unit: document.querySelector("#newUnit").value
         },
-        quantity: content.children[2].children[0].value
+        quantity: document.querySelector("#newQuantity").value
     }
 
-    if(validator.ingredient.all(newIngredient.ingredient, newIngredient.quantity)){
-        axios.post("/ingredients/createone", newIngredient)
-            .then((ingredient)=>{
-                items.push({
-                    id: ingredient._id,
-                    name: newIngredient.ingredient.name,
-                    category: newIngredient.ingredient.category,
-                    quantity: newIngredient.quantity,
-                    unit: newIngredient.ingredient.unitType
+    addIngredient(newItem);
+}
+
+//Update new ingredient on both the page and the database
+//Close the modal
+let addIngredient = (item)=>{
+    if(validator.ingredient.all(item.ingredient, item.quantity)){
+        merchant.inventory.push(item);
+        if(item.ingredient._id){
+            axios.post("/merchant/ingredients/create", {ingredient: item, merchantId: merchant._id})
+                .then((newMerchant)=>{
+                    filter();
+                    banner.createNotification("The new ingredient has been successfully added to your inventory");
                 })
-                
-                sortIngredients("name");
-                renderIngredients();
-                banner.createNotification("The new ingredient has been successfully added to your inventory");
-            })
-            .catch((err)=>{
-                banner.createError("There was an error and the ingredient could not be added to your inventory");
-                console.log(err);
-            });
+                .catch((err)=>{
+                    banner.createError("There was an error and the ingredient could not be added to your inventory");
+                    console.log(err);
+                });
+        }else{
+            axios.post("/ingredients/createone", {ingredient: item, merchantId: merchant._id})
+                .then((newMerchant)=>{
+                    filter();
+                    banner.createNotification("The new ingredient has been successfully added to your inventory");
+                })
+                .catch((err)=>{
+                    console.log(err);
+                    banner.createError("There was an error and the ingredient could not be added to your inventory");
+                });
+        }
     }
 
     let modal = document.querySelector(".add-ingredient");

views/merchantSetupPage/ingredientSetup.js

@@ -34,7 +34,7 @@ let ingredientSetup = {
             quantity.appendChild(quantityInput);
             row.appendChild(quantity);
             let unit = document.createElement("td");
-            unit.innerText = ingredient.unitType;
+            unit.innerText = ingredient.unit;
             row.appendChild(unit);
         
             let idField = document.createElement("input");
@@ -131,7 +131,7 @@ let ingredientSetup = {
                     id: ingredient.id,
                     name: ingredient.children[1].textContent,
                     quantity: ingredient.children[3].children[0].value,
-                    unitType: ingredient.children[4].textContent
+                    unit: ingredient.children[4].textContent
                 });
             }
         }
@@ -142,7 +142,7 @@ let ingredientSetup = {
             newIngredient.push({
                 name: ingredient.children[0].children[0].value,
                 category: ingredient.children[1].children[0].value,
-                unitType: ingredient.children[3].children[0].value
+                unit: ingredient.children[3].children[0].value
             });
             newIngredientQuantity.push({
                 name: ingredient.children[0].children[0].value,
@@ -166,7 +166,7 @@ let ingredientSetup = {
                         let newIngredient = {
                             id: ingredient._id,
                             name: ingredient.name,
-                            unitType: ingredient.unitType
+                            unit: ingredient.unit
                         }
     
                         for(let item of newIngredientQuantity){

views/recipesPage/recipes.js

@@ -54,7 +54,7 @@ let recipesPage = {
             row.appendChild(name);
 
             let quantity = document.createElement("td");
-            quantity.innerText = `${ingredient.quantity} ${ingredient.ingredient.unitType}`;
+            quantity.innerText = `${ingredient.quantity} ${ingredient.ingredient.unit}`;
             row.appendChild(quantity);
 
             let actions = document.createElement("td");
@@ -109,7 +109,7 @@ let recipesPage = {
         td.appendChild(input);
 
         let para = document.createElement("p");
-        para.innerText = ingredient.ingredient.unitType;
+        para.innerText = ingredient.ingredient.unit;
         td.appendChild(para);
 
         let button = row.children[2].children[0];
@@ -123,7 +123,7 @@ let recipesPage = {
         while(td.children.length > 0){
             td.removeChild(td.firstChild);
         }
-        td.innerText = `${ingredient.quantity} ${ingredient.ingredient.unitType}`;
+        td.innerText = `${ingredient.quantity} ${ingredient.ingredient.unit}`;
 
         let button = row.children[2].children[0];
         button.innerText = "Edit";