Change how requests are sent in order to send auth token
This commit is contained in:
parent
bce48fe8d1
commit
0f1b10d2d7
GPG Key ID:
93549FA07F0AE268
@ -1,36 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Temperature-Alarm-Web</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
|
||||
<link rel="stylesheet" href="/styles/home.css" />
|
||||
<script type="module" src="/scripts/home.js"></script>
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Temperature-Alarm-Web</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
|
||||
<link rel="stylesheet" href="/styles/home.css" />
|
||||
<script defer type="module" src="/scripts/home.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class="topnav">
|
||||
<a class="active" href="/home/index.html">Home</a>
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<a class="" href="/home/index.html">Devices</a>
|
||||
<a class="" href="/profile/index.html">Profile</a>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class="topnav">
|
||||
<a class="active" href="/home/index.html">Home</a>
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<a class="" href="/home/index.html">Devices</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 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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -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 = ` <tr>
|
||||
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 = ` <tr>
|
||||
<td>Name</td>
|
||||
<td class="${color}">${log.temperature}</td>
|
||||
<td>${log.date}</td>
|
||||
<td class="tempHigh">${log.tempHigh}</td>
|
||||
<td class="tempLow">${log.tempLow}</td>
|
||||
</tr>`;
|
||||
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 <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";
|
||||
}
|
||||
};
|
||||
buildChart();
|
||||
|
||||
@ -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";
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -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";
|
||||
});
|
||||
});
|
||||
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user