pikvm/pikvm#231, pikvm/pikvm#279: pak options

3 files changed, 51 insertions, 32 deletions

diff --git a/web/share/css/kvm/hid.css b/web/share/css/kvm/hid.css
index 10daad98..d32c3d98 100644
--- a/web/share/css/kvm/hid.css
+++ b/web/share/css/kvm/hid.css
@@ -23,22 +23,21 @@
 textarea#hid-pak-text {
 	display: block;
 	resize: none;
+	height: 60px;
 	width: 100%;
-	height: 40px;
+	border-radius: 4px;
 	color: var(--cs-window-default-fg);
 	background-color: var(--cs-window-default-bg);
-	border: none;
-	outline: 0 !important;
 	-webkit-appearance:none;
 }
 
 textarea#hid-pak-text::-moz-placeholder {
-	line-height: 40px;
+	line-height: 60px;
 	text-align: center;
 }
 
 textarea#hid-pak-text::-webkit-input-placeholder {
-	line-height: 40px;
+	line-height: 60px;
 	text-align: center;
 }
 
diff --git a/web/share/js/kvm/hid.js b/web/share/js/kvm/hid.js
index bcd1e479..f4f2b589 100644
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -162,6 +162,14 @@ export function Hid() {
 		}
 	};
 
+	self.setKeymaps = function(state) {
+		let html = "";
+		for (let variant of state.keymaps.available) {
+			html += `<option value=${variant} ${variant === state.keymaps.default ? "selected" : ""}>${variant}</option>`;
+		}
+		$("hid-pak-keymap-selector").innerHTML = html;
+	};
+
 	var __releaseAll = function() {
 		__keyboard.releaseAll();
 		__mouse.releaseAll();
@@ -196,34 +204,45 @@ export function Hid() {
 	var __clickPasteAsKeysButton = function() {
 		let text = $("hid-pak-text").value.replace(/[^\x00-\x7F]/g, "");  // eslint-disable-line no-control-regex
 		if (text) {
-			let confirm_msg = `You're going to paste ${text.length} character${text.length ? "s" : ""}.<br>`;
-			confirm_msg += "Are you sure you want to continue?";
-
-			wm.confirm(confirm_msg).then(function(ok) {
-				if (ok) {
-					wm.setElementEnabled($("hid-pak-text"), false);
-					wm.setElementEnabled($("hid-pak-button"), false);
-
-					tools.debug("HID: paste-as-keys:", text);
-
-					let http = tools.makeRequest("POST", "/api/hid/print?limit=0", function() {
-						if (http.readyState === 4) {
-							wm.setElementEnabled($("hid-pak-text"), true);
-							wm.setElementEnabled($("hid-pak-button"), true);
-							$("hid-pak-text").value = "";
-							if (http.status === 413) {
-								wm.error("Too many text for paste!");
-							} else if (http.status !== 200) {
-								wm.error("HID paste error:<br>", http.responseText);
-							} else if (http.status === 200) {
-								__recorder.recordPrintEvent(text);
-							}
+			let paste_as_keys = function() {
+				wm.setElementEnabled($("hid-pak-text"), false);
+				wm.setElementEnabled($("hid-pak-button"), false);
+				wm.setElementEnabled($("hid-pak-keymap-selector"), false);
+
+				let keymap = $("hid-pak-keymap-selector").value;
+
+				tools.debug(`HID: paste-as-keys ${keymap}: ${text}`);
+
+				let http = tools.makeRequest("POST", `/api/hid/print?limit=0&keymap=${keymap}`, function() {
+					if (http.readyState === 4) {
+						wm.setElementEnabled($("hid-pak-text"), true);
+						wm.setElementEnabled($("hid-pak-button"), true);
+						wm.setElementEnabled($("hid-pak-keymap-selector"), true);
+						$("hid-pak-text").value = "";
+						if (http.status === 413) {
+							wm.error("Too many text for paste!");
+						} else if (http.status !== 200) {
+							wm.error("HID paste error:<br>", http.responseText);
+						} else if (http.status === 200) {
+							__recorder.recordPrintEvent(text);
 						}
-					}, text, "text/plain");
-				} else {
-					$("hid-pak-text").value = "";
-				}
-			});
+					}
+				}, text, "text/plain");
+			};
+
+			if ($("hid-pak-ask-switch").checked) {
+				let confirm_msg = `You're going to paste ${text.length} character${text.length ? "s" : ""}.<br>`;
+				confirm_msg += "Are you sure you want to continue?";
+				wm.confirm(confirm_msg).then(function(ok) {
+					if (ok) {
+						paste_as_keys();
+					} else {
+						$("hid-pak-text").value = "";
+					}
+				});
+			} else {
+				paste_as_keys();
+			}
 		}
 	};
 
diff --git a/web/share/js/kvm/session.js b/web/share/js/kvm/session.js
index 5aa0a6a0..b278dd06 100644
--- a/web/share/js/kvm/session.js
+++ b/web/share/js/kvm/session.js
@@ -221,6 +221,7 @@ export function Session() {
 			case "wol_state": __wol.setState(data.event); break;
 			case "gpio_model_state": __gpio.setModel(data.event); break;
 			case "gpio_state": __gpio.setState(data.event); break;
+			case "hid_keymaps_state": __hid.setKeymaps(data.event); break;
 			case "hid_state": __hid.setState(data.event); break;
 			case "atx_state": __atx.setState(data.event); break;
 			case "msd_state": __msd.setState(data.event); break;