Paulus Schoutsen e41b5238c2
Config entry tweaks (#960)
* Add support for picking an option to ha-form

* Fix overlay of paper-dialog inside app-layout

* Handle flows that finish/abort straight away

* Lint

* Remove alerts

* Remove userCreatedFlow from properties

* Don't use setProperties for 1 property
2018-03-05 13:06:22 -08:00

131 lines
3.6 KiB
HTML

<link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href='../../../bower_components/paper-input/paper-input.html'>
<link rel="import" href='../../../bower_components/paper-slider/paper-slider.html'>
<link rel="import" href='../../../bower_components/paper-checkbox/paper-checkbox.html'>
<link rel='import' href='../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<dom-module id="ha-form">
<template>
<style>
.error {
color: red;
}
</style>
<template is='dom-if' if='[[_isArray(schema)]]' restamp>
<template is='dom-repeat' items='[[schema]]'>
<ha-form
data='[[_getValue(data, item)]]'
schema='[[item]]'
error='[[_getValue(error, item)]]'
on-data-changed='_valueChanged'
></ha-form>
</template>
</template>
<template is='dom-if' if='[[!_isArray(schema)]]' restamp>
<template is='dom-if' if='[[error]]'>
<div class='error'>[[error]]</div>
</template>
<template is='dom-if' if='[[_equals(schema.type, "string")]]' restamp>
<paper-input
label='[[schema.name]]'
value='{{data}}'
></paper-input>
</template>
<template is='dom-if' if='[[_equals(schema.type, "integer")]]' restamp>
<template is='dom-if' if='[[_isRange(schema)]]' restamp>
<div>
[[schema.name]]
<paper-slider
pin
value='{{data}}'
min='[[schema.valueMin]]'
max='[[schema.valueMax]]'
></paper-slider>
</div>
</template>
<template is='dom-if' if='[[!_isRange(schema)]]' restamp>
<paper-input
label='[[schema.name]]'
value='{{data}}'
type='number'
></paper-input>
</template>
</template>
<template is='dom-if' if='[[_equals(schema.type, "float")]]' restamp>
<!--TODO-->
<paper-input
label='[[schema.name]]'
value='{{data}}'
></paper-input>
</template>
<template is='dom-if' if='[[_equals(schema.type, "boolean")]]' restamp>
<paper-checkbox
checked='{{data}}'
>[[schema.name]]</paper-checkbox>
</template>
<template is='dom-if' if='[[_equals(schema.type, "select")]]' restamp>
<paper-dropdown-menu label='[[schema.name]]'>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
selected="{{data}}"
>
<template is='dom-repeat'
items='[[schema.options]]'>
<paper-item item-name='[[item]]'>[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
</template>
</template>
</dom-module>
<script>
class HaForm extends window.hassMixins.EventsMixin(Polymer.Element) {
static get is() { return 'ha-form'; }
static get properties() {
return {
data: {
type: Object,
notify: true,
},
schema: Object,
error: Object,
};
}
_isArray(val) {
return Array.isArray(val);
}
_isRange(schema) {
return ('valueMin' in schema) && ('valueMax' in schema);
}
_equals(a, b) {
return a === b;
}
_getValue(obj, item) {
return obj[item.name];
}
_valueChanged(ev) {
this.set(['data', ev.model.item.name], ev.detail.value);
}
}
customElements.define(HaForm.is, HaForm);
</script>