From 2a7ccc7e5f8245f871ed92648d3f1a47d8d1dffe Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Tue, 8 Apr 2025 10:15:41 +0200
Subject: [PATCH] Make device selector work, fix x-axis

---
 frontend/scripts/home.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/frontend/scripts/home.js b/frontend/scripts/home.js
index fb2b3ae..a54db8a 100644
--- a/frontend/scripts/home.js
+++ b/frontend/scripts/home.js
@@ -75,28 +75,22 @@ function randomColorChannelValue() {
     return Math.floor(Math.random() * 256);
 }
 
-function isSameDay(a, b) {
-    return a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate();
-}
-
-function localToUTC(date) {
+function parseDate(date) {
     if (!date) return null;
 
-    return luxon.DateTime.fromISO(date, { zone: "Europe/Copenhagen" }).setZone("UTC");
+    return luxon.DateTime.fromISO(date, { zone: "Europe/Copenhagen" });
 }
 
 async function fetchData() {
     document.body.classList.add("loading");
 
-    const startDate = localToUTC(document.getElementById("period-start").value);
-    const endDate = localToUTC(document.getElementById("period-end").value);
+    const startDate = parseDate(document.getElementById("period-start").value);
+    const endDate = parseDate(document.getElementById("period-end").value);
 
     const deviceData = [];
 
     for (const device of devices) {
-        const data = await getLogsOnDeviceId(device.id, startDate, endDate)
+        const data = await getLogsOnDeviceId(device.id, startDate.setZone("UTC"), endDate.setZone("UTC"))
             .catch(handleError);
 
         deviceData.push(data);
@@ -109,6 +103,11 @@ async function fetchData() {
     document.getElementById("table-body").innerHTML = "";
     buildTable(deviceData[0]);
 
+    document.getElementById("device-selector").oninput = event => {
+        document.getElementById("table-body").innerHTML = "";
+        buildTable(deviceData[event.target.selectedIndex]);
+    };
+
     if (!chart) {
         chart = new Chart("chart", {
             type: "line",
@@ -149,9 +148,7 @@ async function fetchData() {
         });
     }
 
-    chart.options.scales.x.time.unit = isSameDay(new Date(startDate), new Date(endDate))
-        ? "hour"
-        : "day";
+    chart.options.scales.x.time.unit = startDate.hasSame(endDate, "day") ? "hour" : "day";
 
     chart.data.datasets = deviceData.map((dataset, i) => {
         const color = new Array(3)