drive mode radio switch

7 files changed, 122 insertions, 15 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 3be03972..fccb7893 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -41,6 +41,7 @@
     <link rel="stylesheet" href="/share/css/led.css">
     <link rel="stylesheet" href="/share/css/slider.css">
     <link rel="stylesheet" href="/share/css/switch.css">
+    <link rel="stylesheet" href="/share/css/radio.css">
     <link rel="stylesheet" href="/share/css/progress.css">
     <link rel="stylesheet" href="/share/css/keypad.css">
     <link rel="stylesheet" href="/share/css/tabs.css">
@@ -279,12 +280,14 @@
           </table>
           <table class="kv msd-multi-storage feature-disabled">
             <tr class="msd-cdrom-emulation feature-disabled">
-              <td>Emulate CD-ROM drive:</td>
+              <td>Drive mode:</td>
               <td>
-                    <div class="switch-box">
-                      <input class="switch-checkbox" checked type="checkbox" id="msd-emulate-cdrom-checkbox">
-                      <label class="switch-label" for="msd-emulate-cdrom-checkbox"><span class="switch-inner"></span><span class="switch"></span></label>
-                    </div>
+                <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-ROM</label>
+                  <input type="radio" id="msd-mode-radio-flash" name="msd-mode-radio" value="0">
+                  <label for="msd-mode-radio-flash">Flash</label>
+                </div>
               </td>
             </tr>
           </table>
diff --git a/web/kvm/index.pug b/web/kvm/index.pug
index 21c33c17..752dfe29 100644
--- a/web/kvm/index.pug
+++ b/web/kvm/index.pug
@@ -4,7 +4,7 @@ append vars
 	- title = "Pi-KVM Session"
 	- main_js = "kvm/main"
 	- body_class = "body-no-select"
-	- css_list = css_list.concat(["navbar", "window", "modal", "led", "slider", "switch", "progress", "keypad", "tabs"])
+	- css_list = css_list.concat(["navbar", "window", "modal", "led", "slider", "switch", "radio", "progress", "keypad", "tabs"])
 	- css_list = css_list.concat(["kvm/stream", "kvm/hid", "kvm/msd", "kvm/keyboard", "kvm/about"])
 
 block body
diff --git a/web/kvm/navbar-msd.pug b/web/kvm/navbar-msd.pug
index fddcf198..63564ae6 100644
--- a/web/kvm/navbar-msd.pug
+++ b/web/kvm/navbar-msd.pug
@@ -43,9 +43,13 @@ li(id="msd-dropdown" class="right feature-disabled")
 				td #[button(disabled id="msd-remove-image") Remove]
 		table(class="kv msd-multi-storage feature-disabled")
 			tr(class="msd-cdrom-emulation feature-disabled")
-				td Emulate CD-ROM drive:
+				td Drive mode:
 				td
-					+switch("msd-emulate-cdrom-checkbox")
+					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-ROM
+						input(type="radio" id="msd-mode-radio-flash" name="msd-mode-radio" value="0")
+						label(for="msd-mode-radio-flash") Flash
 		div(class="msd-multi-storage feature-disabled")
 			hr
 			div(class="text")
diff --git a/web/share/css/radio.css b/web/share/css/radio.css
new file mode 100644
index 00000000..c81adfcf
--- /dev/null
+++ b/web/share/css/radio.css
@@ -0,0 +1,78 @@
+/*****************************************************************************
+#                                                                            #
+#    KVMD - The main Pi-KVM daemon.                                          #
+#                                                                            #
+#    Copyright (C) 2018  Maxim Devaev <[email protected]>                    #
+#                                                                            #
+#    This program is free software: you can redistribute it and/or modify    #
+#    it under the terms of the GNU General Public License as published by    #
+#    the Free Software Foundation, either version 3 of the License, or       #
+#    (at your option) any later version.                                     #
+#                                                                            #
+#    This program is distributed in the hope that it will be useful,         #
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of          #
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           #
+#    GNU General Public License for more details.                            #
+#                                                                            #
+#    You should have received a copy of the GNU General Public License       #
+#    along with this program.  If not, see <https://www.gnu.org/licenses/>.  #
+#                                                                            #
+*****************************************************************************/
+
+
+div.radio-box {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+div.radio-box input[type=radio] {
+	display: none;
+}
+
+div.radio-box label {
+	display: inline-block;
+	text-align: center;
+	vertical-align: middle;
+	user-select: none;
+	padding: 4px 8px;
+	cursor: pointer;
+	position: relative;
+}
+div.radio-box label:first-of-type {
+	border-top-left-radius: 4px;
+	border-bottom-left-radius: 4px;
+}
+div.radio-box label:last-of-type {
+	border-top-right-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	/* If we have a mouse cursor */
+	div.radio-box input[type=radio]:not(:disabled) + label:hover {
+		color: var(--cs-control-hovered-fg) !important;
+	}
+}
+
+div.radio-box input[type=radio]:checked + label {
+	font-weight: bold;
+	border: var(--border-intensive-2px);
+	color: var(--cs-control-intensive-fg);
+	background-color: var(--cs-thumb-default-bg);
+}
+div.radio-box input[type=radio] + label {
+	border: var(--border-default-2px);
+	color: var(--cs-control-default-fg);
+	background-color: var(--cs-control-default-bg);
+}
+div.radio-box input[type=radio]:checked:disabled + label {
+	cursor: default;
+	border: var(--border-default-2px);
+	color: var(--cs-control-default-fg);
+	background-color: var(--cs-control-default-bg);
+}
+div.radio-box input[type=radio]:not(:checked):disabled + label {
+	cursor: default;
+	color: var(--cs-control-disabled-fg);
+	background-color: var(--cs-thumb-disabled-bg);
+}
diff --git a/web/share/js/kvm/msd.js b/web/share/js/kvm/msd.js
index 144e5c70..739016c2 100644
--- a/web/share/js/kvm/msd.js
+++ b/web/share/js/kvm/msd.js
@@ -42,7 +42,7 @@ export function Msd() {
 		$("msd-image-selector").onchange = __selectImage;
 		tools.setOnClick($("msd-remove-image"), __clickRemoveImageButton);
 
-		tools.setOnClick($("msd-emulate-cdrom-checkbox"), __clickCdromSwitch);
+		tools.setOnClickRadio("msd-mode-radio", __clickModeRadio);
 
 		$("msd-select-new-image-file").onchange = __selectNewImageFile;
 		tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
@@ -84,8 +84,8 @@ export function Msd() {
 		});
 	};
 
