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

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;

gallery/src/data/demo_config.js

@@ -1,109 +1,11 @@
-export default {
+export const demoConfig = {
-  core: {
+  elevation: 300,
-    elevation: 300,
+  latitude: 51.5287352,
-    latitude: 51.5287352,
+  longitude: -0.381773,
-    longitude: -0.381773,
+  unit_system: {
-    unit_system: {
+    length: "km",
-      length: "km",
+    mass: "kg",
-      mass: "kg",
+    temperature: "°C",
-      temperature: "°C",
+    volume: "L",
-      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"],
   },
 };

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"],
+};

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,

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,
     };
   }
 

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);

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);

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);

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(
+        this.$.notifications.showDialog({
-          `Showing more info for ${ev.detail.entityId}`
+          message: `Showing more info for ${ev.detail.entityId}`,
-        );
+        });
       }
     });