Use backend translation for config entries (#980)

* Use backend translation for config entries

* Accept label/error callbacks on ha-form

* Add hassMixins import to ha-form
This commit is contained in:
Adam Mills 2018-03-11 15:47:52 -04:00 committed by Paulus Schoutsen
parent f1736024cc
commit 0ec4cd668f
3 changed files with 77 additions and 17 deletions

View File

@ -32,7 +32,7 @@
<template is='dom-repeat' items='[[_entries]]'>
<paper-card heading='[[item.title]]'>
<div class='card-content'>
Integration: [[item.domain]]<br>
Integration: [[_computeIntegrationTitle(localize, item.domain)]]<br>
State: [[item.state]]<br>
Added by: [[item.source]]
</div>
@ -47,7 +47,7 @@
<h1>To be finished</h1>
<div class='entries layout horizontal wrap'>
<template is='dom-repeat' items='[[_progress]]'>
<paper-card heading='[[item.domain]]'>
<paper-card heading='[[_computeIntegrationTitle(localize, item.domain)]]'>
<div class="card-actions">
<paper-button on-click='_continueFlow'>Configure</paper-button>
</div>
@ -59,7 +59,7 @@
<h1>Add integration</h1>
<div class='entries layout horizontal wrap'>
<template is='dom-repeat' items='[[_handlers]]'>
<paper-card heading='[[item]]'>
<paper-card heading='[[_computeIntegrationTitle(localize, item)]]'>
<!-- <div class="card-content">Some content</div> -->
<div class="card-actions">
<paper-button on-click='_createFlow'>Configure</paper-button>
@ -81,7 +81,12 @@
<script>
{
class HaConfigManager extends window.hassMixins.NavigateMixin(Polymer.Element) {
/*
* @appliesMixin window.hassMixins.LocalizeMixin
* @appliesMixin window.hassMixins.EventsMixin
*/
class HaConfigManager extends
window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
static get is() { return 'ha-config-entries'; }
static get properties() {
@ -179,6 +184,10 @@
this.hass.callApi('get', 'config/config_entries/flow')
.then((progress) => { this._progress = progress; });
}
_computeIntegrationTitle(localize, integration) {
return localize(`component.${integration}.config.title`);
}
}
customElements.define(HaConfigManager.is, HaConfigManager);

View File

@ -36,7 +36,7 @@
Success!
</template>
<template is='dom-if' if='[[_equals(step.type, "form")]]'>
[[step.title]]
[[_computeStepTitle(localize, step)]]
</template>
</h2>
<paper-dialog-scrollable>
@ -45,7 +45,7 @@
</template>
<template is='dom-if' if='[[step]]'>
<template is='dom-if' if='[[_equals(step.type, "abort")]]'>
<p>[[step.reason]]</p>
<p>[[_computeStepAbortedReason(localize, step)]]</p>
</template>
<template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
@ -53,18 +53,20 @@
</template>
<template is='dom-if' if='[[_equals(step.type, "form")]]'>
<template is='dom-if' if='[[step.description]]'>
<ha-markdown content='[[step.description]]'></ha-markdown>
<template is='dom-if' if='[[_computeStepDescription(localize, step)]]'>
<ha-markdown content='[[_computeStepDescription(localize, step)]]'></ha-markdown>
</template>
<template is='dom-if' if='[[step.errors.base]]'>
<div class='error'>[[step.errors.base]]</div>
<div class='error'>[[_computeBaseError(localize, step)]]</div>
</template>
<ha-form
data='{{stepData}}'
schema='[[step.data_schema]]'
error='[[step.errors]]'
compute-label='[[_computeLabelCallback(localize, step)]]'
compute-error='[[_computeErrorCallback(localize, step)]]'
></ha-form>
</template>
</template>
@ -85,7 +87,12 @@
</dom-module>
<script>
class HaConfigFlow extends window.hassMixins.EventsMixin(Polymer.Element) {
/*
* @appliesMixin window.hassMixins.LocalizeMixin
* @appliesMixin window.hassMixins.EventsMixin
*/
class HaConfigFlow extends
window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
static get is() { return 'ha-config-flow'; }
static get properties() {
@ -176,6 +183,32 @@ class HaConfigFlow extends window.hassMixins.EventsMixin(Polymer.Element) {
});
}
}
_computeStepAbortedReason(localize, step) {
return localize(`component.${step.domain}.config.abort.${step.reason}`);
}
_computeStepTitle(localize, step) {
return localize(`component.${step.domain}.config.step.${step.step_id}.title`);
}
_computeStepDescription(localize, step) {
return localize(`component.${step.domain}.config.step.${step.step_id}.description`);
}
_computeBaseError(localize, step) {
return localize(`component.${step.domain}.config.error.${step.errors.base}`);
}
_computeLabelCallback(localize, step) {
// Returns a callback for ha-form to calculate labels per schema object
return schema => localize(`component.${step.domain}.config.step.${step.step_id}.data.${schema.name}`);
}
_computeErrorCallback(localize, step) {
// Returns a callback for ha-form to calculate error messages
return error => localize(`component.${step.domain}.config.error.${error}`);
}
}
customElements.define(HaConfigFlow.is, HaConfigFlow);

