Add scene editor (#4164)

* Add scene editor

* Update ha-config-scene.ts

* Update en.json

* Update ha-scene-editor.ts

* Partial comments

* Types

* 1 more

* Comments

* Lint

* Update ha-device-picker.ts

* Update ha-device-card.ts

src/components/entity/ha-entities-picker.ts

@@ -22,7 +22,20 @@ import { HassEntity } from "home-assistant-js-websocket";
 class HaEntitiesPickerLight extends LitElement {
   @property() public hass?: HomeAssistant;
   @property() public value?: string[];
-  @property({ attribute: "domain-filter" }) public domainFilter?: string;
+  /**
+   * Show entities from specific domains.
+   * @type {string}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+  /**
+   * Show no entities of these domains.
+   * @type {Array}
+   * @attr exclude-domains
+   */
+  @property({ type: Array, attribute: "exclude-domains" })
+  public excludeDomains?: string[];
   @property({ attribute: "picked-entity-label" })
   public pickedEntityLabel?: string;
   @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
@@ -31,6 +44,7 @@ class HaEntitiesPickerLight extends LitElement {
     if (!this.hass) {
       return;
     }
+
     const currentEntities = this._currentEntities;
     return html`
       ${currentEntities.map(
@@ -40,7 +54,8 @@ class HaEntitiesPickerLight extends LitElement {
               allow-custom-entity
               .curValue=${entityId}
               .hass=${this.hass}
-              .domainFilter=${this.domainFilter}
+              .includeDomains=${this.includeDomains}
+              .excludeDomains=${this.excludeDomains}
               .entityFilter=${this._entityFilter}
               .value=${entityId}
               .label=${this.pickedEntityLabel}
@@ -52,7 +67,8 @@ class HaEntitiesPickerLight extends LitElement {
       <div>
         <ha-entity-picker
           .hass=${this.hass}
-          .domainFilter=${this.domainFilter}
+          .includeDomains=${this.includeDomains}
+          .excludeDomains=${this.excludeDomains}
           .entityFilter=${this._entityFilter}
           .label=${this.pickEntityLabel}
           @value-changed=${this._addEntity}

src/components/entity/ha-entity-picker.ts

@@ -60,7 +60,20 @@ class HaEntityPicker extends LitElement {
   @property() public hass?: HomeAssistant;
   @property() public label?: string;
   @property() public value?: string;
-  @property({ attribute: "domain-filter" }) public domainFilter?: string;
+  /**
+   * Show entities from specific domains.
+   * @type {string}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+  /**
+   * Show no entities of these domains.
+   * @type {Array}
+   * @attr exclude-domains
+   */
+  @property({ type: Array, attribute: "exclude-domains" })
+  public excludeDomains?: string[];
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
   @property({ type: Boolean }) private _opened?: boolean;
   @property() private _hass?: HomeAssistant;
@@ -68,7 +81,8 @@ class HaEntityPicker extends LitElement {
   private _getStates = memoizeOne(
     (
       hass: this["hass"],
-      domainFilter: this["domainFilter"],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
       entityFilter: this["entityFilter"]
     ) => {
       let states: HassEntity[] = [];
@@ -78,9 +92,15 @@ class HaEntityPicker extends LitElement {
       }
       let entityIds = Object.keys(hass.states);
 
-      if (domainFilter) {
+      if (includeDomains) {
+        entityIds = entityIds.filter((eid) =>
+          includeDomains.includes(eid.substr(0, eid.indexOf(".")))
+        );
+      }
+
+      if (excludeDomains) {
         entityIds = entityIds.filter(
-          (eid) => eid.substr(0, eid.indexOf(".")) === domainFilter
+          (eid) => !excludeDomains.includes(eid.substr(0, eid.indexOf(".")))
         );
       }
 
@@ -108,7 +128,8 @@ class HaEntityPicker extends LitElement {
   protected render(): TemplateResult | void {
     const states = this._getStates(
       this._hass,
-      this.domainFilter,
+      this.includeDomains,
+      this.excludeDomains,
       this.entityFilter
     );