Load and subscribe to backend translations (#894)

* Load backend translations

* Add support for component level state translations

* Fix selected language backend translation loading

js/common/util/compute_state_display.js

@@ -53,9 +53,11 @@ export default function computeStateDisplay(localize, stateObj, language) {
     } else {
       stateObj._stateDisplay = localize(`state.${domain}.${stateObj.state}`);
     }
-    // Fall back to default or raw state if nothing else matches.
+    // Fall back to default, component backend translation, or raw state if nothing else matches.
     stateObj._stateDisplay = stateObj._stateDisplay
-      || localize(`state.default.${stateObj.state}`) || stateObj.state;
+      || localize(`state.default.${stateObj.state}`)
+      || localize(`component.${domain}.state.${stateObj.state}`)
+      || stateObj.state;
   }
 
   return stateObj._stateDisplay;

src/components/entity/ha-state-label-badge.html

@@ -1,6 +1,7 @@
 <link rel='import' href='../../../bower_components/polymer/polymer-element.html'>
 
 <link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel="import" href="../../../src/util/hass-util.html">
 
 <link rel='import' href='../ha-label-badge.html'>
 
@@ -37,7 +38,7 @@
     </style>
 
     <ha-label-badge class$='[[computeClasses(state)]]'
-      value='[[computeValue(state)]]'
+      value='[[computeValue(localize, state)]]'
       icon='[[computeIcon(state)]]'
       image='[[computeImage(state)]]'
       label='[[computeLabel(localize, state, timerTimeRemaining)]]'
@@ -99,8 +100,9 @@ class HaStateLabelBadge extends
     }
   }
 
-  computeValue(state) {
-    switch (window.hassUtil.computeDomain(state)) {
+  computeValue(localize, state) {
+    const domain = window.hassUtil.computeDomain(state);
+    switch (domain) {
       case 'binary_sensor':
       case 'device_tracker':
       case 'updater':
@@ -110,7 +112,10 @@ class HaStateLabelBadge extends
         return null;
       case 'sensor':
       default:
-        return state.state === 'unknown' ? '-' : state.state;
+        return state.state === 'unknown' ? '-' : (
+          localize(`component.${domain}.state.${state.state}`)
+          || state.state
+        );
     }
   }
 

src/home-assistant.html

@@ -119,6 +119,18 @@ class HomeAssistant extends Polymer.Element {
     });
   }
 
+  loadBackendTranslations() {
+    if (!this.hass.language) return;
+
+    const language = this.hass.selectedLanguage;
+    this.hass.callApi('get', `translations/${language}`).then((result) => {
+      // If we've switched selected languages just ignore this response
+      if (!this.hass.selectedLanguage === language) return;
+
+      this._updateResources(language, result.resources);
+    });
+  }
+
   _updateResources(language, data) {
     // Update the language in hass, and update the resources with the newly
     // loaded resources. This merges the new data on top of the old data for
@@ -201,6 +213,7 @@ class HomeAssistant extends Polymer.Element {
 
     var reconnected = () => {
       this._updateHass({ connected: true });
+      this.loadBackendTranslations();
     };
 
     conn.addEventListener('ready', reconnected);
@@ -240,6 +253,8 @@ class HomeAssistant extends Polymer.Element {
       unsubThemes = unsub;
     });
 
+    this.loadBackendTranslations();
+
     this.unsubConnection = function () {
       conn.removeEventListener('ready', reconnected);
       conn.removeEventListener('disconnected', disconnected);
@@ -307,6 +322,7 @@ class HomeAssistant extends Polymer.Element {
     this._updateHass({ selectedLanguage: event.detail.language });
     this.$.storage.storeState();
     this.loadResources();
+    this.loadBackendTranslations();
     this.loadTranslationFragment(this.panelUrl);
   }
 

test-mocha/common/util/compute_state_display.js

@@ -85,6 +85,20 @@ describe('computeStateDisplay', () => {
     assert.strictEqual(computeStateDisplay(altLocalize, stateObj, 'en'), 'state.default.unavailable');
   });
 
+  it('Localizes sensor value with component translation', () => {
+    const altLocalize = function (message, ...args) {
+      if (message !== 'component.sensor.state.custom_state') return null;
+      return localize(message, ...args);
+    };
+    const stateObj = {
+      entity_id: 'sensor.test',
+      state: 'custom_state',
+      attributes: {
+      },
+    };
+    assert.strictEqual(computeStateDisplay(altLocalize, stateObj, 'en'), 'component.sensor.state.custom_state');
+  });
+
   it('Localizes input_datetime with full date time', () => {
     const stateObj = {
       entity_id: 'input_datetime.test',