View File

@ -7,6 +7,8 @@
<link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../../src/util/hass-mixins.html'>
<dom-module id="ha-form">
<template>
<style>
@ -21,17 +23,19 @@
schema='[[item]]'
error='[[_getValue(error, item)]]'
on-data-changed='_valueChanged'
compute-label='[[computeLabel]]'
compute-error='[[computeError]]'
></ha-form>
</template>
</template>
<template is='dom-if' if='[[!_isArray(schema)]]' restamp>
<template is='dom-if' if='[[error]]'>
<div class='error'>[[error]]</div>
<div class='error'>[[computeError(error, schema)]]</div>
</template>
<template is='dom-if' if='[[_equals(schema.type, "string")]]' restamp>
<paper-input
label='[[schema.name]]'
label='[[computeLabel(schema)]]'
value='{{data}}'
></paper-input>
</template>
@ -39,7 +43,7 @@
<template is='dom-if' if='[[_equals(schema.type, "integer")]]' restamp>
<template is='dom-if' if='[[_isRange(schema)]]' restamp>
<div>
[[schema.name]]
[[computeLabel(schema)]]
<paper-slider
pin
value='{{data}}'
@ -50,7 +54,7 @@
</template>
<template is='dom-if' if='[[!_isRange(schema)]]' restamp>
<paper-input
label='[[schema.name]]'
label='[[computeLabel(schema)]]'
value='{{data}}'
type='number'
></paper-input>
@ -60,7 +64,7 @@
<template is='dom-if' if='[[_equals(schema.type, "float")]]' restamp>
<!--TODO-->
<paper-input
label='[[schema.name]]'
label='[[computeLabel(schema)]]'
value='{{data}}'
></paper-input>
</template>
@ -68,11 +72,11 @@
<template is='dom-if' if='[[_equals(schema.type, "boolean")]]' restamp>
<paper-checkbox
checked='{{data}}'
>[[schema.name]]</paper-checkbox>
>[[computeLabel(schema)]]</paper-checkbox>
</template>
<template is='dom-if' if='[[_equals(schema.type, "select")]]' restamp>
<paper-dropdown-menu label='[[schema.name]]'>
<paper-dropdown-menu label='[[computeLabel(schema)]]'>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
@ -102,6 +106,20 @@ class HaForm extends window.hassMixins.EventsMixin(Polymer.Element) {
},
schema: Object,
error: Object,
// A function that will computes the label to be displayed for a given
// schema object.
computeLabel: {
type: Function,
value: schema => schema && schema.name,
},
// A function that will computes an error message to be displayed for a
// given error ID, and relevant schema object
computeError: {
type: Function,
value: (error, schema) => error, // eslint-disable-line no-unused-vars
},
};
}