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

@@ -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]);
+    const el = this._createCardElement(safeLoad(config.config)[0]);
-    el.hass = this.hass;
     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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 = <T>(val: T | T[]): T[] =>
   Array.isArray(val) ? val : [val];
@@ -28,6 +29,7 @@ export interface MockHomeAssistant extends HomeAssistant {
   updateHass(obj: Partial<MockHomeAssistant>);
   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;