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

Merge branch 'master' of git.reim.ar:ReiMerc/temperature-alarm

Browse Source
This commit is contained in:
Jeas0001 2025-03-31 10:39:35 +02:00
commit 7a3d5b4f71
10 changed files with 145 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/home/index.html
View File

@ -4,34 +4,37 @@
<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 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script defer type="module" src="/scripts/home.js"></script>
<link rel="stylesheet" href="/styles/common.css">
<link rel="stylesheet" href="/styles/home.css" />
</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>
</div>
<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 class="chartContainer">
</div>
<div id="container">
<div class="chart-container">
<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 id="table-wrapper">
<table>
<tr>
<th>Temperature</th>
<th>Date</th>
<th>Time</th>
<th>Limits</th>
</tr>
<tbody id="TemperatureTable"></tbody>
</table>
</div>
</div>
<div id="error" class="error"></div>
</body>
</html>

3
frontend/login/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<title>Login - Temperature alarm</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/common.css">
<link rel="stylesheet" href="/styles/auth.css">
<script defer type="module" src="/scripts/login.js"></script>
</head>
@ -28,7 +29,7 @@
</span>
</div>
<div id="form-error"></div>
<div id="form-error" class="error"></div>
</div>
</form>
</body>

28
frontend/mockdata/temperature-logs.mockdata.js
View File

@ -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 },
]

3
frontend/register/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<title>Register - Temperature Alarm</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/common.css">
<link rel="stylesheet" href="/styles/auth.css">
<script defer type="module" src="/scripts/register.js"></script>
</head>
@ -33,7 +34,7 @@
</label>
</div>
<div id="form-error"></div>
<div id="form-error" class="error"></div>
</div>
</form>
</body>

46
frontend/scripts/home.js
View File

@ -1,20 +1,20 @@
import { mockTemperatureLogs } from "../mockdata/temperature-logs.mockdata.js"; // Import data
import { getLogsOnDeviceId } from "./services/devices.service.js";
async function buildChart() {
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 = 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: {
labels: xValues,
datasets: [
{
label: "Temperature",
fill: false,
lineTension: 0.4,
backgroundColor: "rgba(0,0,255,1.0)",
@ -43,29 +43,41 @@ 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 = ` <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;
const date = new Date(log.date).toLocaleDateString();
const time = new Date(log.date).toLocaleTimeString();
table.innerHTML += `
<tr>
<td class="temperature ${color}">${log.temperature}&deg;C</td>
<td>${date}</td>
<td width="50%">${time}</td>
<td width="50%">Min: <b class="low-limit">${log.tempLow}&deg;C</b>, Max: <b class="high-limit">${log.tempHigh}&deg;C</b></td>
</tr>
`;
});
}
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";
});

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

@ -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}`);
}

16
frontend/shared/utils.js
View File

@ -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));
});

10
frontend/styles/auth.css
View File

@ -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;
}

9
frontend/styles/common.css
View File

@ -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;
}

109
frontend/styles/home.css
View File

@ -1,79 +1,110 @@
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);
}
#error {
margin: 2rem;
}