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

Add nice connection modal

Browse Source
This commit is contained in:
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); connectionCheckTimeout = setTimeout(checkConnection, 2000);
showConnectionModal();
} }
function log(msg) { function log(msg) {
@ -46,6 +47,7 @@ function checkConnection(){
function onConnect() { function onConnect() {
connecting = false; connecting = false;
clearTimeout(connectionCheckTimeout); clearTimeout(connectionCheckTimeout);
hideConnectionModal();
document.getElementById("wrapper").classList.remove("wrapper-error"); document.getElementById("wrapper").classList.remove("wrapper-error");
document.getElementById("wrapper").classList.add("wrapper-ok"); document.getElementById("wrapper").classList.add("wrapper-ok");
var subWidgets = document.getElementsByClassName("subscriber"); 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> </head>
<body> <body>
<div align="center"> <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"> <div id="wrapper" align="center">
<br/> <br/>
<div id="widgets"> <div id="widgets">
@ -28,6 +37,6 @@
<div id="messages"></div> <div id="messages"></div>
</div> </div>
<br/> <br/>
</div> </div>
</body> </body>
</html> </html>