diff --git a/src/boilerplate-card.ts b/src/boilerplate-card.ts index 64d1077..e6977c8 100644 --- a/src/boilerplate-card.ts +++ b/src/boilerplate-card.ts @@ -49,9 +49,12 @@ export class BoilerplateCard extends LitElement { @state() private config!: BoilerplateCardConfig; + private _error = ''; + // https://lit.dev/docs/components/properties/#accessors-custom public setConfig(config: BoilerplateCardConfig): void { // TODO Check for required fields and that they are of the proper format + console.info('setConfig'); if (!config) { throw new Error(localize('common.invalid_configuration')); } @@ -75,8 +78,24 @@ export class BoilerplateCard extends LitElement { return hasConfigOrEntityChanged(this, changedProps, false); } + public async performUpdate(): Promise { + console.info('performUpdate'); + this._error = ''; + Object.keys(this.config).forEach(key => { + console.info(key.match(/_entity$/) !== null) + if (key.match(/_entity$/) !== null) { + if (this.hass.states[this.config[key]] === undefined) { + this._error += `'${key}=${this.config[key]}' not found`; + } + } + }) + super.performUpdate(); + } + // https://lit.dev/docs/components/rendering/ protected render(): TemplateResult | void { + console.info('render'); + if (this._error !== '') return this._showConfigWarning(this._error); // TODO Check for stateObj or other necessary things and render a warning if missing if (this.config.show_warning) { return this._showWarning(localize('common.show_warning')); @@ -106,6 +125,20 @@ export class BoilerplateCard extends LitElement { } } + private _showConfigWarning(warning: string): TemplateResult { + // const errorCard = document.createElement('hui-error-card'); + // eslint-disable-next-line no-console + console.log(warning); + return html` +
+ ERROR:
+ ${warning} +
+ `; + } + private _showWarning(warning: string): TemplateResult { return html` ${warning} `; } diff --git a/src/const.ts b/src/const.ts index 7aea969..5df903e 100644 --- a/src/const.ts +++ b/src/const.ts @@ -1 +1 @@ -export const CARD_VERSION = '1.4.1'; +export const CARD_VERSION = '1.4.1b'; diff --git a/src/editor.ts b/src/editor.ts index 00ae2cb..11beb4b 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -45,6 +45,10 @@ export class BoilerplateCardEditor extends ScopedRegistryHost(LitElement) implem return this._config?.name || ''; } + get _picker_entity(): string { + return this._config?.picker_entity || ''; + } + get _entity(): string { return this._config?.entity || ''; } @@ -57,15 +61,46 @@ export class BoilerplateCardEditor extends ScopedRegistryHost(LitElement) implem return this._config?.show_error || false; } + protected async firstUpdated(): Promise { + this.loadEntityPicker(); + } + + async loadEntityPicker(): Promise { + // Get the local customElement registry + const registry = (this.shadowRoot as any)?.customElements; + if (!registry) return; + + // Check if the element we want is already defined in the local scope + if (registry.get("ha-entity-picker")) return; + + // Load in ha-entity-picker + // This part will differ for every element you want + const ch = await (window as any).loadCardHelpers(); + const c = await ch.createCardElement({ type: "entities", entities: [] }); + await c.constructor.getConfigElement(); + + // Since ha-elements are not using scopedRegistry we can get a reference to + // the newly loaded element from the global customElement registry... + const haEntityPicker = window.customElements.get("ha-entity-picker"); + + // ... and use that reference to register the same element in the local registry + registry.define("ha-entity-picker", haEntityPicker); + } + protected render(): TemplateResult | void { if (!this.hass || !this._helpers) { return html``; } + console.info('render'); + // You can restrict on domain type const entities = Object.keys(this.hass.states); return html` + + + @input=${this._valueChanged}> + + @change=${this._valueChanged}> + + @change=${this._valueChanged}> + `; } @@ -113,6 +148,23 @@ export class BoilerplateCardEditor extends ScopedRegistryHost(LitElement) implem this._helpers = await (window as any).loadCardHelpers(); } + private _valueChangedPicker(ev): void { + if (!this._config || !this.hass) { + return; + } + const target = ev.target; + if (this[`_${target.configValue}`] === target.value) { + return; + } + if (target.configValue) { + this._config = { + ...this._config, + [target.configValue]: target.value, + }; + } + fireEvent(this, 'config-changed', { config: this._config }); + } + private _valueChanged(ev): void { if (!this._config || !this.hass) { return; diff --git a/src/types.ts b/src/types.ts index 9a5e863..86a5474 100644 --- a/src/types.ts +++ b/src/types.ts @@ -15,6 +15,7 @@ export interface BoilerplateCardConfig extends LovelaceCardConfig { show_error?: boolean; test_gui?: boolean; entity?: string; + picker_entity?: string; tap_action?: ActionConfig; hold_action?: ActionConfig; double_tap_action?: ActionConfig;