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

init

Browse Source
This commit is contained in:
LilleBRG 2025-03-19 16:02:59 +01:00
parent 950f023821
commit 11967bfa59
8 changed files with 265 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,28 +1,28 @@
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 },
];
{ 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 },
]

41
frontend/pages/home/home.css
View File

@ -25,4 +25,45 @@ body {
.topnav a.active {
background-color: #04AA6D;
color: white;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.tempHigh{
color: #ff0000;
width: 20px;
}
.tempMidHigh{
color: #fffb00;
width: 20px;
}
.tempNormal{
color: #02ed26;
width: 20px;
}
.tempMidLow{
color: #16fae7 ;
width: 20px;
}
.tempLow{
color: #0004ff;
width: 20px;
}

13
frontend/pages/home/home.html
View File

@ -15,6 +15,19 @@
</div>
<canvas id="myChart" style="width:100%;width: 100vw;"></canvas>
<table>
<tr>
<th>Name</th>
<th>Temperature</th>
<th>Date</th>
<th>TempHigh</th>
<th>TempLow</th>
</tr>
<tbody id="TemperatureTable">
</tbody>
</table>
</body>
<link rel="stylesheet" href="home.css">
<script type="module" src="home.js"></script>

33
frontend/pages/home/home.js
View File

@ -1,8 +1,8 @@
import { mockTemperatureLogs } from "../../mockdata/temperature-logs.mockdata.js"; // Import data
const xValues = mockTemperatureLogs.map(log => new Date(log.Date).toLocaleString()); // Full Date labels
const yValues = mockTemperatureLogs.map(log => log.Temperature); // Temperature values
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: {
@ -28,3 +28,30 @@ new Chart("myChart", {
}
}
});
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>
<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
})
}

45
frontend/pages/login/login.css
View File

@ -0,0 +1,45 @@
body {font-family: Arial, Helvetica, sans-serif;}
.container{
display: flex;
justify-content: center;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.form-container {
padding: 16px;
}
.registerText{
display: flex;
justify-content: space-between;
}

33
frontend/pages/login/login.html
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<form action="" method="post">
<div class="form-container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<div class="registerText">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
<label>
Dont have an account? <a href="../register/register.html">Register</a>
</label>
</div>
</div>
</form>
</div>
</body>
<link rel="stylesheet" href="login.css">
</html>

46
frontend/pages/register/register.css
View File

@ -0,0 +1,46 @@
body {font-family: Arial, Helvetica, sans-serif;}
.container{
display: flex;
justify-content: center;
align-items: center;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.form-container {
padding: 16px;
}
.loginText{
display: flex;
justify-content: flex-end;
}

30
frontend/pages/register/register.html
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<form action="" method="post">
<div class="form-container ">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<div class="loginText">
<label>
Already have an account? <a href="../login/login.html">Login</a>
</label>
</div>
</div>
</form>
</div>
</body>
<link rel="stylesheet" href="register.css">
</html>