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

drive mode radio switch

Browse Source
This commit is contained in:
Devaev Maxim 2020-07-19 14:25:54 +03:00
parent faedb829b9
commit ab13399a2a
7 changed files with 122 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/kvm/index.html
View File

@ -41,6 +41,7 @@
<link rel="stylesheet" href="/share/css/led.css">
<link rel="stylesheet" href="/share/css/slider.css">
<link rel="stylesheet" href="/share/css/switch.css">
<link rel="stylesheet" href="/share/css/radio.css">
<link rel="stylesheet" href="/share/css/progress.css">
<link rel="stylesheet" href="/share/css/keypad.css">
<link rel="stylesheet" href="/share/css/tabs.css">
@ -279,12 +280,14 @@
</table>
<table class="kv msd-multi-storage feature-disabled">
<tr class="msd-cdrom-emulation feature-disabled">
<td>Emulate CD-ROM drive:</td>
<td>Drive mode:</td>
<td>
<div class="switch-box">
<input class="switch-checkbox" checked type="checkbox" id="msd-emulate-cdrom-checkbox">
<label class="switch-label" for="msd-emulate-cdrom-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
</div>
<div class="radio-box">
<input checked type="radio" id="msd-mode-radio-cdrom" name="msd-mode-radio" value="1">
<label for="msd-mode-radio-cdrom">CD-ROM</label>
<input type="radio" id="msd-mode-radio-flash" name="msd-mode-radio" value="0">
<label for="msd-mode-radio-flash">Flash</label>
</div>
</td>
</tr>
</table>

2
web/kvm/index.pug
View File

@ -4,7 +4,7 @@ append vars
- title = "Pi-KVM Session"
- main_js = "kvm/main"
- body_class = "body-no-select"
- css_list = css_list.concat(["navbar", "window", "modal", "led", "slider", "switch", "progress", "keypad", "tabs"])
- css_list = css_list.concat(["navbar", "window", "modal", "led", "slider", "switch", "radio", "progress", "keypad", "tabs"])
- css_list = css_list.concat(["kvm/stream", "kvm/hid", "kvm/msd", "kvm/keyboard", "kvm/about"])
block body

8
web/kvm/navbar-msd.pug
View File

@ -43,9 +43,13 @@ li(id="msd-dropdown" class="right feature-disabled")
td #[button(disabled id="msd-remove-image") Remove]
table(class="kv msd-multi-storage feature-disabled")
tr(class="msd-cdrom-emulation feature-disabled")
td Emulate CD-ROM drive:
td Drive mode:
td
+switch("msd-emulate-cdrom-checkbox")
div(class="radio-box")
input(checked type="radio" id="msd-mode-radio-cdrom" name="msd-mode-radio" value="1")
label(for="msd-mode-radio-cdrom") CD-ROM
input(type="radio" id="msd-mode-radio-flash" name="msd-mode-radio" value="0")
label(for="msd-mode-radio-flash") Flash
div(class="msd-multi-storage feature-disabled")
hr
div(class="text")

78
web/share/css/radio.css Normal file
View File

@ -0,0 +1,78 @@
/*****************************************************************************
# #
# KVMD - The main Pi-KVM daemon. #
# #
# Copyright (C) 2018 Maxim Devaev <mdevaev@gmail.com> #
# #
# This program is free software: you can redistribute it and/or modify #
# it under the terms of the GNU General Public License as published by #
# the Free Software Foundation, either version 3 of the License, or #
# (at your option) any later version. #
# #
# This program is distributed in the hope that it will be useful, #
# but WITHOUT ANY WARRANTY; without even the implied warranty of #
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
# GNU General Public License for more details. #
# #
# You should have received a copy of the GNU General Public License #
# along with this program. If not, see <https://www.gnu.org/licenses/>. #
# #
*****************************************************************************/
div.radio-box {
display: flex;
flex-wrap: wrap;
}
div.radio-box input[type=radio] {
display: none;
}
div.radio-box label {
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
padding: 4px 8px;
cursor: pointer;
position: relative;
}
div.radio-box label:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
div.radio-box label:last-of-type {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
/* If we have a mouse cursor */
div.radio-box input[type=radio]:not(:disabled) + label:hover {
color: var(--cs-control-hovered-fg) !important;
}
}
div.radio-box input[type=radio]:checked + label {
font-weight: bold;
border: var(--border-intensive-2px);
color: var(--cs-control-intensive-fg);
background-color: var(--cs-thumb-default-bg);
}
div.radio-box input[type=radio] + label {
border: var(--border-default-2px);
color: var(--cs-control-default-fg);
background-color: var(--cs-control-default-bg);
}
div.radio-box input[type=radio]:checked:disabled + label {
cursor: default;
border: var(--border-default-2px);
color: var(--cs-control-default-fg);
background-color: var(--cs-control-default-bg);
}
div.radio-box input[type=radio]:not(:checked):disabled + label {
cursor: default;
color: var(--cs-control-disabled-fg);
background-color: var(--cs-thumb-disabled-bg);
}

