From 11967bfa59cbce274c7fc9b41f8a9e5c4bbff2ce Mon Sep 17 00:00:00 2001
From: LilleBRG <lillebrgmc@gmail.com>
Date: Wed, 19 Mar 2025 16:02:59 +0100
Subject: [PATCH] init

---
 .../mockdata/temperature-logs.mockdata.js     | 54 +++++++++----------
 frontend/pages/home/home.css                  | 41 ++++++++++++++
 frontend/pages/home/home.html                 | 13 +++++
 frontend/pages/home/home.js                   | 33 ++++++++++--
 frontend/pages/login/login.css                | 45 ++++++++++++++++
 frontend/pages/login/login.html               | 33 ++++++++++++
 frontend/pages/register/register.css          | 46 ++++++++++++++++
 frontend/pages/register/register.html         | 30 +++++++++++
 8 files changed, 265 insertions(+), 30 deletions(-)

diff --git a/frontend/mockdata/temperature-logs.mockdata.js b/frontend/mockdata/temperature-logs.mockdata.js
index eaef375..e6056ae 100644
--- a/frontend/mockdata/temperature-logs.mockdata.js
+++ b/frontend/mockdata/temperature-logs.mockdata.js
@@ -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 },
+]
diff --git a/frontend/pages/home/home.css b/frontend/pages/home/home.css
index 1f47ee0..4900e43 100644
--- a/frontend/pages/home/home.css
+++ b/frontend/pages/home/home.css
@@ -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;
   }
\ No newline at end of file
diff --git a/frontend/pages/home/home.html b/frontend/pages/home/home.html
index f06efff..2f5fec6 100644
--- a/frontend/pages/home/home.html
+++ b/frontend/pages/home/home.html
@@ -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>
diff --git a/frontend/pages/home/home.js b/frontend/pages/home/home.js
index 6f739c7..53a909c 100644
--- a/frontend/pages/home/home.js
+++ b/frontend/pages/home/home.js
@@ -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
+    })
+}
diff --git a/frontend/pages/login/login.css b/frontend/pages/login/login.css
index e69de29..8b129cc 100644
--- a/frontend/pages/login/login.css
+++ b/frontend/pages/login/login.css
@@ -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;
+}
\ No newline at end of file
diff --git a/frontend/pages/login/login.html b/frontend/pages/login/login.html
index e69de29..0ab40fa 100644
--- a/frontend/pages/login/login.html
+++ b/frontend/pages/login/login.html
@@ -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>
\ No newline at end of file
diff --git a/frontend/pages/register/register.css b/frontend/pages/register/register.css
index e69de29..4f633cf 100644
--- a/frontend/pages/register/register.css
+++ b/frontend/pages/register/register.css
@@ -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;
+}
\ No newline at end of file
diff --git a/frontend/pages/register/register.html b/frontend/pages/register/register.html
index e69de29..45c0196 100644
--- a/frontend/pages/register/register.html
+++ b/frontend/pages/register/register.html
@@ -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>
\ No newline at end of file