fixed msd parts api

6 files changed, 62 insertions, 63 deletions

diff --git a/kvmd/plugins/msd/otg/storage.py b/kvmd/plugins/msd/otg/storage.py
index 08853947..e4339fed 100644
--- a/kvmd/plugins/msd/otg/storage.py
+++ b/kvmd/plugins/msd/otg/storage.py
@@ -152,7 +152,10 @@ class _Part(_PartDc):
 
     async def _reload(self) -> None:  # Only for Storage()
         st = await aiotools.run_async(os.statvfs, self.__path)
-        writable = await aiofiles.os.access(self.__path, os.W_OK)  # type: ignore
+        if self.name == "":
+            writable = True
+        else:
+            writable = await aiofiles.os.access(self.__path, os.W_OK)  # type: ignore
         object.__setattr__(self, "size", st.f_blocks * st.f_frsize)
         object.__setattr__(self, "free", st.f_bavail * st.f_frsize)
         object.__setattr__(self, "writable", writable)
diff --git a/web/share/js/kvm/hid.js b/web/share/js/kvm/hid.js
index 30cb8690..89a3134c 100644
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -198,12 +198,9 @@ export function Hid(__getGeometry, __recorder) {
 	};
 
 	self.setKeymaps = function(state) {
-		let selected = tools.storage.get("hid.pak.keymap", state.keymaps["default"]);
-		let html = "";
-		for (let variant of state.keymaps.available) {
-			html += `<option value=${variant} ${variant === selected ? "selected" : ""}>${variant}</option>`;
-		}
-		$("hid-pak-keymap-selector").innerHTML = html;
+		let el = $("hid-pak-keymap-selector");
+		tools.selector.setValues(el, state.keymaps.available);
+		tools.selector.setSelectedValue(el, tools.storage.get("hid.pak.keymap", state.keymaps["default"]));
 	};
 
 	var __releaseAll = function() {
diff --git a/web/share/js/kvm/msd.js b/web/share/js/kvm/msd.js
index 3eb646cf..fb5c755b 100644
--- a/web/share/js/kvm/msd.js
+++ b/web/share/js/kvm/msd.js
@@ -38,7 +38,9 @@ export function Msd() {
 	var __init__ = function() {
 		$("msd-led").title = "Unknown state";
 
+		tools.selector.addOption($("msd-image-selector"), "\u2500 Not selected \u2500", "");
 		$("msd-image-selector").onchange = __selectImage;
+
 		tools.el.setOnClick($("msd-download-button"), __clickDownloadButton);
 		tools.el.setOnClick($("msd-remove-button"), __clickRemoveButton);
 
@@ -336,12 +338,17 @@ export function Msd() {
 	};
 
 	var __applyStateImageSelector = function() {
+		let s = __state;
 		let el = $("msd-image-selector");
-		if (!__prepareSelector(el, "Not selected")) {
+		if (!(s && s.online)) {
+			el.options.length = 1; // Cleanup
+			return;
+		}
+		if (s.storage.uploading || s.storage.downloading) {
 			return;
 		}
+		el.options.length = 1;
 
-		let s = __state;
 		let selected = "";
 
 		for (let name of Object.keys(s.storage.images).sort()) {
@@ -363,42 +370,26 @@ export function Msd() {
 	};
 
 	var __makeImageSelectorInfo = function(image) {
-		let title = `\xA0\xA0\xA0\xA0\xA0\u2570 ${tools.formatSize(image.size)}`;
-		title += (image.complete ? "" : ", broken");
+		let info = `\xA0\xA0\xA0\xA0\xA0\u2570 ${tools.formatSize(image.size)}`;
+		info += (image.complete ? "" : ", broken");
 		if (image.in_storage !== undefined && !image.in_storage) {
-			title += ", out of storage";
+			info += ", out of storage";
 		}
 		let dt = new Date(image.mod_ts * 1000);
 		dt = new Date(dt.getTime() - (dt.getTimezoneOffset() * 60000));
-		title += " \u2500 " + dt.toISOString().slice(0, -8).replaceAll("-", ".").replace("T", "-");
-		return title;
+		info += " \u2500 " + dt.toISOString().slice(0, -8).replaceAll("-", ".").replace("T", "-");
+		return info;
 	};
 
 	var __applyStatePartSelector = function() {
-		let el = $("msd-new-part-selector");
-		if (!__prepareSelector(el, "Internal")) {
-			return;
-		}
-		for (let name of Object.keys(__state.storage.parts).sort()) {
-			if (name != "" && __state.storage.parts[name].writable) {
-				tools.selector.addOption(el, name, name);
-			}
-		}
-		tools.hidden.setVisible($("msd-new-part"), (el.options.length > 1));
-	};
-
-	var __prepareSelector = function(el, first) {
 		let s = __state;
-		let online = (s && s.online);
-		if (!online) {
-			el.options.length = 1; // Cleanup
-			return false;
-		}
-		if (s.storage.uploading || s.storage.downloading) {
-			return false;
+		if (!(s && s.online) || s.storage.uploading || s.storage.downloading) {
+			return;
 		}
-		tools.selector.initDefault(el, first, "");
-		return true;
+		let el = $("msd-new-part-selector");
+		let parts = Object.keys(s.storage.parts).sort().filter(name => (name === "" || s.storage.parts[name].writable));
+		tools.selector.setValues(el, parts, "\u2500 Internal \u2500");
+		tools.hidden.setVisible($("msd-new-part"), (parts.length > 1));
 	};
 
 	__init__();
diff --git a/web/share/js/kvm/ocr.js b/web/share/js/kvm/ocr.js
index ee234893..eef26c5a 100644
--- a/web/share/js/kvm/ocr.js
+++ b/web/share/js/kvm/ocr.js
@@ -73,12 +73,9 @@ export function Ocr(__getGeometry) {
 	self.setState = function(state) {
 		let enabled = (state && state.ocr.enabled && navigator.clipboard && !tools.browser.is_mobile);
 		if (enabled) {
-			let selected = tools.storage.get("stream.ocr.lang", state.ocr.langs["default"]);
-			let html = "";
-			for (let variant of state.ocr.langs.available) {
-				html += `<option value=${variant} ${variant === selected ? "selected" : ""}>${variant}</option>`;
-			}
-			$("stream-ocr-lang-selector").innerHTML = html;
+			let el = $("stream-ocr-lang-selector");
+			tools.selector.setValues(el, state.ocr.langs.available);
+			tools.selector.setSelectedValue(el, tools.storage.get("stream.ocr.lang", state.ocr.langs["default"]));
 		}
 		tools.feature.setEnabled($("stream-ocr"), enabled);
 		$("stream-ocr-led").className = (enabled ? "led-gray" : "hidden");
diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index 0239a27b..9a73ea56 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -176,19 +176,13 @@ export function Streamer() {
 				}
 
 				if (state.features.resolution) {
-					if ($("stream-resolution-selector").resolutions !== state.limits.available_resolutions) {
-						let resolutions_html = "";
-						for (let variant of state.limits.available_resolutions) {
-							resolutions_html += `<option value="${variant}">${variant}</option>`;
-						}
-						if (!state.limits.available_resolutions.includes(resolution_str)) {
-							resolutions_html += `<option value="${resolution_str}">${resolution_str}</option>`;
-						}
-						$("stream-resolution-selector").innerHTML = resolutions_html;
-						$("stream-resolution-selector").resolutions = state.limits.available_resolutions;
+					let el = $("stream-resolution-selector");
+					if (!state.limits.available_resolutions.includes(resolution_str)) {
+						state.limits.available_resolutions.push(resolution_str);
 					}
-					document.querySelector(`#stream-resolution-selector [value="${resolution_str}"]`).selected = true;
-					tools.el.setEnabled($("stream-resolution-selector"), true);
+					tools.selector.setValues(el, state.limits.available_resolutions);
+					tools.selector.setSelectedValue(el, resolution_str);
+					tools.el.setEnabled(el, true);
 				}
 
 			} else {
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index 4d082eea..ca31f1f8 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -253,15 +253,8 @@ export var tools = new function() {
 
 	self.selector = new function() {
 		return {
-			"initDefault": function(el, title, value) {
-				if (el.options.length === 0) {
-					self.selector.addOption(el, `\u2500 ${title} \u2500`, value);
-				} else {
-					el.options.length = 1;
-				}
-			},
-			"addOption": function(el, title, value) {
-				el.add(new Option(title, value, false, false));
+			"addOption": function(el, title, value, selected=false) {
+				el.add(new Option(title, value, selected, selected));
 			},
 			"addComment": function(el, title) {
 				let option = new Option(title, ".".repeat(30), false, false); // Kinda magic value
@@ -274,6 +267,30 @@ export var tools = new function() {
 					self.selector.addComment(el, "\u2500".repeat(30));
 				}
 			},
+
+			"setValues": function(el, values, empty_title=null) {
+				if (values.constructor == Object) {
+					values = Object.keys(values).sort();
+				}
+				let values_json = JSON.stringify(values);
+				if (el.__values_json !== values_json) {
+					el.options.length = 0;
+					for (let value of values) {
+						let title = value;
+						if (title.length === 0 && empty_title !== null) {
+							title = empty_title;
+						}
+						self.selector.addOption(el, title, value);
+					}
+					el.__values_json = values_json;
+					el.__values = values;
+				}
+			},
+			"setSelectedValue": function(el, value) {
+				if (el.__values && el.__values.includes(value)) {
+					el.value = value;
+				}
+			},
 		};
 	};