Introduction of room alerts

This commit is contained in:
Ziver Koc 2023-01-11 16:11:11 +01:00
parent ed04554a4a
commit 7747a10959
6 changed files with 158 additions and 6 deletions

View file

@ -146,3 +146,37 @@ body {
transform: rotate(359deg);
}
}
/*
* Animations
*/
.pulse-border {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
stroke-width: 3;
opacity: 1;
}
10% {
stroke-width: 5;
opacity: 0.2;
}
15% {
stroke-width: 5;
opacity: 0.2;
}
50% {
stroke-width: 3;
opacity: 1;
}
100% {
stroke-width: 3;
opacity: 1;
}
}

View file

@ -155,11 +155,7 @@ function drawMap() {
group.text(room.name).move(5, 5).fill('#999');
var rect = group.rect(room.map.width, room.map.height);
rect.fill('none').stroke({
color: '#000',
opacity: 0.6,
width: 3
});
setAlertStyle(rect, (room.alert == null ? null : room.alert.level));
rect.addClass("resizable");
group.addClass("room")
@ -275,3 +271,36 @@ function saveDevice(element, type, id) {
data: data
});
}
// ----------------------------------------------
// Colors
// ----------------------------------------------
function setAlertStyle(target, level=null) {
target.addClass("pulse-border");
target.fill('none');
switch(level) {
case "ERROR":
target.stroke({opacity: 1, color: '#f00'});
break;
case "WARNING":
target.stroke({opacity: 1, color: '#ffa500'});
break;
case "SUCCESS":
target.stroke({opacity: 1, color: '#90EE90'});
break;
case "INFO":
target.stroke({opacity: 1, color: '#87CEFA'});
break;
default:
target.removeClass("pulse-border");
target.stroke({
color: '#000',
opacity: 0.6,
width: 3
});;
break;
}
}