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.",