Create sidebar for recipes

views/dashboardPage/components/addIngredient.ejs

@@ -1,5 +1,5 @@
 <div id="addIngredient" class="sidebarHide">
-    <button onclick="ingredientsStrandObj.closeSidebar()">
+    <button class="sidebarIconButton" onclick="closeSidebar()">
         <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <line x1="5" y1="12" x2="19" y2="12"></line>
             <polyline points="12 5 19 12 12 19"></polyline>

views/dashboardPage/components/components.css

@@ -9,14 +9,6 @@
     box-shadow: -1px 0px 10px gray;
 }
 
-    .sidebar button:first-of-type{
-        background: none;
-        border: none;
-        cursor: pointer;
-        margin-bottom: 100px;
-        margin-right: auto;
-    }
-
 .sidebarHide{
     width: 0;
     transition: width 0.2s;
@@ -32,6 +24,27 @@
         visibility: hidden;
     }
 
+.sidebar button:first-of-type{
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 100px;
+    padding: 3px;
+    border-radius: 5px;
+    margin-right: auto;
+}
+
+    .sidebar button:first-of-type:hover{
+        background: rgb(0, 27, 45);
+        color: white;
+    }
+
+.lineBorder{
+    width: 100%;
+    border-bottom: 1px solid gray;
+    margin: 25px;
+}
+
 #addIngredient{
     flex-direction: column;
 }
@@ -41,12 +54,6 @@
     align-items: center;
 }
 
-    .lineBorder{
-        width: 100%;
-        border-bottom: 1px solid gray;
-        margin: 25px;
-    }
-
     #ingredientDetails > p{
         border-radius: 10px;
         background: gray;
@@ -64,4 +71,52 @@
         font-size: 30px;
         font-weight: bold;
         padding: 10px;
+    }
+
+#recipeDetails{
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+    #recipeDetailsButtons{
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin-bottom: 100px;
+    }
+
+    #recipeDetailsButtons button{
+        background: none;
+        border: none;
+        cursor: pointer;
+        margin: 0;
+        padding: 3px;
+        border-radius: 5px;
+    }
+
+        #recipeDetailsButtons button:hover{
+            background: rgb(0, 27, 45);
+            color: white;
+        }
+
+    #recipeIngredients{
+        width: 100%;
+    }
+
+    .recipeIngredient{
+        display: flex;
+        justify-content: space-between;
+        margin: 25px;
+    }
+
+    #recipePrice{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #recipePrice p{
+        font-size: 25px;
+        font-weight: bold;
     }

views/dashboardPage/components/ingredientDetails.ejs

@@ -1,5 +1,5 @@
 <div id="ingredientDetails" class="sidebarHide">
-    <button onclick="ingredientsStrandObj.closeSidebar()">
+    <button class="sidebarIconButton" onclick="closeSidebar()">
         <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <line x1="5" y1="12" x2="19" y2="12"></line>
             <polyline points="12 5 19 12 12 19"></polyline>

views/dashboardPage/components/recipeDetails.ejs

@@ -0,0 +1,29 @@
+<div id="recipeDetails" class="sidebarHide">
+    <div id="recipeDetailsButtons">
+        <button class="sidebarIconButton" onclick="closeSidebar()">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+        </button>
+
+        <button class="sidebarIconButton" onclick="recipeBookStrandObj.editRecipe()">
+            <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>
+            </svg>
+        </button>
+    </div>
+
+    <h1></h1>
+
+    <div id="recipeIngredients"></div>
+
+    <div class="lineBorder"></div>
+
+    <div id="recipePrice">
+        <h3>Price</h3>
+        
+        <p></p>
+    </div>
+</div>

views/dashboardPage/controller.js

@@ -12,10 +12,20 @@ let changeStrand = (name)=>{
     activeButton.classList = "active";
     activeButton.onclick = undefined;
 
+    closeSidebar();
+
     document.querySelector(`#${name}`).style.display = "flex";
     window[`${name}Obj`].display();
 }
 
+let closeSidebar = ()=>{
+    let sidebar = document.querySelector(".sidebar");
+    
+    if(sidebar){
+        sidebar.classList = "sidebarHide";
+    }
+}
+
 //Gets the indices of two dates from transactions
 //Inputs
 //  from: starting date

views/dashboardPage/dashboard.css

@@ -242,6 +242,39 @@ body{
     display: none;
 }
 
