Update all onclicks that call things that no longer exist

views/dashboardPage/bundle.js

@@ -841,6 +841,24 @@ controller = {
             case "addIngredients":
                 addIngredients.display(Merchant);
                 break;
+            case "recipeDetails":
+                recipeDetails.display(data);
+                break;
+            case "newRecipe":
+                newRecipe.display();
+                break;
+            case "orderDetails":
+                orderDetails.display(data);
+                break;
+            case "newOrder":
+                newOrder.display();
+                break;
+            case "transactionDetails":
+                transactionDetails.display(data);
+                break;
+            case "newTransaction":
+                newTransaction.display();
+                break;
         }
 
         if(window.screen.availWidth <= 1000){
@@ -1243,8 +1261,8 @@ module.exports = {
             let li = document.createElement("li");
             li.innerText = recipes[i].name;
             li.onclick = ()=>{
-                changeStrand("recipeBookStrand");
-                recipeDetailsComp.display(recipes[i]);
+                controller.openStrand("recipeBook");
+                controller.openSidebar("recipeDetails", recipes[i]);
             }
             ul.appendChild(li);
         }
@@ -1276,6 +1294,9 @@ module.exports = {
                 button.classList.add("unitActive");
             }
         }
+
+        document.getElementById("defaultUnit").onclick = ()=>{this.changeUnitDefault};
+        document.getElementById("editSubmitButton").onclick = ()=>{this.editSubmit()};
     },
 
     remove: function(merchant){
@@ -1522,9 +1543,11 @@ module.exports = {
 },{}],10:[function(require,module,exports){
 module.exports = {
     display: function(){
-        document.querySelector("#newIngName").value = "";
-        document.querySelector("#newIngCategory").value = "";
-        document.querySelector("#newIngQuantity").value = 0;
+        document.getElementById("newIngName").value = "";
+        document.getElementById("newIngCategory").value = "";
+        document.getElementById("newIngQuantity").value = 0;
+
+        document.getElementById("submitNewIng").onclick = ()=>{this.submit()};
     },
 
     submit: function(){
@@ -1597,7 +1620,7 @@ module.exports = {
                 let category = template.cloneNode(true);
     
                 category.children[0].children[0].innerText = categories[i].name;
-                category.children[0].children[1].onclick = ()=>{addIngredientsComp.toggleAddIngredient(category)};
+                category.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(category)};
                 category.children[0].children[1].children[1].style.display = "none";
                 category.children[1].style.display = "none";
                 
@@ -1615,6 +1638,8 @@ module.exports = {
                 }
             }
 
+            document.getElementById("submitNewOrder").onclick = ()=>{this.submit()};
+
             this.isPopulated = true;
         }
     },
@@ -1660,6 +1685,23 @@ module.exports = {
         container.appendChild(ingredientDiv);
     },
 
+    toggleAddIngredient: function(categoryElement){
+        let button = categoryElement.children[0].children[1];
+        let ingredientDisplay = categoryElement.children[1];
+
+        if(ingredientDisplay.style.display === "none"){
+            ingredientDisplay.style.display = "flex";
+
+            button.children[0].style.display = "none";
+            button.children[1].style.display = "block";
+        }else{
+            ingredientDisplay.style.display = "none";
+
+            button.children[0].style.display = "block";
+            button.children[1].style.display = "none";
+        }
+    },
+
     submit: function(){
         let categoriesList = document.getElementById("newOrderAdded");
         let ingredients = [];
@@ -1851,6 +1893,8 @@ module.exports = {
 
             recipeDiv.children[0].innerText = merchant.recipes[i].name;
         }
+
+        document.getElementById("submitNewTransaction").onclick = ()=>{this.submit()};
     },
 
     submit: function(){
@@ -2065,8 +2109,7 @@ module.exports = {
             row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
             row.children[3].innerText = `$${(totalCost / 100).toFixed(2)}`;
             row.order = merchant.orders[i];
-            row.onclick = ()=>{orderDetailsComp.display(merchant.orders[i])};
-
+            row.onclick = ()=>{controller.openSidebar("orderDetails", merchant.orders[i])};
             listDiv.appendChild(row);
         }
     },
@@ -2180,7 +2223,7 @@ module.exports = {
 
         for(let i = 0; i < merchant.recipes.length; i++){
             let recipeDiv = template.cloneNode(true);
-            recipeDiv.onclick = ()=>{recipeDetailsComp.display(merchant.recipes[i])};
+            recipeDiv.onclick = ()=>{ocntroller.openSidebar("recipeDetails", merchant.recipes[i])};
             recipeDiv._name = merchant.recipes[i].name;
             recipeList.appendChild(recipeDiv);
 
@@ -2276,16 +2319,16 @@ module.exports = {
     display: function(recipe){
         this.recipe = recipe;
 
-        document.querySelector("#recipeName").style.display = "block";
-        document.querySelector("#recipeNameIn").style.display = "none";
+        document.getElementById("recipeName").style.display = "block";
+        document.getElementById("recipeNameIn").style.display = "none";
         document.querySelector("#recipeDetails h1").innerText = recipe.name;
 
-        let ingredientList = document.querySelector("#recipeIngredientList");
+        let ingredientList = document.getElementById("recipeIngredientList");
         while(ingredientList.children.length > 0){
             ingredientList.removeChild(ingredientList.firstChild);
         }
 
-        let template = document.querySelector("#recipeIngredient").content.children[0];
+        let template = document.getElementById("recipeIngredient").content.children[0];
         for(let i = 0; i < recipe.ingredients.length; i++){
             ingredientDiv = template.cloneNode(true);
 
@@ -2297,14 +2340,19 @@ module.exports = {
             ingredientList.appendChild(ingredientDiv);
         }
 
-        document.querySelector("#addRecIng").style.display = "none";
+        document.getElementById("addRecIng").style.display = "none";
 
-        let price = document.querySelector("#recipePrice");
+        let price = document.getElementById("recipePrice");
         price.children[1].style.display = "block";
         price.children[2].style.display = "none";
         price.children[1].innerText = `$${(recipe.price / 100).toFixed(2)}`;
 
-        document.querySelector("#recipeUpdate").style.display = "none";
+        document.getElementById("recipeUpdate").style.display = "none";
+
+        document.getElementById("editRecipeBtn").onclick = ()=>{this.edit()};
+        document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove()};
+        document.getElementById("addRecIng").onclick = ()=>{this.displayAddIngredient()};
+        document.getElementById("recipeUpdate").onclick = ()=>{this.update()};
     },
 
     edit: function(){
@@ -2475,6 +2523,8 @@ module.exports = {
         document.getElementById("transactionTime").innerText = transaction.date.toLocaleTimeString();
         document.getElementById("totalRecipes").innerText = `${totalRecipes} recipes`;
         document.getElementById("totalPrice").innerText = `$${(totalPrice / 100).toFixed(2)}`;
+
+        document.getElementById("removeTransBtn").onclick = ()=>{this.remove()};
     },
 
     remove: function(){
@@ -2554,7 +2604,7 @@ module.exports = {
                 let transactionDiv = template.cloneNode(true);
                 let transaction = merchant.transactions[i];
 
-                transactionDiv.onclick = ()=>{transactionDetailsComp.display(transaction)};
+                transactionDiv.onclick = ()=>{controller.openStrand("transactionDetails", transaction)};
                 transactionsList.appendChild(transactionDiv);
 
                 let totalRecipes = 0;
@@ -2644,7 +2694,7 @@ module.exports = {
                         transactionDiv.children[0].innerText = `${transaction.date.toLocaleDateString()} ${transaction.date.toLocaleTimeString()}`;
                         transactionDiv.children[1].innerText = `${recipeCount} recipes sold`;
                         transactionDiv.children[2].innerText = `$${(cost / 100).toFixed(2)}`;
-                        transactionDiv.onclick = ()=>{transactionDetailsComp.display(transaction)};
+                        transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
                         transactionList.appendChild(transactionDiv);
                     }
                 }

views/dashboardPage/dashboard.ejs

@@ -212,7 +212,7 @@
                     <h1 class="strandTitle">RECIPE BOOK</h1>
 
                     <% if(merchant.pos === "none"){ %>
-                        <button class="button mobileHide" onclick="newRecipeComp.display()">NEW</button>
+                        <button class="button mobileHide" onclick="controller.openSidebar('newRecipe')">NEW</button>
                     <% }else if(merchant.pos === "clover"){ %>
                         <button class="button mobileHide" onclick="recipeBookStrandObj.posUpdate()">UPDATE</button>
                     <% } %>
@@ -250,7 +250,7 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">ORDERS</h1>
 
-                    <button class="button mobileHide" onclick="newOrderComp.display()">NEW</button>
+                    <button class="button mobileHide" onclick="controller.openSidebar('newOrder')">NEW</button>
                 </div>
 
                 <form onsubmit="ordersStrandObj.submitFilter()" class="filterForm">
@@ -309,7 +309,7 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">TRANSACTIONS</h1>
 
-                    <button class="button mobileHide" onclick="newTransactionComp.display()">NEW</button>
+                    <button class="button mobileHide" onclick="controller.openSidebar('newTransaction')">NEW</button>
                 </div>
 
                 <form onsubmit="transactionsStrandObj.submitFilter()" class="filterForm">
@@ -370,7 +370,7 @@
             <% include ./sidebars/newIngredient %>
             <% include ./sidebars/ingredientDetails %>
             <% include ./sidebars/recipeDetails %>
-            <% include ./sidebars/addRecipe %>
+            <% include ./sidebars/newRecipe %>
             <% include ./sidebars/orderDetails %>
             <% include ./sidebars/newOrder %>
             <% include ./sidebars/transactionDetails %>

views/dashboardPage/js/dashboard.js

@@ -88,6 +88,24 @@ controller = {
             case "addIngredients":
                 addIngredients.display(Merchant);
                 break;
+            case "recipeDetails":
+                recipeDetails.display(data);
+                break;
+            case "newRecipe":
+                newRecipe.display();
+                break;
+            case "orderDetails":
+                orderDetails.display(data);
+                break;
+            case "newOrder":
+                newOrder.display();
+                break;
+            case "transactionDetails":
+                transactionDetails.display(data);
+                break;
+            case "newTransaction":
+                newTransaction.display();
+                break;
         }
 
         if(window.screen.availWidth <= 1000){

views/dashboardPage/js/ingredientDetails.js

@@ -46,8 +46,8 @@ module.exports = {
             let li = document.createElement("li");
             li.innerText = recipes[i].name;
             li.onclick = ()=>{
-                changeStrand("recipeBookStrand");
-                recipeDetailsComp.display(recipes[i]);
+                controller.openStrand("recipeBook");
+                controller.openSidebar("recipeDetails", recipes[i]);
             }
             ul.appendChild(li);
         }
@@ -79,6 +79,9 @@ module.exports = {
                 button.classList.add("unitActive");
             }
         }
+
+        document.getElementById("defaultUnit").onclick = ()=>{this.changeUnitDefault};
+        document.getElementById("editSubmitButton").onclick = ()=>{this.editSubmit()};
     },
 
     remove: function(merchant){

views/dashboardPage/js/newIngredient.js

@@ -1,8 +1,10 @@
 module.exports = {
     display: function(){
-        document.querySelector("#newIngName").value = "";
-        document.querySelector("#newIngCategory").value = "";
-        document.querySelector("#newIngQuantity").value = 0;
+        document.getElementById("newIngName").value = "";
+        document.getElementById("newIngCategory").value = "";
+        document.getElementById("newIngQuantity").value = 0;
+
+        document.getElementById("submitNewIng").onclick = ()=>{this.submit()};
     },
 
     submit: function(){

views/dashboardPage/js/newOrder.js

@@ -13,7 +13,7 @@ module.exports = {
                 let category = template.cloneNode(true);
     
                 category.children[0].children[0].innerText = categories[i].name;
-                category.children[0].children[1].onclick = ()=>{addIngredientsComp.toggleAddIngredient(category)};
+                category.children[0].children[1].onclick = ()=>{this.toggleAddIngredient(category)};
                 category.children[0].children[1].children[1].style.display = "none";
                 category.children[1].style.display = "none";
                 
@@ -31,6 +31,8 @@ module.exports = {
                 }
             }
 
+            document.getElementById("submitNewOrder").onclick = ()=>{this.submit()};
+
             this.isPopulated = true;
         }
     },
@@ -76,6 +78,23 @@ module.exports = {
         container.appendChild(ingredientDiv);
     },
 
+    toggleAddIngredient: function(categoryElement){
+        let button = categoryElement.children[0].children[1];
+        let ingredientDisplay = categoryElement.children[1];
+
+        if(ingredientDisplay.style.display === "none"){
+            ingredientDisplay.style.display = "flex";
+
+            button.children[0].style.display = "none";
+            button.children[1].style.display = "block";
+        }else{
+            ingredientDisplay.style.display = "none";
+
+            button.children[0].style.display = "block";
+            button.children[1].style.display = "none";
+        }
+    },
+
     submit: function(){
         let categoriesList = document.getElementById("newOrderAdded");
         let ingredients = [];

views/dashboardPage/js/newTransaction.js

@@ -14,6 +14,8 @@ module.exports = {
 
             recipeDiv.children[0].innerText = merchant.recipes[i].name;
         }
+
+        document.getElementById("submitNewTransaction").onclick = ()=>{this.submit()};
     },
 
     submit: function(){

views/dashboardPage/js/orders.js

@@ -85,8 +85,7 @@ module.exports = {
             row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
             row.children[3].innerText = `$${(totalCost / 100).toFixed(2)}`;
             row.order = merchant.orders[i];
-            row.onclick = ()=>{orderDetailsComp.display(merchant.orders[i])};
-
+            row.onclick = ()=>{controller.openSidebar("orderDetails", merchant.orders[i])};
             listDiv.appendChild(row);
         }
     },

views/dashboardPage/js/recipeBook.js

@@ -21,7 +21,7 @@ module.exports = {
 
         for(let i = 0; i < merchant.recipes.length; i++){
             let recipeDiv = template.cloneNode(true);
-            recipeDiv.onclick = ()=>{recipeDetailsComp.display(merchant.recipes[i])};
+            recipeDiv.onclick = ()=>{ocntroller.openSidebar("recipeDetails", merchant.recipes[i])};
             recipeDiv._name = merchant.recipes[i].name;
             recipeList.appendChild(recipeDiv);
 

views/dashboardPage/js/recipeDetails.js

@@ -4,16 +4,16 @@ module.exports = {
     display: function(recipe){
         this.recipe = recipe;
 
-        document.querySelector("#recipeName").style.display = "block";
-        document.querySelector("#recipeNameIn").style.display = "none";
+        document.getElementById("recipeName").style.display = "block";
+        document.getElementById("recipeNameIn").style.display = "none";
         document.querySelector("#recipeDetails h1").innerText = recipe.name;
 
-        let ingredientList = document.querySelector("#recipeIngredientList");
+        let ingredientList = document.getElementById("recipeIngredientList");
         while(ingredientList.children.length > 0){
             ingredientList.removeChild(ingredientList.firstChild);
         }
 
-        let template = document.querySelector("#recipeIngredient").content.children[0];
+        let template = document.getElementById("recipeIngredient").content.children[0];
         for(let i = 0; i < recipe.ingredients.length; i++){
             ingredientDiv = template.cloneNode(true);
 
@@ -25,14 +25,19 @@ module.exports = {
             ingredientList.appendChild(ingredientDiv);
         }
 
-        document.querySelector("#addRecIng").style.display = "none";
+        document.getElementById("addRecIng").style.display = "none";
 
-        let price = document.querySelector("#recipePrice");
+        let price = document.getElementById("recipePrice");
         price.children[1].style.display = "block";
         price.children[2].style.display = "none";
         price.children[1].innerText = `$${(recipe.price / 100).toFixed(2)}`;
 
-        document.querySelector("#recipeUpdate").style.display = "none";
+        document.getElementById("recipeUpdate").style.display = "none";
+
+        document.getElementById("editRecipeBtn").onclick = ()=>{this.edit()};
+        document.getElementById("removeRecipeBtn").onclick = ()=>{this.remove()};
+        document.getElementById("addRecIng").onclick = ()=>{this.displayAddIngredient()};
+        document.getElementById("recipeUpdate").onclick = ()=>{this.update()};
     },
 
     edit: function(){

views/dashboardPage/js/transactionDetails.js

@@ -34,6 +34,8 @@ module.exports = {
         document.getElementById("transactionTime").innerText = transaction.date.toLocaleTimeString();
         document.getElementById("totalRecipes").innerText = `${totalRecipes} recipes`;
         document.getElementById("totalPrice").innerText = `$${(totalPrice / 100).toFixed(2)}`;
+
+        document.getElementById("removeTransBtn").onclick = ()=>{this.remove()};
     },
 
     remove: function(){

views/dashboardPage/js/transactions.js

@@ -47,7 +47,7 @@ module.exports = {
                 let transactionDiv = template.cloneNode(true);
                 let transaction = merchant.transactions[i];
 
-                transactionDiv.onclick = ()=>{transactionDetailsComp.display(transaction)};
+                transactionDiv.onclick = ()=>{controller.openStrand("transactionDetails", transaction)};
                 transactionsList.appendChild(transactionDiv);
 
                 let totalRecipes = 0;
@@ -137,7 +137,7 @@ module.exports = {
                         transactionDiv.children[0].innerText = `${transaction.date.toLocaleDateString()} ${transaction.date.toLocaleTimeString()}`;
                         transactionDiv.children[1].innerText = `${recipeCount} recipes sold`;
                         transactionDiv.children[2].innerText = `$${(cost / 100).toFixed(2)}`;
-                        transactionDiv.onclick = ()=>{transactionDetailsComp.display(transaction)};
+                        transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
                         transactionList.appendChild(transactionDiv);
                     }
                 }

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -51,7 +51,7 @@
 
     <div id="ingredientButtons" class="ingredientButtons"></div>
 
-    <button id="defaultUnit" class="button" onclick="ingredientDetailsComp.changeUnitDefault()">SET DEFAULT</button>
+    <button id="defaultUnit" class="button">SET DEFAULT</button>
 
-    <button id="editSubmitButton" class="button" onclick="ingredientDetailsComp.editSubmit()" style="display: none;">SAVE CHANGES</button>
+    <button id="editSubmitButton" class="button" style="display: none;">SAVE CHANGES</button>
 </div>

views/dashboardPage/sidebars/newIngredient.ejs

@@ -57,5 +57,5 @@
         </select>
     </label>
 
-    <button class="button" onclick="newIngredientComp.submit()">CREATE</button>
+    <button id="submitNewIng" class="button">CREATE</button>
 </div>

views/dashboardPage/sidebars/newOrder.ejs

@@ -33,5 +33,5 @@
 
     <div class="lineBorder"></div>
 
-    <button class="button" onclick="newOrderComp.submit()">CREATE</button>
+    <button id="submitNewOrder" class="button">CREATE</button>
 </div>

views/dashboardPage/sidebars/newTransaction.ejs

@@ -14,7 +14,7 @@
 
     <div id="newTransactionRecipes" class="newTransactionRecipes"></div>
 
-    <button class="button" onclick="newTransactionComp.submit()">Create</button>
+    <button id="submitNewTransaction" class="button">Create</button>
 
     <template id="createTransaction">
         <div class="createTransaction smallItemDisplay">

views/dashboardPage/sidebars/recipeDetails.ejs

@@ -7,7 +7,7 @@
             </svg>
         </button>
 
-        <button class="iconButton" onclick="recipeDetailsComp.edit()">
+        <button id="editRecipeBtn" class="iconButton">
             <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M12 20h9"></path>
                 <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
@@ -15,7 +15,7 @@
         </button>
 
         <% if(merchant.pos === "none"){ %>
-            <button class="iconButton" onclick="recipeDetailsComp.remove()">
+            <button id="removeRecipeBtn" class="iconButton">
                 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <polyline points="3 6 5 6 21 6"></polyline>
                     <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
@@ -30,7 +30,7 @@
 
     <div id="recipeIngredientList"></div>
 
-    <button id="addRecIng" class="iconButton" onclick="recipeDetailsComp.displayAddIngredient()" style="display: none;">
+    <button id="addRecIng" class="iconButton" style="display: none;">
         <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <circle cx="12" cy="12" r="10"></circle>
             <line x1="12" y1="8" x2="12" y2="16"></line>
@@ -46,7 +46,7 @@
         <input type="number" min="0" step="0.01" style="display: none;">
     </div>
 
-    <button id="recipeUpdate" onclick="recipeDetailsComp.update()" class="button" style="display: none;">Update</button>
+    <button id="recipeUpdate" class="button" style="display: none;">Update</button>
 
     <template id="recipeIngredient">
         <div class="recipeIngredient">

views/dashboardPage/sidebars/transactionDetails.ejs

@@ -8,7 +8,7 @@
         </button>
 
         <% if(merchant.pos === "none"){ %>
-            <button class="iconButton" onclick="transactionDetailsComp.remove()">
+            <button id="removeTransBtn" class="iconButton">
                 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <polyline points="3 6 5 6 21 6"></polyline>
                     <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>