From dd2a3cf1508c53ce320f340d762f5a584ae4f047 Mon Sep 17 00:00:00 2001 From: Reimar Date: Mon, 31 Mar 2025 09:29:55 +0200 Subject: [PATCH 1/3] Show real temperature data in frontend --- .../mockdata/temperature-logs.mockdata.js | 28 ------------------- frontend/scripts/home.js | 8 +++--- frontend/scripts/services/devices.service.js | 11 ++------ frontend/shared/utils.js | 16 ++++++----- 4 files changed, 15 insertions(+), 48 deletions(-) delete mode 100644 frontend/mockdata/temperature-logs.mockdata.js diff --git a/frontend/mockdata/temperature-logs.mockdata.js b/frontend/mockdata/temperature-logs.mockdata.js deleted file mode 100644 index e6056ae..0000000 --- a/frontend/mockdata/temperature-logs.mockdata.js +++ /dev/null @@ -1,28 +0,0 @@ -export const mockTemperatureLogs = [ - { id: 1, temperature: 18.9, date: "2025-03-19T17:00:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 19.1, date: "2025-03-19T17:10:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 19.5, date: "2025-03-19T17:20:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 19.8, date: "2025-03-19T17:30:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.1, date: "2025-03-19T17:40:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.3, date: "2025-03-19T17:50:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.6, date: "2025-03-19T18:00:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.9, date: "2025-03-19T18:10:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.8, date: "2025-03-19T18:20:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.7, date: "2025-03-19T18:30:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.5, date: "2025-03-19T18:40:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.3, date: "2025-03-19T18:50:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.1, date: "2025-03-19T19:00:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 18.9, date: "2025-03-19T20:00:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 19.1, date: "2025-03-19T20:10:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 19.5, date: "2025-03-19T20:20:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 19.8, date: "2025-03-19T20:30:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.1, date: "2025-03-19T20:40:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 20.3, date: "2025-03-19T20:50:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 22.6, date: "2025-03-19T21:00:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 22.9, date: "2025-03-19T21:10:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 22.8, date: "2025-03-19T21:20:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 22.7, date: "2025-03-19T21:30:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 22.5, date: "2025-03-19T21:40:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 23.3, date: "2025-03-19T21:50:00Z", tempHigh: 22.0, tempLow: 18.0 }, - { id: 1, temperature: 24.1, date: "2025-03-19T22:00:00Z", tempHigh: 22.0, tempLow: 18.0 }, -] diff --git a/frontend/scripts/home.js b/frontend/scripts/home.js index 01c4bf1..6e19caa 100644 --- a/frontend/scripts/home.js +++ b/frontend/scripts/home.js @@ -1,14 +1,14 @@ -import { mockTemperatureLogs } from "../mockdata/temperature-logs.mockdata.js"; // Import data import { getLogsOnDeviceId } from "./services/devices.service.js"; async function buildChart() { + // TODO change device id const data = await getLogsOnDeviceId(1); - const xValues = mockTemperatureLogs.map((log) => + const xValues = data.map((log) => new Date(log.date).toLocaleString() ); // Full Date labels - const yValues = mockTemperatureLogs.map((log) => log.temperature); // Temperature values - buildTable(mockTemperatureLogs); + const yValues = data.map((log) => log.temperature); // Temperature values + buildTable(data); new Chart("myChart", { type: "line", data: { diff --git a/frontend/scripts/services/devices.service.js b/frontend/scripts/services/devices.service.js index 5b8830f..2d6eb82 100644 --- a/frontend/scripts/services/devices.service.js +++ b/frontend/scripts/services/devices.service.js @@ -1,4 +1,5 @@ import { address } from "../../shared/constants.js"; +import { request } from "../../shared/utils.js"; export function getDevicesOnUserId(id) { fetch(`${address}/get-on-user-id`, { @@ -27,13 +28,5 @@ export function update(ids) { } export function getLogsOnDeviceId(id) { - fetch(`${address}/device/logs/${id}`, { - method: "GET", - headers: { - "Content-Type": "application/json" - }, - }) - .then(response => response.json()) - .then(data => console.log("Success:", data)) - .catch(error => console.error("Error:", error)); + return request("GET", `/device/logs/${id}`); } diff --git a/frontend/shared/utils.js b/frontend/shared/utils.js index 30badae..08c045c 100644 --- a/frontend/shared/utils.js +++ b/frontend/shared/utils.js @@ -13,17 +13,19 @@ export async function request(method, path, body = null) { body: body ? JSON.stringify(body) : undefined, }) .then(async response => { - const json = await response.json(); + try { + const json = await response.json(); - if (response.ok) return resolve(json); + if (response.ok) return resolve(json); - if (json.error) return reject(json.error); + if (json.error) return reject(json.error); - if (json.message) return reject(json.message); + if (json.message) return reject(json.message); - if (json.errors) return reject(Object.values(response.errors)[0][0]); - - reject("Request failed with HTTP code " + response.status); + if (json.errors) return reject(Object.values(json.errors)[0][0]); + } finally { + reject("Request failed with HTTP code " + response.status); + } }) .catch(err => reject(err.message)); }); From df130b312cb0648788ba78d1a91a9d7ce31787c3 Mon Sep 17 00:00:00 2001 From: Reimar Date: Mon, 31 Mar 2025 10:20:26 +0200 Subject: [PATCH 2/3] Style dashboard --- frontend/home/index.html | 37 +++++++------- frontend/scripts/home.js | 28 +++++++---- frontend/styles/home.css | 105 ++++++++++++++++++++++++--------------- 3 files changed, 102 insertions(+), 68 deletions(-) diff --git a/frontend/home/index.html b/frontend/home/index.html index 6fe912f..36b1193 100644 --- a/frontend/home/index.html +++ b/frontend/home/index.html @@ -10,27 +10,28 @@ -
-
- Home -
- Devices - Profile -
+
+ Home + -
+
+
+
- - - - - - - - - -
NameTemperatureDateTempHighTempLow
+
+ + + + + + + + +
TemperatureDateTimeLimits
+
diff --git a/frontend/scripts/home.js b/frontend/scripts/home.js index 6e19caa..44aca18 100644 --- a/frontend/scripts/home.js +++ b/frontend/scripts/home.js @@ -1,8 +1,9 @@ import { getLogsOnDeviceId } from "./services/devices.service.js"; async function buildChart() { - // TODO change device id + // TODO change device id const data = await getLogsOnDeviceId(1); + data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); const xValues = data.map((log) => new Date(log.date).toLocaleString() @@ -15,6 +16,7 @@ async function buildChart() { labels: xValues, datasets: [ { + label: "Temperature", fill: false, lineTension: 0.4, backgroundColor: "rgba(0,0,255,1.0)", @@ -43,28 +45,32 @@ function buildTable(data) { data.forEach((log) => { var averageTemp = (log.tempHigh + log.tempLow) / 2.0; var color; - if (log.temperature > log.tempHigh) { + if (log.temperature >= log.tempHigh) { color = "tempHigh"; } else if ( log.temperature < log.tempHigh && log.temperature > averageTemp ) { color = "tempMidHigh"; - } else if (log.temperature < log.tempLow) { + } else if (log.temperature <= log.tempLow) { color = "tempLow"; } else if (log.temperature > log.tempLow && log.temperature < averageTemp) { color = "tempMidLow"; } else { color = "tempNormal"; } - var row = ` - Name - ${log.temperature} - ${log.date} - ${log.tempHigh} - ${log.tempLow} - `; - table.innerHTML += row; + + const date = new Date(log.date).toLocaleDateString(); + const time = new Date(log.date).toLocaleTimeString(); + + table.innerHTML += ` + + ${log.temperature}°C + ${date} + ${time} + Min: ${log.tempLow}°C, Max: ${log.tempHigh}°C + + `; }); } diff --git a/frontend/styles/home.css b/frontend/styles/home.css index 9eb7fac..a90bd7a 100644 --- a/frontend/styles/home.css +++ b/frontend/styles/home.css @@ -1,79 +1,106 @@ body { - margin: 0; - font-family: Arial, Helvetica, sans-serif; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + background-color: #F9F9F9; } #container { - background-color: white; - opacity: 100%; + margin: 0 2rem; } .topnav { - overflow: hidden; - background-color: #333; + overflow: hidden; + background-color: #333; } .topnav a { - float: left; - color: #f2f2f2; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; + float: left; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; } .topnav a:hover { - background-color: #ddd; - color: black; + background-color: #ddd; + color: black; } .topnav a.active { - background-color: #04aa6d; - color: white; + background-color: #04aa6d; + color: white; +} + +#table-wrapper { + overflow: hidden; + border-radius: 8px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); + border: 1px solid #DDD; } table { - font-family: arial, sans-serif; - border-collapse: collapse; - width: 100%; + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; + background-color: white; + color: #616161; } td, th { - border: 1px solid #dddddd; - text-align: left; - padding: 8px; + border-right: 1px solid #DDD; + border-bottom: 1px solid #DDD; + text-align: left; + padding: 8px; +} + +th { + border-bottom: 2px solid #DDD; } tr:nth-child(even) { - background-color: #dddddd; + background-color: #F5F5F5; +} + +table .temperature { + text-align: center; + color: white; + font-weight: bold; + width: 20px; +} +table tr:not(:last-child) .temperature { + border-bottom-color: white; } .tempHigh { - color: #ff0000; - width: 20px; + background-color: #ff0000; } - .tempMidHigh { - color: #fffb00; - width: 20px; + background-color: #FFA000; } - .tempNormal { - color: #02ed26; - width: 20px; + background-color: #AAA; } - .tempMidLow { - color: #16fae7; - width: 20px; + background-color: #64B5F6; } - .tempLow { - color: #0004ff; - width: 20px; + background-color: #3F51B5; } -.chartContainer{ - margin: 20px; +.low-limit { + color: #3F51B5; } +.high-limit { + color: #F00; +} + +.chart-container { + margin: 2rem 0; + background-color: white; + border-radius: 8px; + border: 1px solid #DDD; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); +} + From 6fe0841cbc2aecd03dd040eff529a7c1bd206eeb Mon Sep 17 00:00:00 2001 From: Reimar Date: Mon, 31 Mar 2025 10:31:57 +0200 Subject: [PATCH 3/3] Add error handling on dashboard --- frontend/home/index.html | 6 ++++-- frontend/login/index.html | 3 ++- frontend/register/index.html | 3 ++- frontend/scripts/home.js | 14 ++++++++++---- frontend/styles/auth.css | 10 ---------- frontend/styles/common.css | 9 ++++++++- frontend/styles/home.css | 4 ++++ 7 files changed, 30 insertions(+), 19 deletions(-) diff --git a/frontend/home/index.html b/frontend/home/index.html index 36b1193..ae98704 100644 --- a/frontend/home/index.html +++ b/frontend/home/index.html @@ -4,9 +4,10 @@ Temperature-Alarm-Web - - + + + @@ -33,6 +34,7 @@
+
diff --git a/frontend/login/index.html b/frontend/login/index.html index 4b22dea..fef2c91 100644 --- a/frontend/login/index.html +++ b/frontend/login/index.html @@ -4,6 +4,7 @@ Login - Temperature alarm + @@ -28,7 +29,7 @@
-
+
diff --git a/frontend/register/index.html b/frontend/register/index.html index 666fe02..921cea8 100644 --- a/frontend/register/index.html +++ b/frontend/register/index.html @@ -4,6 +4,7 @@ Register - Temperature Alarm + @@ -33,7 +34,7 @@ -
+
diff --git a/frontend/scripts/home.js b/frontend/scripts/home.js index 44aca18..e51e563 100644 --- a/frontend/scripts/home.js +++ b/frontend/scripts/home.js @@ -1,8 +1,6 @@ import { getLogsOnDeviceId } from "./services/devices.service.js"; -async function buildChart() { - // TODO change device id - const data = await getLogsOnDeviceId(1); +async function buildChart(data) { data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); const xValues = data.map((log) => @@ -74,4 +72,12 @@ function buildTable(data) { }); } -buildChart(); +// TODO change device id +getLogsOnDeviceId(1) + .then(buildChart) + .catch(err => { + document.getElementById("error").innerText = err; + document.getElementById("error").style.display = "block"; + document.getElementById("container").style.display = "none"; + }); + diff --git a/frontend/styles/auth.css b/frontend/styles/auth.css index bb7a66a..7ddf7ce 100644 --- a/frontend/styles/auth.css +++ b/frontend/styles/auth.css @@ -39,16 +39,6 @@ button:hover { margin-top: 0.5rem; } -#form-error { - display: none; - background-color: #FFCDD2; - color: #C62828; - border: 1px solid #C62828; - border-radius: 4px; - padding: 1rem 2rem; - margin-top: 1rem; -} - button{ border-radius: 20px; } diff --git a/frontend/styles/common.css b/frontend/styles/common.css index a4742c3..4de8cbb 100644 --- a/frontend/styles/common.css +++ b/frontend/styles/common.css @@ -1,3 +1,10 @@ .error { - background-color: #EF9A9A; + display: none; + background-color: #FFCDD2; + color: #C62828; + border: 1px solid #C62828; + border-radius: 4px; + padding: 1rem 2rem; + margin-top: 1rem; } + diff --git a/frontend/styles/home.css b/frontend/styles/home.css index a90bd7a..0f1fd03 100644 --- a/frontend/styles/home.css +++ b/frontend/styles/home.css @@ -104,3 +104,7 @@ table tr:not(:last-child) .temperature { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); } +#error { + margin: 2rem; +} +