Add period selector

frontend/home/index.html

@@ -26,20 +26,38 @@
           </div>
         <div id="container">
             <div class="chart-container">
-                <canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
+                <canvas id="chart" height="400"></canvas>
             </div>
 
             <div id="filters">
                 <div>
                     <div class="form-control">
                         <label for="device-selector">Select device</label>
-                        <select id="device-selector">
-
-                        </select>
+                        <select id="device-selector"></select>
                     </div>
                 </div>
 
-                <div></div>
+                <div>
+                    <div class="form-control">
+                        <label>&nbsp;</label>
+                        <div id="period-templates">
+                            <div class="period-template last-x-days" data-days="0">Today</div>
+                            <div class="period-template last-x-days" data-days="3">Last 3 days</div>
+                            <div class="period-template last-x-days" data-days="7">Last week</div>
+                            <div class="period-template" id="all-time">All time</div>
+                        </div>
+                    </div>
+
+                    <div class="form-control">
+                        <label for="period-start">Start</label>
+                        <input id="period-start" type="datetime-local">
+                    </div>
+
+                    <div class="form-control">
+                        <label for="period-end">End</label>
+                        <input id="period-end" type="datetime-local">
+                    </div>
+                </div>
             </div>
 
             <div id="table-wrapper">

frontend/scripts/home.js

@@ -2,40 +2,7 @@ import { logout } from "../shared/utils.js";
 import { getUser } from "../shared/utils.js";
 import { getDevices, getLogsOnDeviceId } from "./services/devices.service.js";
 
-async function buildChart(data) {
-    const xValues = data.map((log) =>
-        new Date(log.date).toLocaleString()
-    ); // Full Date labels
-    const yValues = data.map((log) => log.temperature); // Temperature values
-    new Chart("myChart", {
-        type: "line",
-        data: {
-            labels: xValues,
-            datasets: [
-                {
-                    label: "Temperature",
-                    fill: false,
-                    lineTension: 0.4,
-                    backgroundColor: "rgba(0,0,255,1.0)",
-                    borderColor: "rgba(0,0,255,0.1)",
-                    data: yValues,
-                },
-            ],
-        },
-        options: {
-            tooltips: {
-                callbacks: {
-                    title: function (tooltipItem) {
-                        return `Date: ${tooltipItem[0].label}`;
-                    },
-                    label: function (tooltipItem) {
-                        return `Temperature: ${tooltipItem.value}°C`;
-                    },
-                },
-            },
-        },
-    });
-}
+let chart;
 
 const TABLE_PAGINATION_SIZE = 30;
 
@@ -108,7 +75,12 @@ function randomColorChannelValue() {
     return Math.floor(Math.random() * 256);
 }
 
