From 9eaba2e77aa40b403c128752f42b43c41e85344f Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Thu, 3 Apr 2025 14:08:08 +0200
Subject: [PATCH] Use local timezone on dashboard

---
 frontend/home/index.html |  4 ++--
 frontend/scripts/home.js | 20 ++++++++++++++++----
 frontend/styles/home.css |  3 +++
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/home/index.html b/frontend/home/index.html
index fb428da..59774b7 100644
--- a/frontend/home/index.html
+++ b/frontend/home/index.html
@@ -5,8 +5,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Temperature-Alarm-Web</title>
         <script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-        <script defer src="https://cdn.jsdelivr.net/npm/moment"></script>
-        <script defer src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/luxon"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
         <script defer type="module" src="/scripts/home.js"></script>
         <link rel="stylesheet" href="/styles/common.css">
         <link rel="stylesheet" href="/styles/home.css" />
diff --git a/frontend/scripts/home.js b/frontend/scripts/home.js
index e852e06..e615b9c 100644
--- a/frontend/scripts/home.js
+++ b/frontend/scripts/home.js
@@ -29,8 +29,9 @@ function buildTable(data, offset = 0) {
             color = "tempNormal";
         }
 
-        const date = new Date(log.date).toLocaleDateString();
-        const time = new Date(log.date).toLocaleTimeString();
+        const parsedDate = luxon.DateTime.fromISO(log.date).setZone("Europe/Copenhagen").setLocale("gb");
+        const date = parsedDate.toLocaleString(luxon.DateTime.DATE_SHORT);
+        const time = parsedDate.toLocaleString(luxon.DateTime.TIME_WITH_SECONDS);
 
         document.getElementById("table-body").innerHTML += `
             <tr>
@@ -81,11 +82,17 @@ function isSameDay(a, b) {
         a.getDate() === b.getDate();
 }
 
+function localToUTC(date) {
+    if (!date) return null;
+
+    return luxon.DateTime.fromISO(date, { zone: "Europe/Copenhagen" }).setZone("UTC");
+}
+
 async function fetchData() {
     document.body.classList.add("loading");
 
-    const startDate = document.getElementById("period-start").value;
-    const endDate = document.getElementById("period-end").value;
+    const startDate = localToUTC(document.getElementById("period-start").value);
+    const endDate = localToUTC(document.getElementById("period-end").value);
 
     const deviceData = [];
 
@@ -132,6 +139,11 @@ async function fetchData() {
                                 hour: "HH:mm",
                             },
                         },
+                        adapters: {
+                            date: {
+                                zone: "Europe/Copenhagen",
+                            },
+                        },
                     },
                 },
             },
diff --git a/frontend/styles/home.css b/frontend/styles/home.css
index 90a045e..85eea8a 100644
--- a/frontend/styles/home.css
+++ b/frontend/styles/home.css
@@ -76,6 +76,9 @@ table .temperature {
 table tr:not(:last-child) .temperature {
     border-bottom-color: white;
 }
+td {
+    white-space: nowrap;
+}
 
 .tempHigh {
     background-color: #ff0000;