Fix style for home strand and all strands. Handle poor display on home page when there are no transactions.

views/dashboardPage/controller.js

@@ -32,23 +32,28 @@ let closeSidebar = ()=>{
 //  to: ending date (default to now)
 //Output
 //  Array containing starting index and ending index
+//Note: Will return false if it cannot find both necessary dates
 let dateIndices = (from, to = new Date())=>{
     let indices = [];
 
     for(let i = 0; i < transactions.length; i++){
         if(transactions[i].date > from){
-            indices[0] = i;
+            indices.push(i);
             break;
         }
     }
 
     for(let i = transactions.length - 1; i >=0; i--){
         if(transactions[i].date < to){
-            indices[1] = i;
+            indices.push(i);
             break;
         }
     }
 
+    if(indices.length < 2){
+        return false;
+    }
+
     return indices;
 }
 
@@ -61,6 +66,10 @@ let dateIndices = (from, to = new Date())=>{
 //      quantity: quantity sold of that ingredient
 //      name: name of the ingredient
 let ingredientsSold = (dateRange)=>{
+    if(!dateRange){
+        return false;
+    }
+    
     let recipes = recipesSold(dateRange);
     let ingredientList = [];
 

views/dashboardPage/dashboard.css

@@ -16,29 +16,29 @@ body{
     height: 100vh;
     flex: 1;
     box-sizing: border-box;
-    padding: 50px;
+    padding: 0 50px 0 50px;
 }
 
 .strand{
     flex-direction: column;
-    max-height: 100%;
+    height: 100%;
     width: 100%;
 }
 
-.strand > *:first-of-type{
+.strandTitle{
     text-align: left;
     margin: 15px;
+    padding: 0;
 }
 
 /* Cards */
 .card{
-    margin: 15px;
+    margin: 0 15px;
     border: 1px solid rgba(183, 183, 183, 0.9);
     border-radius: 7px;
-    box-sizing: border-box;
     box-shadow: 1px 2px gray;
-    padding: 25px;
     flex-grow: 1;
+    height: 100%;
 }
 
 .card > *{
@@ -60,18 +60,16 @@ body{
     display: flex;
     justify-content: space-around;
     width: 100%;
-}
-
-.flexColumn{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    flex-basis: 100px;
+    flex-grow: 1;
+    margin: 15px 0;
 }
 
 #revenueCard{
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
 }
 
     #revenue{
@@ -95,66 +93,66 @@ body{
     }
 
 #graphCard{
-    flex-grow: 1;
-    max-height: 40vh;
-    height: 100%;
+    flex-grow: 5;
+    display: flex;
+    justify-content: center;
 }
 
-    #graphCard canvas{
-        height: 95%;
-        width: 100%;
-    }
-
 #inventoryCheckCard{
+    display: flex;
+    flex-direction: column;;
+    justify-content: space-between;
     flex-grow: 0.1;
 }
 
-#inventoryCheckCard ul{
-    list-style: none;
-}
+    #inventoryCheckCard ul{
+        list-style: none;
+    }
 
-#inventoryCheckCard li{
-    margin: 15px 0;
-}
+    #inventoryCheckCard li{
+        margin: 5px 0;
+    }
 
-#inventoryCheckCard li > p{
-    font-weight: 300;
-    font-size: 15px;
-    margin-right: 25px;
-}
+    #inventoryCheckCard li > p{
+        font-weight: 300;
+        font-size: 15px;
+        margin-right: 25px;
+    }
 
-#inventoryCheckCard li > p:nth-of-type(1){
-    width: 50%;
-}
+    #inventoryCheckCard li > p:nth-of-type(1){
+        width: 50%;
+    }
 
-#inventoryCheckCard li input{
-    width: 75px;
-    margin-right: 25px;
-    font-size: 20px;
-    text-align: center;
-}
+    #inventoryCheckCard li input{
+        width: 75px;
+        margin-right: 25px;
+        font-size: 20px;
+        text-align: center;
+    }
 
-#inventoryCheckCard li p:nth-of-type(2){
-    width: 25%;
-    min-width: 75px;
-}
+    #inventoryCheckCard li p:nth-of-type(2){
+        width: 25%;
+        min-width: 75px;
+    }
 
-#inventoryCheckCard button{
-    margin: 0;
-    margin-top: 10px;
-    float: right;
-    height: 25px;
-    padding: 0 29px;
-    font-size: 15px;
-}
+    #inventoryCheckCard button{
+        width: 150px;
+        text-align: center;
+        margin-left: auto;
+    }
 
 #popularIngredientsCard{
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 100%;
 }
 
+    .notice{
+        color: red;
+        font-size: 35px;
+        font-weight: bold;
+    }
+
 /* Ingredients Strand */
 #ingredientsStrand{
     display: none;

views/dashboardPage/dashboard.ejs

@@ -16,20 +16,18 @@
             <% include ../shared/banner %>
             
             <div id="homeStrand" class="strand">
-                <h1>Dashboard</h1>
+                <h1 class="strandTitle">Dashboard</h1>
 
                 <div class="flexRow">
-                    <div class="flexColumn">
-                        <div id="revenueCard" class="card">
-                            <p>Total Revenue (month)</p>
+                    <div id="revenueCard" class="card">
+                        <p>Total Revenue (month)</p>
 
-                            <p id="revenue"></p>
+                        <p id="revenue"></p>
 
-                            <div id="revenueChange">
-                                <img alt="revenue">
+                        <div id="revenueChange">
+                            <img alt="revenue">
 
-                                <p></p>
-                            </div>
+                            <p></p>
                         </div>
                     </div>
 
@@ -48,7 +46,7 @@
                     </div>
 
                     <div id=popularIngredientsCard class="card">
