GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-13 01:30:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

better ui

Browse Source
This commit is contained in:
Devaev Maxim 2018-07-13 13:26:48 +00:00
parent 74fdc7464b
commit 9e1f9ae853
3 changed files with 71 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
kvmd/web/css/main.css
View File

@ -2,18 +2,17 @@
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
background-color: #e5e5f5; background-color: #e5e5f5;
padding: 1em; padding: 10px;
text-align: left;
} }
.stream-box .stream-image { .stream-image {
width: 640px; width: 640px;
height: 480px; height: 480px;
border: 1px solid grey; border: 1px solid grey;
display: inline-block;
cursor: wait; cursor: wait;
} }
.session-opened { .session-opened {
color: grey;
} }
.session-closed { .session-closed {
color: #ff3d40; color: #ff3d40;

28
kvmd/web/index.html
View File

@ -17,24 +17,24 @@
<body> <body>
<div id="stream-box" class="stream-box"> <div id="stream-box" class="stream-box">
<img src="/streamer/?action=stream" id="stream-image" class="stream-image" alt="" /> <img src="/streamer/?action=stream" id="stream-image" class="stream-image" alt="" />
</div> <table cellpadding="0" cellspacing="0" style="border: none;">
<table>
<tr> <tr>
<td><div id="power-led" class="power-led-off"></div></td> <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><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>&nbsp;&nbsp;</td>
<td><div id="session-status">Not connected yet...</div></td> <td><div id="session-status">Not connected yet...</div></td>
</tr> </tr>
</table> </table>
</div>
<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="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> </body>
</html> </html>

73
kvmd/web/js/kvmd.js
View File

@ -132,34 +132,51 @@ function __onMouseWheel(ws, event) {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
function clickPowerButton() { function clickAtxButton(el_button) {
if (confirm("Are you sure to click the power button?")) { switch (el_button.id) {
__clickButton("power"); 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 (button && confirm(confirm_msg)) {
if (confirm("Are you sure to perform the long press of the power button?")) { __setAtxButtonsBusy(true);
__clickButton("power_long");
}
}
function clickResetButton() {
if (confirm("Are you sure to reboot the server?")) {
__clickButton("reset");
}
}
function __clickButton(button) {
var http = new XMLHttpRequest(); var http = new XMLHttpRequest();
http.open("POST", "/kvmd/atx/click?button=" + button, true); http.open("POST", "/kvmd/atx/click?button=" + button, true);
http.onreadystatechange = function() { http.onreadystatechange = function() {
if (http.readyState == 4 && http.status != 200) { if (http.readyState == 4) {
if (http.status != 200) {
alert("Click error: " + http.responseText); alert("Click error: " + http.responseText);
} }
__setAtxButtonsBusy(false);
}
} }
http.send(); 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() { http.onreadystatechange = function() {
if (http.readyState == 2 || http.readyState == 4) { if (http.readyState == 2 || http.readyState == 4) {
var status = http.status; var status = http.status;
http.onreadystatechange = null;
http.abort(); http.abort();
if (status != 200) { if (status != 200) {
console.log("Refreshing streamer ..."); console.log("Refreshing streamer ...");
pollStreamer.last = false; pollStreamer.last = false;
document.getElementById("stream-image").style.cursor = "wait"; document.getElementById("stream-image").style.cursor = "wait";
} else if (!pollStreamer.last) { } else if (!pollStreamer.last) {
__refreshStremaer(); __refreshStreamer();
document.getElementById("stream-image").style.cursor = "cell"; document.getElementById("stream-image").style.cursor = "cell";
pollStreamer.last = true; pollStreamer.last = true;
} }
@ -186,7 +204,7 @@ function pollStreamer() {
} }
pollStreamer.last = false; pollStreamer.last = false;
function __refreshStremaer() { function __refreshStreamer() {
var http = new XMLHttpRequest(); var http = new XMLHttpRequest();
http.open("GET", "/kvmd/streamer", true); http.open("GET", "/kvmd/streamer", true);
http.onreadystatechange = function() { http.onreadystatechange = function() {
@ -201,13 +219,24 @@ function __refreshStremaer() {
http.send(); http.send();
} }
function resetStreamer() { function clickResetStreamerButton(el_button) {
__setButtonBusy(el_button, true);
var http = new XMLHttpRequest(); var http = new XMLHttpRequest();
http.open("POST", "/kvmd/streamer/reset", true); http.open("POST", "/kvmd/streamer/reset", true);
http.onreadystatechange = function() { http.onreadystatechange = function() {
if (http.readyState == 4 && http.status != 200) { if (http.readyState == 4) {
if (http.status != 200) {
alert("Can't reset streamer: " + http.responseText); alert("Can't reset streamer: " + http.responseText);
} }
__setButtonBusy(el_button, false);
}
} }
http.send(); http.send();
} }
// -----------------------------------------------------------------------------
function __setButtonBusy(el_button, busy) {
el_button.disabled = busy;
el_button.style.cursor = (busy ? "wait" : "default");
}