show all parts in msd menu

web/kvm/index.html

@@ -498,9 +498,7 @@
             </tr>
           </table>
           <hr>
-          <div class="text">
+          <div id="msd-storages"></div>
-            <div class="progress" id="msd-storage-progress"><span class="progress-value" id="msd-storage-progress-value"></span></div>
-          </div>
           <hr>
           <div class="buttons buttons-row">
             <button class="row50" disabled id="msd-select-new-button">Select image to upload</button>

web/kvm/navbar-msd.pug

@@ -51,9 +51,7 @@ li(id="msd-dropdown" class="right feature-disabled")
 				td  
 				+menu_switch_notable("msd-rw-switch", "Writable", false, false)
 		hr
-		div(class="text")
+		div(id="msd-storages")
-			div(id="msd-storage-progress" class="progress")
-				span(id="msd-storage-progress-value" class="progress-value")
 		hr
 		div(class="buttons buttons-row")
 			button(disabled id="msd-select-new-button" class="row50") Select image to upload

web/share/js/kvm/msd.js

@@ -35,6 +35,10 @@ export function Msd() {
 	var __state = null;
 	var __http = null;
 
+	var __parts_json = "";
+	var __parts = {};
+	var __parts_len = 0;
+
 	var __init__ = function() {
 		$("msd-led").title = "Unknown state";
 
@@ -243,9 +247,34 @@ export function Msd() {
 		tools.hidden.setVisible($("msd-message-downloads"), (online && s.storage.downloading));
 
 		if (online) {
-			tools.progress.setSizeOf($("msd-storage-progress"), "Storage: %s", s.storage.parts[""].size, s.storage.parts[""].free);
+			let names = Object.keys(s.storage.parts).sort();
+			let parts_json = JSON.stringify(names);
+			if (__parts_json !== parts_json) {
+				$("msd-storages").innerHTML = names.map(name => `
+					<div class="text">
+						<div id="msd-storage-${tools.makeIdByText(name)}-progress" class="progress">
+							<span class="progress-value"></span>
+						</div>
+					</div>
+				`).join("<hr>");
+				__parts_json = parts_json;
+				__parts = s.storage.parts;
+				__parts_len = names.length;
+			}
+		}
+		for (let name in __parts) {
+			let part = __parts[name];
+			let title = (
+				name.length === 0
+				? `${__parts_len === 1 ? "Storage: %s" : "Internal storage: %s"}` // eslint-disable-line
+				: `Storage [${name}${part.writable ? "]" : ", read-only]"}: %s` // eslint-disable-line
+			);
+			let id = `msd-storage-${tools.makeIdByText(name)}-progress`;
+			if (online) {
+				tools.progress.setSizeOf($(id), title, part.size, part.free);
 			} else {
-			tools.progress.setValue($("msd-storage-progress"), "Storage: unavailable", 0);
+				tools.progress.setValue($(id), title.replace("%s", "unavailable"), 0);
+			}
 		}
 
 		tools.el.setEnabled($("msd-image-selector"), (online && !s.drive.connected && !s.busy));

web/share/js/tools.js

@@ -66,6 +66,10 @@ export var tools = new function() {
 		return id;
 	};
 
+	self.makeIdByText = function(text) {
+		return btoa(text).replace("=", "_");
+	};
+
 	self.formatSize = function(size) {
 		if (size > 0) {
 			let index = Math.floor( Math.log(size) / Math.log(1024) );
@@ -298,7 +302,7 @@ export var tools = new function() {
 		return {
 			"setValue": function(el, title, percent) {
 				el.setAttribute("data-label", title);
-				$(`${el.id}-value`).style.width = `${percent}%`;
+				el.querySelector(".progress-value").style.width = `${percent}%`;
 			},
 			"setPercentOf": function(el, max, value) {
 				let percent = Math.round(value * 100 / max);