GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-29 09:01:54 +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
Download Patch File Download Diff File Expand all files Collapse all files

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;