refactoring

web/kvm/navbar-msd.pug

@@ -1,100 +1,108 @@
-li(id="msd-dropdown" class="right feature-disabled")
-	a(class="menu-button" href="#")
+li.right.feature-disabled#msd-dropdown
+	a.menu-button(href="#")
 		+navbar_led("msd-led", "led-msd")
 		span Drive
-	div(id="msd-menu" class="menu")
-		div(class="text")
+
+	.menu#msd-menu
+		.text
 			b Mass Storage Drive: 
-			span(id="msd-status")
+			span#msd-status
 			br
 		hr
-		div(id="msd-message-offline" class="hidden")
+
+		.hidden#msd-message-offline
 			+menu_message("warning", "Mass Storage Drive is offline")
 			hr
-		div(id="msd-message-image-broken" class="hidden")
+		.hidden#msd-message-image-broken
 			+menu_message("warning", "Current image is broken!")
-				| Perhaps uploading was interrupted#[br]
+				| Perhaps uploading was interrupted
 			hr
-		div(id="msd-message-too-big-for-dvd" class="hidden")
+		.hidden#msd-message-too-big-for-dvd
 			+menu_message("warning", "Current image is too big for DVD!")
 				| The maximum is 31.6GiB. Please switch to the Flash mode.
 			hr
-		div(id="msd-message-out-of-storage" class="hidden")
+		.hidden#msd-message-out-of-storage
 			+menu_message("warning", "Current image is out of storage")
 				| This image was connected manually using #[b kvmd-otgmsd]
 			hr
-		div(id="msd-message-rw-enabled" class="hidden")
+		.hidden#msd-message-rw-enabled
 			+menu_message("warning", "Read-write mode is enabled")
 				| Do not turn off PiKVM while this is active to prevent#[br]
 				| filesystem corruption. Use read-only mode where possible,#[br]
 				| as writing to SD card often can reduce its lifespan.
 			hr
-		div(id="msd-message-downloads" class="hidden")
+		.hidden#msd-message-downloads
 			+menu_message("info", "The image is being downloaded from PiKVM")
 				| Please wait
 			hr
-		table(class="kv")
+
+		table.kv
 			tr
 				td Image:
-				td(width="100%") #[select(disabled id="msd-image-selector")]
-				td #[button(disabled id="msd-download-button" title="Download image") #[b   ⇩  ]]
-				td #[button(disabled id="msd-remove-button" title="Remove image") #[b   ×  ]]
-		table(class="kv")
+				td(width="100%") #[select#msd-image-selector(disabled)]
+				td #[button#msd-download-button(disabled title="Download image") #[b   ⇩  ]]
+				td #[button#msd-remove-button(disabled title="Remove image") #[b   ×  ]]
+
+		table.kv
 			tr
-				td Drive #[a(target="_blank" href="https://docs.pikvm.org/msd") mode]:
-				td
-					div(class="radio-box")
-						input(checked type="radio" id="msd-mode-radio-cdrom" name="msd-mode-radio" value="1")
-						label(for="msd-mode-radio-cdrom") CD/DVD
-						input(type="radio" id="msd-mode-radio-flash" name="msd-mode-radio" value="0")
-						label(for="msd-mode-radio-flash") Flash
+				+menu_radio_td2("msd-mode-radio", [
+					{title: "CD/DVD", value: "1", checked: true},
+					{title: "Flash", value: "0"},
+				]) Drive #[a(target="_blank" href="https://docs.pikvm.org/msd") mode]:
 				td  
-				+menu_switch_notable("msd-rw-switch", "Writable", false, false)
+				+menu_switch_td2("msd-rw-switch", false, false) Writable:
 		hr
-		div(id="msd-storages")
+
+		#msd-storages
 		hr
-		div(class="buttons buttons-row")
-			button(disabled id="msd-select-new-button" class="row50") Select image to upload
-			button(disabled id="msd-upload-new-button" class="row25") Upload
-			button(disabled id="msd-abort-new-button" class="row25") Abort
-		div(id="msd-message-another-user-uploads" class="hidden")
-			hr
+
+		.buttons.buttons-row
+			button.row50#msd-select-new-button(disabled) Select image to upload
+			button.row25#msd-upload-new-button(disabled) Upload
+			button.row25#msd-abort-new-button(disabled) Abort
+		hr
+
+		.hidden#msd-message-another-user-uploads
 			+menu_message("info", "Another user uploads an image")
-		div(id="msd-new-sub" class="hidden")
 			hr
-			table(class="kv")
+
+		.hidden#msd-new-sub
+			table.kv
 				tr
 					td Specify a local file:
-					td #[input(type="file" id="msd-new-file")]
+					td #[input#msd-new-file(type="file")]
 				tr
 					td #[b Or] paste a URL:
-					td #[input(type="text" id="msd-new-url" style="width: 100%")]
-				tr(id="msd-new-part" class="hidden")
+					td #[input#msd-new-url(type="text" style="width: 100%")]
+				tr.hidden#msd-new-part
 					td Upload partition:
-					td(width="100%") #[select(id="msd-new-part-selector")]
-		div(id="msd-uploading-sub" class="hidden")
+					td(width="100%") #[select#msd-new-part-selector]
 			hr
-			table(class="kv")
+
+		.hidden#msd-uploading-sub
+			table.kv
 				tr
 					td New image:
-					td(id="msd-uploading-name" class="value")
+					td.value#msd-uploading-name
 				tr
 					td Upload size:
-					td(id="msd-uploading-size" class="value")
-			div(class="text")
-				div(id="msd-uploading-progress" class="progress")
-					span(id="msd-uploading-progress-value" class="progress-value")
-		div(id="msd-new-tips" class="hidden")
+					td.value#msd-uploading-size
+			.text
+				.progress#msd-uploading-progress
+					span.progress-value#msd-uploading-progress-value
 			hr
-			table(class="kv")
+
+		.hidden#msd-new-tips
+			table.kv
 				tr
-					td(class="value") Note:
+					td.value Note:
 					td • Don't close the browser page until the upload is complete.
 				tr
 					td
 					td • To speed up the upload, close the stream window.
-		hr
-		div(class="buttons buttons-row")
-			button(disabled id="msd-connect-button" class="row50") Connect drive to Server
-			button(disabled id="msd-disconnect-button" class="row25") Disconnect
-			button(disabled id="msd-reset-button" class="row25") Reset
+			hr
+
+		.buttons.buttons-row
+			button.row50#msd-connect-button Connect drive to Server
+			button.row25#msd-disconnect-button Disconnect
+			button.row25#msd-reset-button Reset