Gallery: fix notifs, fake config/services, glance demo (#1857)

* Gallery: fix notifs, fake config/services, glance demo * Fix missing glance states * Fill in more missing entities * Add controller to entity filter card
2025-07-23 09:16:38 +00:00 · 2018-10-25 14:05:22 +02:00 · 2018-10-25 14:05:22 +02:00 · 56a9ff2b35
commit 56a9ff2b35
parent 8c7b62509b
9 changed files with 282 additions and 132 deletions
--- a/gallery/src/components/demo-card.js
+++ b/gallery/src/components/demo-card.js
@ -3,7 +3,8 @@ import { PolymerElement } from "@polymer/polymer/polymer-element.js";
 import JsYaml from "js-yaml";

 import HomeAssistant from "../data/hass.js";
-import demoConfig from "../data/demo_config.js";
+import { demoConfig } from "../data/demo_config.js";
+import { demoServices } from "../data/demo_services";
 import demoResources from "../data/demo_resources.js";
 import demoStates from "../data/demo_states.js";
 import createCardElement from "../../../src/panels/lovelace/common/create-card-element.js";
@ -73,6 +74,7 @@ class DemoCard extends PolymerElement {
    } else {
      const hass = new HomeAssistant(demoStates);
      hass.config = demoConfig;
+      hass.services = demoServices;
      hass.resources = demoResources;
      hass.language = "en";
      hass.states = demoStates;
--- a/gallery/src/data/demo_config.js
+++ b/gallery/src/data/demo_config.js
@ -1,109 +1,11 @@
-export default {
-  core: {
-    elevation: 300,
-    latitude: 51.5287352,
-    longitude: -0.381773,
-    unit_system: {
-      length: "km",
-      mass: "kg",
-      temperature: "°C",
-      volume: "L",
-    },
-  },
-  services: {
-    configurator: ["configure"],
-    tts: ["demo_say", "clear_cache"],
-    cover: [
-      "open_cover",
-      "close_cover",
-      "open_cover_tilt",
-      "close_cover_tilt",
-      "set_cover_tilt_position",
-      "set_cover_position",
-      "stop_cover_tilt",
-      "stop_cover",
-    ],
-    group: ["set", "reload", "remove", "set_visibility"],
-    alarm_control_panel: [
-      "alarm_arm_night",
-      "alarm_disarm",
-      "alarm_trigger",
-      "alarm_arm_home",
-      "alarm_arm_away",
-      "alarm_arm_custom_bypass",
-    ],
-    conversation: ["process"],
-    notify: ["demo_test_target_name", "notify"],
-    lock: ["open", "lock", "unlock"],
-    input_select: [
-      "select_previous",
-      "set_options",
-      "select_next",
-      "select_option",
-    ],
-    recorder: ["purge"],
-    persistent_notification: ["create", "dismiss"],
-    timer: ["pause", "cancel", "finish", "start"],
-    input_boolean: ["turn_off", "toggle", "turn_on"],
-    fan: [
-      "set_speed",
-      "turn_on",
-      "turn_off",
-      "set_direction",
-      "oscillate",
-      "toggle",
-    ],
-    climate: [
-      "set_humidity",
-      "set_operation_mode",
-      "set_aux_heat",
-      "turn_on",
-      "set_hold_mode",
-      "set_away_mode",
-      "turn_off",
-      "set_fan_mode",
-      "set_temperature",
-      "set_swing_mode",
-    ],
-    switch: ["turn_off", "toggle", "turn_on"],
-    script: ["turn_off", "demo", "reload", "toggle", "turn_on"],
-    scene: ["turn_on"],
-    system_log: ["clear", "write"],
-    camera: ["disable_motion_detection", "enable_motion_detection", "snapshot"],
-    image_processing: ["scan"],
-    media_player: [
-      "media_previous_track",
-      "clear_playlist",
-      "shuffle_set",
-      "media_seek",
-      "turn_on",
-      "media_play_pause",
-      "media_next_track",
-      "media_pause",
-      "volume_down",
-      "volume_set",
-      "media_stop",
-      "toggle",
-      "media_play",
-      "play_media",
-      "volume_mute",
-      "turn_off",
-      "select_sound_mode",
-      "select_source",
-      "volume_up",
-    ],
-    input_number: ["set_value", "increment", "decrement"],
-    device_tracker: ["see"],
-    homeassistant: [
-      "stop",
-      "check_config",
-      "reload_core_config",
-      "turn_on",
-      "turn_off",
-      "restart",
-      "toggle",
-    ],
-    light: ["turn_off", "toggle", "turn_on"],
-    input_text: ["set_value"],
+export const demoConfig = {
+  elevation: 300,
+  latitude: 51.5287352,
+  longitude: -0.381773,
+  unit_system: {
+    length: "km",
+    mass: "kg",
+    temperature: "°C",
+    volume: "L",
  },
 };
--- a/gallery/src/data/demo_services.ts
+++ b/gallery/src/data/demo_services.ts
@ -0,0 +1,96 @@
+export const demoServices = {
+  configurator: ["configure"],
+  tts: ["demo_say", "clear_cache"],
+  cover: [
+    "open_cover",
+    "close_cover",
+    "open_cover_tilt",
+    "close_cover_tilt",
+    "set_cover_tilt_position",
+    "set_cover_position",
+    "stop_cover_tilt",
+    "stop_cover",
+  ],
+  group: ["set", "reload", "remove", "set_visibility"],
+  alarm_control_panel: [
+    "alarm_arm_night",
+    "alarm_disarm",
+    "alarm_trigger",
+    "alarm_arm_home",
+    "alarm_arm_away",
+    "alarm_arm_custom_bypass",
+  ],
+  conversation: ["process"],
+  notify: ["demo_test_target_name", "notify"],
+  lock: ["open", "lock", "unlock"],
+  input_select: [
+    "select_previous",
+    "set_options",
+    "select_next",
+    "select_option",
+  ],
+  recorder: ["purge"],
+  persistent_notification: ["create", "dismiss"],
+  timer: ["pause", "cancel", "finish", "start"],
+  input_boolean: ["turn_off", "toggle", "turn_on"],
+  fan: [
+    "set_speed",
+    "turn_on",
+    "turn_off",
+    "set_direction",
+    "oscillate",
+    "toggle",
+  ],
+  climate: [
+    "set_humidity",
+    "set_operation_mode",
+    "set_aux_heat",
+    "turn_on",
+    "set_hold_mode",
+    "set_away_mode",
+    "turn_off",
+    "set_fan_mode",
+    "set_temperature",
+    "set_swing_mode",
+  ],
+  switch: ["turn_off", "toggle", "turn_on"],
+  script: ["turn_off", "demo", "reload", "toggle", "turn_on"],
+  scene: ["turn_on"],
+  system_log: ["clear", "write"],
+  camera: ["disable_motion_detection", "enable_motion_detection", "snapshot"],
+  image_processing: ["scan"],
+  media_player: [
+    "media_previous_track",
+    "clear_playlist",
+    "shuffle_set",
+    "media_seek",
+    "turn_on",
+    "media_play_pause",
+    "media_next_track",
+    "media_pause",
+    "volume_down",
+    "volume_set",
+    "media_stop",
+    "toggle",
+    "media_play",
+    "play_media",
+    "volume_mute",
+    "turn_off",
+    "select_sound_mode",
+    "select_source",
+    "volume_up",
+  ],
+  input_number: ["set_value", "increment", "decrement"],
+  device_tracker: ["see"],
+  homeassistant: [
+    "stop",
+    "check_config",
+    "reload_core_config",
+    "turn_on",
+    "turn_off",
+    "restart",
+    "toggle",
+  ],
+  light: ["turn_off", "toggle", "turn_on"],
+  input_text: ["set_value"],
+};
--- a/gallery/src/data/provide_hass.js
+++ b/gallery/src/data/provide_hass.js
@ -1,6 +1,7 @@
 import { fireEvent } from "../../../src/common/dom/fire_event.js";

-import demoConfig from "./demo_config.js";
+import { demoConfig } from "./demo_config.js";
+import { demoServices } from "./demo_services";
 import demoResources from "./demo_resources.js";

 const ensureArray = (val) => (Array.isArray(val) ? val : [val]);
@ -22,9 +23,11 @@ export default (elements, { initialStates = {} } = {}) => {
  updateHass({
    // Home Assistant properties
    config: demoConfig,
+    services: demoServices,
    language: "en",
    resources: demoResources,
    states: initialStates,
+    themes: {},

    // Mock properties
    mockEntities: entities,
--- a/gallery/src/demos/demo-hui-entities-card.js
+++ b/gallery/src/demos/demo-hui-entities-card.js
@ -177,7 +177,6 @@ class DemoEntities extends PolymerElement {
    return html`
      <demo-cards
        id='demos'
-        hass='[[hass]]'
        configs="[[_configs]]"
      ></demo-cards>
    `;
@ -189,7 +188,6 @@ class DemoEntities extends PolymerElement {
        type: Object,
        value: CONFIGS,
      },
-      hass: Object,
    };
  }

--- a/gallery/src/demos/demo-hui-entity-filter-card.js
+++ b/gallery/src/demos/demo-hui-entity-filter-card.js
@ -1,9 +1,57 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag.js";
 import { PolymerElement } from "@polymer/polymer/polymer-element.js";

+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
 import "../components/demo-cards.js";

+const ENTITIES = [
+  getEntity("device_tracker", "demo_paulus", "work", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Paulus",
+  }),
+  getEntity("device_tracker", "demo_anne_therese", "school", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Anne Therese",
+  }),
+  getEntity("device_tracker", "demo_home_boy", "home", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Home Boy",
+  }),
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+  }),
+  getEntity("light", "kitchen_lights", "on", {
+    friendly_name: "Kitchen Lights",
+  }),
+  getEntity("light", "ceiling_lights", "off", {
+    friendly_name: "Ceiling Lights",
+  }),
+];
+
 const CONFIGS = [
+  {
+    heading: "Controller",
+    config: `
+- type: entities
+  entities:
+  - light.bed_light
+  - light.ceiling_lights
+  - light.kitchen_lights
+    `,
+  },
  {
    heading: "Basic",
    config: `
@ -17,7 +65,7 @@ const CONFIGS = [
    - light.kitchen_lights
  state_filter:
    - "on"
-    - not_home
+    - home
    `,
  },
  {
@ -39,25 +87,15 @@ const CONFIGS = [
    show_state: false
    `,
  },
-  {
-    heading: "Showing single entity conditionally",
-    config: `
- type: entity-filter
-  entities:
-    - media_player.lounge_room
-  state_filter:
-    - 'playing'
-  card:
-    type: media-control
-    entity: media_player.lounge_room
-    `,
-  },
 ];

 class DemoFilter extends PolymerElement {
  static get template() {
    return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id='demos'
+        configs="[[_configs]]"
+      ></demo-cards>
    `;
  }

@ -69,6 +107,12 @@ class DemoFilter extends PolymerElement {
      },
    };
  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
 }

 customElements.define("demo-hui-entity-filter-card", DemoFilter);
--- a/gallery/src/demos/demo-hui-glance-card.js
+++ b/gallery/src/demos/demo-hui-glance-card.js
@ -1,8 +1,63 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag.js";
 import { PolymerElement } from "@polymer/polymer/polymer-element.js";

+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
 import "../components/demo-cards.js";

+const ENTITIES = [
+  getEntity("device_tracker", "demo_paulus", "home", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Paulus",
+  }),
+  getEntity("media_player", "living_room", "playing", {
+    volume_level: 1,
+    is_volume_muted: false,
+    media_content_id: "eyU3bRy2x44",
+    media_content_type: "movie",
+    media_duration: 300,
+    media_position: 45.017773,
+    media_position_updated_at: "2018-07-19T10:44:45.919514+00:00",
+    media_title: "♥♥ The Best Fireplace Video (3 hours)",
+    app_name: "YouTube",
+    sound_mode: "Dummy Music",
+    sound_mode_list: ["Dummy Music", "Dummy Movie"],
+    shuffle: false,
+    friendly_name: "Living Room",
+    entity_picture:
+      "/api/media_player_proxy/media_player.living_room?token=e925f8db7f7bd1f317e4524dcb8333d60f6019219a3799a22604b5787f243567&cache=bc2ffb49c4f67034",
+    supported_features: 115597,
+  }),
+  getEntity("sun", "sun", "below_horizon", {
+    next_dawn: "2018-07-19T20:48:47+00:00",
+    next_dusk: "2018-07-20T11:46:06+00:00",
+    next_midnight: "2018-07-19T16:17:28+00:00",
+    next_noon: "2018-07-20T04:17:26+00:00",
+    next_rising: "2018-07-19T21:16:31+00:00",
+    next_setting: "2018-07-20T11:18:22+00:00",
+    elevation: 67.69,
+    azimuth: 338.55,
+    friendly_name: "Sun",
+  }),
+  getEntity("cover", "kitchen_window", "open", {
+    friendly_name: "Kitchen Window",
+    supported_features: 11,
+  }),
+  getEntity("light", "kitchen_lights", "on", {
+    friendly_name: "Kitchen Lights",
+  }),
+  getEntity("light", "ceiling_lights", "off", {
+    friendly_name: "Ceiling Lights",
+  }),
+  getEntity("lock", "kitchen_door", "locked", {
+    friendly_name: "Kitchen Door",
+  }),
+];
+
 const CONFIGS = [
  {
    heading: "Basic example",
@ -162,7 +217,10 @@ const CONFIGS = [
 class DemoPicEntity extends PolymerElement {
  static get template() {
    return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id='demos'
+        configs="[[_configs]]"
+      ></demo-cards>
    `;
  }

@ -174,6 +232,12 @@ class DemoPicEntity extends PolymerElement {
      },
    };
  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
 }

 customElements.define("demo-hui-glance-card", DemoPicEntity);
--- a/gallery/src/demos/demo-hui-stack-card.js
+++ b/gallery/src/demos/demo-hui-stack-card.js
@ -1,8 +1,40 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag.js";
 import { PolymerElement } from "@polymer/polymer/polymer-element.js";

+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
 import "../components/demo-cards.js";

+const ENTITIES = [
+  getEntity("light", "kitchen_lights", "on", {
+    friendly_name: "Kitchen Lights",
+  }),
+  getEntity("device_tracker", "demo_paulus", "work", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Paulus",
+  }),
+  getEntity("device_tracker", "demo_anne_therese", "school", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Anne Therese",
+  }),
+  getEntity("device_tracker", "demo_home_boy", "home", {
+    source_type: "gps",
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: "Home Boy",
+  }),
+];
+
 const CONFIGS = [
  {
    heading: "Vertical Stack",
@ -59,7 +91,10 @@ const CONFIGS = [
 class DemoStack extends PolymerElement {
  static get template() {
    return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id='demos'
+        configs="[[_configs]]"
+      ></demo-cards>
    `;
  }

@ -71,6 +106,12 @@ class DemoStack extends PolymerElement {
      },
    };
  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
 }

 customElements.define("demo-hui-stack-card", DemoStack);
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@ -152,14 +152,14 @@ class HaGallery extends PolymerElement {
    super.ready();

    this.addEventListener("show-notification", (ev) =>
-      this.$.notifications.showNotification(ev.detail.message)
+      this.$.notifications.showDialog({ message: ev.detail.message })
    );

    this.addEventListener("hass-more-info", (ev) => {
      if (ev.detail.entityId) {
-        this.$.notifications.showNotification(
-          `Showing more info for ${ev.detail.entityId}`
-        );
+        this.$.notifications.showDialog({
+          message: `Showing more info for ${ev.detail.entityId}`,
+        });
      }
    });