Add manipulating of dates for ingredient graphs

views/dataPage/data.css

@@ -13,6 +13,11 @@
         margin: 2px;
     }
 
+.dates{
+    display: flex;
+    justify-content: space-around;
+}
+
 /* Home Strand */
 #homeStrand{
     flex-direction: column;
@@ -37,13 +42,21 @@
 
 /* Ingredient Strand */
 #ingredientStrand{
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: space-around;
 }
 
     #ingredientStrand > *{
         margin: 10px;
     }
 
+    .canvasBox{
+        display: flex;
+        justify-content: space-between;
+        width: 100vw;
+        height: 100vh;
+    }
+
     canvas{
         flex-grow: 10;
         max-height: 60vh;

views/dataPage/data.ejs

@@ -19,16 +19,14 @@
         <div id="homeStrand" class="strand">
             <h2 id="month"></h2>
 
-            <div class="buttonBox">
-                <p>From: </p>
-
-                <input id="from" type="date">
-
-                <p>To: </p>
-
-                <input id="to" type="date">
-
-                <button id="dateSort" onclick="window.homeObj.newDates()" class="button">Submit</button>
+            <div class="dates">
+                <label>From:
+                    <input id="homeFrom" type="date" onchange="window.homeObj.newDates()">
+                </label>
+                
+                <label>To:
+                    <input id="homeTo" type="date" onchange="window.homeObj.newDates()">
+                </label>
             </div>
 
             <div class="buttonBox">
@@ -90,9 +88,21 @@
         </div>
 
         <div id="ingredientStrand" class="strand">
-            <div id="ingredientOptions"></div>
+            <div class="dates">
+                <label>From:
+                    <input id="ingredientFrom" type="date" onchange="window.ingredientObj.newDates()">
+                </label>
+                
+                <label>To:
+                    <input id="ingredientTo" type="date" onchange="window.ingredientObj.newDates()">
+                </label>
+            </div>
 
-            <canvas></canvas>
+            <div class="canvasBox">
+                <div id="ingredientOptions"></div>
+
+                <canvas></canvas>
+            </div>
         </div>
 
         <script>let data = <%- JSON.stringify(data); %></script>

views/dataPage/home.js

@@ -8,15 +8,13 @@ window.homeObj = {
     display: function(){
         clearScreen();
         document.querySelector("#homeStrand").style.display = "flex";
-
-        //Fill in month
-        let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        document.querySelector("#month").innerText = `Month of ${months[new Date().getMonth()]}`;
-
-        document.querySelector("#to").valueAsDate = new Date();
-
+        
         if(!this.isPopulated){
             this.populate(data.transactions);
+
+            document.querySelector("#homeFrom").valueAsDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+            document.querySelector("#homeTo").valueAsDate = new Date();
+
             this.isPopulated = true;
         }
     },
@@ -175,8 +173,8 @@ window.homeObj = {
     },
 
     newDates: function(){
-        let from = new Date(document.querySelector("#from").value);
-        let to = new Date(document.querySelector("#to").value);
+        let from = new Date(document.querySelector("#homeFrom").value);
+        let to = new Date(document.querySelector("#homeTo").value);
 
         if(from === "" || to === ""){
             banner.createError("Invalid date");
@@ -187,10 +185,10 @@ window.homeObj = {
         }
 
         if(validator.transaction.date(from, to)){
-            let startIndex = 0;
-            let endIndex = data.transactions.length;
-
             window.fetchData(from, to, ()=>{
+                let startIndex = 0;
+                let endIndex = data.transactions.length;
+
                 for(let i = 0; i < data.transactions.length; i++){
                     if(from < new Date(data.transactions[i].date)){
                         startIndex = i;

views/dataPage/ingredient.js

@@ -7,11 +7,10 @@ window.ingredientObj = {
         document.querySelector("#ingredientStrand").style.display = "flex";
         document.querySelector("strand-selector").setAttribute("strand", "ingredient");
 
-        //A grabastic bag of bullshit to get rid of
-        let now = new Date();
-        let startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-
         if(!this.isPopulated){
+            document.querySelector("#ingredientFrom").valueAsDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+            document.querySelector("#ingredientTo").valueAsDate = new Date();
+
             let ingredientsDiv = document.querySelector("#ingredientOptions");
 
             for(let item of data.merchant.inventory){
@@ -22,9 +21,14 @@ window.ingredientObj = {
                 let checkbox = document.createElement("input");
                 checkbox.type = "checkbox";
                 checkbox.id = `${item.ingredient.name}Checkbox`;
+                checkbox._id = item.ingredient._id;
                 checkbox.onchange = ()=>{
                     if(checkbox.checked){
-                        this.graph.addData(this.formatData(item.ingredient._id, startOfMonth, new Date()), [startOfMonth, new Date()], item.ingredient._id);
+                        let from = document.querySelector("#ingredientFrom").valueAsDate;
+                        let to = document.querySelector("#ingredientTo").valueAsDate;
+                        console.log(to);
+
+                        this.graph.addData(this.formatData(item.ingredient._id, from, to), [from, to], item.ingredient._id);
                     }else{
                         this.graph.removeData(item.ingredient._id);
                     }
@@ -37,9 +41,6 @@ window.ingredientObj = {
                 checkDiv.appendChild(label);
             }
 
-            let startDate = new Date();
-            startDate.setFullYear(new Date().getFullYear() - 1);
-
             this.graph = new LineGraph(
                 document.querySelector("#ingredientStrand canvas"),
                 "Quantity",
@@ -51,8 +52,11 @@ window.ingredientObj = {
 
         if(ingredient){
             this.graph.clearData();
+
+            let from = document.querySelector("#ingredientFrom").valueAsDate;
+            let to = document.querySelector("#ingredientTo").valueAsDate;
             
-            this.graph.addData(this.formatData(ingredient.id, startOfMonth, new Date()), [startOfMonth, new Date()], ingredient.id);
+            this.graph.addData(this.formatData(ingredient.id, from, to), [from, to], ingredient.id);
 
             for(let label of document.querySelector("#ingredientOptions").children){
                 if(label.innerText === ingredient.name){
@@ -89,5 +93,30 @@ window.ingredientObj = {
         }
 
         return dataList;
+    },
+
+    newDates: function(){
+        let from = new Date(document.querySelector("#ingredientFrom").value);
+        let to  = new Date(document.querySelector("#ingredientTo").value);
+
+        if(from === "" || to === ""){
+            banner.createError("Invalid date");
+            return;
+        }else{
+            from = new Date(from);
+            to = new Date(to);
+        }
+
+        window.fetchData(from, to, ()=>{
+            this.graph.clearData();
+
+            let ingredientsDiv = document.querySelector("#ingredientOptions");
+            for(let div of ingredientsDiv.children){
+                let checkbox = div.children[0];
+                if(checkbox.checked){
+                    this.graph.addData(this.formatData(checkbox._id, from, to), [from, to], checkbox._id);
+                }
+            }
+        });
     }
 }

views/shared/graphs.js

@@ -119,7 +119,7 @@ class LineGraph{
             this.context.moveTo(this.left + (this.horizontalMultiplier * i), this.bottom - (this.verticalMultiplier * data.set[i]));
             this.context.lineTo(this.left + (this.horizontalMultiplier * (i + 1)), this.bottom - (this.verticalMultiplier * data.set[i + 1]));
             this.context.strokeStyle = this.colors[data.colorIndex];
-            this.context.lineWidth = 3;
+            this.context.lineWidth = 2;
             this.context.stroke();
         }