-async function fetchData(startDate = null, endDate = null) {
+async function fetchData() {
+    document.body.classList.add("loading");
+
+    const startDate = document.getElementById("period-start").valueAsDate?.toISOString();
+    const endDate = document.getElementById("period-end").valueAsDate?.toISOString();
+
     const devices = await getDevices()
         .catch(handleError);
 
@@ -117,7 +89,7 @@ async function fetchData(startDate = null, endDate = null) {
     for (const device of devices) {
         addDeviceToDropdown(device);
 
-        const data = await getLogsOnDeviceId(device.id)
+        const data = await getLogsOnDeviceId(device.id, startDate, endDate)
             .catch(handleError);
 
         deviceData.push(data);
@@ -129,52 +101,86 @@ async function fetchData(startDate = null, endDate = null) {
 
     buildTable(deviceData[0]);
 
-    new Chart("myChart", {
-        type: "line",
-        data: {
-            datasets: deviceData.map((dataset, i) => {
-                const color = new Array(3)
-                    .fill(null)
-                    .map(randomColorChannelValue)
-                    .join(",");
-
-                return {
-                    label: devices[i].name,
-                    fill: false,
-                    lineTension: 0.4,
-                    backgroundColor: `rgba(${color}, 1.0)`,
-                    borderColor: `rgba(${color}, 0.1)`,
-                    data: dataset.map(log => ({
-                        x: new Date(log.date).getTime(),
-                        y: log.temperature,
-                    })),
-                };
-            }),
-        },
-        options: {
-            parsing: false,
-            plugins: {
-                tooltip: {
-                    callbacks: {
-                        label: item => `Temperature: ${item.formattedValue}°C`,
+    if (!chart) {
+        chart = new Chart("chart", {
+            type: "line",
+            data: {
+                datasets: [],
+            },
+            options: {
+                responsive: false,
+                parsing: false,
+                plugins: {
+                    tooltip: {
+                        callbacks: {
+                            label: item => `Temperature: ${item.formattedValue}°C`,
+                        },
+                    },
+                    decimation: {
+                        enabled: true,
+                        algorithm: "lttb",
+                        samples: window.innerWidth / 2,
                     },
                 },
-                decimation: {
-                    enabled: true,
-                    algorithm: "lttb",
-                    samples: window.innerWidth / 2,
+                scales: {
+                    x: {
+                        type: "time",
+                    },
                 },
             },
-            scales: {
-                x: {
-                    type: "time",
-                },
-            },
-        },
+        });
+    }
+
+    chart.data.datasets = deviceData.map((dataset, i) => {
+        const color = new Array(3)
+            .fill(null)
+            .map(randomColorChannelValue)
+            .join(",");
+
+        return {
+            label: devices[i].name,
+            fill: false,
+            lineTension: 0.4,
+            backgroundColor: `rgba(${color}, 1.0)`,
+            borderColor: `rgba(${color}, 0.1)`,
+            data: dataset.map(log => ({
+                x: new Date(log.date).getTime(),
+                y: log.temperature,
+            })),
+        };
     });
+
+    chart.update();
+
+    document.body.classList.remove("loading");
 }
 
-fetchData();
+function setPeriod(start, end) {
+    document.getElementById("period-start").valueAsDate = start && new Date(start);
+    document.getElementById("period-end").valueAsDate = start && new Date(end);
+
+    fetchData();
+}
+
+function setPeriodLastDays(days) {
+    const start = new Date()
+    start.setDate(new Date().getDate() - days);
+    start.setHours(0, 0, 0, 0);
+    setPeriod(start, new Date().setHours(23, 59, 0, 0));
+}
+
+for (const elem of document.getElementsByClassName("last-x-days")) {
+    elem.onclick = event => setPeriodLastDays(event.target.dataset.days);
+}
+
+for (const elem of document.querySelectorAll("#period-start, #period-end")) {
+    elem.onchange = fetchData;
+}
+
+document.getElementById("all-time").onclick = () => setPeriod(null, null);
 
 document.querySelector(".logout-container").addEventListener("click", logout);
 
+setPeriodLastDays(3);
+fetchData();
+

frontend/scripts/services/devices.service.js

@@ -16,6 +16,7 @@ export function update(name, temphigh, tempLow, referenceId) {
     return request("PUT", "/device/edit", {name: name, temphigh: temphigh, tempLow: tempLow, referenceId: referenceId});
 }
 
-export function getLogsOnDeviceId(id) {
-    return request("GET", `/device/logs/${id}`);
+export function getLogsOnDeviceId(id, startDate = null, endDate = null) {
+    const query = startDate && endDate ? `?dateTimeStart=${startDate}&dateTimeEnd=${endDate}` : "";
+    return request("GET", `/device/logs/${id}${query}`);
 }

frontend/styles/home.css

@@ -4,6 +4,18 @@ body {
     background-color: #F9F9F9;
 }
 
+.loading * {
+    pointer-events: none;
+}
+
+.loading #chart, .loading table {
+    opacity: 50%;
+}
+
+.loading select, .loading input {
+    color: rgba(0, 0, 0, 0.3);
+}
+
 #container {
     margin: 0 2rem;
 }
@@ -13,6 +25,8 @@ body {
     border-radius: 8px;
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
     border: 1px solid #DDD;
+    margin-bottom: 2rem;
+    background-color: white;
 }
 
 #filters {
@@ -21,14 +35,20 @@ body {
     justify-content: space-between;
 }
 
+#filters > * {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
 table {
     font-family: arial, sans-serif;
     border-collapse: collapse;
     width: 100%;
-    background-color: white;
     color: #616161;
     font-family: arial, sans-serif;
     border-collapse: collapse;
+    transition: opacity ease-in 100ms;
 }
 
 td,
@@ -88,6 +108,12 @@ table tr:not(:last-child) .temperature {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
 }
 
+#chart {
+    width: 100%;
+    height: 400px;
+    transition: opacity ease-in 100ms;
+}
+
 #error {
     margin: 2rem;
 }
@@ -121,15 +147,32 @@ label {
     color: #616161;
 }
 
-select {
+select, input {
     background-color: white;
     color: #424242;
     border: 1px solid #DDD;
     border-radius: 8px;
     padding: 0.5rem 1rem;
+    transition: color ease-in 100ms;
 }
 
-select:focus {
+select:focus, input:focus {
     border-color: #1E88E5;
 }
 
+#period-templates {
+    display: flex;
+    gap: 1rem;
+}
+
+.period-template {
+    font-size: 0.85rem;
+    color: #616161;
+    cursor: pointer;
+    transition-duration: 100ms;
+}
+
+.period-template:hover {
+    color: #212121;
+}
+