Home Assistant Lovelace + WiredJS

configuration.yaml

# In Home Assistant UI, navigate to dev-info page and click on "Try out the new Lovelace UI" (HASS 0.72+)

# Reference the file in your configuration file
frontend:
  extra_html_url:
  - /local/wired-cards.html

# Example entities used in sample ui-lovelacy.yaml below
input_boolean:
  switch_ac_kitchen:
    name: AC kitchen
  switch_ac_livingroom:
    name: AC living room
  switch_tv:
    name: TV

ui-lovelace.yaml

# Example ui-lovelace.yaml. Create this file as <config>/ui-lovelace.yaml
views:
- name: Wired
  cards:
  - type: "custom:my-wired-toggle"
    entities:
      - input_boolean.switch_ac_kitchen
      - input_boolean.switch_ac_livingroom
      - input_boolean.switch_tv

wired-cards.html

<script>
  console.log('loaded wired-cards :)');
  // lit-element expects more modern version of ShadyCSS that we don't have.
  if (window.ShadyCSS) {
    if (!window.ShadyCSS.prepareTemplateDom) {
      window.ShadyCSS.prepareTemplateDom = () => {};
    }
    if (!window.ShadyCSS.prepareTemplateStyles) {
      window.ShadyCSS.prepareTemplateStyles = () => {};
    }
  }
</script>

<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<script src='https://unpkg.com/wired-elements@0.6.4/dist/wired-elements.bundled.js' async></script>

<script>
class HAWiredCard extends Polymer.Element {
  static get template() {
    return Polymer.html`
      <style>
        :host {
          font-family: 'Gloria Hallelujah', cursive;
        }
        wired-card {
          background-color: white;
          padding: 16px;
          display: block;
          font-size: 18px;
        }
        .state {
          display: flex;
          justify-content: space-between;
          padding: 8px;
          align-items: center;
        }
        wired-toggle {
          margin-left: 8px;
        }
      </style>
      <wired-card elevation="2">
        <template is="dom-repeat" items="[[_computeEntities(hass, config)]]">
          <div class='state'>
            [[item.attributes.friendly_name]]
            <wired-toggle
              checked="[[_computeChecked(item)]]"
              on-change="_checkedChanged"
            ></wired-toggle>
          </div>
        </template>
      </wired-card>
    `;
  }
  static get properties() {
    return {
      hass: {
        type: Object,
      },
      config: {
        type: Object,
      },
    }
  }
  _computeEntities(hass, config) {
    return config.entities.map(ent => hass.states[ent]);
  }
  _computeChecked(stateObj) {
    return stateObj.state === 'on';
  }
  _checkedChanged(ev) {
    this.hass.callService('homeassistant', 'toggle', {
      entity_id: ev.model.item.entity_id
    });
  }
  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return this.config.entities.length + 1;
  }
}
customElements.define('my-wired-toggle', HAWiredCard);
</script>