ReiMerc/temperature-alarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style dashboard

Browse Source
This commit is contained in:
Reimar 2025-03-31 10:20:26 +02:00
parent dd2a3cf150
commit df130b312c
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
3 changed files with 102 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/home/index.html
View File

@ -10,27 +10,28 @@
</head>
<body>
<div id="container">
<div class="topnav">
<a class="active" href="/home/index.html">Home</a>
<div style="display: flex; justify-content: flex-end;">
<a class="" href="/home/index.html">Devices</a>
<a class="" href="/profile/index.html">Profile</a>
</div>
<div class="topnav">
<a class="active" href="/home/index.html">Home</a>
<div style="display: flex; justify-content: flex-end;">
<a class="" href="/home/index.html">Devices</a>
<a class="" href="/profile/index.html">Profile</a>
</div>
<div class="chartContainer">
</div>
<div id="container">
<div class="chart-container">
<canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
</div>
<table>
<tr>
<th>Name</th>
<th>Temperature</th>
<th>Date</th>
<th>TempHigh</th>
<th>TempLow</th>
</tr>
<tbody id="TemperatureTable"></tbody>
</table>
<div id="table-wrapper">
<table>
<tr>
<th>Temperature</th>
<th>Date</th>
<th>Time</th>
<th>Limits</th>
</tr>
<tbody id="TemperatureTable"></tbody>
</table>
</div>
</div>
</body>
</html>

28
frontend/scripts/home.js
View File

@ -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 = ` <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;
const date = new Date(log.date).toLocaleDateString();
const time = new Date(log.date).toLocaleTimeString();
table.innerHTML += `
<tr>
<td class="temperature ${color}">${log.temperature}&deg;C</td>
<td>${date}</td>
<td width="50%">${time}</td>
<td width="50%">Min: <b class="low-limit">${log.tempLow}&deg;C</b>, Max: <b class="high-limit">${log.tempHigh}&deg;C</b></td>
</tr>
`;
});
}

105
frontend/styles/home.css
View File

@ -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);
}