ReiMerc/temperature-alarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make device selector work, fix x-axis

Browse Source
This commit is contained in:
Reimar 2025-04-08 10:15:41 +02:00
parent 1fad48b7d8
commit 2a7ccc7e5f
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
1 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/scripts/home.js
View File

@ -75,28 +75,22 @@ function randomColorChannelValue() {
return Math.floor(Math.random() * 256); return Math.floor(Math.random() * 256);
} }
function isSameDay(a, b) { function parseDate(date) {
return a.getFullYear() === b.getFullYear() &&
a.getMonth() === b.getMonth() &&
a.getDate() === b.getDate();
}
function localToUTC(date) {
if (!date) return null; 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() { async function fetchData() {
document.body.classList.add("loading"); document.body.classList.add("loading");
const startDate = localToUTC(document.getElementById("period-start").value); const startDate = parseDate(document.getElementById("period-start").value);
const endDate = localToUTC(document.getElementById("period-end").value); const endDate = parseDate(document.getElementById("period-end").value);
const deviceData = []; const deviceData = [];
for (const device of devices) { 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); .catch(handleError);
deviceData.push(data); deviceData.push(data);
@ -109,6 +103,11 @@ async function fetchData() {
document.getElementById("table-body").innerHTML = ""; document.getElementById("table-body").innerHTML = "";
buildTable(deviceData[0]); buildTable(deviceData[0]);
document.getElementById("device-selector").oninput = event => {
document.getElementById("table-body").innerHTML = "";
buildTable(deviceData[event.target.selectedIndex]);
};
if (!chart) { if (!chart) {
chart = new Chart("chart", { chart = new Chart("chart", {
type: "line", type: "line",
@ -149,9 +148,7 @@ async function fetchData() {
}); });
} }
chart.options.scales.x.time.unit = isSameDay(new Date(startDate), new Date(endDate)) chart.options.scales.x.time.unit = startDate.hasSame(endDate, "day") ? "hour" : "day";
? "hour"
: "day";
chart.data.datasets = deviceData.map((dataset, i) => { chart.data.datasets = deviceData.map((dataset, i) => {
const color = new Array(3) const color = new Array(3)