login, register and table have content
This commit is contained in:
LilleBRG
parent
11967bfa59
commit
6ba82bc727
@ -1,69 +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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
#container {
|
||||
background-color: white;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.tempHigh{
|
||||
color: #ff0000;
|
||||
width: 20px;
|
||||
}
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.tempMidHigh{
|
||||
color: #fffb00;
|
||||
width: 20px;
|
||||
}
|
||||
.topnav a {
|
||||
float: left;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.tempNormal{
|
||||
color: #02ed26;
|
||||
width: 20px;
|
||||
}
|
||||
.topnav a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.tempMidLow{
|
||||
color: #16fae7 ;
|
||||
width: 20px;
|
||||
}
|
||||
.topnav a.active {
|
||||
background-color: #04aa6d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tempLow{
|
||||
color: #0004ff;
|
||||
width: 20px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,22 +1,27 @@
|
||||
<!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">
|
||||
<a class="active" href="#home">Home</a>
|
||||
<a href="#news">News</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<a href="#about">About</a>
|
||||
</div>
|
||||
|
||||
<canvas id="myChart" style="width:100%;width: 100vw;"></canvas>
|
||||
</head>
|
||||
|
||||
<table>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class="topnav">
|
||||
<a class="active" href="#home">Home</a>
|
||||
<a href="#news" id="myBtn">View Chart</a>
|
||||
</div>
|
||||
|
||||
<div id="chartModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<canvas id="myChart" style="width: 80%; width: 80%"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Temperature</th>
|
||||
@ -24,11 +29,10 @@
|
||||
<th>TempHigh</th>
|
||||
<th>TempLow</th>
|
||||
</tr>
|
||||
<tbody id="TemperatureTable">
|
||||
|
||||
</tbody>
|
||||
<tbody id="TemperatureTable"></tbody>
|
||||
</table>
|
||||
</body>
|
||||
<link rel="stylesheet" href="home.css">
|
||||
<script type="module" src="home.js"></script>
|
||||
</html>
|
||||
</div>
|
||||
</body>
|
||||
<link rel="stylesheet" href="home.css" />
|
||||
<script type="module" src="home.js"></script>
|
||||
</html>
|
||||
|
||||
@ -1,57 +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>
|
||||
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
|
||||
})
|
||||
</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";
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
body {font-family: Arial, Helvetica, sans-serif;}
|
||||
|
||||
.container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Full-width input fields */
|
||||
input[type=text], input[type=password] {
|
||||
input[type=text], input[type=password], input[type=email] {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
@ -30,16 +30,12 @@ button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
width: 40%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
.form-container {
|
||||
width: 800px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.registerText{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -7,13 +7,15 @@
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<form action="" method="post">
|
||||
<form id="loginForm">
|
||||
<div class="form-container">
|
||||
<label for="uname"><b>Username</b></label>
|
||||
<input type="text" placeholder="Enter Username" name="uname" required>
|
||||
<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" name="psw" required>
|
||||
<input type="password" placeholder="Enter password" id="psw" required>
|
||||
|
||||
<button type="submit">Login</button>
|
||||
<div class="registerText">
|
||||
@ -29,5 +31,6 @@
|
||||
</div>
|
||||
</body>
|
||||
<link rel="stylesheet" href="login.css">
|
||||
<script type="module" src="login.js"></script>
|
||||
|
||||
</html>
|
||||
@ -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);
|
||||
});
|
||||
@ -1,13 +1,12 @@
|
||||
body {font-family: Arial, Helvetica, sans-serif;}
|
||||
|
||||
.container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Full-width input fields */
|
||||
input[type=text], input[type=password] {
|
||||
input[type=text], input[type=password], input[type=email] {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
margin: 8px 0;
|
||||
@ -31,12 +30,8 @@ button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
width: 40%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 800px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
||||
@ -4,18 +4,25 @@
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<form action="" method="post">
|
||||
<div class="form-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" name="uname" required>
|
||||
<input type="text" placeholder="Enter username" id="uname" required>
|
||||
|
||||
<label for="psw"><b>Password</b></label>
|
||||
<input type="password" placeholder="Enter Password" name="psw" required>
|
||||
<input type="password" placeholder="Enter password" id="psw" required>
|
||||
|
||||
<button type="submit">Login</button>
|
||||
<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>
|
||||
@ -25,6 +32,8 @@
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<link rel="stylesheet" href="register.css">
|
||||
<script type="module" src="register.js"></script>
|
||||
|
||||
</html>
|
||||
@ -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);
|
||||
});
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user