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

Change how requests are sent in order to send auth token

Browse Source
This commit is contained in:
Reimar 2025-03-27 09:03:34 +01:00
parent bce48fe8d1
commit 0f1b10d2d7
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
7 changed files with 148 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/home/index.html
View File

@ -1,36 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature-Alarm-Web</title> <title>Temperature-Alarm-Web</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<link rel="stylesheet" href="/styles/home.css" /> <link rel="stylesheet" href="/styles/home.css" />
<script type="module" src="/scripts/home.js"></script> <script defer type="module" src="/scripts/home.js"></script>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div class="topnav"> <div class="topnav">
<a class="active" href="/home/index.html">Home</a> <a class="active" href="/home/index.html">Home</a>
<div style="display: flex; justify-content: flex-end;"> <div style="display: flex; justify-content: flex-end;">
<a class="" href="/home/index.html">Devices</a> <a class="" href="/home/index.html">Devices</a>
<a class="" href="/profile/index.html">Profile</a> <a class="" href="/profile/index.html">Profile</a>
</div>
</div>
<div class="chartContainer">
<canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
</div>
<table>
<tr>
<th>Name</th>
<th>Temperature</th>
<th>Date</th>
<th>TempHigh</th>
<th>TempLow</th>
</tr>
<tbody id="TemperatureTable"></tbody>
</table>
</div> </div>
</div> </body>
<div class="chartContainer">
<canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
</div>
<table>
<tr>
<th>Name</th>
<th>Temperature</th>
<th>Date</th>
<th>TempHigh</th>
<th>TempLow</th>
</tr>
<tbody id="TemperatureTable"></tbody>
</table>
</div>
</body>
</html> </html>

127
frontend/scripts/home.js
View File

