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 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 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<link rel="stylesheet" href="/styles/home.css" />
<script defer type="module" src="/scripts/home.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> </head>
<body> <body>
@ -33,6 +34,7 @@
</table> </table>
</div> </div>
</div> </div>
<div id="error" class="error"></div>
</body> </body>
</html> </html>

3
frontend/login/index.html
View File

@ -4,6 +4,7 @@
<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>
@ -28,7 +29,7 @@
</span> </span>
</div> </div>
<div id="form-error"></div> <div id="form-error" class="error"></div>
</div> </div>
</form> </form>
</body> </body>

3
frontend/register/index.html
View File

@ -4,6 +4,7 @@
<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>
@ -33,7 +34,7 @@
</label> </label>
</div> </div>
<div id="form-error"></div> <div id="form-error" class="error"></div>
</div> </div>
</form> </form>
</body> </body>

14
frontend/scripts/home.js
View File

@ -1,8 +1,6 @@
import { getLogsOnDeviceId } from "./services/devices.service.js"; import { getLogsOnDeviceId } from "./services/devices.service.js";
async function buildChart() { async function buildChart(data) {
// TODO change device id
const data = await getLogsOnDeviceId(1);
data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
const xValues = data.map((log) => 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; 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,3 +1,10 @@
.error { .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); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
} }
#error {
margin: 2rem;
}