diff --git a/frontend/pages/home/home.css b/frontend/pages/home/home.css index 4900e43..d0c75f3 100644 --- a/frontend/pages/home/home.css +++ b/frontend/pages/home/home.css @@ -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; - } \ No newline at end of file +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; +} diff --git a/frontend/pages/home/home.html b/frontend/pages/home/home.html index 2f5fec6..c3727a5 100644 --- a/frontend/pages/home/home.html +++ b/frontend/pages/home/home.html @@ -1,22 +1,27 @@ - - - + + + Temperature-Alarm-Web - - -
- Home - News - Contact - About -
- - + - + +
+
+ Home + View Chart +
+ + + +
@@ -24,11 +29,10 @@ - - - +
Name TemperatureTempHigh TempLow
- - - - \ No newline at end of file + + + + + diff --git a/frontend/pages/home/home.js b/frontend/pages/home/home.js index 53a909c..d8f59dc 100644 --- a/frontend/pages/home/home.js +++ b/frontend/pages/home/home.js @@ -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 =` +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 = ` Name ${log.temperature} ${log.date} ${log.tempHigh} ${log.tempLow} - ` - 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 (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"; + } +}; diff --git a/frontend/pages/login/login.css b/frontend/pages/login/login.css index 8b129cc..ad00dbe 100644 --- a/frontend/pages/login/login.css +++ b/frontend/pages/login/login.css @@ -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; } \ No newline at end of file diff --git a/frontend/pages/login/login.html b/frontend/pages/login/login.html index 0ab40fa..c0d7fe6 100644 --- a/frontend/pages/login/login.html +++ b/frontend/pages/login/login.html @@ -7,13 +7,15 @@
-
+
- - +

Login

+ + + - +
@@ -29,5 +31,6 @@
+ \ No newline at end of file diff --git a/frontend/pages/login/login.js b/frontend/pages/login/login.js index e69de29..55e303b 100644 --- a/frontend/pages/login/login.js +++ b/frontend/pages/login/login.js @@ -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); +}); \ No newline at end of file diff --git a/frontend/pages/register/register.css b/frontend/pages/register/register.css index 4f633cf..ed7bcfc 100644 --- a/frontend/pages/register/register.css +++ b/frontend/pages/register/register.css @@ -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; } diff --git a/frontend/pages/register/register.html b/frontend/pages/register/register.html index 45c0196..cc8e996 100644 --- a/frontend/pages/register/register.html +++ b/frontend/pages/register/register.html @@ -4,18 +4,25 @@ -
- -
+ +
+

Create Account

+ + + + - + - + - + + + +
+ + \ No newline at end of file diff --git a/frontend/pages/register/register.js b/frontend/pages/register/register.js index e69de29..c61efa6 100644 --- a/frontend/pages/register/register.js +++ b/frontend/pages/register/register.js @@ -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); +}); \ No newline at end of file diff --git a/frontend/services/users.service.js b/frontend/services/users.service.js index 4b7d530..d53f238 100644 --- a/frontend/services/users.service.js +++ b/frontend/services/users.service.js @@ -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: {