diff --git a/src/components/ha-qr-scanner.ts b/src/components/ha-qr-scanner.ts
index 0872c2556d..7ef687cafe 100644
--- a/src/components/ha-qr-scanner.ts
+++ b/src/components/ha-qr-scanner.ts
@@ -1,6 +1,6 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
-import type { Select } from "@material/mwc-select/mwc-select";
+import { mdiCamera } from "@mdi/js";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import type QrScanner from "qr-scanner";
@@ -8,6 +8,7 @@ import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import { LocalizeFunc } from "../common/translations/localize";
import "./ha-alert";
+import "./ha-button-menu";
@customElement("ha-qr-scanner")
class HaQrScanner extends LitElement {
@@ -58,29 +59,37 @@ class HaQrScanner extends LitElement {
}
protected render(): TemplateResult {
- return html`${this._cameras && this._cameras.length > 1
- ? html`
- ${this._cameras!.map(
- (camera) => html`
- ${camera.label}
- `
- )}
- `
- : ""}
- ${this._error
+ return html`${this._error
? html`${this._error}`
: ""}
${navigator.mediaDevices
? html`
-
`
+
+ ${this._cameras && this._cameras.length > 1
+ ? html`
+
+ ${this._cameras!.map(
+ (camera) => html`
+ ${camera.label}
+ `
+ )}
+ `
+ : ""}
+
`
: html`${!window.isSecureContext
? "You can only use your camera to scan a QR core when using HTTPS."
@@ -135,16 +144,23 @@ class HaQrScanner extends LitElement {
};
private _cameraChanged(ev: CustomEvent): void {
- this._qrScanner?.setCamera((ev.target as Select).value);
+ this._qrScanner?.setCamera((ev.target as any).value);
}
static styles = css`
canvas {
width: 100%;
}
- mwc-select {
- width: 100%;
- margin-bottom: 16px;
+ #canvas-container {
+ position: relative;
+ }
+ ha-button-menu {
+ position: absolute;
+ bottom: 8px;
+ right: 8px;
+ background: #727272b2;
+ color: white;
+ border-radius: 50%;
}
`;
}
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 151350351d..cc4cdda74e 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
@@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
-import type { TextField } from "@material/mwc-textfield/mwc-textfield";
import "@material/mwc-textfield/mwc-textfield";
import { mdiAlertCircle, mdiCheckCircle, mdiQrcodeScan } from "@mdi/js";
import "@polymer/paper-input/paper-input";
@@ -183,17 +182,9 @@ class DialogZWaveJSAddNode extends LitElement {
.localize=${this.hass.localize}
@qr-code-scanned=${this._qrCodeScanned}
>
-
- If scanning doesn't work, you can enter the QR code value
- manually:
-
- `
+
+ ${this.hass.localize("ui.panel.config.zwave_js.common.back")}
+ `
: this._status === "validate_dsk_enter_pin"
? html`
@@ -274,7 +265,7 @@ class DialogZWaveJSAddNode extends LitElement {
We have not found any device in inclusion mode. Make sure the
device is active and in inclusion mode.
-
+
Retry
`
@@ -373,7 +364,7 @@ class DialogZWaveJSAddNode extends LitElement {
- ${this.hass.localize("ui.panel.config.zwave_js.common.close")}
+ ${this.hass.localize("ui.common.close")}
`
: this._status === "failed"
@@ -510,15 +501,6 @@ class DialogZWaveJSAddNode extends LitElement {
this._status = "qr_scan";
}
- private _qrKeyDown(ev: KeyboardEvent) {
- if (this._qrProcessing) {
- return;
- }
- if (ev.key === "Enter") {
- this._handleQrCodeScanned((ev.target as TextField).value);
- }
- }
-
private _qrCodeScanned(ev: CustomEvent): void {
if (this._qrProcessing) {
return;
@@ -574,11 +556,7 @@ class DialogZWaveJSAddNode extends LitElement {
}
} else if (provisioningInfo.version === 0) {
this._inclusionStrategy = InclusionStrategy.Security_S2;
- // this._startInclusion(provisioningInfo);
- this._startInclusion(undefined, undefined, {
- dsk: "34673-15546-46480-39591-32400-22155-07715-45994",
- security_classes: [0, 1, 7],
- });
+ this._startInclusion(provisioningInfo);
} else {
this._error = "This QR code is not supported";
this._status = "failed";
@@ -636,6 +614,11 @@ class DialogZWaveJSAddNode extends LitElement {
ZWaveFeature.SmartStart
)
).supported;
+ this._supportsSmartStart = true;
+ }
+
+ private _startOver(_ev: Event) {
+ this._startInclusion();
}
private _startInclusion(
diff --git a/src/translations/en.json b/src/translations/en.json
index 16faaf366f..f4ac593a0c 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2851,7 +2851,7 @@
"node_id": "Device ID",
"home_id": "Home ID",
"source": "Source",
- "close": "Close",
+ "back": "Back",
"add_node": "Add device",
"remove_node": "Remove device",
"reconfigure_server": "Re-configure Server",