14
web/share/js/kvm/msd.js
View File

@ -42,7 +42,7 @@ export function Msd() {
$("msd-image-selector").onchange = __selectImage;
tools.setOnClick($("msd-remove-image"), __clickRemoveImageButton);
tools.setOnClick($("msd-emulate-cdrom-checkbox"), __clickCdromSwitch);
tools.setOnClickRadio("msd-mode-radio", __clickModeRadio);
$("msd-select-new-image-file").onchange = __selectNewImageFile;
tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
@ -84,8 +84,8 @@ export function Msd() {
});
};
var __clickCdromSwitch = function() {
__sendParam("cdrom", ($("msd-emulate-cdrom-checkbox").checked ? "1" : "0"));
var __clickModeRadio = function() {
__sendParam("cdrom", tools.getRadioValue("msd-mode-radio"));
};
var __sendParam = function(name, value) {
@ -224,8 +224,8 @@ export function Msd() {
}
wm.switchEnabled($("msd-remove-image"), (__state.online && __state.features.multi && __state.drive.image && !__state.drive.connected && !__state.busy));
wm.switchEnabled($("msd-emulate-cdrom-checkbox"), (__state.online && __state.features.cdrom && !__state.drive.connected && !__state.busy));
$("msd-emulate-cdrom-checkbox").checked = (__state.online && __state.features.cdrom && __state.drive.cdrom);
wm.switchRadioEnabled("msd-mode-radio", (__state.online && __state.features.cdrom && !__state.drive.connected && !__state.busy));
tools.setRadioValue("msd-mode-radio", `${Number(__state.online && __state.features.cdrom && __state.drive.cdrom)}`);
wm.switchEnabled($("msd-connect-button"), (__state.online && (!__state.features.multi || __state.drive.image) && !__state.drive.connected && !__state.busy));
wm.switchEnabled($("msd-disconnect-button"), (__state.online && __state.drive.connected && !__state.busy));
@ -261,8 +261,8 @@ export function Msd() {
$("msd-image-selector").options.length = 1;
wm.switchEnabled($("msd-remove-image"), false);
wm.switchEnabled($("msd-emulate-cdrom-checkbox"), false);
$("msd-emulate-cdrom-checkbox").checked = false;
wm.switchRadioEnabled("msd-mode-radio", false);
tools.setRadioValue("msd-mode-radio", "0");
wm.switchEnabled($("msd-connect-button"), false);
wm.switchEnabled($("msd-disconnect-button"), false);

16
web/share/js/tools.js
View File

@ -135,6 +135,22 @@ export var tools = new function() {
};
};
this.setOnClickRadio = function(name, callback) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
this.setOnClick(el, callback)
}
};
this.getRadioValue = function(name, value) {
return document.querySelector(`input[type="radio"][name="${name}"]:checked`).value;
};
this.setRadioValue = function(name, value) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
el.checked = (el.value === value);
}
};
this.setProgressPercent = function(el, title, percent) {
el.setAttribute("data-label", title);
$(`${el.id}-value`).style.width = `${percent}%`;

6
web/share/js/wm.js
View File

@ -170,6 +170,12 @@ function __WindowManager() {
el.disabled = !enabled;
};
self.switchRadioEnabled = function(name, enabled) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
self.switchEnabled(el, enabled);
}
};
self.showWindow = function(el_window, activate=true, center=false) {
if (el_window.style.visibility === "hidden") {
center = true;