From 56a9ff2b3567693141b1a573fc5dab8919809d77 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 25 Oct 2018 14:05:22 +0200 Subject: [PATCH] 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 | 4 +- gallery/src/data/demo_config.js | 116 ++---------------- gallery/src/data/demo_services.ts | 96 +++++++++++++++ gallery/src/data/provide_hass.js | 5 +- gallery/src/demos/demo-hui-entities-card.js | 2 - .../src/demos/demo-hui-entity-filter-card.js | 74 ++++++++--- gallery/src/demos/demo-hui-glance-card.js | 66 +++++++++- gallery/src/demos/demo-hui-stack-card.js | 43 ++++++- gallery/src/ha-gallery.js | 8 +- 9 files changed, 282 insertions(+), 132 deletions(-) create mode 100644 gallery/src/data/demo_services.ts diff --git a/gallery/src/components/demo-card.js b/gallery/src/components/demo-card.js index 7afb2ce94f..ed8238da36 100644 --- 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; diff --git a/gallery/src/data/demo_config.js b/gallery/src/data/demo_config.js index 43c5916ada..3979f0ea8d 100644 --- 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", }, }; diff --git a/gallery/src/data/demo_services.ts b/gallery/src/data/demo_services.ts new file mode 100644 index 0000000000..e35cb16833 --- /dev/null +++ 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"], +}; diff --git a/gallery/src/data/provide_hass.js b/gallery/src/data/provide_hass.js index 1be6c55600..1e59d76223 100644 --- 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, diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js index ebf5e19361..743ca273be 100644 --- 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` `; @@ -189,7 +188,6 @@ class DemoEntities extends PolymerElement { type: Object, value: CONFIGS, }, - hass: Object, }; } diff --git a/gallery/src/demos/demo-hui-entity-filter-card.js b/gallery/src/demos/demo-hui-entity-filter-card.js index 09835e19ec..d3759c6614 100644 --- 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` - + `; } @@ -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); diff --git a/gallery/src/demos/demo-hui-glance-card.js b/gallery/src/demos/demo-hui-glance-card.js index 86c92e450b..83440e6611 100644 --- 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` - + `; } @@ -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); diff --git a/gallery/src/demos/demo-hui-stack-card.js b/gallery/src/demos/demo-hui-stack-card.js index 3a83a62d53..c06b3ffa30 100644 --- 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` - + `; } @@ -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); diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js index c9d6818099..e336f6e56f 100644 --- 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}`, + }); } });