mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 02:36:37 +00:00
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
Paulus Schoutsen
parent
f1736024cc
commit
0ec4cd668f
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user