ui: partial multi msd support

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 @@
 				</div>
 				<hr>
 				<div class="menu-item-content-text">
-					<table id="stream-auto-resize-box"><tr>
+					<table class="one-line-switch"><tr>
 						<td>Auto-resize stream:</td>
 						<td align="right">
 							<div class="switch-box">
@@ -203,13 +203,40 @@
 						<td>Image size:</td>
 						<td id="msd-drive-image-size" class="msd-info-value"></td>
 					</tr>
-					<tr>
+					<tr class="msd-single-storage msd-feature-disabled">
 						<td>Storage size:</td>
 						<td id="msd-storage-size" class="msd-info-value"></td>
 					</tr>
 				</table>
 				<hr>
 
+				<div class="msd-multi-storage msd-feature-disabled">
+					<div class="menu-item-content-text">
+						<table class="one-line-switch"><tr>
+							<td>Emulate CD-ROM drive: <sup><i>otherwise the flash drive</i></sup></td>
+							<td align="right">
+								<div class="switch-box msd-cdrom-switch-box">
+									<input type="checkbox" id="msd-emulate-cdrom-checkbox" class="switch-checkbox" checked />
+									<label class="switch-label" for="msd-emulate-cdrom-checkbox">
+										<span class="switch-inner"></span>
+										<span class="switch"></span>
+									</label>
+								</div>
+							</td>
+						</tr></table>
+					</div>
+					<hr>
+				</div>
+
+				<div class="msd-multi-storage msd-feature-disabled">
+					<div class="menu-item-content-text">
+						<div id="msd-storage-progress" class="progress">
+							<span id="msd-storage-progress-value" class="progress-value"></span>
+						</div>
+					</div>
+					<hr>
+				</div>
+
 				<input type="file" id="msd-select-new-image-file" class="msd-message" />
 				<div class="menu-item-content-buttons buttons-row">
 					<button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
@@ -231,8 +258,8 @@
 					</table>
 					<hr>
 					<div class="menu-item-content-text">
-						<div id="msd-progress" class="progress">
-							<span id="msd-progress-value" class="progress-value"></span>
+						<div id="msd-uploading-progress" class="progress">
+							<span id="msd-uploading-progress-value" class="progress-value"></span>
 						</div>
 					</div>
 					<hr>
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,14 +130,16 @@ 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";
 				$("msd-led").className = "led-green";
@@ -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:<br>", http.responseText);
+				}
+			}
+		});
+	};
+
 	__init__();
 }