jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow create zone without icon + add icon picker (#10447)

Browse Source
This commit is contained in:
Bram Kragten 2021-11-08 18:29:10 +01:00 committed by GitHub
parent a268040ae7
commit 06d4ccf344
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ha-icon-picker.ts
View File

@ -60,6 +60,8 @@ export class HaIconPicker extends LitElement {
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public invalid = false;
@state() private _opened = false; @state() private _opened = false;
@query("vaadin-combo-box-light", true) private comboBox!: HTMLElement; @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
@ -86,6 +88,8 @@ export class HaIconPicker extends LitElement {
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
spellcheck="false" spellcheck="false"
.errorMessage=${this.errorMessage}
.invalid=${this.invalid}
> >
${this._value || this.placeholder ${this._value || this.placeholder
? html` ? html`

2
src/data/zone.ts
View File

@ -12,7 +12,7 @@ export interface Zone {
} }
export interface ZoneMutableParams { export interface ZoneMutableParams {
icon: string; icon?: string;
latitude: number; latitude: number;
longitude: number; longitude: number;
name: string; name: string;

33
src/panels/config/zone/dialog-zone-detail.ts
View File

@ -8,6 +8,7 @@ import { addDistanceToCoord } from "../../../common/location/add_distance_to_coo
import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield"; import "../../../components/ha-formfield";
import "../../../components/ha-icon-picker";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import "../../../components/map/ha-locations-editor"; import "../../../components/map/ha-locations-editor";
import type { MarkerLocation } from "../../../components/map/ha-locations-editor"; import type { MarkerLocation } from "../../../components/map/ha-locations-editor";
@ -77,14 +78,18 @@ class DialogZoneDetail extends LitElement {
if (!this._params) { if (!this._params) {
return html``; return html``;
} }
const nameValid = this._name.trim() === ""; const nameInvalid = this._name.trim() === "";
const iconValid = !this._icon.trim().includes(":"); const iconInvalid = Boolean(this._icon && !this._icon.trim().includes(":"));
const latValid = String(this._latitude) === ""; const latInvalid = String(this._latitude) === "";
const lngValid = String(this._longitude) === ""; const lngInvalid = String(this._longitude) === "";
const radiusValid = String(this._radius) === ""; const radiusInvalid = String(this._radius) === "";
const valid = const valid =
!nameValid && !iconValid && !latValid && !lngValid && !radiusValid; !nameInvalid &&
!iconInvalid &&
!latInvalid &&
!lngInvalid &&
!radiusInvalid;
return html` return html`
<ha-dialog <ha-dialog
@ -114,7 +119,7 @@ class DialogZoneDetail extends LitElement {
required required
auto-validate auto-validate
></paper-input> ></paper-input>
<paper-input <ha-icon-picker
.value=${this._icon} .value=${this._icon}
.configValue=${"icon"} .configValue=${"icon"}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
@ -122,8 +127,8 @@ class DialogZoneDetail extends LitElement {
.errorMessage=${this.hass!.localize( .errorMessage=${this.hass!.localize(
"ui.panel.config.zone.detail.icon_error_msg" "ui.panel.config.zone.detail.icon_error_msg"
)} )}
.invalid=${iconValid} .invalid=${iconInvalid}
></paper-input> ></ha-icon-picker>
<ha-locations-editor <ha-locations-editor
class="flex" class="flex"
.hass=${this.hass} .hass=${this.hass}
@ -148,7 +153,7 @@ class DialogZoneDetail extends LitElement {
.errorMessage=${this.hass!.localize( .errorMessage=${this.hass!.localize(
"ui.panel.config.zone.detail.required_error_msg" "ui.panel.config.zone.detail.required_error_msg"
)} )}
.invalid=${latValid} .invalid=${latInvalid}
></paper-input> ></paper-input>
<paper-input <paper-input
.value=${this._longitude} .value=${this._longitude}
@ -160,7 +165,7 @@ class DialogZoneDetail extends LitElement {
.errorMessage=${this.hass!.localize( .errorMessage=${this.hass!.localize(
"ui.panel.config.zone.detail.required_error_msg" "ui.panel.config.zone.detail.required_error_msg"
)} )}
.invalid=${lngValid} .invalid=${lngInvalid}
></paper-input> ></paper-input>
</div> </div>
<paper-input <paper-input
@ -173,7 +178,7 @@ class DialogZoneDetail extends LitElement {
.errorMessage=${this.hass!.localize( .errorMessage=${this.hass!.localize(
"ui.panel.config.zone.detail.required_error_msg" "ui.panel.config.zone.detail.required_error_msg"
)} )}
.invalid=${radiusValid} .invalid=${radiusInvalid}
></paper-input> ></paper-input>
<p> <p>
${this.hass!.localize("ui.panel.config.zone.detail.passive_note")} ${this.hass!.localize("ui.panel.config.zone.detail.passive_note")}
@ -268,12 +273,14 @@ class DialogZoneDetail extends LitElement {
try { try {
const values: ZoneMutableParams = { const values: ZoneMutableParams = {
name: this._name.trim(), name: this._name.trim(),
icon: this._icon.trim(),
latitude: this._latitude, latitude: this._latitude,
longitude: this._longitude, longitude: this._longitude,
passive: this._passive, passive: this._passive,
radius: this._radius, radius: this._radius,
}; };
if (this._icon) {
values.icon = this._icon.trim();
}
if (this._params!.entry) { if (this._params!.entry) {
await this._params!.updateEntry!(values); await this._params!.updateEntry!(values);
} else { } else {