Add ability for non-pos to update other data on their recipes.

views/dashboardPage/css/sidebars/editRecipe.css

@@ -1,35 +1,58 @@
-#editRecipeContents{
-    display: flex;
-    flex-grow: 2;
+#editRecipe{
+    flex-direction: column;
 }
 
-    #editRecipeLeft, #editRecipeRight{
+    #editRecipeInputContainer{
         display: flex;
         flex-direction: column;
-        align-items: center;
-        width: 50%;
+        margin: 15px auto;
     }
 
-    #editRecipeLeft{
-        border-right: 2px solid rgb(255, 99, 107);
-    }
+        #editRecipeInputContainer label{
+            display: flex;
+            justify-content: space-between;
+        }
+
+        #editRecipeInputContainer input{
+            margin-left: 10px;
+        }
 
-    #editRecipeUnused, #editRecipeUsed{
+    #editRecipeContents{
         display: flex;
-        flex-direction: column;
-        width: 95%;
+        flex-grow: 2;
     }
 
-.editRecipeInputItem{
-    display: flex;
-    flex-direction: column;
-}
+        #editRecipeLeft, #editRecipeRight{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 50%;
+        }
 
-    .editRecipeInputItem > div{
+        #editRecipeLeft{
+            border-right: 2px solid rgb(255, 99, 107);
+        }
+
+        #editRecipeUnused, #editRecipeUsed{
+            display: flex;
+            flex-direction: column;
+            width: 95%;
+        }
+
+    .editRecipeInputItem{
         display: flex;
-        align-items: center;
+        flex-direction: column;
     }
 
-    .editRecipeInputItem input{
-        width: 150px;
+        .editRecipeInputItem > div{
+            display: flex;
+            align-items: center;
+        }
+
+        .editRecipeInputItem input{
+            width: 150px;
+        }
+
+    #editRecipeSubmit{
+        margin-top: auto;
     }

views/dashboardPage/ejs/sidebars/editRecipe.ejs

@@ -9,7 +9,21 @@
         </button>
     </div>
 
-    <h1 id="editRecipeTitle"></h1>
+    <div id="editRecipeInputContainer">
+        <h1 id="editRecipeTitle"></h1>
+
+        <label id="editRecipeName" style="display:none">NAME:
+            <input type="text">
+        </label>
+        
+        <label id="editRecipeCategory" style="display:none">CATEGORY:
+            <input type="text">
+        </label>
+        
+        <label id="editRecipePrice" style="display:none">PRICE:
+            <input type="number" step="0.01" min="0">
+        </label>
+    </div>
 
     <div id="editRecipeContents">
         <div id="editRecipeLeft">
@@ -22,11 +36,11 @@
             <h2>LIST OF INGREDIENTS</h2>
 
             <div id="editRecipeUsed"></div>
+
+            <button id="editRecipeSubmit" class="sidebarButton">SUBMIT</button>
         </div>
     </div>
 
-    <button id="editRecipeSubmit" class="sidebarButton">SUBMIT</button>
-
     <template id="editRecipeInputItem">
         <div class="chosenSelection">
             <div>

views/dashboardPage/js/sidebars/editRecipe.js

@@ -2,8 +2,23 @@ module.exports = {
     unused: [],
 
     display: function(recipe){
+        let title = document.getElementById("editRecipeTitle");
+        let name = document.getElementById("editRecipeName");
+        let category = document.getElementById("editRecipeCategory");
+        let price = document.getElementById("editRecipePrice");
+        title.innerText = recipe.name;
+        name.value = recipe.name;
+        category.value = recipe.category;
+        price.value = recipe.price;
+
+        if(merchant.pos === "none"){
+            name.style.display = "flex";
+            category.style.display = "flex";
+            price.style.display = "flex";
+            title.style.display = "none";
+        }
+
         document.getElementById("sidebarDiv").classList.add("sidebarWide");
-        document.getElementById("editRecipeTitle").innerText = recipe.name;
         document.getElementById("editRecipeSearch").oninput = ()=>{this.search()};
         document.getElementById("editRecipeSubmit").onclick = ()=>{this.gatherData(recipe)};
         let used = document.getElementById("editRecipeUsed");
@@ -96,9 +111,9 @@ module.exports = {
         let items = document.getElementById("editRecipeUsed");
         let data = {
             id: recipe.id,
-            name: recipe.name,
-            price: recipe.price * 100,
-            category: recipe.category,
+            name: document.getElementById("editRecipeName").children[0].value,
+            price: parseInt(document.getElementById("editRecipePrice").children[0].value * 100),
+            category: document.getElementById("editRecipeCategory").children[0].value,
             ingredients: []
         };
 
@@ -145,7 +160,9 @@ module.exports = {
                     controller.createBanner(response, "error");
                 }else{
                     merchant.updateRecipe(merchant.getRecipe(response._id), response);
+                    state.updateRecipes();
                     controller.closeSidebar();
+                    controller.createBanner("RECIPE UPDATED", "success");
                 }
             })
             .catch((err)=>{