From 0f1b10d2d703ca070fbdd0f064754dab32360a63 Mon Sep 17 00:00:00 2001 From: Reimar Date: Thu, 27 Mar 2025 09:03:34 +0100 Subject: [PATCH] Change how requests are sent in order to send auth token --- frontend/home/index.html | 63 ++++----- frontend/scripts/home.js | 127 +++++++++---------- frontend/scripts/login.js | 13 +- frontend/scripts/register.js | 11 +- frontend/scripts/services/devices.service.js | 9 +- frontend/scripts/services/users.service.js | 60 +++------ frontend/shared/utils.js | 33 ++++- 7 files changed, 148 insertions(+), 168 deletions(-) diff --git a/frontend/home/index.html b/frontend/home/index.html index 403e197..6fe912f 100644 --- a/frontend/home/index.html +++ b/frontend/home/index.html @@ -1,36 +1,37 @@ - - - - Temperature-Alarm-Web - - - - + + + + Temperature-Alarm-Web + + + + - -
-
- Home -
- Devices - Profile + +
+
+ Home + +
+
+ +
+ + + + + + + + + +
NameTemperatureDateTempHighTempLow
-
-
- -
- - - - - - - - - -
NameTemperatureDateTempHighTempLow
-
- + + diff --git a/frontend/scripts/home.js b/frontend/scripts/home.js index 8538bbb..01c4bf1 100644 --- a/frontend/scripts/home.js +++ b/frontend/scripts/home.js @@ -1,84 +1,71 @@ import { mockTemperatureLogs } from "../mockdata/temperature-logs.mockdata.js"; // Import data +import { getLogsOnDeviceId } from "./services/devices.service.js"; -const xValues = mockTemperatureLogs.map((log) => - new Date(log.date).toLocaleString() -); // Full Date labels -const yValues = mockTemperatureLogs.map((log) => log.temperature); // Temperature values -buildTable(mockTemperatureLogs); -new Chart("myChart", { - type: "line", - data: { - labels: xValues, - datasets: [ - { - fill: false, - lineTension: 0.4, - backgroundColor: "rgba(0,0,255,1.0)", - borderColor: "rgba(0,0,255,0.1)", - data: yValues, - }, - ], - }, - options: { - tooltips: { - callbacks: { - title: function (tooltipItem) { - return `Date: ${tooltipItem[0].label}`; +async function buildChart() { + const data = await getLogsOnDeviceId(1); + + const xValues = mockTemperatureLogs.map((log) => + new Date(log.date).toLocaleString() + ); // Full Date labels + const yValues = mockTemperatureLogs.map((log) => log.temperature); // Temperature values + buildTable(mockTemperatureLogs); + new Chart("myChart", { + type: "line", + data: { + labels: xValues, + datasets: [ + { + fill: false, + lineTension: 0.4, + backgroundColor: "rgba(0,0,255,1.0)", + borderColor: "rgba(0,0,255,0.1)", + data: yValues, + }, + ], }, - label: function (tooltipItem) { - return `Temperature: ${tooltipItem.value}°C`; + options: { + tooltips: { + callbacks: { + title: function (tooltipItem) { + return `Date: ${tooltipItem[0].label}`; + }, + label: function (tooltipItem) { + return `Temperature: ${tooltipItem.value}°C`; + }, + }, + }, }, - }, - }, - }, -}); + }); +} function buildTable(data) { - var table = document.getElementById(`TemperatureTable`); - data.forEach((log) => { - var averageTemp = (log.tempHigh + log.tempLow) / 2.0; - var color; - if (log.temperature > log.tempHigh) { - color = "tempHigh"; - } else if ( - log.temperature < log.tempHigh && - log.temperature > averageTemp - ) { - color = "tempMidHigh"; - } else if (log.temperature < log.tempLow) { - color = "tempLow"; - } else if (log.temperature > log.tempLow && log.temperature < averageTemp) { - color = "tempMidLow"; - } else { - color = "tempNormal"; - } - var row = ` + var table = document.getElementById(`TemperatureTable`); + data.forEach((log) => { + var averageTemp = (log.tempHigh + log.tempLow) / 2.0; + var color; + if (log.temperature > log.tempHigh) { + color = "tempHigh"; + } else if ( + log.temperature < log.tempHigh && + log.temperature > averageTemp + ) { + color = "tempMidHigh"; + } 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; - }); + table.innerHTML += row; + }); } -// Get the modal -var modal = document.getElementById("chartModal"); -var btn = document.getElementById("myBtn"); -var span = document.getElementsByClassName("close")[0]; -btn.onclick = function () { - modal.style.display = "block"; -}; - -// When the user clicks on (x), close the modal -span.onclick = function () { - modal.style.display = "none"; -}; - -// When the user clicks anywhere outside of the modal, close it -window.onclick = function (event) { - if (event.target == modal) { - modal.style.display = "none"; - } -}; +buildChart(); diff --git a/frontend/scripts/login.js b/frontend/scripts/login.js index e264a10..162a418 100644 --- a/frontend/scripts/login.js +++ b/frontend/scripts/login.js @@ -10,13 +10,12 @@ document.getElementById("loginForm").addEventListener("submit", function(event) login(emailOrUsername, password) .then(response => { - if (response.error) { - document.getElementById("form-error").innerText = response.error; - document.getElementById("form-error").style.display = "block"; - - return; - } - location.href = "/home"; + }) + .catch(error => { + console.log(error); + document.getElementById("form-error").innerText = error; + document.getElementById("form-error").style.display = "block"; }); }); + diff --git a/frontend/scripts/register.js b/frontend/scripts/register.js index 56bc5ee..3284ed3 100644 --- a/frontend/scripts/register.js +++ b/frontend/scripts/register.js @@ -14,13 +14,10 @@ document.getElementById("registerForm").addEventListener("submit", function(even // Call function with form values create(email, username, password, repeatPassword) .then(response => { - if (response?.error) { - document.getElementById("form-error").innerText = response.error; - document.getElementById("form-error").style.display = "block"; - - return; - } - location.href = "/login"; + }) + .catch(error => { + document.getElementById("form-error").innerText = error; + document.getElementById("form-error").style.display = "block"; }); }); diff --git a/frontend/scripts/services/devices.service.js b/frontend/scripts/services/devices.service.js index b2b18d8..5b8830f 100644 --- a/frontend/scripts/services/devices.service.js +++ b/frontend/scripts/services/devices.service.js @@ -1,4 +1,4 @@ -import { address } from "../../shared/constants"; +import { address } from "../../shared/constants.js"; export function getDevicesOnUserId(id) { fetch(`${address}/get-on-user-id`, { @@ -26,15 +26,14 @@ export function update(ids) { .catch(error => console.error("Error:", error)); } -export function getLogsOnDeviceIds(id) { - fetch(`${address}/get-on-device-ids`, { +export function getLogsOnDeviceId(id) { + fetch(`${address}/device/logs/${id}`, { method: "GET", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ ids: id }) }) .then(response => response.json()) .then(data => console.log("Success:", data)) .catch(error => console.error("Error:", error)); -} \ No newline at end of file +} diff --git a/frontend/scripts/services/users.service.js b/frontend/scripts/services/users.service.js index 4b5fa02..c12d085 100644 --- a/frontend/scripts/services/users.service.js +++ b/frontend/scripts/services/users.service.js @@ -1,54 +1,32 @@ -import { address } from "../../shared/constants.js"; -import { handleResponse } from "../../shared/utils.js"; +import { request } from "../../shared/utils.js"; export function login(usernameOrEmail, password) { - return fetch(`${address}/user/login`, { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({ - EmailOrUsrn: usernameOrEmail, - Password: password, - }), - }) - .then(handleResponse) - .catch(err => { error: err.message }); + return request("POST", "/user/login", { + EmailOrUsrn: usernameOrEmail, + Password: password, + }); } export function create(email, username, password, repeatPassword){ - return fetch(`${address}/user/create`, { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({email: email, username: username, password: password, repeatPassword: repeatPassword}) - }) - .then(handleResponse) - .catch(err => { error: err.message }); + return request("POST", "/user/create", { + email, + username, + password, + repeatPassword, + }); } export function update(email, username){ - return fetch(`${address}/user/update`, { - method: "PATCH", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({email: email, username: username}) - }) - .then(handleResponse) - .catch(err => { error: err.message }); + return request("PATCH", "/user/update", { + email, + username, + }); } export function updatePassword(oldPassword, newPassword){ - return fetch(`${address}/user/update-password`, { - method: "PATCH", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({oldPassword: oldPassword, newPassword: newPassword}) - }) - .then(handleResponse) - .catch(err => { error: err.message }); + return request("PATCH", "/user/update-password", { + oldPassword, + newPassword, + }); } diff --git a/frontend/shared/utils.js b/frontend/shared/utils.js index 419b3c0..d3c1964 100644 --- a/frontend/shared/utils.js +++ b/frontend/shared/utils.js @@ -1,12 +1,31 @@ -export async function handleResponse(response) { - const json = await response.json(); +import { address } from "./constants.js"; - if (response.ok || json.error) return json; +export async function request(method, path, body = null) { + const token = document.cookie.match(/\bauth-token=(\S+)/); - if (json.errors) { - return { error: Object.values(response.errors)[0][0] }; - } + return new Promise((resolve, reject) => { + fetch(address + path, { + method, + headers: { + "Content-Type": body ? "application/json" : undefined, + "Authorization": token?.length > 1 ? `Bearer ${token[1]}` : undefined, + }, + body: body ? JSON.stringify(body) : undefined, + }) + .then(async response => { + const json = await response.json(); - return { error: "Request failed with HTTP code " + response.status }; + if (response.ok) return resolve(json); + + if (json.error) return reject(json.error); + + 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); + }) + .catch(err => reject(err.message)); + }); }