diff --git a/frontend/home/index.html b/frontend/home/index.html index 6fe912f..36b1193 100644 --- a/frontend/home/index.html +++ b/frontend/home/index.html @@ -10,27 +10,28 @@ -
-
- Home -
- Devices - Profile -
+
+ Home +
+ Devices + Profile
-
+
+
+
- - - - - - - - - -
NameTemperatureDateTempHighTempLow
+
+ + + + + + + + +
TemperatureDateTimeLimits
+
diff --git a/frontend/scripts/home.js b/frontend/scripts/home.js index 6e19caa..44aca18 100644 --- a/frontend/scripts/home.js +++ b/frontend/scripts/home.js @@ -1,8 +1,9 @@ import { getLogsOnDeviceId } from "./services/devices.service.js"; async function buildChart() { - // TODO change device id + // TODO change device id const data = await getLogsOnDeviceId(1); + data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); const xValues = data.map((log) => new Date(log.date).toLocaleString() @@ -15,6 +16,7 @@ async function buildChart() { labels: xValues, datasets: [ { + label: "Temperature", fill: false, lineTension: 0.4, backgroundColor: "rgba(0,0,255,1.0)", @@ -43,28 +45,32 @@ function buildTable(data) { data.forEach((log) => { var averageTemp = (log.tempHigh + log.tempLow) / 2.0; var color; - if (log.temperature > log.tempHigh) { + if (log.temperature >= log.tempHigh) { color = "tempHigh"; } else if ( log.temperature < log.tempHigh && log.temperature > averageTemp ) { color = "tempMidHigh"; - } else if (log.temperature < log.tempLow) { + } 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; + + const date = new Date(log.date).toLocaleDateString(); + const time = new Date(log.date).toLocaleTimeString(); + + table.innerHTML += ` + + ${log.temperature}°C + ${date} + ${time} + Min: ${log.tempLow}°C, Max: ${log.tempHigh}°C + + `; }); } diff --git a/frontend/styles/home.css b/frontend/styles/home.css index 9eb7fac..a90bd7a 100644 --- a/frontend/styles/home.css +++ b/frontend/styles/home.css @@ -1,79 +1,106 @@ body { - margin: 0; - font-family: Arial, Helvetica, sans-serif; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + background-color: #F9F9F9; } #container { - background-color: white; - opacity: 100%; + margin: 0 2rem; } .topnav { - overflow: hidden; - background-color: #333; + overflow: hidden; + background-color: #333; } .topnav a { - float: left; - color: #f2f2f2; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; + float: left; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; } .topnav a:hover { - background-color: #ddd; - color: black; + background-color: #ddd; + color: black; } .topnav a.active { - background-color: #04aa6d; - color: white; + background-color: #04aa6d; + color: white; +} + +#table-wrapper { + overflow: hidden; + border-radius: 8px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); + border: 1px solid #DDD; } table { - font-family: arial, sans-serif; - border-collapse: collapse; - width: 100%; + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; + background-color: white; + color: #616161; } td, th { - border: 1px solid #dddddd; - text-align: left; - padding: 8px; + border-right: 1px solid #DDD; + border-bottom: 1px solid #DDD; + text-align: left; + padding: 8px; +} + +th { + border-bottom: 2px solid #DDD; } tr:nth-child(even) { - background-color: #dddddd; + background-color: #F5F5F5; +} + +table .temperature { + text-align: center; + color: white; + font-weight: bold; + width: 20px; +} +table tr:not(:last-child) .temperature { + border-bottom-color: white; } .tempHigh { - color: #ff0000; - width: 20px; + background-color: #ff0000; } - .tempMidHigh { - color: #fffb00; - width: 20px; + background-color: #FFA000; } - .tempNormal { - color: #02ed26; - width: 20px; + background-color: #AAA; } - .tempMidLow { - color: #16fae7; - width: 20px; + background-color: #64B5F6; } - .tempLow { - color: #0004ff; - width: 20px; + background-color: #3F51B5; } -.chartContainer{ - margin: 20px; +.low-limit { + color: #3F51B5; } +.high-limit { + color: #F00; +} + +.chart-container { + margin: 2rem 0; + background-color: white; + border-radius: 8px; + border: 1px solid #DDD; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); +} +