From 4388d820765790e2cc704e5dccce4dadb4a4d562 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 8 Apr 2020 12:36:29 +0200 Subject: [PATCH] Fix gallery translation and add more demos (#5473) * Fix gallery translation and add more demos * Update provide_hass.ts * Update demo-hui-alarm-panel-card.ts --- gallery/src/components/demo-card.js | 27 +++++++++-- .../src/demos/demo-hui-alarm-panel-card.ts | 13 ++++++ .../src/demos/demo-hui-conditional-card.ts | 1 + gallery/src/demos/demo-hui-entities-card.ts | 46 +++++++++++++++++++ .../src/demos/demo-hui-entity-button-card.ts | 1 + .../src/demos/demo-hui-entity-filter-card.ts | 1 + gallery/src/demos/demo-hui-gauge-card.ts | 1 + gallery/src/demos/demo-hui-glance-card.ts | 1 + gallery/src/demos/demo-hui-light-card.ts | 28 +++++++++++ gallery/src/demos/demo-hui-map-card.ts | 1 + .../src/demos/demo-hui-media-control-card.ts | 1 + .../src/demos/demo-hui-media-player-rows.ts | 1 + .../demos/demo-hui-picture-elements-card.ts | 1 + .../src/demos/demo-hui-picture-entity-card.ts | 1 + .../src/demos/demo-hui-picture-glance-card.ts | 1 + .../src/demos/demo-hui-shopping-list-card.ts | 1 + gallery/src/demos/demo-hui-stack-card.ts | 1 + gallery/src/demos/demo-hui-thermostat-card.ts | 18 ++++++++ gallery/src/demos/demo-more-info-light.ts | 1 + src/fake_data/provide_hass.ts | 21 ++++++++- 20 files changed, 161 insertions(+), 6 deletions(-) diff --git a/gallery/src/components/demo-card.js b/gallery/src/components/demo-card.js index c5b7846f39..41d3fe0702 100644 --- a/gallery/src/components/demo-card.js +++ b/gallery/src/components/demo-card.js @@ -59,9 +59,6 @@ class DemoCard extends PolymerElement { ready() { super.ready(); - this.addEventListener("ll-rebuild", () => { - this._configChanged(this.config); - }); } _configChanged(config) { @@ -70,11 +67,31 @@ class DemoCard extends PolymerElement { card.removeChild(card.lastChild); } - const el = createCardElement(safeLoad(config.config)[0]); - el.hass = this.hass; + const el = this._createCardElement(safeLoad(config.config)[0]); card.appendChild(el); } + _createCardElement(cardConfig) { + const element = createCardElement(cardConfig); + if (this.hass) { + element.hass = this.hass; + } + element.addEventListener( + "ll-rebuild", + (ev) => { + ev.stopPropagation(); + this._rebuildCard(element, cardConfig); + }, + { once: true } + ); + return element; + } + + _rebuildCard(cardElToReplace, config) { + const newCardEl = this._createCardElement(config); + cardElToReplace.parentElement.replaceChild(newCardEl, cardElToReplace); + } + _hassChanged(hass) { const card = this.$.card.lastChild; if (card) card.hass = hass; diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/demo-hui-alarm-panel-card.ts index ac8b7e5def..83fbf2bc25 100644 --- a/gallery/src/demos/demo-hui-alarm-panel-card.ts +++ b/gallery/src/demos/demo-hui-alarm-panel-card.ts @@ -12,6 +12,9 @@ const ENTITIES = [ getEntity("alarm_control_panel", "alarm_armed", "armed_home", { friendly_name: "Alarm", }), + getEntity("alarm_control_panel", "unavailable", "unavailable", { + friendly_name: "Alarm", + }), ]; const CONFIGS = [ @@ -39,6 +42,15 @@ const CONFIGS = [ - arm_home `, }, + { + heading: "Unavailable", + config: ` +- type: alarm-panel + entity: alarm_control_panel.unavailable + states: + - arm_home + `, + }, { heading: "Invalid Entity", config: ` @@ -72,6 +84,7 @@ class DemoAlarmPanelEntity extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/demo-hui-conditional-card.ts index d2fe9d88c0..f68ddb127a 100644 --- a/gallery/src/demos/demo-hui-conditional-card.ts +++ b/gallery/src/demos/demo-hui-conditional-card.ts @@ -77,6 +77,7 @@ class DemoConditional extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/demo-hui-entities-card.ts index 7e1e680763..0b219d5b12 100644 --- a/gallery/src/demos/demo-hui-entities-card.ts +++ b/gallery/src/demos/demo-hui-entities-card.ts @@ -60,6 +60,36 @@ const ENTITIES = [ friendly_name: "Allowed Noise", icon: "mdi:bell-ring", }), + getEntity("light", "unavailable", "unavailable", { + friendly_name: "Bed Light", + }), + getEntity("lock", "unavailable", "unavailable", { + friendly_name: "Kitchen Door", + }), + getEntity("cover", "unavailable", "unavailable", { + friendly_name: "Kitchen Window", + supported_features: 11, + }), + getEntity("scene", "unavailable", "unavailable", { + friendly_name: "Romantic lights", + }), + getEntity("device_tracker", "unavailable", "unavailable", { + friendly_name: "Paulus", + }), + getEntity("climate", "unavailable", "unavailable", { + unit_of_measurement: "°F", + friendly_name: "Ecobee", + supported_features: 1014, + }), + getEntity("input_number", "unavailable", "unavailable", { + friendly_name: "Allowed Noise", + icon: "mdi:bell-ring", + }), + getEntity("input_select", "unavailable", "unavailable", { + unit_of_measurement: "dB", + friendly_name: "Who cooks", + icon: "mdi:cheff", + }), ]; const CONFIGS = [ @@ -121,6 +151,21 @@ const CONFIGS = [ title: Random group `, }, + { + heading: "Unavailable", + config: ` +- type: entities + entities: + - scene.unavailable + - device_tracker.unavailable + - cover.unavailable + - lock.unavailable + - light.unavailable + - climate.unavailable + - input_number.unavailable + - input_select.unavailable + `, + }, { heading: "Custom name, secondary info, custom icon", config: ` @@ -191,6 +236,7 @@ class DemoEntities extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-entity-button-card.ts index 254dc3f006..978e1ae963 100644 --- a/gallery/src/demos/demo-hui-entity-button-card.ts +++ b/gallery/src/demos/demo-hui-entity-button-card.ts @@ -93,6 +93,7 @@ class DemoButtonEntity extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/demo-hui-entity-filter-card.ts index a428330f8e..22d8f9f5be 100644 --- a/gallery/src/demos/demo-hui-entity-filter-card.ts +++ b/gallery/src/demos/demo-hui-entity-filter-card.ts @@ -108,6 +108,7 @@ class DemoFilter extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-gauge-card.ts b/gallery/src/demos/demo-hui-gauge-card.ts index 5f5e43644f..18ea542f4d 100644 --- a/gallery/src/demos/demo-hui-gauge-card.ts +++ b/gallery/src/demos/demo-hui-gauge-card.ts @@ -95,6 +95,7 @@ class DemoGaugeEntity extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts index 98ef7b0be3..8bd85b9812 100644 --- a/gallery/src/demos/demo-hui-glance-card.ts +++ b/gallery/src/demos/demo-hui-glance-card.ts @@ -237,6 +237,7 @@ class DemoPicEntity extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-light-card.ts b/gallery/src/demos/demo-hui-light-card.ts index 775d7423c3..6e1a44ac68 100644 --- a/gallery/src/demos/demo-hui-light-card.ts +++ b/gallery/src/demos/demo-hui-light-card.ts @@ -10,6 +10,12 @@ const ENTITIES = [ friendly_name: "Bed Light", brightness: 130, }), + getEntity("light", "dim", "off", { + supported_features: 1, + }), + getEntity("light", "unavailable", "unavailable", { + supported_features: 1, + }), ]; const CONFIGS = [ @@ -20,6 +26,27 @@ const CONFIGS = [ entity: light.bed_light `, }, + { + heading: "Dim", + config: ` +- type: light + entity: light.dim + `, + }, + { + heading: "Unavailable", + config: ` +- type: light + entity: light.unavailable + `, + }, + { + heading: "Non existing", + config: ` +- type: light + entity: light.nonexisting + `, + }, ]; class DemoLightEntity extends PolymerElement { @@ -41,6 +68,7 @@ class DemoLightEntity extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/demo-hui-map-card.ts index 5979cdb393..4246d2857e 100644 --- a/gallery/src/demos/demo-hui-map-card.ts +++ b/gallery/src/demos/demo-hui-map-card.ts @@ -185,6 +185,7 @@ class DemoMap extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts index f79284a13f..ca85e36f1d 100644 --- a/gallery/src/demos/demo-hui-media-control-card.ts +++ b/gallery/src/demos/demo-hui-media-control-card.ts @@ -109,6 +109,7 @@ class DemoHuiMediControlCard extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(createMediaPlayerEntities()); } } diff --git a/gallery/src/demos/demo-hui-media-player-rows.ts b/gallery/src/demos/demo-hui-media-player-rows.ts index 5cf708cb9f..f5a7d329a5 100644 --- a/gallery/src/demos/demo-hui-media-player-rows.ts +++ b/gallery/src/demos/demo-hui-media-player-rows.ts @@ -57,6 +57,7 @@ class DemoHuiMediaPlayerRows extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(createMediaPlayerEntities()); } } diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts index f231efc860..48f8dd51e6 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/demo-hui-picture-elements-card.ts @@ -146,6 +146,7 @@ class DemoPicElements extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-picture-entity-card.ts b/gallery/src/demos/demo-hui-picture-entity-card.ts index 1378707e45..9e848e3527 100644 --- a/gallery/src/demos/demo-hui-picture-entity-card.ts +++ b/gallery/src/demos/demo-hui-picture-entity-card.ts @@ -99,6 +99,7 @@ class DemoPicEntity extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-picture-glance-card.ts b/gallery/src/demos/demo-hui-picture-glance-card.ts index faae58bd7b..ec099beda9 100644 --- a/gallery/src/demos/demo-hui-picture-glance-card.ts +++ b/gallery/src/demos/demo-hui-picture-glance-card.ts @@ -140,6 +140,7 @@ class DemoPicGlance extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/demo-hui-shopping-list-card.ts index 8d62b43838..ad37d60739 100644 --- a/gallery/src/demos/demo-hui-shopping-list-card.ts +++ b/gallery/src/demos/demo-hui-shopping-list-card.ts @@ -39,6 +39,7 @@ class DemoShoppingListEntity extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.mockAPI("shopping_list", () => [ { name: "list", id: 1, complete: false }, diff --git a/gallery/src/demos/demo-hui-stack-card.ts b/gallery/src/demos/demo-hui-stack-card.ts index e34911f939..942a7fb84b 100644 --- a/gallery/src/demos/demo-hui-stack-card.ts +++ b/gallery/src/demos/demo-hui-stack-card.ts @@ -110,6 +110,7 @@ class DemoStack extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/demo-hui-thermostat-card.ts index 45124374e0..8ce3652e35 100644 --- a/gallery/src/demos/demo-hui-thermostat-card.ts +++ b/gallery/src/demos/demo-hui-thermostat-card.ts @@ -36,6 +36,9 @@ const ENTITIES = [ friendly_name: "Nest", supported_features: 43, }), + getEntity("climate", "unavailable", "unavailable", { + supported_features: 43, + }), ]; const CONFIGS = [ @@ -55,6 +58,20 @@ const CONFIGS = [ entity: climate.nest `, }, + { + heading: "Unavailable", + config: ` +- type: thermostat + entity: climate.unavailable + `, + }, + { + heading: "Non existing", + config: ` +- type: thermostat + entity: climate.nonexisting + `, + }, ]; class DemoThermostatEntity extends PolymerElement { @@ -76,6 +93,7 @@ class DemoThermostatEntity extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts index 07d9526007..37e53dfc81 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/demo-more-info-light.ts @@ -43,6 +43,7 @@ class DemoMoreInfoLight extends PolymerElement { public ready() { super.ready(); const hass = provideHass(this); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts index 56b33b9b14..ea8f369bf2 100644 --- a/src/fake_data/provide_hass.ts +++ b/src/fake_data/provide_hass.ts @@ -9,9 +9,10 @@ import { demoPanels } from "./demo_panels"; import { getEntity, Entity } from "./entity"; import { HomeAssistant } from "../types"; import { HassEntities } from "home-assistant-js-websocket"; -import { getLocalLanguage } from "../util/hass-translation"; +import { getLocalLanguage, getTranslation } from "../util/hass-translation"; import { translationMetadata } from "../resources/translations-metadata"; import { DEFAULT_PANEL } from "../data/panel"; +import { computeLocalize } from "../common/translations/localize"; const ensureArray = (val: T | T[]): T[] => Array.isArray(val) ? val : [val]; @@ -28,6 +29,7 @@ export interface MockHomeAssistant extends HomeAssistant { updateHass(obj: Partial); updateStates(newStates: HassEntities); addEntities(entites: Entity | Entity[], replace?: boolean); + updateTranslations(fragment: null | string, language?: string); mockWS( type: string, callback: (msg: any, onChange?: (response: any) => void) => any @@ -52,6 +54,22 @@ export const provideHass = ( } = {}; const entities = {}; + function updateTranslations(fragment: null | string, language?: string) { + const lang = language || getLocalLanguage(); + getTranslation(fragment, lang).then((translation) => { + const resources = { + [lang]: { + ...(hass().resources && hass().resources[lang]), + ...translation.data, + }, + }; + hass().updateHass({ + resources, + localize: computeLocalize(elements[0], lang, resources), + }); + }); + } + function updateStates(newStates: HassEntities) { hass().updateHass({ states: { ...hass().states, ...newStates }, @@ -220,6 +238,7 @@ export const provideHass = ( }); }, updateStates, + updateTranslations, addEntities, mockWS(type, callback) { wsCommands[type] = callback;