ziver/hal
1
1
Fork 0
Code Pull requests Releases Activity

Refactored alerts to be API based and not directly generated into the HTML

Browse source
This commit is contained in:
Ziver Koc 2023-01-11 03:41:15 +01:00
parent 2ee0e775be
commit ed04554a4a
27 changed files with 340 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

76
hal-core/resources/web/api/openapi.json
View file

@ -1,6 +1,17 @@
{
"components": {
"schemas": {
"alertClass": {
"type": "object",
"properties": {
"id": {"type": "integer"},
"level": {"type": "string"},
"ttl": {"type": "integer"},
"title": {"type": "string"},
"description": {"type": "string"}
}
},
"eventClass": {
"type": "object",
"properties": {
@ -111,6 +122,50 @@
"openapi": "3.0.1",
"paths": {
"/alert": {
"get": {
"responses": {
"200": {
"description": "A successful response.",
"content": {
"application/json": {
"schema": {
"type": "array",
"items": {
"type": "object",
"$ref": "#/components/schemas/alertClass"
}
}
}
}
}
},
"parameters": [
{
"schema": {
"type": "string",
"enum": [
"poll",
"peek",
"dismiss"
]
},
"in": "query",
"name": "action",
"required": true
},
{
"schema": {
"type": "integer"
},
"in": "query",
"name": "id",
"required": false
}
]
}
},
"/event": {
"get": {
"responses": {
@ -119,8 +174,11 @@
"content": {
"application/json": {
"schema": {
"type": "object",
"$ref": "#/components/schemas/eventClass"
"type": "array",
"items": {
"type": "object",
"$ref": "#/components/schemas/eventClass"
}
}
}
}
@ -163,8 +221,11 @@
"content": {
"application/json": {
"schema": {
"type": "object",
"$ref": "#/components/schemas/roomClass"
"type": "array",
"items": {
"type": "object",
"$ref": "#/components/schemas/roomClass"
}
}
}
}
@ -191,8 +252,11 @@
"content": {
"application/json": {
"schema": {
"type": "object",
"$ref": "#/components/schemas/sensorClass"
"type": "array",
"items": {
"type": "object",
"$ref": "#/components/schemas/sensorClass"
}
}
}
}

84
hal-core/resources/web/js/hal_alert.js vendored Normal file
View file

@ -0,0 +1,84 @@
// --------------------------------------------------------
// Autostart
// --------------------------------------------------------
"use strict";
var alertDivId = "alert-container"
var alertTemplate = {
ERROR: `
<div id="" data-alert-id="" class="alert alert-danger alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
<span class="glyphicon glyphicon-minus-sign"></span>
<strong class="alert-title"></strong> &nbsp;
<span class="alert-description"></span>
</div>`,
WARNING: `
<div id="" data-alert-id="" class="alert alert-warning alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
<span class="glyphicon glyphicon-warning-sign"></span>
<strong class="alert-title"></strong> &nbsp;
<span class="alert-description"></span>
</div>`,
SUCCESS: `
<div id="" data-alert-id="" class="alert alert-success alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
<span class="glyphicon glyphicon-ok-circle"></span>
<strong class="alert-title"></strong> &nbsp;
<span class="alert-description"></span>
</div>`,
INFO: `
<div id="" data-alert-id="" class="alert alert-info alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
<span class="glyphicon glyphicon-info-sign"></span>
<strong class="alert-title"></strong> &nbsp;
<span class="alert-description"></span>
</div>`
}
$(function(){
updateAlerts();
setInterval(function() {
updateAlerts();
}, 3000); // 3 sec
});
function updateAlerts() {
fetch('/api/alert?action=poll')
.then(response => response.json())
.then(data => {
data.forEach(alert => {
var alertElement = $("#alert-id-" + alert.id);
if (alertElement.length <= 0) {
alertElement = $(alertTemplate[alert.level]);
$("#" + alertDivId).append(alertElement);
alertElement.attr("id", "alert-id-" + alert.id);
alertElement.data("alert-id", alert.id);
alertElement.find(".close").click(dismissEvent);
}
alertElement.find(".alert-title").html(alert.title);
alertElement.find(".alert-description").html(alert.description);
});
});
}
function dismissEvent(e) {
dismissAlert($(e.target).parent().parent().data("alert-id"));
}
function dismissAlert(id) {
fetch('/api/alert?action=dismiss&id=' + id)
.then(response => response.json())
.then(data => {
});
}

0
hal-core/resources/web/js/map.js → hal-core/resources/web/js/hal_map.js vendored
View file

50
hal-core/resources/web/main_alerts.tmpl
View file

@ -1,50 +0,0 @@
{{#alerts}}
{{#.isError()}}
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close" data-id="{{.getId()}}">
<span aria-hidden="true">&times;</span>
</button>
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
<strong>{{.getTitle()}}</strong> &nbsp;
{{#.getMessage()}}{{.getMessage()}}{{/.getMessage()}}
</div>
{{/.isError()}}
{{#.isWarning()}}
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close" data-id="{{.getId()}}">
<span aria-hidden="true">&times;</span>
</button>
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<strong>{{.getTitle()}}</strong> &nbsp;
{{#.getMessage()}}{{.getMessage()}}{{/.getMessage()}}
</div>
{{/.isWarning()}}
{{#.isSuccess()}}
<div class="alert alert-success alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close" data-id="{{.getId()}}">
<span aria-hidden="true">&times;</span>
</button>
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
<strong>{{.getTitle()}}</strong> &nbsp;
{{#.getMessage()}}{{.getMessage()}}{{/.getMessage()}}
</div>
{{/.isSuccess()}}
{{#.isInfo()}}
<div class="alert alert-info alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close" data-id="{{.getId()}}">
<span aria-hidden="true">&times;</span>
</button>
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
<strong>{{.getTitle()}}</strong> &nbsp;
{{#.getMessage()}}{{.getMessage()}}{{/.getMessage()}}
</div>
{{/.isInfo()}}
{{/alerts}}
<script>
$(function(){
$(".alert .close").click(function(event){
$.get("{{serviceUrl}}?action=dismiss&id="+$(this).data("id"));
});
});
</script>

3
hal-core/resources/web/main_index.tmpl
View file

@ -19,6 +19,7 @@
<script src="js/lib/bootstrap-switch.min.js"></script>
<script src="js/lib/moment.js"></script>
<script src="js/hal.js"></script>
<script src="js/hal_alert.js"></script>
<!-- charts -->
<script src="js/lib/d3.js"></script>
@ -37,7 +38,7 @@
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{{/side_navigation}}
{{^side_navigation}}<div class="main">{{/side_navigation}}
{{alerts}}
<div id="alert-container"></div>
{{content}}
</div>

2
hal-core/resources/web/map.tmpl
View file

@ -50,7 +50,7 @@
<script src="js/lib/svg.select.min.js"></script>
<script src="js/lib/svg.resize.min.js"></script>
<script src="js/lib/svg.draggable.min.js"></script>
<script src="js/map.js"></script>
<script src="js/hal_map.js"></script>
<!------------------ MODALS ---------------------->