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

Compare commits

base: ReiMerc:6fe0841cbc2aecd03dd040eff529a7c1bd206eeb
Branches Tags
ReiMerc:master
ReiMerc:profileanddevices
ReiMerc:Jeppe
..
compare: ReiMerc:dd2a3cf1508c53ce320f340d762f5a584ae4f047
Branches Tags
ReiMerc:master
ReiMerc:profileanddevices
ReiMerc:Jeppe

No commits in common. "6fe0841cbc2aecd03dd040eff529a7c1bd206eeb" and "dd2a3cf1508c53ce320f340d762f5a584ae4f047" have entirely different histories.
6fe0841cbc ... dd2a3cf150

7 changed files with 86 additions and 131 deletions
Show Stats Expand all files Collapse all files

43
frontend/home/index.html
View File

@ -4,37 +4,34 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature-Alarm-Web</title> <title>Temperature-Alarm-Web</title>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script defer type="module" src="/scripts/home.js"></script>
<link rel="stylesheet" href="/styles/common.css">
<link rel="stylesheet" href="/styles/home.css" /> <link rel="stylesheet" href="/styles/home.css" />
<script defer type="module" src="/scripts/home.js"></script>
</head> </head>
<body> <body>
<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>
<div id="container"> <div id="container">
<div class="chart-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>
<div class="chartContainer">
<canvas id="myChart" style="width: 49%; height: 49%;"></canvas> <canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
</div> </div>
<div id="table-wrapper"> <table>
<table> <tr>
<tr> <th>Name</th>
<th>Temperature</th> <th>Temperature</th>
<th>Date</th> <th>Date</th>
<th>Time</th> <th>TempHigh</th>
<th>Limits</th> <th>TempLow</th>
</tr> </tr>
<tbody id="TemperatureTable"></tbody> <tbody id="TemperatureTable"></tbody>
</table> </table>
</div>
</div> </div>
<div id="error" class="error"></div>
</body> </body>
</html> </html>

3
frontend/login/index.html
View File

@ -4,7 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Login - Temperature alarm</title> <title>Login - Temperature alarm</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/common.css">
<link rel="stylesheet" href="/styles/auth.css"> <link rel="stylesheet" href="/styles/auth.css">
<script defer type="module" src="/scripts/login.js"></script> <script defer type="module" src="/scripts/login.js"></script>
</head> </head>
@ -29,7 +28,7 @@
</span> </span>
</div> </div>
<div id="form-error" class="error"></div> <div id="form-error"></div>
</div> </div>
</form> </form>
</body> </body>

3
frontend/register/index.html
View File

@ -4,7 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Register - Temperature Alarm</title> <title>Register - Temperature Alarm</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/common.css">
<link rel="stylesheet" href="/styles/auth.css"> <link rel="stylesheet" href="/styles/auth.css">
<script defer type="module" src="/scripts/register.js"></script> <script defer type="module" src="/scripts/register.js"></script>
</head> </head>
@ -34,7 +33,7 @@
</label> </label>
</div> </div>
<div id="form-error" class="error"></div> <div id="form-error"></div>
</div> </div>
</form> </form>
</body> </body>

40
frontend/scripts/home.js
View File

