-
-
Home
-
-
Devices
-
Profile
+
+
+
+
+
+
+
+
+ | Name |
+ Temperature |
+ Date |
+ TempHigh |
+ TempLow |
+
+
+
-
-
-
-
-
-
- | Name |
- Temperature |
- Date |
- TempHigh |
- TempLow |
-
-
-
-
-
+
+
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));
+ });
}