GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 17:20:30 +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;
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;

28
kvmd/web/index.html
View File

@ -17,24 +17,24 @@
<body>
<div id="stream-box" class="stream-box">
<img src="/streamer/?action=stream" id="stream-image" class="stream-image" alt="" />
</div>
<table>
<table cellpadding="0" cellspacing="0" 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><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 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>
</html>

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

@ -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");
}
}
function __clickButton(button) {
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 && http.status != 200) {
if (http.readyState == 4) {
if (http.status != 200) {
alert("Click error: " + http.responseText);
}
__setAtxButtonsBusy(false);
}
}
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) {
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");
}