Get device list for dashboard and upgrade chart.js

frontend/home/index.html

@@ -4,7 +4,9 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Temperature-Alarm-Web</title>
-        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/moment"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
         <script defer type="module" src="/scripts/home.js"></script>
         <link rel="stylesheet" href="/styles/common.css">
         <link rel="stylesheet" href="/styles/home.css" />

frontend/scripts/home.js

@@ -1,14 +1,12 @@
 import { logout } from "../shared/utils.js";
-import { getLogsOnDeviceId } from "./services/devices.service.js";
+import { getUser } from "../shared/utils.js";
+import { getDevices, getLogsOnDeviceId } from "./services/devices.service.js";
 
 async function buildChart(data) {
-    data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-
     const xValues = data.map((log) =>
         new Date(log.date).toLocaleString()
     ); // Full Date labels
     const yValues = data.map((log) => log.temperature); // Temperature values
-    buildTable(data);
     new Chart("myChart", {
         type: "line",
         data: {
@@ -41,6 +39,9 @@ async function buildChart(data) {
 
 function buildTable(data) {
     var table = document.getElementById(`TemperatureTable`);
+
+    data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
     data.forEach((log) => {
         var averageTemp = (log.tempHigh + log.tempLow) / 2.0;
         var color;
@@ -73,15 +74,64 @@ function buildTable(data) {
     });
 }
 
-// TODO change device id
+function handleError(err) {
-getLogsOnDeviceId(1)
+    document.getElementById("error").innerText = err;
-    .then(buildChart)
+    document.getElementById("error").style.display = "block";
-    .catch(err => {
+    document.getElementById("container").style.display = "none";
-        document.getElementById("error").innerText = err;
+}
-        document.getElementById("error").style.display = "block";
+
-        document.getElementById("container").style.display = "none";
+async function init() {
+    const devices = await getDevices()
+        .catch(handleError);
+
+    const deviceData = [];
+
+    for (const device of devices) {
+        const data = await getLogsOnDeviceId(device.id)
+            .catch(handleError);
+
+        deviceData.push(data);
+    }
+
+    if (deviceData.length === 0) {
+        return;
+    }
+
+    buildTable(deviceData[0]);
+
+    new Chart("myChart", {
+        type: "line",
+        data: {
+            datasets: deviceData.map(dataset => ({
+                label: "Temperature",
+                fill: false,
+                lineTension: 0.4,
+                backgroundColor: "rgba(0,0,255,1.0)",
+                borderColor: "rgba(0,0,255,0.1)",
+                data: dataset.map(log => ({
+                    x: log.date,
+                    y: log.temperature,
+                })),
+            })),
+        },
+        options: {
+            plugins: {
+                tooltip: {
+                    callbacks: {
+                        label: item => `Temperature: ${item.formattedValue}°C`,
+                    },
+                },
+            },
+            scales: {
+                x: {
+                    type: "time",
+                },
+            },
+        },
     });
+}
+
+init();
 
 document.querySelector(".logout-container").addEventListener("click", logout);
 
-

frontend/scripts/login.js

@@ -12,10 +12,10 @@ document.getElementById("loginForm").addEventListener("submit", function(event)
         .then(response => {
             document.cookie = `auth-token=${response.token}; Path=/`;
 
-            localStorage.setItem("user", {
+            localStorage.setItem("user", JSON.stringify({
                 id: response.id,
                 username: response.userName,
-            });
+            }));
 
             location.href = "/home";
         })

frontend/shared/utils.js

@@ -25,6 +25,8 @@ export async function request(method, path, body = null) {
 
                 if (json.message) return reject(json.message);
 
+                if (json.title) return reject(json.title);
+
                 if (json.errors) return reject(Object.values(json.errors)[0][0]);
             } finally {
                 reject("Request failed with HTTP code " + response.status);
@@ -40,3 +42,7 @@ export function logout() {
 	window.location.href = "/";
 }
 
+export function getUser() {
+    return JSON.parse(localStorage.getItem("user"));
+}
+

frontend/styles/home.css

@@ -2,7 +2,6 @@ body {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
     background-color: #F9F9F9;
-  font-family: Arial, Helvetica, sans-serif;
 }
 
 #container {
@@ -46,10 +45,8 @@ table {
     width: 100%;
     background-color: white;
     color: #616161;
-  margin: 20px;
+    font-family: arial, sans-serif;
-  font-family: arial, sans-serif;
+    border-collapse: collapse;
-  border-collapse: collapse;
-  width: 95%;
 }
 
 td,
@@ -114,10 +111,10 @@ table tr:not(:last-child) .temperature {
 }
 
 .chartContainer{
-  margin: 20px;
+    margin: 20px;
 }
 
 .tableConatiner{
-  display: flex;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
 }