From bfb84a834fc87cc3b092e4c37d1a8bd07f8e3ea7 Mon Sep 17 00:00:00 2001
From: Bram Kragten
Date: Sat, 11 Dec 2021 17:12:41 +0100
Subject: [PATCH] Still have manual input if camera is not supported (#10849)
* Still have manual input if camera is not supported
* Adjust & fix
---
src/components/ha-qr-scanner.ts | 53 ++++++++++++++++---
.../zwave_js/dialog-zwave_js-add-node.ts | 12 +++--
src/translations/en.json | 10 +++-
3 files changed, 62 insertions(+), 13 deletions(-)
diff --git a/src/components/ha-qr-scanner.ts b/src/components/ha-qr-scanner.ts
index 7ef687cafe..4b4c3d859c 100644
--- a/src/components/ha-qr-scanner.ts
+++ b/src/components/ha-qr-scanner.ts
@@ -1,5 +1,7 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
import { mdiCamera } from "@mdi/js";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@@ -9,6 +11,7 @@ import { stopPropagation } from "../common/dom/stop_propagation";
import { LocalizeFunc } from "../common/translations/localize";
import "./ha-alert";
import "./ha-button-menu";
+import "@material/mwc-button/mwc-button";
@customElement("ha-qr-scanner")
class HaQrScanner extends LitElement {
@@ -26,6 +29,8 @@ class HaQrScanner extends LitElement {
@query("#canvas-container", true) private _canvasContainer!: HTMLDivElement;
+ @query("mwc-textfield") private _manualInput?: TextField;
+
public disconnectedCallback(): void {
super.disconnectedCallback();
this._qrNotFoundCount = 0;
@@ -74,7 +79,7 @@ class HaQrScanner extends LitElement {
@@ -90,11 +95,22 @@ class HaQrScanner extends LitElement {
`
: ""}
`
- : html`${!window.isSecureContext
- ? "You can only use your camera to scan a QR core when using HTTPS."
- : "Your browser doesn't support QR scanning."}`}`;
+ : html`
+ ${!window.isSecureContext
+ ? this.localize("ui.components.qr-scanner.only_https_supported")
+ : this.localize("ui.components.qr-scanner.not_supported")}
+
+ ${this.localize("ui.components.qr-scanner.manual_input")}
+
+
+ ${this.localize("ui.common.submit")}
+
`}`;
}
private async _loadQrScanner() {
@@ -143,6 +159,23 @@ class HaQrScanner extends LitElement {
fireEvent(this, "qr-code-scanned", { value: qrCodeString });
};
+ private _manualKeyup(ev: KeyboardEvent) {
+ if (ev.key === "Enter") {
+ this._qrCodeScanned((ev.target as TextField).value);
+ }
+ }
+
+ private _manualPaste(ev: ClipboardEvent) {
+ this._qrCodeScanned(
+ // @ts-ignore
+ (ev.clipboardData || window.clipboardData).getData("text")
+ );
+ }
+
+ private _manualSubmit() {
+ this._qrCodeScanned(this._manualInput!.value);
+ }
+
private _cameraChanged(ev: CustomEvent): void {
this._qrScanner?.setCamera((ev.target as any).value);
}
@@ -162,6 +195,14 @@ class HaQrScanner extends LitElement {
color: white;
border-radius: 50%;
}
+ .row {
+ display: flex;
+ align-items: center;
+ }
+ mwc-textfield {
+ flex: 1;
+ margin-right: 8px;
+ }
`;
}
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
index cc4cdda74e..82a7ebda77 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
@@ -178,7 +178,10 @@ class DialogZWaveJSAddNode extends LitElement {
Search device
`
: this._status === "qr_scan"
- ? html`${this._error}`
+ : ""}
+
@@ -194,9 +197,9 @@ class DialogZWaveJSAddNode extends LitElement {
${
this._error
- ? html`${this._error}`
+ ? html`
+ ${this._error}
+ `
: ""
}
@@ -614,7 +617,6 @@ class DialogZWaveJSAddNode extends LitElement {
ZWaveFeature.SmartStart
)
).supported;
- this._supportsSmartStart = true;
}
private _startOver(_ev: Event) {
diff --git a/src/translations/en.json b/src/translations/en.json
index 96ebbaa632..eec89cb39c 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -291,6 +291,7 @@
"undo": "Undo",
"move": "Move",
"save": "Save",
+ "submit": "Submit",
"rename": "Rename",
"yes": "Yes",
"no": "No",
@@ -538,6 +539,13 @@
},
"attributes": {
"expansion_header": "Attributes"
+ },
+ "qr-scanner": {
+ "select_camera": "Select camera",
+ "only_https_supported": "You can only use your camera to scan a QR code when using HTTPS.",
+ "not_supported": "Your browser doesn't support QR scanning.",
+ "manual_input": "You can scan the QR code with another QR scanner and paste the code in the input below",
+ "enter_qr_code": "Enter QR code value"
}
},
"dialogs": {
@@ -2920,8 +2928,6 @@
"qr_code": "QR Code",
"qr_code_paragraph": "If your device supports SmartStart you can scan the QR code for easy pairing.",
"scan_qr_code": "Scan QR code",
- "enter_qr_code": "Enter QR code value",
- "select_camera": "Select camera",
"inclusion_failed": "The device could not be added.",
"check_logs": "Please check the logs for more information.",
"inclusion_finished": "The device has been added.",