@ -1,7 +1,8 @@
import { getLogsOnDeviceId } from "./services/devices.service.js"; import { getLogsOnDeviceId } from "./services/devices.service.js";
async function buildChart(data) { async function buildChart() {
data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); // TODO change device id
const data = await getLogsOnDeviceId(1);
const xValues = data.map((log) => const xValues = data.map((log) =>
new Date(log.date).toLocaleString() new Date(log.date).toLocaleString()
@ -14,7 +15,6 @@ async function buildChart(data) {
labels: xValues, labels: xValues,
datasets: [ datasets: [
{ {
label: "Temperature",
fill: false, fill: false,
lineTension: 0.4, lineTension: 0.4,
backgroundColor: "rgba(0,0,255,1.0)", backgroundColor: "rgba(0,0,255,1.0)",
@ -43,41 +43,29 @@ function buildTable(data) {
data.forEach((log) => { data.forEach((log) => {
var averageTemp = (log.tempHigh + log.tempLow) / 2.0; var averageTemp = (log.tempHigh + log.tempLow) / 2.0;
var color; var color;
if (log.temperature >= log.tempHigh) { if (log.temperature > log.tempHigh) {
color = "tempHigh"; color = "tempHigh";
} else if ( } else if (
log.temperature < log.tempHigh && log.temperature < log.tempHigh &&
log.temperature > averageTemp log.temperature > averageTemp
) { ) {
color = "tempMidHigh"; color = "tempMidHigh";
} else if (log.temperature <= log.tempLow) { } else if (log.temperature < log.tempLow) {
color = "tempLow"; color = "tempLow";
} else if (log.temperature > log.tempLow && log.temperature < averageTemp) { } else if (log.temperature > log.tempLow && log.temperature < averageTemp) {
color = "tempMidLow"; color = "tempMidLow";
} else { } else {
color = "tempNormal"; color = "tempNormal";
} }
var row = ` <tr>
const date = new Date(log.date).toLocaleDateString(); <td>Name</td>
const time = new Date(log.date).toLocaleTimeString(); <td class="${color}">${log.temperature}</td>
<td>${log.date}</td>
table.innerHTML += ` <td class="tempHigh">${log.tempHigh}</td>
<tr> <td class="tempLow">${log.tempLow}</td>
<td class="temperature ${color}">${log.temperature}&deg;C</td> </tr>`;
<td>${date}</td> table.innerHTML += row;
<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>
`;
}); });
} }
// TODO change device id buildChart();
getLogsOnDeviceId(1)
.then(buildChart)
.catch(err => {
document.getElementById("error").innerText = err;
document.getElementById("error").style.display = "block";
document.getElementById("container").style.display = "none";
});

10
frontend/styles/auth.css
View File

@ -39,6 +39,16 @@ button:hover {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
#form-error {
display: none;
background-color: #FFCDD2;
color: #C62828;
border: 1px solid #C62828;
border-radius: 4px;
padding: 1rem 2rem;
margin-top: 1rem;
}
button{ button{
border-radius: 20px; border-radius: 20px;
} }

9
frontend/styles/common.css
View File

@ -1,10 +1,3 @@
.error { .error {
display: none; background-color: #EF9A9A;
background-color: #FFCDD2;
color: #C62828;
border: 1px solid #C62828;
border-radius: 4px;
padding: 1rem 2rem;
margin-top: 1rem;
} }

109
frontend/styles/home.css
View File

@ -1,110 +1,79 @@
body { body {
margin: 0; margin: 0;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
background-color: #F9F9F9;
} }
#container { #container {
margin: 0 2rem; background-color: white;
opacity: 100%;
} }
.topnav { .topnav {
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #333;
} }
.topnav a { .topnav a {
float: left; float: left;
color: #f2f2f2; color: #f2f2f2;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
font-size: 17px; font-size: 17px;
} }
.topnav a:hover { .topnav a:hover {
background-color: #ddd; background-color: #ddd;
color: black; color: black;
} }
.topnav a.active { .topnav a.active {
background-color: #04aa6d; background-color: #04aa6d;
color: white; 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 { table {
font-family: arial, sans-serif; font-family: arial, sans-serif;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
background-color: white;
color: #616161;
} }
td, td,
th { th {
border-right: 1px solid #DDD; border: 1px solid #dddddd;
border-bottom: 1px solid #DDD; text-align: left;
text-align: left; padding: 8px;
padding: 8px;
}
th {
border-bottom: 2px solid #DDD;
} }
tr:nth-child(even) { tr:nth-child(even) {
background-color: #F5F5F5; background-color: #dddddd;
}
table .temperature {
text-align: center;
color: white;
font-weight: bold;
width: 20px;
}
table tr:not(:last-child) .temperature {
border-bottom-color: white;
} }
.tempHigh { .tempHigh {
background-color: #ff0000; color: #ff0000;
width: 20px;
} }
.tempMidHigh { .tempMidHigh {
background-color: #FFA000; color: #fffb00;
width: 20px;
} }
.tempNormal { .tempNormal {
background-color: #AAA; color: #02ed26;
width: 20px;
} }
.tempMidLow { .tempMidLow {
background-color: #64B5F6; color: #16fae7;
width: 20px;
} }
.tempLow { .tempLow {
background-color: #3F51B5; color: #0004ff;
width: 20px;
} }
.low-limit { .chartContainer{
color: #3F51B5; margin: 20px;
} }
.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);
}
#error {
margin: 2rem;
}