-	var __clickCdromSwitch = function() {
-		__sendParam("cdrom", ($("msd-emulate-cdrom-checkbox").checked ? "1" : "0"));
+	var __clickModeRadio = function() {
+		__sendParam("cdrom", tools.getRadioValue("msd-mode-radio"));
 	};
 
 	var __sendParam = function(name, value) {
@@ -224,8 +224,8 @@ export function Msd() {
 			}
 			wm.switchEnabled($("msd-remove-image"), (__state.online && __state.features.multi && __state.drive.image && !__state.drive.connected && !__state.busy));
 
-			wm.switchEnabled($("msd-emulate-cdrom-checkbox"), (__state.online && __state.features.cdrom && !__state.drive.connected && !__state.busy));
-			$("msd-emulate-cdrom-checkbox").checked = (__state.online && __state.features.cdrom && __state.drive.cdrom);
+			wm.switchRadioEnabled("msd-mode-radio", (__state.online && __state.features.cdrom && !__state.drive.connected && !__state.busy));
+			tools.setRadioValue("msd-mode-radio", `${Number(__state.online && __state.features.cdrom && __state.drive.cdrom)}`);
 
 			wm.switchEnabled($("msd-connect-button"), (__state.online && (!__state.features.multi || __state.drive.image) && !__state.drive.connected && !__state.busy));
 			wm.switchEnabled($("msd-disconnect-button"), (__state.online && __state.drive.connected && !__state.busy));
@@ -261,8 +261,8 @@ export function Msd() {
 			$("msd-image-selector").options.length = 1;
 			wm.switchEnabled($("msd-remove-image"), false);
 
-			wm.switchEnabled($("msd-emulate-cdrom-checkbox"), false);
-			$("msd-emulate-cdrom-checkbox").checked = false;
+			wm.switchRadioEnabled("msd-mode-radio", false);
+			tools.setRadioValue("msd-mode-radio", "0");
 
 			wm.switchEnabled($("msd-connect-button"), false);
 			wm.switchEnabled($("msd-disconnect-button"), false);
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index 5bd41548..92a701d2 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -135,6 +135,22 @@ export var tools = new function() {
 		};
 	};
 
+	this.setOnClickRadio = function(name, callback) {
+		for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
+			this.setOnClick(el, callback)
+		}
+	};
+
+	this.getRadioValue = function(name, value) {
+		return document.querySelector(`input[type="radio"][name="${name}"]:checked`).value;
+	};
+
+	this.setRadioValue = function(name, value) {
+		for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
+			el.checked = (el.value === value);
+		}
+	};
+
 	this.setProgressPercent = function(el, title, percent) {
 		el.setAttribute("data-label", title);
 		$(`${el.id}-value`).style.width = `${percent}%`;
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index 0ccffea5..18ae5957 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -170,6 +170,12 @@ function __WindowManager() {
 		el.disabled = !enabled;
 	};
 
+	self.switchRadioEnabled = function(name, enabled) {
+		for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
+			self.switchEnabled(el, enabled);
+		}
+	};
+
 	self.showWindow = function(el_window, activate=true, center=false) {
 		if (el_window.style.visibility === "hidden") {
 			center = true;