Localize configurator, climate (#1253)

* Localize configurator

* Add climate

* Fix typo

* Lowercase
This commit is contained in:
c727 2018-06-03 13:38:07 +02:00 committed by Paulus Schoutsen
parent cb284d9718
commit dbcae9cb77
5 changed files with 48 additions and 16 deletions

View File

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

View File

@ -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
Temperature</div>
<div hidden\$="[[!supportsTemperatureControls(stateObj)]]">[[localize('ui.card.climate.target_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>

View File

@ -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>
`;
}

View File

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

View File

@ -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"