mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +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:
parent
f1736024cc
commit
0ec4cd668f
@ -32,7 +32,7 @@
|
|||||||
<template is='dom-repeat' items='[[_entries]]'>
|
<template is='dom-repeat' items='[[_entries]]'>
|
||||||
<paper-card heading='[[item.title]]'>
|
<paper-card heading='[[item.title]]'>
|
||||||
<div class='card-content'>
|
<div class='card-content'>
|
||||||
Integration: [[item.domain]]<br>
|
Integration: [[_computeIntegrationTitle(localize, item.domain)]]<br>
|
||||||
State: [[item.state]]<br>
|
State: [[item.state]]<br>
|
||||||
Added by: [[item.source]]
|
Added by: [[item.source]]
|
||||||
</div>
|
</div>
|
||||||
@ -47,7 +47,7 @@
|
|||||||
<h1>To be finished</h1>
|
<h1>To be finished</h1>
|
||||||
<div class='entries layout horizontal wrap'>
|
<div class='entries layout horizontal wrap'>
|
||||||
<template is='dom-repeat' items='[[_progress]]'>
|
<template is='dom-repeat' items='[[_progress]]'>
|
||||||
<paper-card heading='[[item.domain]]'>
|
<paper-card heading='[[_computeIntegrationTitle(localize, item.domain)]]'>
|
||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<paper-button on-click='_continueFlow'>Configure</paper-button>
|
<paper-button on-click='_continueFlow'>Configure</paper-button>
|
||||||
</div>
|
</div>
|
||||||
@ -59,7 +59,7 @@
|
|||||||
<h1>Add integration</h1>
|
<h1>Add integration</h1>
|
||||||
<div class='entries layout horizontal wrap'>
|
<div class='entries layout horizontal wrap'>
|
||||||
<template is='dom-repeat' items='[[_handlers]]'>
|
<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-content">Some content</div> -->
|
||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<paper-button on-click='_createFlow'>Configure</paper-button>
|
<paper-button on-click='_createFlow'>Configure</paper-button>
|
||||||
@ -81,7 +81,12 @@
|
|||||||
|
|
||||||
<script>
|
<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 is() { return 'ha-config-entries'; }
|
||||||
|
|
||||||
static get properties() {
|
static get properties() {
|
||||||
@ -179,6 +184,10 @@
|
|||||||
this.hass.callApi('get', 'config/config_entries/flow')
|
this.hass.callApi('get', 'config/config_entries/flow')
|
||||||
.then((progress) => { this._progress = progress; });
|
.then((progress) => { this._progress = progress; });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_computeIntegrationTitle(localize, integration) {
|
||||||
|
return localize(`component.${integration}.config.title`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define(HaConfigManager.is, HaConfigManager);
|
customElements.define(HaConfigManager.is, HaConfigManager);
|
||||||
|
@ -36,7 +36,7 @@
|
|||||||
Success!
|
Success!
|
||||||
</template>
|
</template>
|
||||||
<template is='dom-if' if='[[_equals(step.type, "form")]]'>
|
<template is='dom-if' if='[[_equals(step.type, "form")]]'>
|
||||||
[[step.title]]
|
[[_computeStepTitle(localize, step)]]
|
||||||
</template>
|
</template>
|
||||||
</h2>
|
</h2>
|
||||||
<paper-dialog-scrollable>
|
<paper-dialog-scrollable>
|
||||||
@ -45,7 +45,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<template is='dom-if' if='[[step]]'>
|
<template is='dom-if' if='[[step]]'>
|
||||||
<template is='dom-if' if='[[_equals(step.type, "abort")]]'>
|
<template is='dom-if' if='[[_equals(step.type, "abort")]]'>
|
||||||
<p>[[step.reason]]</p>
|
<p>[[_computeStepAbortedReason(localize, step)]]</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
|
<template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
|
||||||
@ -53,18 +53,20 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template is='dom-if' if='[[_equals(step.type, "form")]]'>
|
<template is='dom-if' if='[[_equals(step.type, "form")]]'>
|
||||||
<template is='dom-if' if='[[step.description]]'>
|
<template is='dom-if' if='[[_computeStepDescription(localize, step)]]'>
|
||||||
<ha-markdown content='[[step.description]]'></ha-markdown>
|
<ha-markdown content='[[_computeStepDescription(localize, step)]]'></ha-markdown>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template is='dom-if' if='[[step.errors.base]]'>
|
<template is='dom-if' if='[[step.errors.base]]'>
|
||||||
<div class='error'>[[step.errors.base]]</div>
|
<div class='error'>[[_computeBaseError(localize, step)]]</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<ha-form
|
<ha-form
|
||||||
data='{{stepData}}'
|
data='{{stepData}}'
|
||||||
schema='[[step.data_schema]]'
|
schema='[[step.data_schema]]'
|
||||||
error='[[step.errors]]'
|
error='[[step.errors]]'
|
||||||
|
compute-label='[[_computeLabelCallback(localize, step)]]'
|
||||||
|
compute-error='[[_computeErrorCallback(localize, step)]]'
|
||||||
></ha-form>
|
></ha-form>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
@ -85,7 +87,12 @@
|
|||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
||||||
<script>
|
<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 is() { return 'ha-config-flow'; }
|
||||||
|
|
||||||
static get properties() {
|
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);
|
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-listbox/paper-listbox.html'>
|
||||||
<link rel='import' href='../../../bower_components/paper-item/paper-item.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">
|
<dom-module id="ha-form">
|
||||||
<template>
|
<template>
|
||||||
<style>
|
<style>
|
||||||
@ -21,17 +23,19 @@
|
|||||||
schema='[[item]]'
|
schema='[[item]]'
|
||||||
error='[[_getValue(error, item)]]'
|
error='[[_getValue(error, item)]]'
|
||||||
on-data-changed='_valueChanged'
|
on-data-changed='_valueChanged'
|
||||||
|
compute-label='[[computeLabel]]'
|
||||||
|
compute-error='[[computeError]]'
|
||||||
></ha-form>
|
></ha-form>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<template is='dom-if' if='[[!_isArray(schema)]]' restamp>
|
<template is='dom-if' if='[[!_isArray(schema)]]' restamp>
|
||||||
<template is='dom-if' if='[[error]]'>
|
<template is='dom-if' if='[[error]]'>
|
||||||
<div class='error'>[[error]]</div>
|
<div class='error'>[[computeError(error, schema)]]</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template is='dom-if' if='[[_equals(schema.type, "string")]]' restamp>
|
<template is='dom-if' if='[[_equals(schema.type, "string")]]' restamp>
|
||||||
<paper-input
|
<paper-input
|
||||||
label='[[schema.name]]'
|
label='[[computeLabel(schema)]]'
|
||||||
value='{{data}}'
|
value='{{data}}'
|
||||||
></paper-input>
|
></paper-input>
|
||||||
</template>
|
</template>
|
||||||
@ -39,7 +43,7 @@
|
|||||||
<template is='dom-if' if='[[_equals(schema.type, "integer")]]' restamp>
|
<template is='dom-if' if='[[_equals(schema.type, "integer")]]' restamp>
|
||||||
<template is='dom-if' if='[[_isRange(schema)]]' restamp>
|
<template is='dom-if' if='[[_isRange(schema)]]' restamp>
|
||||||
<div>
|
<div>
|
||||||
[[schema.name]]
|
[[computeLabel(schema)]]
|
||||||
<paper-slider
|
<paper-slider
|
||||||
pin
|
pin
|
||||||
value='{{data}}'
|
value='{{data}}'
|
||||||
@ -50,7 +54,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<template is='dom-if' if='[[!_isRange(schema)]]' restamp>
|
<template is='dom-if' if='[[!_isRange(schema)]]' restamp>
|
||||||
<paper-input
|
<paper-input
|
||||||
label='[[schema.name]]'
|
label='[[computeLabel(schema)]]'
|
||||||
value='{{data}}'
|
value='{{data}}'
|
||||||
type='number'
|
type='number'
|
||||||
></paper-input>
|
></paper-input>
|
||||||
@ -60,7 +64,7 @@
|
|||||||
<template is='dom-if' if='[[_equals(schema.type, "float")]]' restamp>
|
<template is='dom-if' if='[[_equals(schema.type, "float")]]' restamp>
|
||||||
<!--TODO-->
|
<!--TODO-->
|
||||||
<paper-input
|
<paper-input
|
||||||
label='[[schema.name]]'
|
label='[[computeLabel(schema)]]'
|
||||||
value='{{data}}'
|
value='{{data}}'
|
||||||
></paper-input>
|
></paper-input>
|
||||||
</template>
|
</template>
|
||||||
@ -68,11 +72,11 @@
|
|||||||
<template is='dom-if' if='[[_equals(schema.type, "boolean")]]' restamp>
|
<template is='dom-if' if='[[_equals(schema.type, "boolean")]]' restamp>
|
||||||
<paper-checkbox
|
<paper-checkbox
|
||||||
checked='{{data}}'
|
checked='{{data}}'
|
||||||
>[[schema.name]]</paper-checkbox>
|
>[[computeLabel(schema)]]</paper-checkbox>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template is='dom-if' if='[[_equals(schema.type, "select")]]' restamp>
|
<template is='dom-if' if='[[_equals(schema.type, "select")]]' restamp>
|
||||||
<paper-dropdown-menu label='[[schema.name]]'>
|
<paper-dropdown-menu label='[[computeLabel(schema)]]'>
|
||||||
<paper-listbox
|
<paper-listbox
|
||||||
slot="dropdown-content"
|
slot="dropdown-content"
|
||||||
attr-for-selected="item-name"
|
attr-for-selected="item-name"
|
||||||
@ -102,6 +106,20 @@ class HaForm extends window.hassMixins.EventsMixin(Polymer.Element) {
|
|||||||
},
|
},
|
||||||
schema: Object,
|
schema: Object,
|
||||||
error: 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