+    #recipeHead{
+        display: flex;
+        justify-content: space-between;
+    }
+
+    #recipeList{
+        display: flex;
+        flex-direction: column;
+    }
+
+    .recipeItem{
+        display: flex;
+        justify-content: space-between;
+        background: rgb(240, 252, 255);
+        box-shadow: 0 2px 5px gray;
+        border-radius: 5px;
+        padding: 15px;
+        margin: 3px 3px 3px 100px;
+        width: 25vw;
+        border: 1px solid black;
+        cursor: pointer;
+    }
+
+    .recipeItem p:first-of-type{
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    .recipeItem:hover{
+        background: rgb(0, 27, 45);
+        color: white;
+    }
+
 /* Orders Strand */
 #ordersStrand{
     display: none;

views/dashboardPage/dashboard.ejs

@@ -60,14 +60,25 @@
                     <h1>Ingredient Inventory</h1>
 
                     <button class="button" onclick="ingredientsStrandObj.displayAddIngredient()">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                         add
                     </button>
                 </div>
             </div>
 
             <div id="recipeBookStrand" class="strand">
-                <h1>Recipe book strand</h1>
+                <div id="recipeHead">
+                    <h1>Recipe Book</h1>
+
+                    <% if(merchant.pos === "none"){ %>
+                        <button class="button">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                            add
+                        </button>
+                    <% } %>
+                </div>
+
+                <div id="recipeList"></div>
             </div>
 
             <div id="ordersStrand" class="strand">
@@ -79,11 +90,14 @@
 
         <% include ./components/ingredientDetails %>
 
+        <% include ./components/recipeDetails %>
+
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script>let transactions = <%- JSON.stringify(transactions) %>;</script>
         <script src="../shared/graphs.js"></script>
         <script src="/dashboardPage/home.js"></script>
         <script src="/dashboardPage/ingredients.js"></script>
+        <script src="/dashboardPage/recipeBook.js"></script>
         <script src="/dashboardPage/controller.js"></script>
     </body>
 </html>

views/dashboardPage/ingredients.js

@@ -100,7 +100,7 @@ window.ingredientsStrandObj = {
     },
 
     displayAddIngredient: function(){
-        this.closeSidebar();
+        closeSidebar();
 
         let sidebar = document.querySelector("#addIngredient");
 
@@ -112,7 +112,7 @@ window.ingredientsStrandObj = {
     },
 
     displayIngredient: function(ingredient, category){
-        this.closeSidebar();
+        closeSidebar();
         
         sidebar = document.querySelector("#ingredientDetails");
 
@@ -122,8 +122,6 @@ window.ingredientsStrandObj = {
         document.querySelector("#ingredientDetails h1").innerText = ingredient.name;
         document.querySelector("#ingredientStock").innerText = `${ingredient.quantity} ${ingredient.unit}`;
 
-        let start = performance.now();
-
         let quantities = [];
         let now = new Date();
         for(let i = 1; i < 31; i++){
@@ -137,17 +135,8 @@ window.ingredientsStrandObj = {
             sum += quantity;
         }
 
-        let end = performance.now();
-        console.log(`${end-start} ms`);
-
         document.querySelector("#dailyUse").innerText = `${(sum/quantities.length).toFixed(2)} ${ingredient.unit}`;
     },
 
-    closeSidebar: function(){
-        let sidebar = document.querySelector(".sidebar");
-        
-        if(sidebar){
-            sidebar.classList = "sidebarHide";
-        }
-    }
+    
 }

views/dashboardPage/recipeBook.js

@@ -0,0 +1,55 @@
+window.recipeBookStrandObj = {
+    isPopulated: false,
+
+    display: function(){
+        if(!this.isPopulated){
+            let recipeList = document.querySelector("#recipeList");
+
+            for(let recipe of merchant.recipes){
+                let recipeDiv = document.createElement("div");
+                recipeDiv.classList = "recipeItem";
+                recipeDiv.onclick = ()=>{this.displayRecipe(recipe)};
+                recipeList.appendChild(recipeDiv);
+
+                let recipeName = document.createElement("p");
+                recipeName.innerText = recipe.name;
+                recipeDiv.appendChild(recipeName);
+
+                let recipePrice = document.createElement("p");
+                recipePrice.innerText = `$${(recipe.price / 100).toFixed(2)}`;
+                recipeDiv.appendChild(recipePrice);
+
+                this.isPopulated = true;
+            }
+        }
+    },
+
+    displayRecipe: function(recipe){
+        closeSidebar();
+
+        document.querySelector("#recipeDetails").classList = "sidebar";
+
+        document.querySelector("#recipeDetails h1").innerText = recipe.name;
+
+        let ingredientList = document.querySelector("#recipeIngredients");
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
+
+        for(let ingredient of recipe.ingredients){
+            let ingredientDiv = document.createElement("div");
+            ingredientDiv.classList = "recipeIngredient";
+            ingredientList.appendChild(ingredientDiv);
+
+            let ingredientName = document.createElement("p");
+            ingredientName.innerText = ingredient.ingredient.name;
+            ingredientDiv.appendChild(ingredientName);
+
+            let ingredientQuantity = document.createElement("p");
+            ingredientQuantity.innerText = `${ingredient.quantity} ${ingredient.ingredient.unit}`;
+            ingredientDiv.appendChild(ingredientQuantity);
+        }
+
+        document.querySelector("#recipePrice p").innerText = `$${(recipe.price / 100).toFixed(2)}`;
+    }
+}

views/shared/shared.css

@@ -23,6 +23,7 @@ h3 {
     text-align: center;
     font-weight: 500;
     color: gray;
+    font-size: 20px;
 }
 
 button{