mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 02:36:37 +00:00
Add input_text component (#408)
* Add input_text component * Update input_text to Polymer 2 * input_text : changes suggested in home-assistant/home-assistant-polymer#408 * input_text : removing disabled option per home-assistant/home-assistant-polymer#408 * Fix file permissions * UI tweaks + cleanup
This commit is contained in:
parent
7333a00384
commit
19187ce518
@ -99,8 +99,7 @@ Polymer({
|
|||||||
|
|
||||||
entityTapped: function (ev) {
|
entityTapped: function (ev) {
|
||||||
var entityId;
|
var entityId;
|
||||||
if (ev.target.classList.contains('paper-toggle-button') ||
|
if (ev.target.nodeName === 'STATE-CARD-INPUT_TEXT' ||
|
||||||
ev.target.classList.contains('paper-icon-button') ||
|
|
||||||
(!ev.model && !this.groupEntity)) {
|
(!ev.model && !this.groupEntity)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
<link rel="import" href="state-card-display.html">
|
<link rel="import" href="state-card-display.html">
|
||||||
<link rel="import" href="state-card-input_select.html">
|
<link rel="import" href="state-card-input_select.html">
|
||||||
<link rel="import" href="state-card-input_slider.html">
|
<link rel="import" href="state-card-input_slider.html">
|
||||||
|
<link rel="import" href="state-card-input_text.html">
|
||||||
<link rel="import" href="state-card-media_player.html">
|
<link rel="import" href="state-card-media_player.html">
|
||||||
<link rel="import" href="state-card-scene.html">
|
<link rel="import" href="state-card-scene.html">
|
||||||
<link rel="import" href="state-card-script.html">
|
<link rel="import" href="state-card-script.html">
|
||||||
|
0
src/state-summary/state-card-display.html
Executable file → Normal file
0
src/state-summary/state-card-display.html
Executable file → Normal file
88
src/state-summary/state-card-input_text.html
Normal file
88
src/state-summary/state-card-input_text.html
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
|
||||||
|
|
||||||
|
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||||
|
|
||||||
|
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
|
||||||
|
|
||||||
|
<link rel="import" href="../components/entity/state-info.html">
|
||||||
|
|
||||||
|
<link rel="import" href="../util/hass-util.html">
|
||||||
|
|
||||||
|
<dom-module id="state-card-input_text">
|
||||||
|
<template>
|
||||||
|
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||||
|
<style>
|
||||||
|
paper-input {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class='horizontal justified layout'>
|
||||||
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
|
<paper-input
|
||||||
|
no-label-float
|
||||||
|
minlength='[[stateObj.attributes.min]]'
|
||||||
|
maxlength='[[stateObj.attributes.max]]'
|
||||||
|
value='{{value}}'
|
||||||
|
auto-validate='[[stateObj.attributes.pattern]]'
|
||||||
|
pattern='[[stateObj.attributes.pattern]]'
|
||||||
|
on-change='selectedValueChanged'
|
||||||
|
on-tap='stopPropagation'
|
||||||
|
placeholder='(empty value)'
|
||||||
|
>
|
||||||
|
</paper-input>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</dom-module>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class StateCardInputText extends Polymer.Element {
|
||||||
|
|
||||||
|
static get is() { return 'state-card-input_text'; }
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
hass: Object,
|
||||||
|
|
||||||
|
inDialog: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
stateObj: {
|
||||||
|
type: Object,
|
||||||
|
observer: 'stateObjectChanged',
|
||||||
|
},
|
||||||
|
|
||||||
|
pattern: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
stateObjectChanged(newVal) {
|
||||||
|
this.value = newVal.state;
|
||||||
|
}
|
||||||
|
|
||||||
|
selectedValueChanged() {
|
||||||
|
if (this.value === this.stateObj.state) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.hass.callService('input_text', 'set_value', {
|
||||||
|
value: this.value,
|
||||||
|
entity_id: this.stateObj.entity_id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
stopPropagation(ev) {
|
||||||
|
ev.stopPropagation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define(StateCardInputText.is, StateCardInputText);
|
||||||
|
</script>
|
0
src/state-summary/state-card-toggle.html
Executable file → Normal file
0
src/state-summary/state-card-toggle.html
Executable file → Normal file
6
src/util/hass-util.html
Normal file → Executable file
6
src/util/hass-util.html
Normal file → Executable file
@ -16,6 +16,7 @@ window.hassUtil.DOMAINS_WITH_CARD = [
|
|||||||
'configurator',
|
'configurator',
|
||||||
'input_select',
|
'input_select',
|
||||||
'input_slider',
|
'input_slider',
|
||||||
|
'input_text',
|
||||||
'media_player',
|
'media_player',
|
||||||
'scene',
|
'scene',
|
||||||
'script',
|
'script',
|
||||||
@ -31,7 +32,7 @@ window.hassUtil.DOMAINS_WITH_MORE_INFO = [
|
|||||||
window.hassUtil.DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];
|
window.hassUtil.DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];
|
||||||
|
|
||||||
window.hassUtil.HIDE_MORE_INFO = [
|
window.hassUtil.HIDE_MORE_INFO = [
|
||||||
'input_select', 'scene', 'script', 'input_slider',
|
'input_select', 'scene', 'script', 'input_slider', 'input_text'
|
||||||
];
|
];
|
||||||
|
|
||||||
window.hassUtil.LANGUAGE = navigator.languages ?
|
window.hassUtil.LANGUAGE = navigator.languages ?
|
||||||
@ -289,6 +290,9 @@ window.hassUtil.domainIcon = function (domain, state) {
|
|||||||
case 'input_slider':
|
case 'input_slider':
|
||||||
return 'mdi:ray-vertex';
|
return 'mdi:ray-vertex';
|
||||||
|
|
||||||
|
case 'input_text':
|
||||||
|
return 'mdi:textbox';
|
||||||
|
|
||||||
case 'light':
|
case 'light':
|
||||||
return 'mdi:lightbulb';
|
return 'mdi:lightbulb';
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user