Added Lovelace visual card editor

Added Lovelace visual card editor. Used Weather Card from bramkragten as a base.

dist/air-visual-card-editor.js

@@ -0,0 +1,239 @@
+// Used weather-card-editor.js from Weather Card as template
+// https://github.com/bramkragten/weather-card
+
+const fireEvent = (node, type, detail, options) => {
+  options = options || {};
+  detail = detail === null || detail === undefined ? {} : detail;
+  const event = new Event(type, {
+    bubbles: options.bubbles === undefined ? true : options.bubbles,
+    cancelable: Boolean(options.cancelable),
+    composed: options.composed === undefined ? true : options.composed,
+  });
+  event.detail = detail;
+  node.dispatchEvent(event);
+  return event;
+};
+
+if (
+  !customElements.get("ha-switch") &&
+  customElements.get("paper-toggle-button")
+) {
+  customElements.define("ha-switch", customElements.get("paper-toggle-button"));
+}
+
+const LitElement = customElements.get("hui-masonry-view") ? Object.getPrototypeOf(customElements.get("hui-masonry-view")) : Object.getPrototypeOf(customElements.get("hui-view"));
+const html = LitElement.prototype.html;
+const css = LitElement.prototype.css;
+
+const HELPERS = window.loadCardHelpers();
+
+export class AirVisualCardEditor extends LitElement {
+  setConfig(config) {
+    this._config = { ...config };
+  }
+
+  static get properties() {
+    return { hass: {}, _config: {} };
+  }
+
+  get _air_pollution_level() {
+    return this._config.air_pollution_level || "sensor.u_s_air_pollution_level";
+  }
+
+  get _air_quality_index() {
+    return this._config.air_quality_index || "sensor.u_s_air_quality_index";
+  }
+
+  get _main_pollutant() {
+    return this._config.main_pollutant || "sensor.u_s_main_pollutant";
+  }
+
+  get _temp() {
+    return this._config.temp || "";
+  }
+
+  get _country() {
+    return this._config.country || "";
+  }
+
+  get _city() {
+    return this._config.city || "";
+  }
+
+  get _icons() {
+    return this._config.icons || "/hacsfiles/air-visual-card";
+  }
+
+  get _weather() {
+    return this._config.weather || "";
+  }
+
+  get _hide_title() {
+    return this._config.hide_title !== false;
+  }
+
+  get _hide_face() {
+    return this._config.hide_face !== true;
+  }
+
+
+  // WHAT DOES THIS DO?
+  firstUpdated() {
+    HELPERS.then(help => {
+      if (help.importMoreInfoControl) {
+        help.importMoreInfoControl("fan");
+      }
+    })
+  }
+
+  render() {
+    if (!this.hass) {
+      return html``;
+    }
+
+    // WHAT DOES THIS DO?
+    const entities = Object.keys(this.hass.states).filter(
+      (eid) => eid.substr(0, eid.indexOf(".")) === "sensor"
+    );
+
+    return html`
+      <div class="card-config">
+        <div>
+          ${customElements.get("ha-entity-picker")
+            ? html`
+                <ha-entity-picker
+                  label="Air Pollution Level Sensor Entity"
+                  .hass="${this.hass}"
+                  .value="${this._air_pollution_level}"
+                  .configValue=${"air_pollution_level"}
+                  domain-filter="sensor"
+                  @change="${this._valueChanged}"
+                  allow-custom-entity
+                ></ha-entity-picker>
+              `
+            : html``}
+
+                <ha-entity-picker
+                  label="Air Quality Index Sensor"
+                  .hass="${this.hass}"
+                  .value="${this._air_quality_index}"
+                  .configValue=${"air_quality_index"}
+                  domain-filter="sensor"
+                  @change="${this._valueChanged}"
+                  allow-custom-entity
+                ></ha-entity-picker>
+
+                <ha-entity-picker
+                  label="Main Pollutant Sensor"
+                  .hass="${this.hass}"
+                  .value="${this._main_pollutant}"
+                  .configValue=${"main_pollutant"}
+                  domain-filter="sensor"
+                  @change="${this._valueChanged}"
+                  allow-custom-entity
+                ></ha-entity-picker>
+
+                <ha-entity-picker
+                  label="Temperature Sensor (Optional)"
+                  .hass="${this.hass}"
+                  .value="${this._temp}"
+                  .configValue=${"temp"}
+                  @change="${this._valueChanged}"
+                  allow-custom-entity
+                ></ha-entity-picker>
+
+                <ha-entity-picker
+                  label="Weather Entity (Optional)"
+                  .hass="${this.hass}"
+                  .value="${this._weather}"
+                  .configValue=${"weather"}
+                  @change="${this._valueChanged}"
+                  allow-custom-entity
+                ></ha-entity-picker>                
+
+          <paper-input
+            label="City Name (Optional)"
+            .value="${this._city}"
+            .configValue="${"city"}"
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+
+          <paper-input
+            label="Country Name (Optional)"
+            .value="${this._country}"
+            .configValue="${"country"}"
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+
+          <paper-input
+            label="Icons location (Optional)"
+            .value="${this._icons}"
+            .configValue="${"icons"}"
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+
+          <div class="switches">
+            <div class="switch">
+              <ha-switch
+                .checked=${this._hide_title}
+                .configValue="${"hide_title"}"
+                @change="${this._valueChanged}"
+              ></ha-switch
+              ><span>Hide Title</span>
+            </div>
+            <div class="switch">
+              <ha-switch
+                .checked=${this._hide_face}
+                .configValue="${"hide_face"}"
+                @change="${this._valueChanged}"
+              ></ha-switch
+              ><span>Hide Face</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  _valueChanged(ev) {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const target = ev.target;
+    if (this[`_${target.configValue}`] === target.value) {
+      return;
+    }
+    if (target.configValue) {
+      if (target.value === "") {
+        delete this._config[target.configValue];
+      } else {
+        this._config = {
+          ...this._config,
+          [target.configValue]:
+            target.checked !== undefined ? target.checked : target.value,
+        };
+      }
+    }
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  static get styles() {
+    return css`
+      .switches {
+        margin: 8px 0;
+        display: flex;
+        justify-content: space-between;
+      }
+      .switch {
+        display: flex;
+        align-items: center;
+        justify-items: center;
+      }
+      .switches span {
+        padding: 0 16px;
+      }
+    `;
+  }
+}
+
+customElements.define("air-visual-card-editor", AirVisualCardEditor);

dist/air-visual-card.js

@@ -4,7 +4,7 @@
 
 // UPDATE FOR EACH RELEASE!!! From aftership-card. Version # is hard-coded for now.
 console.info(
-  `%c  AIR-VISUAL-CARD  \n%c  Version 1.0.0   `,
+  `%c  AIR-VISUAL-CARD  \n%c  Version 1.1.0   `,
   'color: orange; font-weight: bold; background: black',
   'color: white; font-weight: bold; background: dimgray',
 );
@@ -31,10 +31,17 @@ class AirVisualCard extends HTMLElement {
 //    return document.createElement("air-visual-card-editor");
 //  }
 
+  static async getConfigElement() {
+    await import("./air-visual-card-editor.js");
+    return document.createElement("air-visual-card-editor");
+  }
+
   static getStubConfig() {
     return { air_pollution_level: "sensor.u_s_air_pollution_level",
              air_quality_index: "sensor.u_s_air_quality_index",
-             main_pollutant: "sensor.u_s_main_pollutant"              
+             main_pollutant: "sensor.u_s_main_pollutant",
+             hide_title: 1,
+             hide_face: 0              
     }
   }