separate keyboard and mouse output handling

3 files changed, 22 insertions, 19 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 97f6f2b4..0ba4ba09 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -175,16 +175,16 @@
           <div class="feature-disabled" id="hid-outputs">
             <hr>
             <table class="kv">
-              <tr>
+              <tr class="feature-disabled" id="hid-outputs-keyboard">
                 <td>Keyboard mode:</td>
                 <td>
-                  <div class="radio-box" id="hid-outputs-keyboard"></div>
+                  <div class="radio-box" id="hid-outputs-keyboard-box"></div>
                 </td>
               </tr>
-              <tr>
+              <tr class="feature-disabled" id="hid-outputs-mouse">
                 <td>Mouse <a target="_blank" href="https://github.com/pikvm/pikvm/blob/master/pages/mouse.md">mode</a>:</td>
                 <td>
-                  <div class="radio-box" id="hid-outputs-mouse"></div>
+                  <div class="radio-box" id="hid-outputs-mouse-box"></div>
                 </td>
               </tr>
             </table>
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index 03910cb2..96a5fa5c 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -48,12 +48,12 @@ li(class="right")
 		div(id="hid-outputs" class="feature-disabled")
 			hr
 			table(class="kv")
-				tr
+				tr(id="hid-outputs-keyboard", class="feature-disabled")
 					td Keyboard mode:
-					td #[div(id="hid-outputs-keyboard" class="radio-box")]
-				tr
+					td #[div(id="hid-outputs-keyboard-box" class="radio-box")]
+				tr(id="hid-outputs-mouse", class="feature-disabled")
 					td Mouse #[a(target="_blank" href="https://github.com/pikvm/pikvm/blob/master/pages/mouse.md") mode]:
-					td #[div(id="hid-outputs-mouse" class="radio-box")]
+					td #[div(id="hid-outputs-mouse-box" class="radio-box")]
 		table(class="kv")
 			tr(id="hid-mouse-squash" class="feature-disabled")
 				+menu_switch_notable("hid-mouse-squash-switch", "Squash relative mouse moves", true, true)
diff --git a/web/share/js/kvm/hid.js b/web/share/js/kvm/hid.js
index a561ae4f..dac36341 100644
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -112,10 +112,8 @@ export function Hid(__getResolution) {
 		if (state && state.online) {
 			let keyboard_outputs = state.keyboard.outputs.available;
 			let mouse_outputs = state.mouse.outputs.available;
-			let has_outputs = (keyboard_outputs.length || mouse_outputs.length);
-			let has_relative = false;
-			if (has_outputs) {
-				if ($("hid-outputs-keyboard").outputs !== keyboard_outputs) {
+			if (keyboard_outputs.length) {
+				if ($("hid-outputs-keyboard-box").outputs !== keyboard_outputs) {
 					let html = "";
 					for (let args of [
 						["USB", "usb"],
@@ -126,11 +124,15 @@ export function Hid(__getResolution) {
 							html += tools.radioMakeItem("hid-outputs-keyboard-radio", args[0], args[1]);
 						}
 					}
-					$("hid-outputs-keyboard").innerHTML = html;
-					$("hid-outputs-keyboard").outputs = keyboard_outputs;
+					$("hid-outputs-keyboard-box").innerHTML = html;
+					$("hid-outputs-keyboard-box").outputs = keyboard_outputs;
 					tools.radioSetOnClick("hid-outputs-keyboard-radio", () => __clickOutputsRadio("keyboard"));
 				}
-				if ($("hid-outputs-mouse").outputs !== mouse_outputs) {
+				tools.radioSetValue("hid-outputs-keyboard-radio", state.keyboard.outputs.active);
+			}
+			let has_relative = false;
+			if (mouse_outputs.length) {
+				if ($("hid-outputs-mouse-box").outputs !== mouse_outputs) {
 					let html = "";
 					for (let args of [
 						["USB", "usb", false],
@@ -143,18 +145,19 @@ export function Hid(__getResolution) {
 							has_relative = (has_relative || args[2]);
 						}
 					}
-					$("hid-outputs-mouse").innerHTML = html;
-					$("hid-outputs-mouse").outputs = mouse_outputs;
+					$("hid-outputs-mouse-box").innerHTML = html;
+					$("hid-outputs-mouse-box").outputs = mouse_outputs;
 					tools.radioSetOnClick("hid-outputs-mouse-radio", () => __clickOutputsRadio("mouse"));
 				}
-				tools.radioSetValue("hid-outputs-keyboard-radio", state.keyboard.outputs.active);
 				tools.radioSetValue("hid-outputs-mouse-radio", state.mouse.outputs.active);
 				has_relative_squash = ["usb_rel", "ps2"].includes(state.mouse.outputs.active);
 			} else {
 				has_relative = !state.mouse.absolute;
 				has_relative_squash = has_relative;
 			}
-			tools.featureSetEnabled($("hid-outputs"), has_outputs);
+			tools.featureSetEnabled($("hid-outputs"), (keyboard_outputs.length || mouse_outputs.length));
+			tools.featureSetEnabled($("hid-outputs-keyboard"), keyboard_outputs.length);
+			tools.featureSetEnabled($("hid-outputs-mouse"), mouse_outputs.length);
 			tools.featureSetEnabled($("hid-mouse-squash"), has_relative);
 			tools.featureSetEnabled($("hid-connect"), (state.connected !== null));
 			$("hid-connect-switch").checked = !!state.connected;