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

Add error handling on dashboard

Browse Source
This commit is contained in:
Reimar 2025-03-31 10:31:57 +02:00
parent df130b312c
commit 6fe0841cbc
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
7 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/home/index.html
View File

@ -4,9 +4,10 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature-Alarm-Web</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<link rel="stylesheet" href="/styles/home.css" />
<script defer 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" />
</head>
<body>
@ -33,6 +34,7 @@
</table>
</div>
</div>
<div id="error" class="error"></div>
</body>
</html>

3
frontend/login/index.html
View File

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

3
frontend/register/index.html
View File

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

14
frontend/scripts/home.js
View File

@ -1,8 +1,6 @@
import { getLogsOnDeviceId } from "./services/devices.service.js";
async function buildChart() {
// TODO change device id
const data = await getLogsOnDeviceId(1);
async function buildChart(data) {
data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
const xValues = data.map((log) =>
@ -74,4 +72,12 @@ function buildTable(data) {
});
}
buildChart();
// TODO change device id
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,16 +39,6 @@ button:hover {
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{
border-radius: 20px;
}

9
frontend/styles/common.css
View File

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

4
frontend/styles/home.css
View File

@ -104,3 +104,7 @@ table tr:not(:last-child) .temperature {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
#error {
margin: 2rem;
}