Fix some styling for new orders. Add create button.

views/dashboardPage/bundle.js

@@ -1714,7 +1714,15 @@ let newOrder = {
         document.getElementById("sidebarDiv").classList.add("sidebarWide");
         document.getElementById("newOrderIngredientList").style.display = "flex";
 
+        let selectedList = document.getElementById("selectedIngredientList");
+        while(selectedList.children.length > 0){
+            selectedList.removeChild(selectedList.firstChild);
+        }
+
         let ingredientList = document.getElementById("newOrderIngredients");
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
 
         for(let i = 0; i < merchant.ingredients.length; i++){
             let ingredient = document.createElement("button");
@@ -1723,6 +1731,8 @@ let newOrder = {
             ingredient.onclick = ()=>{this.addIngredient(merchant.ingredients[i].ingredient, ingredient)};
             ingredientList.appendChild(ingredient);
         }
+
+        document.getElementById("submitNewOrder").onclick = ()=>{this.submit()};
     },
 
     addIngredient: function(ingredient, element){
@@ -1739,6 +1749,10 @@ let newOrder = {
     removeIngredient: function(selectedElement, element){
         selectedElement.parentElement.removeChild(selectedElement);
         element.style.display = "block";
+    },
+
+    submit: function(){
+        console.log("something");
     }
 }
 

views/dashboardPage/js/newOrder.js

@@ -3,7 +3,15 @@ let newOrder = {
         document.getElementById("sidebarDiv").classList.add("sidebarWide");
         document.getElementById("newOrderIngredientList").style.display = "flex";
 
+        let selectedList = document.getElementById("selectedIngredientList");
+        while(selectedList.children.length > 0){
+            selectedList.removeChild(selectedList.firstChild);
+        }
+
         let ingredientList = document.getElementById("newOrderIngredients");
+        while(ingredientList.children.length > 0){
+            ingredientList.removeChild(ingredientList.firstChild);
+        }
 
         for(let i = 0; i < merchant.ingredients.length; i++){
             let ingredient = document.createElement("button");
@@ -12,6 +20,8 @@ let newOrder = {
             ingredient.onclick = ()=>{this.addIngredient(merchant.ingredients[i].ingredient, ingredient)};
             ingredientList.appendChild(ingredient);
         }
+
+        document.getElementById("submitNewOrder").onclick = ()=>{this.submit()};
     },
 
     addIngredient: function(ingredient, element){
@@ -28,6 +38,10 @@ let newOrder = {
     removeIngredient: function(selectedElement, element){
         selectedElement.parentElement.removeChild(selectedElement);
         element.style.display = "block";
+    },
+
+    submit: function(){
+        console.log("something");
     }
 }
 

views/dashboardPage/sidebars/newOrder.ejs

@@ -30,6 +30,8 @@
 
     <div id="selectedIngredientList"></div>
 
+    <button id="submitNewOrder" class="button">CREATE</button>
+
     <template id="selectedIngredient">
         <div class="selectedIngredient">
             <div>

views/dashboardPage/sidebars/sidebars.css

@@ -470,6 +470,7 @@ Add Recipe
     align-items: center;
     width: 60%;
     border-left: 1px solid black;
+    padding-left: 25px;
 }
 
     #newOrder > label{
@@ -480,7 +481,9 @@ Add Recipe
         display: flex;
         flex-direction: column;
         align-items: center;
-        width: 75%;
+        height: 75%;
+        overflow-y: auto;
+        margin-bottom: 10px;
     }
 
         .selectedIngredient{
@@ -490,13 +493,9 @@ Add Recipe
             color: white;
             border-radius: 5px;
             margin: 5px 0;
+            width: 95%;
         }
 
-            .selectedIngredient p{
-                font-weight: bold;
-                font-size: 17px;
-            }
-
             .selectedIngredient > div{
                 margin: 3px;
                 display: flex;
@@ -504,6 +503,11 @@ Add Recipe
                 align-items: center
             }
 
+                .selectedIngredient p{
+                    font-weight: bold;
+                    font-size: 17px;
+                }
+
                 .newOrderRemove{
                     background: rgb(0, 27, 45);
                     border: 1px solid white;
@@ -520,6 +524,10 @@ Add Recipe
                         color: black;
                     }
 
+                .selectedIngredient input{
+                    width: 45%;
+                }
+
 /* New Ingredient */
 #newIngredient{
     display: flex;