Bug fixes

views/inventoryPage/addIngredient.js

@@ -0,0 +1,115 @@
+let addIngredientsObj = {
+    display: function(){
+        controller.clearScreen();
+        controller.addIngredientStrand.style.display = "flex";
+    },
+    
+    //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";
+
+        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 = ()=>{this.configureAddIngredient(ingredient);};
+                    row.appendChild(addButton);
+                }
+            })
+            .catch((err)=>{
+                banner.createError("Failed to retrieve ingredients list");
+            });
+    },
+
+    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})`;
+
+        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
+        }
+
+        this.addIngredient(newItem);
+    },
+
+    //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");
+                    });
+            }
+        }
+
+        let modal = document.querySelector(".add-ingredient");
+        modal.style.visibility = "hidden";
+    }
+}

views/inventoryPage/controller.js

@@ -0,0 +1,13 @@
+let controller = {
+    inventoryStrand: document.querySelector("#inventoryStrand"),
+    recipeStrand: document.querySelector("#recipeStrand"),
+    addIngredientStrand: document.querySelector("#addIngredientStrand"),
+
+    clearScreen: function(){
+        this.inventoryStrand.style.display = "none";
+        this.recipeStrand.style.display = "none";
+        this.addIngredientStrand.style.display = "none";
+    }
+}
+
+inventoryObj.display();

views/inventoryPage/inventory.css

@@ -1,5 +1,11 @@
 *{margin:0;padding:0}
 
+#inventoryStrand{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .bold-text{
     font-weight: bold;
 }

views/inventoryPage/inventory.ejs

@@ -9,7 +9,7 @@
 
         <% include ../shared/banner %>
 
-        <div class="container">
+        <div id="inventoryStrand">
             <h1><%= merchant.name %> inventory</h1>
 
             <a href="/recipes">View Recipes</a>
@@ -32,7 +32,9 @@
             </table>
         </div>
 
-        <div class="add-ingredient">
+        <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>
@@ -81,5 +83,8 @@
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="../shared/validation.js"></script>
         <script src="/inventoryPage/inventory.js"></script>
+        <script src="/inventoryPage/recipe.js"></script>
+        <script src="/inventoryPage/addIngredient.js"></script>
+        <script src="/inventoryPage/controller.js"></script>
     </body>
 </html>

views/inventoryPage/inventory.js

@@ -1,12 +1,24 @@
-let inventoryPage = {
-    items: [], //the ingredients to be displayed
-    currentSort: "", //boolean used for sorting
+let inventoryObj = {
+    items: [],
+    currentSort: "",
+    isPopulated: false,
+
+    display: function(){
+        controller.clearScreen();
+        controller.inventoryStrand.style.display = "flex";
+
+        if(!this.isPopulated){
+            this.filter();
+            this.isPopulated = true;
+        }
+    },
+
+    populateIngredients: function(){
+        let tbody = document.querySelector("#inventoryStrand tbody");
+        console.log("something else");
+        console.log(tbody);
 
-    //Remove any existing ingredients in table
-    //loop through this.items and create rows for the table
-    renderIngredients: function(){
-        let tbody = document.querySelector(".container table tbody");
-        while(tbody.hasChildNodes()){
+        while(tbody.children.length > 0){
             tbody.removeChild(tbody.firstChild);
         }
 
@@ -56,7 +68,8 @@ let inventoryPage = {
             this.items.sort((a, b) => (a[property] > b[property]) ? 1 : -1);
             this.currentSort = property;
         }
-        this.renderIngredients();
+
+        this.populateIngredients();
     },
 
     //Empty this.items list
@@ -77,7 +90,6 @@ let inventoryPage = {
         }
 
         this.sortIngredients("name");
-        this.renderIngredients(this.items);
     },
 
     //Create input allowing for user edit of ingredient
@@ -147,122 +159,5 @@ let inventoryPage = {
                 banner.createError("There was an error and the ingredient has not been removed from your inventory");
                 console.log(err);
             });
-    },
-
-    //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";
-
-        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 = ()=>{this.configureAddIngredient(ingredient);};
-                    row.appendChild(addButton);
-                }
-            })
-            .catch((err)=>{
-                banner.createError("Failed to retrieve ingredients list");
-            });
-    },
-
-    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})`;
-
-        let button = document.querySelector("#addIngredient");
-        let input = document.querySelector("#quantityInput input");
-
-        button.onclick = ()=>{this.addIngredient({ingredient: ingredient, quantity: input.value});};
-    },
-
-    displayNew: function(){
-        document.querySelector("#existingIngredient").style.display = "none";
-        document.querySelector("#quantityInput").style.display = "none";
-        document.querySelector("#newIngredient").style.display = "block";
-        document.querySelector("#createIngredient").onclick = ()=>{this.createIngredient();};
-    },
-
-    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
-        }
-
-        this.addIngredient(newItem);
-    },
-
-    //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");
-                    });
-            }
-        }
-
-        let modal = document.querySelector(".add-ingredient");
-        modal.style.visibility = "hidden";
-    }
-}
-
-inventoryPage.filter();
+    },   
+}

views/inventoryPage/recipe.js

@@ -0,0 +1,6 @@
+let recipeObj = {
+    display: function(){
+        controller.clearScreen();
+        controller.recipeStrand.style.display = "flex";
+    }
+}