-                        <p>Most Popular Ingredients</p>
+                        <p>Most Popular Ingredients (month)</p>
 
                         <canvas id="popularCanvas"></canvas>
                     </div>
@@ -57,7 +55,7 @@
 
             <div id="ingredientsStrand" class="strand">
                 <div id="ingredientHead">
-                    <h1>Ingredient Inventory</h1>
+                    <h1 class="strandTitle">Ingredient Inventory</h1>
 
                     <button class="button" onclick="ingredientsStrandObj.displayAddIngredient()">
                         <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>
@@ -68,7 +66,7 @@
 
             <div id="recipeBookStrand" class="strand">
                 <div id="recipeHead">
-                    <h1>Recipe Book</h1>
+                    <h1 class="strandTitle">Recipe Book</h1>
 
                     <% if(merchant.pos === "none"){ %>
                         <button class="button" onclick="recipeBookStrandObj.displayAddRecipe()">
@@ -82,7 +80,7 @@
             </div>
 
             <div id="ordersStrand" class="strand">
-                <h1>Orders</h1>
+                <h1 class="strandTitle">Orders</h1>
             </div>
         </div>
 

views/dashboardPage/home.js

@@ -26,6 +26,8 @@ window.homeStrandObj = {
             document.querySelector("#revenueChange img").src = img;
 
             let graphCanvas = document.querySelector("#graphCanvas");
+            console.log(graphCanvas.parentElement);
+
             graphCanvas.height = graphCanvas.parentElement.clientHeight;
             graphCanvas.width = graphCanvas.parentElement.clientWidth;
 
@@ -35,11 +37,21 @@ window.homeStrandObj = {
             let thirtyAgo = new Date(today);
             thirtyAgo.setDate(today.getDate() - 29);
 
-            this.graph.addData(
-                this.graphData(dateIndices(thirtyAgo)),
-                [thirtyAgo, new Date()],
-                "Revenue"
-            );
+            let data = this.graphData(dateIndices(thirtyAgo));
+            if(data){
+                this.graph.addData(
+                    data,
+                    [thirtyAgo, new Date()],
+                    "Revenue"
+                );
+            }else{
+                document.querySelector("#graphCanvas").style.display = "none";
+                
+                let notice = document.createElement("h1");
+                notice.innerText = "NO DATA YET";
+                notice.classList = "notice";
+                document.querySelector("#graphCard").appendChild(notice);
+            }
 
             //Inventory Check
             let rands = [];
@@ -80,29 +92,38 @@ window.homeStrandObj = {
             let thisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
 
             let ingredientList = ingredientsSold(dateIndices(thisMonth));
-            for(let i = 0; i < 5; i++){
-                let max = ingredientList[0].quantity
-                let index = 0;
-                for(let j = 0; j < ingredientList.length; j++){
-                    if(ingredientList[j].quantity > max){
-                        max = ingredientList[j].quantity;
-                        index = j;
+            if(ingredientList){
+                for(let i = 0; i < 5; i++){
+                    let max = ingredientList[0].quantity
+                    let index = 0;
+                    for(let j = 0; j < ingredientList.length; j++){
+                        if(ingredientList[j].quantity > max){
+                            max = ingredientList[j].quantity;
+                            index = j;
+                        }
                     }
+
+                    dataArray.push({
+                        num: max,
+                        label: `${ingredientList[index].name}: ${ingredientList[index].quantity} ${ingredientList[index].unit}`
+                    });
+                    ingredientList.splice(index, 1);
                 }
 
-                dataArray.push({
-                    num: max,
-                    label: `${ingredientList[index].name}: ${ingredientList[index].quantity} ${ingredientList[index].unit}`
-                });
-                ingredientList.splice(index, 1);
-            }
+                let thisCanvas = document.querySelector("#popularCanvas");
+                thisCanvas.width = thisCanvas.parentElement.clientWidth;
+                thisCanvas.height = thisCanvas.parentElement.clientHeight * 0.75;
 
-            let thisCanvas = document.querySelector("#popularCanvas");
-            thisCanvas.width = thisCanvas.parentElement.clientWidth;
-            thisCanvas.height = thisCanvas.parentElement.clientHeight;
+                let popularGraph = new HorizontalBarGraph(document.querySelector("#popularCanvas"));
+                popularGraph.addData(dataArray);
+            }else{
+                document.querySelector("#popularCanvas").style.display = "none";
 
-            let popularGraph = new HorizontalBarGraph(document.querySelector("#popularCanvas"));
-            popularGraph.addData(dataArray);
+                let notice = document.createElement("p");
+                notice.innerText = "N/A";
+                notice.classList = "notice";
+                document.querySelector("#popularIngredientsCard").appendChild(notice);
+            }
 
             this.isPopulated = true;
         }
@@ -124,12 +145,16 @@ window.homeStrandObj = {
         return total / 100;
     },
 
-    graphData: function(indices){
+    graphData: function(dateRange){
+        if(!dateRange){
+            return false;
+        }
+
         let dataList = new Array(30).fill(0);
-        let currentDate = transactions[indices[0]].date;
+        let currentDate = transactions[dateRange[0]].date;
         let arrayIndex = 0;
 
-        for(let i = indices[0]; i <= indices[1]; i++){
+        for(let i = dateRange[0]; i <= dateRange[1]; i++){
             if(transactions[i].date.getDate() !== currentDate.getDate()){
                 currentDate = transactions[i].date;
                 arrayIndex++;

views/shared/menu.css

@@ -56,7 +56,6 @@
 
     .menu > button{
         display: flex;
-        justify-content: row;
         align-items: center;
         background: none;
         border-style: none;