@ -1,84 +1,71 @@
import { mockTemperatureLogs } from "../mockdata/temperature-logs.mockdata.js"; // Import data import { mockTemperatureLogs } from "../mockdata/temperature-logs.mockdata.js"; // Import data
import { getLogsOnDeviceId } from "./services/devices.service.js";
const xValues = mockTemperatureLogs.map((log) => async function buildChart() {
new Date(log.date).toLocaleString() const data = await getLogsOnDeviceId(1);
); // Full Date labels
const yValues = mockTemperatureLogs.map((log) => log.temperature); // Temperature values const xValues = mockTemperatureLogs.map((log) =>
buildTable(mockTemperatureLogs); new Date(log.date).toLocaleString()
new Chart("myChart", { ); // Full Date labels
type: "line", const yValues = mockTemperatureLogs.map((log) => log.temperature); // Temperature values
data: { buildTable(mockTemperatureLogs);
labels: xValues, new Chart("myChart", {
datasets: [ type: "line",
{ data: {
fill: false, labels: xValues,
lineTension: 0.4, datasets: [
backgroundColor: "rgba(0,0,255,1.0)", {
borderColor: "rgba(0,0,255,0.1)", fill: false,
data: yValues, 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}`;
}, },
label: function (tooltipItem) { options: {
return `Temperature: ${tooltipItem.value}°C`; tooltips: {
callbacks: {
title: function (tooltipItem) {
return `Date: ${tooltipItem[0].label}`;
},
label: function (tooltipItem) {
return `Temperature: ${tooltipItem.value}°C`;
},
},
},
}, },
}, });
}, }
},
});
function buildTable(data) { function buildTable(data) {
var table = document.getElementById(`TemperatureTable`); var table = document.getElementById(`TemperatureTable`);
data.forEach((log) => { data.forEach((log) => {
var averageTemp = (log.tempHigh + log.tempLow) / 2.0; var averageTemp = (log.tempHigh + log.tempLow) / 2.0;
var color; var color;
if (log.temperature > log.tempHigh) { if (log.temperature > log.tempHigh) {
color = "tempHigh"; color = "tempHigh";
} else if ( } else if (
log.temperature < log.tempHigh && log.temperature < log.tempHigh &&
log.temperature > averageTemp log.temperature > averageTemp
) { ) {
color = "tempMidHigh"; color = "tempMidHigh";
} else if (log.temperature < log.tempLow) { } else if (log.temperature < log.tempLow) {
color = "tempLow"; color = "tempLow";
} else if (log.temperature > log.tempLow && log.temperature < averageTemp) { } else if (log.temperature > log.tempLow && log.temperature < averageTemp) {
color = "tempMidLow"; color = "tempMidLow";
} else { } else {
color = "tempNormal"; color = "tempNormal";
} }
var row = ` <tr> var row = ` <tr>
<td>Name</td> <td>Name</td>
<td class="${color}">${log.temperature}</td> <td class="${color}">${log.temperature}</td>
<td>${log.date}</td> <td>${log.date}</td>
<td class="tempHigh">${log.tempHigh}</td> <td class="tempHigh">${log.tempHigh}</td>
<td class="tempLow">${log.tempLow}</td> <td class="tempLow">${log.tempLow}</td>
</tr>`; </tr>`;
table.innerHTML += row; table.innerHTML += row;
}); });
} }
// Get the modal buildChart();
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 <span> (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";
}
};

13
frontend/scripts/login.js
View File

@ -10,13 +10,12 @@ document.getElementById("loginForm").addEventListener("submit", function(event)
login(emailOrUsername, password) login(emailOrUsername, password)
.then(response => { .then(response => {
if (response.error) {
document.getElementById("form-error").innerText = response.error;
document.getElementById("form-error").style.display = "block";
return;
}
location.href = "/home"; location.href = "/home";
})
.catch(error => {
console.log(error);
document.getElementById("form-error").innerText = error;
document.getElementById("form-error").style.display = "block";
}); });
}); });

11
frontend/scripts/register.js
View File

@ -14,13 +14,10 @@ document.getElementById("registerForm").addEventListener("submit", function(even
// Call function with form values // Call function with form values
create(email, username, password, repeatPassword) create(email, username, password, repeatPassword)
.then(response => { .then(response => {
if (response?.error) {
document.getElementById("form-error").innerText = response.error;
document.getElementById("form-error").style.display = "block";
return;
}
location.href = "/login"; location.href = "/login";
})
.catch(error => {
document.getElementById("form-error").innerText = error;
document.getElementById("form-error").style.display = "block";
}); });
}); });

9
frontend/scripts/services/devices.service.js
View File

@ -1,4 +1,4 @@
import { address } from "../../shared/constants"; import { address } from "../../shared/constants.js";
export function getDevicesOnUserId(id) { export function getDevicesOnUserId(id) {
fetch(`${address}/get-on-user-id`, { fetch(`${address}/get-on-user-id`, {
@ -26,15 +26,14 @@ export function update(ids) {
.catch(error => console.error("Error:", error)); .catch(error => console.error("Error:", error));
} }
export function getLogsOnDeviceIds(id) { export function getLogsOnDeviceId(id) {
fetch(`${address}/get-on-device-ids`, { fetch(`${address}/device/logs/${id}`, {
method: "GET", method: "GET",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
}, },
body: JSON.stringify({ ids: id })
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => console.log("Success:", data)) .then(data => console.log("Success:", data))
.catch(error => console.error("Error:", error)); .catch(error => console.error("Error:", error));
} }

60
frontend/scripts/services/users.service.js
View File

@ -1,54 +1,32 @@
import { address } from "../../shared/constants.js"; import { request } from "../../shared/utils.js";
import { handleResponse } from "../../shared/utils.js";
export function login(usernameOrEmail, password) { export function login(usernameOrEmail, password) {
return fetch(`${address}/user/login`, { return request("POST", "/user/login", {
method: "POST", EmailOrUsrn: usernameOrEmail,
headers: { Password: password,
"Content-Type": "application/json" });
},
body: JSON.stringify({
EmailOrUsrn: usernameOrEmail,
Password: password,
}),
})
.then(handleResponse)
.catch(err => { error: err.message });
} }
export function create(email, username, password, repeatPassword){ export function create(email, username, password, repeatPassword){
return fetch(`${address}/user/create`, { return request("POST", "/user/create", {
method: "POST", email,
headers: { username,
"Content-Type": "application/json" password,
}, repeatPassword,
body: JSON.stringify({email: email, username: username, password: password, repeatPassword: repeatPassword}) });
})
.then(handleResponse)
.catch(err => { error: err.message });
} }
export function update(email, username){ export function update(email, username){
return fetch(`${address}/user/update`, { return request("PATCH", "/user/update", {
method: "PATCH", email,
headers: { username,
"Content-Type": "application/json" });
},
body: JSON.stringify({email: email, username: username})
})
.then(handleResponse)
.catch(err => { error: err.message });
} }
export function updatePassword(oldPassword, newPassword){ export function updatePassword(oldPassword, newPassword){
return fetch(`${address}/user/update-password`, { return request("PATCH", "/user/update-password", {
method: "PATCH", oldPassword,
headers: { newPassword,
"Content-Type": "application/json" });
},
body: JSON.stringify({oldPassword: oldPassword, newPassword: newPassword})
})
.then(handleResponse)
.catch(err => { error: err.message });
} }

33
frontend/shared/utils.js
View File

@ -1,12 +1,31 @@
export async function handleResponse(response) { import { address } from "./constants.js";
const json = await response.json();
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 new Promise((resolve, reject) => {
return { error: Object.values(response.errors)[0][0] }; 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));
});
} }