Add style to order calculator sidebar.

Bug fix: break statement in wrong location causing predictions to ignore all but first ingredient in a recipe.
Bug fix: change addEventListener to onclick due to it causing side effects.

views/dashboardPage/bundle.js

@@ -2527,9 +2527,13 @@ let orderCalculator = {
 
         document.getElementById("predictDateFrom").valueAsDate = from;
         document.getElementById("predictDateTo").valueAsDate = to;
-        document.getElementById("predictButton").addEventListener("click", ()=>{this.predict()});
+        document.getElementById("predictButton").onclick = ()=>{this.predict()};
 
         let selector = document.getElementById("predictSelector");
+        while(selector.children.length > 0){
+            selector.removeChild(selector.firstChild);
+        }
+
         for(let i = 0; i < merchant.ingredients.length; i++){
             let option = document.createElement("option");
             option.innerText = merchant.ingredients[i].ingredient.name;
@@ -2634,9 +2638,9 @@ let orderCalculator = {
                         for(let l = 0; l < merchant.recipes[k].ingredients.length; l++){
                             if(merchant.recipes[k].ingredients[l].ingredient === ingredient){
                                 dailySum += merchant.recipes[k].ingredients[l].quantity * transactions[i].recipes[j].quantity;
-                            }
 
-                            break;
+                                break;
+                            }
                         }
 
                         break;

views/dashboardPage/ejs/strands/orders.ejs

@@ -7,7 +7,7 @@
 
             <button id="newOrderBtn" class="button">NEW</button>
 
-            <button id="orderCalcBtn" class="button">CALCULATOR</button>
+            <button id="orderCalcBtn" class="button">PREDICTOR</button>
         </div>
     </div>
 

views/dashboardPage/js/sidebars/orderCalculator.js

@@ -9,9 +9,13 @@ let orderCalculator = {
 
         document.getElementById("predictDateFrom").valueAsDate = from;
         document.getElementById("predictDateTo").valueAsDate = to;
-        document.getElementById("predictButton").addEventListener("click", ()=>{this.predict()});
+        document.getElementById("predictButton").onclick = ()=>{this.predict()};
 
         let selector = document.getElementById("predictSelector");
+        while(selector.children.length > 0){
+            selector.removeChild(selector.firstChild);
+        }
+
         for(let i = 0; i < merchant.ingredients.length; i++){
             let option = document.createElement("option");
             option.innerText = merchant.ingredients[i].ingredient.name;
@@ -116,9 +120,9 @@ let orderCalculator = {
                         for(let l = 0; l < merchant.recipes[k].ingredients.length; l++){
                             if(merchant.recipes[k].ingredients[l].ingredient === ingredient){
                                 dailySum += merchant.recipes[k].ingredients[l].quantity * transactions[i].recipes[j].quantity;
-                            }
 
-                            break;
+                                break;
+                            }
                         }
 
                         break;

views/dashboardPage/sidebars.css

@@ -581,35 +581,10 @@ ORDER CALCULATOR
     width: 100%;
 }
 
-    .scroller{
-        max-height: 90%;
-        overflow-y: auto;
-    }
-
-    .calculatorItems{
-        width: 100%;
+    #orderCalculator > *{
+        margin: 15px 0;
     }
 
-        .calculatorItems thead tr th:nth-child(1){
-            text-align: left;
-        }
-
-        .calculatorItems thead tr th:nth-child(2){
-            text-align: right;
-        }
-
-        .calculatorItem:nth-child(odd){
-            background: rgb(201, 201, 201);
-        }
-
-        .calcUsage{
-            display: table-cell;
-            vertical-align: middle;
-            text-align: right;
-            font-weight: bold;
-            padding: 5px;
-        }
-
 /*
 TRANSACTION DETAILS
 */