Localize cover, fan, light, media player, history charts (#1244)

* Localize cover, fan, light, media player, history charts

* Don't capitalize

src/components/state-history-charts.js

@@ -5,7 +5,9 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import './state-history-chart-line.js';
 import './state-history-chart-timeline.js';
 
-class StateHistoryCharts extends PolymerElement {
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
+class StateHistoryCharts extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style>
@@ -21,11 +23,11 @@ class StateHistoryCharts extends PolymerElement {
     }
     </style>
     <template is="dom-if" class="info" if="[[_computeIsLoading(isLoadingData)]]">
-      <div class="info">Loading state history...</div>
+      <div class="info">[[localize('ui.components.history_charts.loading_history')]]</div>
     </template>
 
     <template is="dom-if" class="info" if="[[_computeIsEmpty(isLoadingData, historyData)]]">
-      <div class="info">No state history found.</div>
+      <div class="info">[[localize('ui.components.history_charts.no_history_found')]]</div>
     </template>
 
     <template is="dom-if" if="[[historyData.timeline.length]]">

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

@@ -10,11 +10,13 @@ import CoverEntity from '../../../util/cover-model.js';
 import attributeClassNames from '../../../common/entity/attribute_class_names';
 import featureClassNames from '../../../common/entity/feature_class_names';
 
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
+
 {
   const FEATURE_CLASS_NAMES = {
     128: 'has-set_tilt_position',
   };
-  class MoreInfoCover extends PolymerElement {
+  class MoreInfoCover extends LocalizeMixin(PolymerElement) {
     static get template() {
       return html`
     <style include="iron-flex"></style>
@@ -39,7 +41,7 @@ import featureClassNames from '../../../common/entity/feature_class_names';
 
       <div class="current_position">
         <ha-labeled-slider
-          caption="Position" pin=""
+          caption="[[localize('ui.card.cover.position')]]" pin=""
           value="{{coverPositionSliderValue}}"
           disabled="[[!entityObj.supportsSetPosition]]"
           on-change="coverPositionSliderChanged"
@@ -48,7 +50,7 @@ import featureClassNames from '../../../common/entity/feature_class_names';
 
       <div class="tilt">
         <ha-labeled-slider
-          caption="Tilt position" pin="" extra=""
+          caption="[[localize('ui.card.cover.tilt_position')]]" pin="" extra=""
           value="{{coverTiltPositionSliderValue}}"
           disabled="[[!entityObj.supportsSetTiltPosition]]"
           on-change="coverTiltPositionSliderChanged">
@@ -67,28 +69,17 @@ import featureClassNames from '../../../common/entity/feature_class_names';
 
     static get properties() {
       return {
-        hass: {
+        hass: Object,
-          type: Object,
-        },
-
         stateObj: {
           type: Object,
           observer: 'stateObjChanged',
         },
-
         entityObj: {
           type: Object,
           computed: 'computeEntityObj(hass, stateObj)',
         },
-
+        coverPositionSliderValue: Number,
-        coverPositionSliderValue: {
+        coverTiltPositionSliderValue: Number
-          type: Number,
-        },
-
-        coverTiltPositionSliderValue: {
-          type: Number,
-        },
-
       };
     }
 

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

@@ -12,11 +12,12 @@ import '../../../components/ha-attributes.js';
 
 import attributeClassNames from '../../../common/entity/attribute_class_names';
 import EventsMixin from '../../../mixins/events-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 /*
  * @appliesMixin EventsMixin
  */
-class MoreInfoFan extends EventsMixin(PolymerElement) {
+class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="iron-flex"></style>
@@ -45,7 +46,7 @@ class MoreInfoFan extends EventsMixin(PolymerElement) {
     <div class\$="[[computeClassNames(stateObj)]]">
 
       <div class="container-speed_list">
-        <paper-dropdown-menu label-float="" dynamic-align="" label="Speed">
+        <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.fan.speed')]]">
           <paper-listbox slot="dropdown-content" selected="{{speedIndex}}">
             <template is="dom-repeat" items="[[stateObj.attributes.speed_list]]">
               <paper-item>[[item]]</paper-item>
@@ -56,7 +57,7 @@ class MoreInfoFan extends EventsMixin(PolymerElement) {
 
       <div class="container-oscillating">
         <div class="center horizontal layout single-row">
-          <div class="flex">Oscillate</div>
+          <div class="flex">[[localize('ui.card.fan.oscillate')]]</div>
           <paper-toggle-button checked="[[oscillationToggleChecked]]" on-change="oscillationToggleChanged">
           </paper-toggle-button>
         </div>
@@ -64,7 +65,7 @@ class MoreInfoFan extends EventsMixin(PolymerElement) {
 
       <div class="container-direction">
         <div class="direction">
-          <div>Direction</div>
+          <div>[[localize('ui.card.fan.direction')]]</div>
           <paper-icon-button icon="hass:rotate-left" on-click="onDirectionLeft" title="Left" disabled="[[computeIsRotatingLeft(stateObj)]]"></paper-icon-button>
           <paper-icon-button icon="hass:rotate-right" on-click="onDirectionRight" title="Right" disabled="[[computeIsRotatingRight(stateObj)]]"></paper-icon-button>
         </div>

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

@@ -12,6 +12,7 @@ import '../../../components/ha-labeled-slider.js';
 
 import featureClassNames from '../../../common/entity/feature_class_names';
 import EventsMixin from '../../../mixins/events-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 {
   const FEATURE_CLASS_NAMES = {
@@ -24,7 +25,7 @@ import EventsMixin from '../../../mixins/events-mixin.js';
   /*
    * @appliesMixin EventsMixin
    */
-  class MoreInfoLight extends EventsMixin(PolymerElement) {
+  class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
     static get template() {
       return html`
     <style include="iron-flex"></style>
@@ -83,22 +84,22 @@ import EventsMixin from '../../../mixins/events-mixin.js';
     <div class\$="[[computeClassNames(stateObj)]]">
 
       <div class="control brightness">
-        <ha-labeled-slider caption="Brightness" icon="hass:brightness-5" max="255" value="{{brightnessSliderValue}}" on-change="brightnessSliderChanged"></ha-labeled-slider>
+        <ha-labeled-slider caption="[[localize('ui.card.light.brightness')]]" icon="hass:brightness-5" max="255" value="{{brightnessSliderValue}}" on-change="brightnessSliderChanged"></ha-labeled-slider>
       </div>
 
       <div class="control color_temp">
-        <ha-labeled-slider caption="Color Temperature" icon="hass:thermometer" min="[[stateObj.attributes.min_mireds]]" max="[[stateObj.attributes.max_mireds]]" value="{{ctSliderValue}}" on-change="ctSliderChanged"></ha-labeled-slider>
+        <ha-labeled-slider caption="[[localize('ui.card.light.color_temperature')]]" icon="hass:thermometer" min="[[stateObj.attributes.min_mireds]]" max="[[stateObj.attributes.max_mireds]]" value="{{ctSliderValue}}" on-change="ctSliderChanged"></ha-labeled-slider>
       </div>
 
       <div class="control white_value">
-        <ha-labeled-slider caption="White Value" icon="hass:file-word-box" max="255" value="{{wvSliderValue}}" on-change="wvSliderChanged"></ha-labeled-slider>
+        <ha-labeled-slider caption="[[localize('ui.card.light.white_value')]]" icon="hass:file-word-box" max="255" value="{{wvSliderValue}}" on-change="wvSliderChanged"></ha-labeled-slider>
       </div>
 
       <ha-color-picker class="control color" on-colorselected="colorPicked" desired-hs-color="{{colorPickerColor}}" throttle="500" hue-segments="24" saturation-segments="8">
       </ha-color-picker>
 
       <div class="control effect_list">
-        <paper-dropdown-menu label-float="" dynamic-align="" label="Effect">
+        <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.light.effect')]]">
           <paper-listbox slot="dropdown-content" selected="{{effectIndex}}">
             <template is="dom-repeat" items="[[stateObj.attributes.effect_list]]">
               <paper-item>[[item]]</paper-item>

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

@@ -14,12 +14,13 @@ import HassMediaPlayerEntity from '../../../util/hass-media-player-model.js';
 import attributeClassNames from '../../../common/entity/attribute_class_names';
 import isComponentLoaded from '../../../common/config/is_component_loaded.js';
 import EventsMixin from '../../../mixins/events-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 {
   /*
    * @appliesMixin EventsMixin
    */
-  class MoreInfoMediaPlayer extends EventsMixin(PolymerElement) {
+  class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     static get template() {
       return html`
     <style include="iron-flex iron-flex-alignment"></style>
@@ -99,7 +100,7 @@ import EventsMixin from '../../../mixins/events-mixin.js';
       </div>
       <!-- TTS -->
       <div hidden\$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
-        <paper-input id="ttsInput" label="Text to speak" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>
+        <paper-input id="ttsInput" label="[[localize('ui.card.media_player.text_to_speak')]]" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>
         <paper-icon-button icon="hass:send" on-click="sendTTS"></paper-icon-button>
       </div>
     </div>

src/translations/en.json

@@ -329,6 +329,24 @@
       "camera": {
         "not_available": "Image not available"
       },
+      "cover": {
+        "position": "Position",
+        "tilt_position": "Tilt position"
+      },
+      "fan": {
+        "speed": "Speed",
+        "oscillate": "Oscillate",
+        "direction": "Direction"
+      },
+      "light": {
+        "brightness": "Brightness",
+        "color_temperature": "Color temperature",
+        "white_value": "White value",
+        "effect": "Effect"
+      },
+      "media_player": {
+        "text_to_speak": "Text to speak"
+      },
       "persistent_notification": {
         "dismiss": "Dismiss"
       },
@@ -382,6 +400,10 @@
         "future": "In {time}",
         "never": "Never"
       },
+      "history_charts": {
+        "loading_history": "Loading state history...",
+        "no_history_found": "No state history found."
+      },
       "service-picker": {
         "service": "Service"
       }