From b261c2695cd95100994e5d571bec3534d5477dff Mon Sep 17 00:00:00 2001 From: Devaev Maxim Date: Fri, 8 Nov 2019 01:28:42 +0300 Subject: [PATCH] ui: partial multi msd support --- kvmd/plugins/msd/otg/__init__.py | 2 +- web/kvm/index.html | 35 ++++++++++++++-- web/share/css/kvm/msd.css | 2 +- web/share/css/kvm/stream.css | 12 ------ web/share/css/menu.css | 12 ++++++ web/share/css/switches.css | 5 +++ web/share/js/kvm/msd.js | 71 ++++++++++++++++++++++++-------- 7 files changed, 104 insertions(+), 35 deletions(-) diff --git a/kvmd/plugins/msd/otg/__init__.py b/kvmd/plugins/msd/otg/__init__.py index d6d5a36f..376438d4 100644 --- a/kvmd/plugins/msd/otg/__init__.py +++ b/kvmd/plugins/msd/otg/__init__.py @@ -188,7 +188,7 @@ class Plugin(BaseMsd): # pylint: disable=too-many-instance-attributes del vd["image"]["path"] return { - "enabled": False, # FIXME + "enabled": True, "online": bool(self.__state.vd), "busy": self.__state.is_busy(), "storage": storage, diff --git a/web/kvm/index.html b/web/kvm/index.html index 6683e94d..6222ffdb 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -104,7 +104,7 @@
- +
- +
Auto-resize stream:
@@ -203,13 +203,40 @@
Image size:
Storage size:
+
+
+ + + +
Emulate CD-ROM drive: otherwise the flash drive +
+ + +
+
+
+
+
+ +
+
+
+ +
+
+
+
+
@@ -231,8 +258,8 @@
-
- +
+
diff --git a/web/share/css/kvm/msd.css b/web/share/css/kvm/msd.css index 285d334f..11f02c39 100644 --- a/web/share/css/kvm/msd.css +++ b/web/share/css/kvm/msd.css @@ -24,7 +24,7 @@ div#msd-menu { width: 450px; } -div#msd-menu div.msd-message, input.msd-message { +div#msd-menu .msd-feature-disabled, div.msd-message, input.msd-message { display: none; } diff --git a/web/share/css/kvm/stream.css b/web/share/css/kvm/stream.css index 2406e51c..e3c88243 100644 --- a/web/share/css/kvm/stream.css +++ b/web/share/css/kvm/stream.css @@ -66,18 +66,6 @@ div.stream-slider-box { display: flex; } -table#stream-auto-resize-box { - width: 100%; - border-collapse: collapse; -} -@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { - @supports (-webkit-appearance: none) { - table#stream-auto-resize-box { - margin: 20px 0 20px 0 !important; - } - } -} - div#stream-mouse-buttons { display: none; } diff --git a/web/share/css/menu.css b/web/share/css/menu.css index 8e97b7b7..8e7663e7 100644 --- a/web/share/css/menu.css +++ b/web/share/css/menu.css @@ -119,6 +119,18 @@ ul#menu li div.menu-item-content-text { font-size: 14px; } +ul#menu li div.menu-item-content-text table.one-line-switch { + width: 100%; + border-collapse: collapse; +} +@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { + @supports (-webkit-appearance: none) { + ul#menu li div.menu-item-content-text table.one-line-switch { + margin: 20px 0 20px 0 !important; + } + } +} + ul#menu li div.menu-item-content button, select { box-shadow: none; border: none; diff --git a/web/share/css/switches.css b/web/share/css/switches.css index fbc9582e..00defe4a 100644 --- a/web/share/css/switches.css +++ b/web/share/css/switches.css @@ -96,3 +96,8 @@ div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch { right: 0px; } + +div.switch-box input[type=checkbox].switch-checkbox:disabled + label.switch-label span.switch { + background: var(--cs-thumb-disabled-bg); + border: var(--border-default-2px); +} diff --git a/web/share/js/kvm/msd.js b/web/share/js/kvm/msd.js index 988923c4..6150c77a 100644 --- a/web/share/js/kvm/msd.js +++ b/web/share/js/kvm/msd.js @@ -23,7 +23,7 @@ "use strict"; -import {tools, $} from "../tools.js"; +import {tools, $, $$$} from "../tools.js"; import {wm} from "../wm.js"; @@ -39,6 +39,8 @@ export function Msd() { var __init__ = function() { $("msd-led").title = "Unknown state"; + tools.setOnClick($("msd-emulate-cdrom-checkbox"), __clickCdromSwitch); + $("msd-select-new-image-file").onchange = __selectNewImageFile; tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click()); @@ -58,6 +60,10 @@ export function Msd() { __applyState(); }; + var __clickCdromSwitch = function() { + __sendParam("cdrom", ($("msd-emulate-cdrom-checkbox").checked ? "1" : "0")); + }; + var __clickUploadNewImageButton = function() { let form_data = new FormData(); form_data.append("image", __image_file.name); @@ -76,8 +82,8 @@ export function Msd() { __upload_http.upload.onprogress = null; __upload_http.abort(); __upload_http = null; - $("msd-progress").setAttribute("data-label", "Aborted"); - $("msd-progress-value").style.width = "0%"; + $("msd-uploading-progress").setAttribute("data-label", "Aborted"); + $("msd-uploading-progress-value").style.width = "0%"; }; var __clickConnectButton = function(connect) { @@ -124,13 +130,15 @@ export function Msd() { var __applyState = function() { if (__state) { - if (__state.enabled) { - $("msd-dropdown").classList.remove("feature-disabled"); - $("msd-reset-button").classList.remove("feature-disabled"); - } else { - $("msd-dropdown").classList.add("feature-disabled"); - $("msd-reset-button").classList.add("feature-disabled"); + for (let el of $$$(".msd-single-storage")) { + el.classList.toggle("msd-feature-disabled", __state.features.multi); } + for (let el of $$$(".msd-multi-storage")) { + el.classList.toggle("msd-feature-disabled", !__state.features.multi); + } + + $("msd-dropdown").classList.toggle("feature-disabled", !__state.enabled); + $("msd-reset-button").classList.toggle("feature-disabled", !__state.enabled); if (__state.online && __state.drive.connected) { $("msd-another-another-user-uploads").style.display = "none"; @@ -160,18 +168,35 @@ export function Msd() { $("msd-drive-image-name").innerHTML = (__state.online && __state.drive.image ? __state.drive.image.name : "None"); $("msd-drive-image-size").innerHTML = (__state.online && __state.drive.image ? __formatSize(__state.drive.image.size) : "None"); - $("msd-storage-size").innerHTML = (__state.online ? __formatSize(__state.storage.size) : "Unavailable"); - wm.switchDisabled($("msd-connect-button"), (!__state.online || __state.drive.connected || __state.busy)); + if (__state.online) { + let size = __state.storage.size; + let used = __state.storage.size - __state.storage.free; + $("msd-storage-size").innerHTML = __formatSize(size); + $("msd-storage-progress").setAttribute("data-label", `Storage: ${__formatSize(used)} of ${__formatSize(size)} used`); + $("msd-storage-progress-value").style.width = `${used / size * 100}%`; + } else { + $("msd-storage-size").innerHTML = "Unavailable"; + $("msd-storage-progress").setAttribute("data-label", "Storage: unavailable"); + $("msd-storage-progress-value").style.width = "0%"; + } + + wm.switchDisabled($("msd-emulate-cdrom-checkbox"), (!__state.online || !__state.features.cdrom, __state.drive.connected || __state.busy)); + if (__state.features.multi) { + wm.switchDisabled($("msd-connect-button"), (!__state.online || !__state.drive.image || __state.drive.connected || __state.busy)); + } else { + wm.switchDisabled($("msd-connect-button"), (!__state.online || __state.drive.connected || __state.busy)); + } wm.switchDisabled($("msd-disconnect-button"), (!__state.online || !__state.drive.connected || __state.busy)); wm.switchDisabled($("msd-select-new-image-button"), (!__state.online || __state.drive.connected || __state.busy || __upload_http)); wm.switchDisabled($("msd-upload-new-image-button"), (!__state.online || __state.drive.connected || __state.busy || !__image_file)); wm.switchDisabled($("msd-abort-uploading-button"), (!__state.online || !__upload_http)); wm.switchDisabled($("msd-reset-button"), (!__state.enabled || __state.busy)); + $("msd-emulate-cdrom-checkbox").checked = (__state.online && __state.features.cdrom && __state.drive.cdrom); $("msd-new-image").style.display = (__image_file ? "block" : "none"); - $("msd-progress").setAttribute("data-label", "Waiting for upload ..."); - $("msd-progress-value").style.width = "0%"; + $("msd-uploading-progress").setAttribute("data-label", "Waiting for upload ..."); + $("msd-uploading-progress-value").style.width = "0%"; $("msd-new-image-name").innerHTML = (__image_file ? __image_file.name : ""); $("msd-new-image-size").innerHTML = (__image_file ? __formatSize(__image_file.size) : ""); @@ -186,6 +211,7 @@ export function Msd() { $("msd-drive-image-size").innerHTML = ""; $("msd-storage-size").innerHTML = ""; + wm.switchDisabled($("msd-emulate-cdrom-checkbox"), true); wm.switchDisabled($("msd-connect-button"), true); wm.switchDisabled($("msd-disconnect-button"), true); wm.switchDisabled($("msd-select-new-image-button"), true); @@ -193,10 +219,11 @@ export function Msd() { wm.switchDisabled($("msd-abort-uploading-button"), true); wm.switchDisabled($("msd-reset-button"), true); + $("msd-emulate-cdrom-checkbox").checked = false; $("msd-select-new-image-file").value = ""; $("msd-new-image").style.display = "none"; - $("msd-progress").setAttribute("data-label", ""); - $("msd-progress-value").style.width = "0%"; + $("msd-uploading-progress").setAttribute("data-label", ""); + $("msd-uploading-progress-value").style.width = "0%"; $("msd-new-image-name").innerHTML = ""; $("msd-new-image-size").innerHTML = ""; } @@ -226,10 +253,20 @@ export function Msd() { var __uploadProgress = function(event) { if(event.lengthComputable) { let percent = Math.round((event.loaded * 100) / event.total); - $("msd-progress").setAttribute("data-label", percent + "%"); - $("msd-progress-value").style.width = percent + "%"; + $("msd-uploading-progress").setAttribute("data-label", percent + "%"); + $("msd-uploading-progress-value").style.width = percent + "%"; } }; + var __sendParam = function(name, value) { + let http = tools.makeRequest("POST", `/api/msd/set_params?${name}=${value}`, function() { + if (http.readyState === 4) { + if (http.status !== 200) { + wm.error("Can't configure MSD:
", http.responseText); + } + } + }); + }; + __init__(); }