drive mode radio switch

4 files changed, 107 insertions, 7 deletions

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;