Add entity picker

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<void> {
+    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 = <LovelaceCard>document.createElement('hui-error-card');
+    // eslint-disable-next-line no-console
+    console.log(warning);
+    return html`
+      <hui-warning
+        ><div>
+          ERROR:<br />
+          ${warning}
+        </div></hui-warning
+      >
+    `;
+  }
+
   private _showWarning(warning: string): TemplateResult {
     return html` <hui-warning>${warning}</hui-warning> `;
   }

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.4.1';
+export const CARD_VERSION = '1.4.1b';

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<void> {
+    this.loadEntityPicker();
+  }
+
+  async loadEntityPicker(): Promise<void> {
+    // 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`
+      <ha-entity-picker .hass=${this.hass} .configValue=${'picker_entity'} .value=${this._picker_entity} name="PickerEntity"
+        label="Entity Current Conditions (Required)" allow-custom-entity @value-changed=${this._valueChangedPicker}>
+      </ha-entity-picker>
       <mwc-select
         naturalMenuWidth
         fixedMenuPosition
@@ -83,21 +118,21 @@ export class BoilerplateCardEditor extends ScopedRegistryHost(LitElement) implem
         label="Name (Optional)"
         .value=${this._name}
         .configValue=${'name'}
-        @input=${this._valueChanged}
-      ></mwc-textfield>
+        @input=${this._valueChanged}>
+      </mwc-textfield>
       <mwc-formfield .label=${`Toggle warning ${this._show_warning ? 'off' : 'on'}`}>
         <mwc-switch
           .checked=${this._show_warning !== false}
           .configValue=${'show_warning'}
-          @change=${this._valueChanged}
-        ></mwc-switch>
+          @change=${this._valueChanged}>
+        </mwc-switch>
       </mwc-formfield>
       <mwc-formfield .label=${`Toggle error ${this._show_error ? 'off' : 'on'}`}>
         <mwc-switch
           .checked=${this._show_error !== false}
           .configValue=${'show_error'}
-          @change=${this._valueChanged}
-        ></mwc-switch>
+          @change=${this._valueChanged}>
+        </mwc-switch>
       </mwc-formfield>
     `;
   }
@@ -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;

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;