Lovelace Light View Strategy

light-strategy.js

/*
Light strategy that shows your light entities.
To use:
 - store this file in `<config>/www/light-strategy.js`
 - Add lovelace resource: `/local/light-strategy.js`, type JavaScript Module
 - Create a new Lovelace dashboard and set as content:
views:
- title: Lights
  strategy:
    type: 'custom:light-strategy'
    // Optional options. Will be merged into the grid config.
    options:
      gridOptions:
        columns: 3
        
Inspired from https://gist.github.com/balloob/4a70c83287ddba4e9085cb578ffb161f
*/

class LightViewStrategy {
  static async generateView(info) {
    const strategyOptions = info.view.strategy.options || {};

    // Query all data we need. We will make it available to views by storing it in strategy options.
    const [areas, devices, entities] = await Promise.all([
      info.hass.callWS({ type: "config/area_registry/list" }),
      info.hass.callWS({ type: "config/device_registry/list" }),
      info.hass.callWS({ type: "config/entity_registry/list" }),
    ]);

    const cards = [];

    // Find all lights entities.
    var lights = entities
      .filter(x => x.entity_id.startsWith("light."))
      .filter(x => x.disabled_by === null);

    for (const light of lights) {
      cards.push({
        type: "button",
        entity: light.entity_id,
        tap_action: {
          action: "toggle",
        },
        hold_action: {
          action: "more-info",
        }
      });
    }

    return {
      cards: [
        {
          type: "grid",
          cards,
          ...strategyOptions.gridOptions,
        },
      ],
    };
  }
}

customElements.define("ll-strategy-light-strategy", LightViewStrategy);