Add ability to create new ingredients

controllers/home.js

@@ -169,11 +169,9 @@ module.exports = {
     },
 
     removeIngredient: (req, res)=>{
-        console.log(req.body);
         Merchant.findOne({cloverId: merchantId})
             .then((merchant)=>{
                 for(let i = 0; i < merchant.inventory.length; i++){
-                    console.log(`${req.body.id} ${merchant.inventory[i].ingredient.toString()}`);
                     if(req.body.id === merchant.inventory[i].ingredient.toString()){
                         merchant.inventory.splice(i, 1);
                     }
@@ -192,5 +190,28 @@ module.exports = {
                 console.log(err);
                 return res.json(err);
             });
+    },
+
+    createIngredient: (req, res)=>{
+        Ingredient.create(req.body.ingredient)
+            .then((ingredient)=>{
+                Merchant.updateOne(
+                    {cloverId: merchantId},
+                    {$push: {inventory: {
+                        ingredient: ingredient._id.toString(), 
+                        quantity: req.body.quantity
+                    }}}
+                    )
+                    .then((merchant)=>{
+                        return res.json(merchant);
+                    })
+                    .catch((err)=>{
+                        return res.json(err);
+                    });
+            })
+            .catch((err)=>{
+                console.log(err);
+                return res.json("error");
+            });
     }
 }

routes.js

@@ -8,4 +8,5 @@ module.exports = function(app){
     app.post("/ingredients/create", home.createNewIngredients);
     app.post("/ingredients/update", home.updateIngredient);
     app.post("/ingredients/remove", home.removeIngredient);
+    app.post("/ingredients/createone", home.createIngredient);
 }

views/inventory/inventory.css

@@ -44,4 +44,29 @@
     .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;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    border-radius: 25px;
+    display: flex;
+    flex-direction: column;
+    background-size: cover;
+    padding: 50px;
+}

views/inventory/inventory.ejs

@@ -10,6 +10,8 @@
         <div class="container">
             <h1><%= merchant.name %> inventory</h1>
 
+            <button onclick="displayAdd()">Add Ingredient</button>
+
             <input id="filter" onkeyup="filter()" type="text" placeholder="Start typing to filter">
 
             <table>
@@ -26,6 +28,28 @@
             </table>
         </div>
 
+        <div class="add-ingredient">
+            <div class="modal-content" onclick="event.stopPropagation()">
+                <label>Ingredient name:
+                    <input type="text">
+                </label>
+
+                <label>Category:
+                    <input type="text">
+                </label>
+
+                <label>Quantity:
+                    <input type="number" step="0.01">
+                </label>
+
+                <label>Unit:
+                    <input type="text">
+                </label>
+
+                <button onclick="addIngredient()">Create Ingredient</button>
+            </div>
+        </div>
+
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="/inventory/inventory.js"></script>

views/inventory/inventory.js

@@ -1,5 +1,6 @@
 let items = [];
 let tbody = document.querySelector("tbody");
+console.log(merchant);
 
 let renderIngredients = ()=>{
     while(tbody.hasChildNodes()){
@@ -123,4 +124,51 @@ let removeIngredient = (id, row)=>{
         });
 }
 
+let displayAdd = ()=>{
+    let modal = document.querySelector(".add-ingredient");
+    let content = document.querySelector(".modal-content");
+
+    let removeModal = (modal)=>{modal.style.visibility = "hidden";}
+
+    modal.onclick = ()=>{removeModal(modal);}
+
+    modal.style.visibility = "visible";
+}
+
+let addIngredient = ()=>{
+    let content = document.querySelector(".modal-content");
+
+    let newIngredient = {
+        ingredient: {
+            name: content.children[0].children[0].value,
+            category: content.children[1].children[0].value,
+            unitType: content.children[3].children[0].value
+        },
+        quantity: content.children[2].children[0].value
+    }
+
+    console.log(newIngredient);
+
+    axios.post("/ingredients/createone", newIngredient)
+        .then((ingredient)=>{
+            console.log(ingredient);
+            items.push({
+                id: ingredient._id,
+                name: newIngredient.ingredient.name,
+                category: newIngredient.ingredient.category,
+                quantity: newIngredient.quantity,
+                unit: newIngredient.ingredient.unitType
+            })
+            
+            sortIngredients("name");
+            renderIngredients();
+        })
+        .catch((err)=>{
+            console.log(err);
+        });
+
+    let modal = document.querySelector(".add-ingredient");
+    modal.style.visibility = "hidden";
+}
+
 filter();