summaryrefslogtreecommitdiff
path: root/kvmd
diff options
context:
space:
mode:
authorDevaev Maxim <[email protected]>2018-07-13 13:26:48 +0000
committerDevaev Maxim <[email protected]>2018-07-13 13:36:38 +0000
commit9e1f9ae853a733e0c0178bf1b8e03c6e6db7b2dd (patch)
tree13d2b816eeeea268b35a57ef279c3daf3287d31e /kvmd
parent74fdc7464b9442e126163471d053683d75e9bee3 (diff)
better ui
Diffstat (limited to 'kvmd')
-rw-r--r--kvmd/web/css/main.css7
-rw-r--r--kvmd/web/index.html22
-rw-r--r--kvmd/web/js/kvmd.js83
3 files changed, 70 insertions, 42 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index bb26f3cf..bd74ec10 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -2,18 +2,17 @@
box-sizing: border-box;
display: inline-block;
background-color: #e5e5f5;
- padding: 1em;
- text-align: left;
+ padding: 10px;
}
-.stream-box .stream-image {
+.stream-image {
width: 640px;
height: 480px;
border: 1px solid grey;
- display: inline-block;
cursor: wait;
}
.session-opened {
+ color: grey;
}
.session-closed {
color: #ff3d40;
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 7d85f26d..e8ca859a 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -17,23 +17,23 @@
<body>
<div id="stream-box" class="stream-box">
<img src="/streamer/?action=stream" id="stream-image" class="stream-image" alt="" />
+ <table cellpadding="0" cellspacing="0" style="border: none;">
+ <tr>
+ <td><button id="reset-streamer-button" type="button" title="Click here if your video looks like crap" onclick="clickResetStreamerButton(this);">Reset stream</button></td>
+ <td>&nbsp;&nbsp;</td>
+ <td><div id="session-status">Not connected yet...</div></td>
+ </tr>
+ </table>
</div>
- <table>
+ <table cellpadding="0" cellspacing="5" style="border: none;">
<tr>
<td><div id="power-led" class="power-led-off"></div></td>
<td><div id="hdd-led" class="hdd-led-off"></div></td>
<td>&nbsp;&nbsp;</td>
- <td><button id="power-button" type="button" title="Click hardware power button" onclick="clickPowerButton();">Power</button></td>
- <td><button id="power-button-long" type="button" title="Click hardware power button (long press)" onclick="clickPowerButtonLong();">Power (long)</button></td>
- <td><button id="reset-button" type="button" title="Click to force reset" onclick="clickResetButton();">Reset</button></td>
- </tr>
- </table>
- <table>
- <tr>
- <td><button id="restart-stream-button" type="button" title="Click here if your video looks like a crap" onclick="resetStreamer();">Restart video</button></td>
- <td>&nbsp;&nbsp;</td>
- <td><div id="session-status">Not connected yet...</div></td>
+ <td><button id="atx-power-button" type="button" title="Click hardware power button" onclick="clickAtxButton(this);">Power</button></td>
+ <td><button id="atx-power-button-long" type="button" title="Click hardware power button (long press)" onclick="clickAtxButton(this);">Power (long)</button></td>
+ <td><button id="atx-reset-button" type="button" title="Click to force reset" onclick="clickAtxButton(this);">Reset</button></td>
</tr>
</table>
</body>
diff --git a/kvmd/web/js/kvmd.js b/kvmd/web/js/kvmd.js
index 506e6aa5..f9a789f3 100644
--- a/kvmd/web/js/kvmd.js
+++ b/kvmd/web/js/kvmd.js
@@ -132,33 +132,50 @@ function __onMouseWheel(ws, event) {
// -----------------------------------------------------------------------------
-function clickPowerButton() {
- if (confirm("Are you sure to click the power button?")) {
- __clickButton("power");
+function clickAtxButton(el_button) {
+ switch (el_button.id) {
+ case "atx-power-button":
+ var button = "power";
+ var confirm_msg = "Are you sure to click the power button?";
+ break;
+ case "atx-power-button-long":
+ var button = "power_long";
+ var confirm_msg = "Are you sure to perform the long press of the power button?";
+ break;
+ case "atx-reset-button":
+ var button = "reset";
+ var confirm_msg = "Are you sure to reboot the server?";
+ break;
+ default:
+ var button = null;
+ var confirm_msg = null;
+ break;
}
-}
-
-function clickPowerButtonLong() {
- if (confirm("Are you sure to perform the long press of the power button?")) {
- __clickButton("power_long");
- }
-}
-function clickResetButton() {
- if (confirm("Are you sure to reboot the server?")) {
- __clickButton("reset");
+ if (button && confirm(confirm_msg)) {
+ __setAtxButtonsBusy(true);
+ var http = new XMLHttpRequest();
+ http.open("POST", "/kvmd/atx/click?button=" + button, true);
+ http.onreadystatechange = function() {
+ if (http.readyState == 4) {
+ if (http.status != 200) {
+ alert("Click error: " + http.responseText);
+ }
+ __setAtxButtonsBusy(false);
+ }
+ }
+ http.send();
}
}
-function __clickButton(button) {
- var http = new XMLHttpRequest();
- http.open("POST", "/kvmd/atx/click?button=" + button, true);
- http.onreadystatechange = function() {
- if (http.readyState == 4 && http.status != 200) {
- alert("Click error: " + http.responseText);
- }
- }
- http.send();
+function __setAtxButtonsBusy(busy) {
+ [
+ "atx-power-button",
+ "atx-power-button-long",
+ "atx-reset-button",
+ ].forEach(function(name) {
+ __setButtonBusy(document.getElementById(name), busy);
+ });
}
@@ -169,13 +186,14 @@ function pollStreamer() {
http.onreadystatechange = function() {
if (http.readyState == 2 || http.readyState == 4) {
var status = http.status;
+ http.onreadystatechange = null;
http.abort();
if (status != 200) {
console.log("Refreshing streamer ...");
pollStreamer.last = false;
document.getElementById("stream-image").style.cursor = "wait";
} else if (!pollStreamer.last) {
- __refreshStremaer();
+ __refreshStreamer();
document.getElementById("stream-image").style.cursor = "cell";
pollStreamer.last = true;
}
@@ -186,7 +204,7 @@ function pollStreamer() {
}
pollStreamer.last = false;
-function __refreshStremaer() {
+function __refreshStreamer() {
var http = new XMLHttpRequest();
http.open("GET", "/kvmd/streamer", true);
http.onreadystatechange = function() {
@@ -201,13 +219,24 @@ function __refreshStremaer() {
http.send();
}
-function resetStreamer() {
+function clickResetStreamerButton(el_button) {
+ __setButtonBusy(el_button, true);
var http = new XMLHttpRequest();
http.open("POST", "/kvmd/streamer/reset", true);
http.onreadystatechange = function() {
- if (http.readyState == 4 && http.status != 200) {
- alert("Can't reset streamer: " + http.responseText);
+ if (http.readyState == 4) {
+ if (http.status != 200) {
+ alert("Can't reset streamer: " + http.responseText);
+ }
+ __setButtonBusy(el_button, false);
}
}
http.send();
}
+
+
+// -----------------------------------------------------------------------------
+function __setButtonBusy(el_button, busy) {
+ el_button.disabled = busy;
+ el_button.style.cursor = (busy ? "wait" : "default");
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 20:55:18 +0000