Create ability to add an existing ingredient

controllers/home.js

@@ -331,7 +331,14 @@ module.exports = {
                 merchant.inventory.push(req.body);
                 merchant.save()
                     .then((newMerchant)=>{
-                        return res.json(newMerchant);
+                        Ingredient.findOne({_id: req.body.ingredient})
+                            .then((ingredient)=>{
+                                return res.json(ingredient);
+                            })
+                            .catch((err)=>{
+                                console.log(err);
+                                return res.render("error");
+                            });
                     })
                     .catch((err)=>{
                         console.log(err);

views/inventoryPage/addIngredient.js

@@ -1,117 +1,55 @@
 let addIngredientObj = {
+    isPopulated: false,
+
     display: function(){
         controller.clearScreen();
         controller.addIngredientStrand.style.display = "flex";
 
-        this.displayAdd();
+        if(!this.isPopulated){
+            this.populateIngredients();
+            this.isPopulated = true;
+        }
     },
-    
-    //Fixerup
-    //Display the modal to allow for adding a new ingredient
-    displayAdd: function(){
-        document.querySelector("#existingIngredient").style.display = "block";
-        document.querySelector("#quantityInput").style.display = "none";
-        document.querySelector("#newIngredient").style.display = "none";
-        document.querySelector("#createNew").onclick = ()=>{this.displayNew();};
-
-        let modal = document.querySelector(".add-ingredient");
-
-        let removeModal = (modal)=>{modal.style.visibility = "hidden";}
-
-        modal.onclick = ()=>{removeModal(modal);};
-
-        modal.style.visibility = "visible";
 
+    populateIngredients: function(){
         axios.get("/ingredients")
             .then((ingredients)=>{
-                let tbody = document.querySelector("#existingIngredient table tbody");
-
-                while(tbody.children.length > 0){
-                    tbody.removeChild(tbody.firstChild);
-                }
+                let select = document.querySelector("#addIngredientStrand select");
 
                 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 = ()=>{this.configureAddIngredient(ingredient);};
-                    row.appendChild(addButton);
+                    let option = document.createElement("option");
+                    option.value = ingredient._id;
+                    option.innerText = `${ingredient.name} (${ingredient.unit})`;
+                    select.appendChild(option);
                 }
             })
             .catch((err)=>{
-                banner.createError("Failed to retrieve ingredients list");
+                banner.createError("Could not reach the database");
             });
     },
 
-    configureAddIngredient: function(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})`;
+    submitAdd: function(){
+        event.preventDefault();
 
-        let button = document.querySelector("#addIngredient");
-        let input = document.querySelector("#quantityInput input");
-
-        button.onclick = ()=>{this.addIngredient({ingredient: ingredient, quantity: input.value});};
-    },
-
-    createIngredient: function(){
-        let newItem = {
-            ingredient: {
-                name: document.querySelector("#newName").value,
-                category: document.querySelector("#newCategory").value,
-                unit: document.querySelector("#newUnit").value
-            },
-            quantity: document.querySelector("#newQuantity").value
+        let item = {
+            ingredient: document.querySelector("#addName").value,
+            quantity: document.querySelector("#addQuantity").value
         }
 
-        this.addIngredient(newItem);
-    },
+        if(validator.ingredient.quantity){
+            axios.post("/merchant/ingredients/create", item)
+                .then((ingredient)=>{
+                    item.ingredient = ingredient.data;
+                    merchant.inventory.push(item);
 
-    //Update new ingredient on both the page and the database
-    //Close the modal
-    addIngredient: function(item){
-        if(validator.ingredient.all(item.ingredient, item.quantity)){
-            merchant.inventory.push(item);
-            if(item.ingredient._id){
-                axios.post("/merchant/ingredients/create", item)
-                    .then((newMerchant)=>{
-                        this.filter();
-                        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);
-                    });
-            }else{
-                axios.post("/ingredients/createone", item)
-                    .then((newMerchant)=>{
-                        this.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");
-                    });
-            }
-        }
+                    inventoryObj.display();
+                    inventoryObj.filter();
+                })
+                .catch((err)=>{
+                    banner.createError("Something went wrong and the ingredient could not be added");
+                });
 
-        let modal = document.querySelector(".add-ingredient");
-        modal.style.visibility = "hidden";
+            
+        }
     }
 }

views/inventoryPage/inventory.css

@@ -6,89 +6,45 @@
     align-items: center;
 }
 
-.bold-text{
-    font-weight: bold;
-}
 
-.container{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+th{
+    border: 2px solid #ff626b;
+    background: #001b2d;
+    color: darkgray;
+    padding: 3px;
+    min-width: 150px;
+    cursor: pointer;
 }
 
-    .container *{
-        margin: 10px;
-    }
-
-        th{
-            border: 2px solid #ff626b;
-            background: #001b2d;
-            color: darkgray;
-            padding: 3px;
-            min-width: 150px;
-            cursor: pointer;
-        }
-
-        .container th:nth-of-type(5){
-            border: none;
-            background: none;
-            color: white;
-            min-width: 0;
-            cursor: auto;
-        }
-
-        td{
-            border: 1px solid black;
-            text-align: center;
-            padding: 1px 10px;
-        }
-
-        .container td:nth-of-type(5n){
-            border: none;
-        }
-
-        .input-new{
-            display: flex;
-            flex-wrap: nowrap;
-        }
+.container th:nth-of-type(5){
+    border: none;
+    background: none;
+    color: white;
+    min-width: 0;
+    cursor: auto;
+}
 
-        .edit-button{
-            padding: 0;
-            margin: 0;
-        }
+td{
+    border: 1px solid black;
+    text-align: center;
+    padding: 1px 10px;
+}
 
-    .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);
-    }
+.container td:nth-of-type(5n){
+    border: none;
+}
 
-.modal-content{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: white;
-    border-radius: 25px;
+.input-new{
     display: flex;
-    background-size: cover;
-    padding: 50px;
-    max-height: 75%;
-    overflow-y: auto;
+    flex-wrap: nowrap;
 }
 
-    th{
-        cursor: auto;
-    }
+.edit-button{
+    padding: 0;
+    margin: 0;
+}
 
-    .modal-content th:nth-of-type(4){
-        background: none;
-        border: none;
-        min-width: 0;
-    }
+#addIngredientStrand{
+    display: none;
+    justify-content: space-around;
+}

views/inventoryPage/inventory.ejs

@@ -35,47 +35,15 @@
         <div id="recipeStrand"></div>
 
         <div id="addIngredientStrand" class="add-ingredient">
-            <div class="modal-content" onclick="event.stopPropagation()">
-                <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>
-
-                <div id="quantityInput">
-                    <h3 id="quantityInputTitle"></h3>
-                    <input type="number" step="0.01" required>
-                    <button id="addIngredient">Add Ingredient</button>
-                </div>
-
-                <div id="newIngredient">
-                    <label>Ingredient Name:
-                        <input id="newName" type="text">
-                    </label>
-
-                    <label>Category:
-                        <input id="newCategory" type="text">
-                    </label>
-
-                    <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>
+            <button onclick="inventoryObj.display()">Back to Inventory</button>
+            <form onsubmit="addIngredientObj.submitAdd()">
+                <h2>Select Ingredient</h2>
+                <select id="addName"></select>
+                <input id="addQuantity" type="number" step="0.01">
+                <input type="submit" value="Add Ingredient">
+            </form>
+            <div>
+                <h2>Create New Ingredient</h2>
             </div>
         </div>