From ea485813feefdb8a246adb0a6fe4eab1c0177c90 Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Thu, 3 Apr 2025 09:25:33 +0200
Subject: [PATCH] Fix device dropdown and chart units

---
 frontend/scripts/home.js | 20 ++++++++++++++++++--
 frontend/styles/home.css |  1 +
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/scripts/home.js b/frontend/scripts/home.js
index f39c97d..e852e06 100644
--- a/frontend/scripts/home.js
+++ b/frontend/scripts/home.js
@@ -75,6 +75,12 @@ 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();
+}
+
 async function fetchData() {
     document.body.classList.add("loading");
 
@@ -84,8 +90,6 @@ async function fetchData() {
     const deviceData = [];
 
     for (const device of devices) {
-        addDeviceToDropdown(device);
-
         const data = await getLogsOnDeviceId(device.id, startDate, endDate)
             .catch(handleError);
 
@@ -123,12 +127,21 @@ async function fetchData() {
                 scales: {
                     x: {
                         type: "time",
+                        time: {
+                            displayFormats: {
+                                hour: "HH:mm",
+                            },
+                        },
                     },
                 },
             },
         });
     }
 
+    chart.options.scales.x.time.unit = isSameDay(new Date(startDate), new Date(endDate))
+        ? "hour"
+        : "day";
+
     chart.data.datasets = deviceData.map((dataset, i) => {
         const color = new Array(3)
             .fill(null)
@@ -186,6 +199,9 @@ document.getElementById("all-time").onclick = () => setPeriod(null, null);
 document.querySelector(".logout-container").addEventListener("click", logout);
 
 const devices = await getDevices().catch(handleError);
+for (const device of devices) {
+    addDeviceToDropdown(device);
+}
 
 setPeriodLastDays(3);
 fetchData();
diff --git a/frontend/styles/home.css b/frontend/styles/home.css
index 58a8d89..90a045e 100644
--- a/frontend/styles/home.css
+++ b/frontend/styles/home.css
@@ -124,6 +124,7 @@ table tr:not(:last-child) .temperature {
     padding: 0.5rem;
     color: #616161;
     background-color: white;
+    font-size: 0.85rem;
     cursor: pointer;
     transition-duration: 100ms;
 }