mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-02 05:57:54 +00:00
Change select camera UI, remove manual QR input (#10844)
This commit is contained in:
parent
39774c0e02
commit
add8a702cc
@ -1,6 +1,6 @@
|
|||||||
import "@material/mwc-list/mwc-list-item";
|
import "@material/mwc-list/mwc-list-item";
|
||||||
import "@material/mwc-select/mwc-select";
|
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 { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
|
||||||
import { customElement, property, query, state } from "lit/decorators";
|
import { customElement, property, query, state } from "lit/decorators";
|
||||||
import type QrScanner from "qr-scanner";
|
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 { stopPropagation } from "../common/dom/stop_propagation";
|
||||||
import { LocalizeFunc } from "../common/translations/localize";
|
import { LocalizeFunc } from "../common/translations/localize";
|
||||||
import "./ha-alert";
|
import "./ha-alert";
|
||||||
|
import "./ha-button-menu";
|
||||||
|
|
||||||
@customElement("ha-qr-scanner")
|
@customElement("ha-qr-scanner")
|
||||||
class HaQrScanner extends LitElement {
|
class HaQrScanner extends LitElement {
|
||||||
@ -58,29 +59,37 @@ class HaQrScanner extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`${this._cameras && this._cameras.length > 1
|
return html`${this._error
|
||||||
? html`<mwc-select
|
|
||||||
.label=${this.localize(
|
|
||||||
"ui.panel.config.zwave_js.add_node.select_camera"
|
|
||||||
)}
|
|
||||||
fixedMenuPosition
|
|
||||||
naturalMenuWidth
|
|
||||||
@closed=${stopPropagation}
|
|
||||||
@selected=${this._cameraChanged}
|
|
||||||
>
|
|
||||||
${this._cameras!.map(
|
|
||||||
(camera) => html`
|
|
||||||
<mwc-list-item .value=${camera.id}>${camera.label}</mwc-list-item>
|
|
||||||
`
|
|
||||||
)}
|
|
||||||
</mwc-select>`
|
|
||||||
: ""}
|
|
||||||
${this._error
|
|
||||||
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
|
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
|
||||||
: ""}
|
: ""}
|
||||||
${navigator.mediaDevices
|
${navigator.mediaDevices
|
||||||
? html`<video></video>
|
? html`<video></video>
|
||||||
<div id="canvas-container"></div>`
|
<div id="canvas-container">
|
||||||
|
${this._cameras && this._cameras.length > 1
|
||||||
|
? html`<ha-button-menu
|
||||||
|
corner="BOTTOM_START"
|
||||||
|
fixed
|
||||||
|
@closed=${stopPropagation}
|
||||||
|
>
|
||||||
|
<ha-icon-button
|
||||||
|
slot="trigger"
|
||||||
|
.label=${this.localize(
|
||||||
|
"ui.panel.config.zwave_js.add_node.select_camera"
|
||||||
|
)}
|
||||||
|
.path=${mdiCamera}
|
||||||
|
></ha-icon-button>
|
||||||
|
${this._cameras!.map(
|
||||||
|
(camera) => html`
|
||||||
|
<mwc-list-item
|
||||||
|
.value=${camera.id}
|
||||||
|
@click=${this._cameraChanged}
|
||||||
|
>${camera.label}</mwc-list-item
|
||||||
|
>
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
</ha-button-menu>`
|
||||||
|
: ""}
|
||||||
|
</div>`
|
||||||
: html`<ha-alert alert-type="warning"
|
: html`<ha-alert alert-type="warning"
|
||||||
>${!window.isSecureContext
|
>${!window.isSecureContext
|
||||||
? "You can only use your camera to scan a QR core when using HTTPS."
|
? "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 {
|
private _cameraChanged(ev: CustomEvent): void {
|
||||||
this._qrScanner?.setCamera((ev.target as Select).value);
|
this._qrScanner?.setCamera((ev.target as any).value);
|
||||||
}
|
}
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
canvas {
|
canvas {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
mwc-select {
|
#canvas-container {
|
||||||
width: 100%;
|
position: relative;
|
||||||
margin-bottom: 16px;
|
}
|
||||||
|
ha-button-menu {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
right: 8px;
|
||||||
|
background: #727272b2;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import type { TextField } from "@material/mwc-textfield/mwc-textfield";
|
|
||||||
import "@material/mwc-textfield/mwc-textfield";
|
import "@material/mwc-textfield/mwc-textfield";
|
||||||
import { mdiAlertCircle, mdiCheckCircle, mdiQrcodeScan } from "@mdi/js";
|
import { mdiAlertCircle, mdiCheckCircle, mdiQrcodeScan } from "@mdi/js";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
@ -183,17 +182,9 @@ class DialogZWaveJSAddNode extends LitElement {
|
|||||||
.localize=${this.hass.localize}
|
.localize=${this.hass.localize}
|
||||||
@qr-code-scanned=${this._qrCodeScanned}
|
@qr-code-scanned=${this._qrCodeScanned}
|
||||||
></ha-qr-scanner>
|
></ha-qr-scanner>
|
||||||
<p>
|
<mwc-button slot="secondaryAction" @click=${this._startOver}>
|
||||||
If scanning doesn't work, you can enter the QR code value
|
${this.hass.localize("ui.panel.config.zwave_js.common.back")}
|
||||||
manually:
|
</mwc-button>`
|
||||||
</p>
|
|
||||||
<mwc-textfield
|
|
||||||
.label=${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.add_node.enter_qr_code"
|
|
||||||
)}
|
|
||||||
.disabled=${this._qrProcessing}
|
|
||||||
@keydown=${this._qrKeyDown}
|
|
||||||
></mwc-textfield>`
|
|
||||||
: this._status === "validate_dsk_enter_pin"
|
: this._status === "validate_dsk_enter_pin"
|
||||||
? html`
|
? html`
|
||||||
<p>
|
<p>
|
||||||
@ -274,7 +265,7 @@ class DialogZWaveJSAddNode extends LitElement {
|
|||||||
We have not found any device in inclusion mode. Make sure the
|
We have not found any device in inclusion mode. Make sure the
|
||||||
device is active and in inclusion mode.
|
device is active and in inclusion mode.
|
||||||
</p>
|
</p>
|
||||||
<mwc-button slot="primaryAction" @click=${this._startInclusion}>
|
<mwc-button slot="primaryAction" @click=${this._startOver}>
|
||||||
Retry
|
Retry
|
||||||
</mwc-button>
|
</mwc-button>
|
||||||
`
|
`
|
||||||
@ -373,7 +364,7 @@ class DialogZWaveJSAddNode extends LitElement {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
|
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
|
||||||
${this.hass.localize("ui.panel.config.zwave_js.common.close")}
|
${this.hass.localize("ui.common.close")}
|
||||||
</mwc-button>
|
</mwc-button>
|
||||||
`
|
`
|
||||||
: this._status === "failed"
|
: this._status === "failed"
|
||||||
@ -510,15 +501,6 @@ class DialogZWaveJSAddNode extends LitElement {
|
|||||||
this._status = "qr_scan";
|
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 {
|
private _qrCodeScanned(ev: CustomEvent): void {
|
||||||
if (this._qrProcessing) {
|
if (this._qrProcessing) {
|
||||||
return;
|
return;
|
||||||
@ -574,11 +556,7 @@ class DialogZWaveJSAddNode extends LitElement {
|
|||||||
}
|
}
|
||||||
} else if (provisioningInfo.version === 0) {
|
} else if (provisioningInfo.version === 0) {
|
||||||
this._inclusionStrategy = InclusionStrategy.Security_S2;
|
this._inclusionStrategy = InclusionStrategy.Security_S2;
|
||||||
// this._startInclusion(provisioningInfo);
|
this._startInclusion(provisioningInfo);
|
||||||
this._startInclusion(undefined, undefined, {
|
|
||||||
dsk: "34673-15546-46480-39591-32400-22155-07715-45994",
|
|
||||||
security_classes: [0, 1, 7],
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
this._error = "This QR code is not supported";
|
this._error = "This QR code is not supported";
|
||||||
this._status = "failed";
|
this._status = "failed";
|
||||||
@ -636,6 +614,11 @@ class DialogZWaveJSAddNode extends LitElement {
|
|||||||
ZWaveFeature.SmartStart
|
ZWaveFeature.SmartStart
|
||||||
)
|
)
|
||||||
).supported;
|
).supported;
|
||||||
|
this._supportsSmartStart = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _startOver(_ev: Event) {
|
||||||
|
this._startInclusion();
|
||||||
}
|
}
|
||||||
|
|
||||||
private _startInclusion(
|
private _startInclusion(
|
||||||
|
@ -2851,7 +2851,7 @@
|
|||||||
"node_id": "Device ID",
|
"node_id": "Device ID",
|
||||||
"home_id": "Home ID",
|
"home_id": "Home ID",
|
||||||
"source": "Source",
|
"source": "Source",
|
||||||
"close": "Close",
|
"back": "Back",
|
||||||
"add_node": "Add device",
|
"add_node": "Add device",
|
||||||
"remove_node": "Remove device",
|
"remove_node": "Remove device",
|
||||||
"reconfigure_server": "Re-configure Server",
|
"reconfigure_server": "Re-configure Server",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user