0xee
/
mqtt-dash
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add nice connection modal

master
0xee 2019-11-09 15:16:51 +01:00
parent a2a42acc35
commit 1de334592b
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
mqtt_dash/static/main.js
View File

@ -26,6 +26,7 @@ function startConnect() {
});
connectionCheckTimeout = setTimeout(checkConnection, 2000);
showConnectionModal();
}
function log(msg) {
@ -46,6 +47,7 @@ function checkConnection(){
function onConnect() {
connecting = false;
clearTimeout(connectionCheckTimeout);
hideConnectionModal();
document.getElementById("wrapper").classList.remove("wrapper-error");
document.getElementById("wrapper").classList.add("wrapper-ok");
var subWidgets = document.getElementsByClassName("subscriber");
@ -168,3 +170,15 @@ function init(brokerUri) {
}
function showConnectionModal() {
var modal = document.getElementById("connection-modal");
modal.classList.add("is-active");
}
function hideConnectionModal() {
var modal = document.getElementById("connection-modal");
modal.classList.remove("is-active");
}

11
mqtt_dash/templates/base.html
View File

@ -17,6 +17,15 @@
</head>
<body>
<div align="center">
<div class="modal" id="connection-modal">
<div class="modal-background"></div>
<div class="modal-content">
<div style="width:50%;">
<h1>Connecting...</h1>
<progress class="progress is-large is-danger" max="100"></progress>
</div>
</div>
</div>
<div id="wrapper" align="center">
<br/>
<div id="widgets">
@ -28,6 +37,6 @@
<div id="messages"></div>
</div>
<br/>
</div>
</div>
</body>
</html>