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

Merge pull request 'authAndTable' (#1) from authAndTable into master

Browse Source 
Reviewed-on: #1
This commit is contained in:
lillebrg 2025-03-19 16:57:39 +00:00
commit d7fc147111
11 changed files with 442 additions and 99 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 },
]

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

@ -1,28 +1,113 @@
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#container {
background-color: white;
opacity: 100%;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.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;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
border-radius: 20px;
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

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

@ -1,21 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>
<div class="topnav">
</head>
<body>
<div id="container">
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#news" id="myBtn">View Chart</a>
</div>
<canvas id="myChart" style="width:100%;width: 100vw;"></canvas>
</body>
<link rel="stylesheet" href="home.css">
<script type="module" src="home.js"></script>
</html>
<div id="chartModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<canvas id="myChart" style="width: 80%; width: 80%"></canvas>
</div>
</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>
<link rel="stylesheet" href="home.css" />
<script type="module" src="home.js"></script>
</html>

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

@ -1,30 +1,84 @@
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: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0.4,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
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}`;
},
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>
<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;
});
}
// 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";
}
};

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

@ -0,0 +1,41 @@
body {font-family: Arial, Helvetica, sans-serif;}
.container{
display: flex;
justify-content: center;
}
/* Full-width input fields */
input[type=text], input[type=password], input[type=email] {
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;
}
.form-container {
width: 800px;
padding: 16px;
}
.registerText{
display: flex;
justify-content: space-between;
}

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

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<form id="loginForm">
<div class="form-container">
<h1>Login</h1>
<label for="emailorusn"><b>Email or Username</b></label>
<input type="text" placeholder="Enter email or username" id="emailorusn" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter password" id="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">
<script type="module" src="login.js"></script>
</html>

13
frontend/pages/login/login.js
View File

@ -0,0 +1,13 @@
import { login } from "../../services/users.service.js";
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevents default form submission
// Get form values
const emailOrUsername = document.getElementById("emailorusn").value;
const password = document.getElementById("psw").value;
// Call function with form values
login(emailOrUsername, password);
});

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

@ -0,0 +1,41 @@
body {font-family: Arial, Helvetica, sans-serif;}
.container{
display: flex;
justify-content: center;
}
/* Full-width input fields */
input[type=text], input[type=password], input[type=email] {
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;
}
.form-container {
width: 800px;
padding: 16px;
}
.loginText{
display: flex;
justify-content: flex-end;
}

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

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<form id="registerForm">
<div class="form-container">
<h1>Create Account</h1>
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter email "id="email" required>
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter username" id="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter password" id="psw" required>
<label for="rpsw"><b>Repeat Password</b></label>
<input type="password" placeholder="Enter password again" id="rpsw" required>
<button type="submit">Register</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">
<script type="module" src="register.js"></script>
</html>

14
frontend/pages/register/register.js
View File

@ -0,0 +1,14 @@
import { create } from "../../services/users.service.js";
document.getElementById("registerForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevents default form submission
// Get form values
const email = document.getElementById("email").value;
const username = document.getElementById("uname").value;
const password = document.getElementById("psw").value;
const repeatPassword = document.getElementById("rpsw").value;
// Call function with form values
create(email, username, password, repeatPassword);
});

13
frontend/services/users.service.js
View File

@ -1,32 +1,35 @@
const address = "http://10.135.51.116/temperature-alarm-webapi/users"
function login(username, password) {
export function login(usernameOrEmail, password) {
console.log(usernameOrEmail);
console.log(password);
fetch(`${address}/login`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({username: username, password: password})
body: JSON.stringify({usernameOrEmail: usernameOrEmail, password: password})
})
.then(response => response.json())
.then(data => console.log("Success:", data))
.catch(error => console.error("Error:", error));
}
function create(email, username, password){
export function create(email, username, password, repeatPassword){
fetch(`${address}/create`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({email: email, username: username, password: password})
body: JSON.stringify({email: email, username: username, password: password, repeatPassword: repeatPassword})
})
.then(response => response.json())
.then(data => console.log("Success:", data))
.catch(error => console.error("Error:", error));
}
function update(email, username, password){
export function update(email, username, password){
fetch(`${address}/update`, {
method: "PATCH",
headers: {