Localize configurator, climate (#1253)

* Localize configurator

* Add climate

* Fix typo

* Lowercase

src/components/ha-climate-state.js

@@ -1,7 +1,12 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-class HaClimateState extends PolymerElement {
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaClimateState extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style>
@@ -28,14 +33,14 @@ class HaClimateState extends PolymerElement {
 
     <div class="target">
       <span class="state-label">
-        [[stateObj.state]]
+        [[_localizeState(stateObj.state)]]
       </span>
       [[computeTarget(stateObj)]]
     </div>
 
     <template is="dom-if" if="[[currentStatus]]">
       <div class="current">
-        Currently: [[currentStatus]]
+        [[localize('ui.card.climate.currently')]]: [[currentStatus]]
       </div>
     </template>
 `;
@@ -43,6 +48,7 @@ class HaClimateState extends PolymerElement {
 
   static get properties() {
     return {
+      hass: Object,
       stateObj: Object,
       currentStatus: {
         type: String,
@@ -77,5 +83,9 @@ class HaClimateState extends PolymerElement {
 
     return '';
   }
+
+  _localizeState(state) {
+    return this.localize(`state.climate.${state}`);
+  }
 }
 customElements.define('ha-climate-state', HaClimateState);

src/dialogs/more-info/controls/more-info-climate.js

@@ -14,12 +14,15 @@ import '../../../components/ha-paper-slider.js';
 
 import attributeClassNames from '../../../common/entity/attribute_class_names.js';
 import featureClassNames from '../../../common/entity/feature_class_names';
+
 import EventsMixin from '../../../mixins/events-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 /*
  * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
  */
-class MoreInfoClimate extends EventsMixin(PolymerElement) {
+class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-flex"></style>
@@ -117,7 +120,7 @@ class MoreInfoClimate extends EventsMixin(PolymerElement) {
       <template is="dom-if" if="[[supportsOn(stateObj)]]">
         <div class="container-on">
           <div class="center horizontal layout single-row">
-            <div class="flex">On / Off</div>
+            <div class="flex">[[localize('ui.card.climate.on_off')]]</div>
             <paper-toggle-button checked="[[onToggleChecked]]" on-change="onToggleChanged">
             </paper-toggle-button>
           </div>
@@ -126,8 +129,7 @@ class MoreInfoClimate extends EventsMixin(PolymerElement) {
 
       <div class="container-temperature">
         <div class\$="[[stateObj.attributes.operation_mode]]">
-          <div hidden\$="[[!supportsTemperatureControls(stateObj)]]">Target
+          <div hidden\$="[[!supportsTemperatureControls(stateObj)]]">[[localize('ui.card.climate.target_temperature')]]</div>
-            Temperature</div>
           <template is="dom-if" if="[[supportsTemperature(stateObj)]]">
             <ha-climate-control value="[[stateObj.attributes.temperature]]" units="[[stateObj.attributes.unit_of_measurement]]" step="[[computeTemperatureStepSize(stateObj)]]" min="[[stateObj.attributes.min_temp]]" max="[[stateObj.attributes.max_temp]]" on-change="targetTemperatureChanged">
             </ha-climate-control>
@@ -143,7 +145,7 @@ class MoreInfoClimate extends EventsMixin(PolymerElement) {
 
       <template is="dom-if" if="[[supportsHumidity(stateObj)]]">
         <div class="container-humidity">
-          <div>Target Humidity</div>
+          <div>[[localize('ui.card.climate.target_humidity')]]</div>
             <div class="single-row">
               <div class="target-humidity">[[stateObj.attributes.humidity]] %</div>
               <ha-paper-slider class="humidity" min="[[stateObj.attributes.min_humidity]]" max="[[stateObj.attributes.max_humidity]]" secondary-progress="[[stateObj.attributes.max_humidity]]" step="1" pin="" value="[[stateObj.attributes.humidity]]" on-change="targetHumiditySliderChanged" ignore-bar-touch="">
@@ -155,7 +157,7 @@ class MoreInfoClimate extends EventsMixin(PolymerElement) {
       <template is="dom-if" if="[[supportsOperationMode(stateObj)]]">
         <div class="container-operation_list">
           <div class="controls">
-            <paper-dropdown-menu class="capitalize" label-float="" dynamic-align="" label="Operation">
+            <paper-dropdown-menu class="capitalize" label-float="" dynamic-align="" label="[[localize('ui.card.climate.operation')]]">
               <paper-listbox slot="dropdown-content" selected="{{operationIndex}}">
                 <template is="dom-repeat" items="[[stateObj.attributes.operation_list]]" on-dom-change="handleOperationListUpdate">
                   <paper-item class="capitalize">[[item]]</paper-item>
@@ -168,7 +170,7 @@ class MoreInfoClimate extends EventsMixin(PolymerElement) {
 
       <template is="dom-if" if="[[supportsFanMode(stateObj)]]">
         <div class="container-fan_list">
-          <paper-dropdown-menu label-float="" dynamic-align="" label="Fan Mode">
+          <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.climate.fan_mode')]]">
             <paper-listbox slot="dropdown-content" selected="{{fanIndex}}">
               <template is="dom-repeat" items="[[stateObj.attributes.fan_list]]" on-dom-change="handleFanListUpdate">
                 <paper-item>[[item]]</paper-item>
@@ -180,7 +182,7 @@ class MoreInfoClimate extends EventsMixin(PolymerElement) {
 
       <template is="dom-if" if="[[supportsSwingMode(stateObj)]]">
         <div class="container-swing_list">
-          <paper-dropdown-menu label-float="" dynamic-align="" label="Swing Mode">
+          <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.climate.swing_mode')]]">
             <paper-listbox slot="dropdown-content" selected="{{swingIndex}}">
               <template is="dom-repeat" items="[[stateObj.attributes.swing_list]]" on-dom-change="handleSwingListUpdate">
                 <paper-item>[[item]]</paper-item>
@@ -193,7 +195,7 @@ class MoreInfoClimate extends EventsMixin(PolymerElement) {
       <template is="dom-if" if="[[supportsAwayMode(stateObj)]]">
         <div class="container-away_mode">
           <div class="center horizontal layout single-row">
-            <div class="flex">Away Mode</div>
+            <div class="flex">[[localize('ui.card.climate.away_mode')]]</div>
             <paper-toggle-button checked="[[awayToggleChecked]]" on-change="awayToggleChanged">
             </paper-toggle-button>
           </div>
@@ -203,7 +205,7 @@ class MoreInfoClimate extends EventsMixin(PolymerElement) {
       <template is="dom-if" if="[[supportsAuxHeat(stateObj)]]">
         <div class="container-aux_heat">
           <div class="center horizontal layout single-row">
-            <div class="flex">Aux Heat</div>
+            <div class="flex">[[localize('ui.card.climate.aux_heat')]]</div>
             <paper-toggle-button checked="[[auxToggleChecked]]" on-change="auxToggleChanged">
             </paper-toggle-button>
           </div>

src/state-summary/state-card-climate.js

@@ -23,7 +23,7 @@ class StateCardClimate extends PolymerElement {
 
     <div class="horizontal justified layout">
       ${this.stateInfoTemplate}
-      <ha-climate-state state-obj="[[stateObj]]"></ha-climate-state>
+      <ha-climate-state hass="[[hass]]" state-obj="[[stateObj]]"></ha-climate-state>
     </div>
 `;
   }

src/state-summary/state-card-configurator.js

@@ -5,7 +5,12 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/entity/state-info.js';
 
-class StateCardConfigurator extends PolymerElement {
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="iron-flex iron-flex-alignment"></style>
@@ -21,7 +26,7 @@ class StateCardConfigurator extends PolymerElement {
 
     <div class="horizontal justified layout">
       ${this.stateInfoTemplate}
-      <paper-button hidden\$="[[inDialog]]">[[stateObj.state]]</paper-button>
+      <paper-button hidden$="[[inDialog]]">[[_localizeState(stateObj.state)]]</paper-button>
     </div>
 
     <!-- pre load the image so the dialog is rendered the proper size -->
@@ -47,5 +52,9 @@ class StateCardConfigurator extends PolymerElement {
       },
     };
   }
+
+  _localizeState(state) {
+    return this.localize(`state.configurator.${state}`);
+  }
 }
 customElements.define('state-card-configurator', StateCardConfigurator);

src/translations/en.json

@@ -329,6 +329,17 @@
       "camera": {
         "not_available": "Image not available"
       },
+      "climate": {
+        "currently": "Currently",
+        "on_off": "On / off",
+        "target_temperature": "Target temperature",
+        "target_humidity": "Target humidity",
+        "operation": "Operation",
+        "fan_mode": "Fan mode",
+        "swing_mode": "Swing mode",
+        "away_mode": "Away mode",
+        "aux_heat": "Aux heat"
+      },
       "cover": {
         "position": "Position",
         "tilt_position": "Tilt position"