Rename input_slider to input_number and add numeric text box option (#431)

* * Rename input_slider to input_number
* Update input_number to Polymer 2.0
* Update input_number to optionally display slider, input box, or both

* input_number support either input box or slider mode, but not both

* input_number : change service from select_value to set_value
This commit is contained in:
BioSehnsucht 2017-10-03 14:34:43 -05:00 committed by Pascal Vizeli
parent 9153c80229
commit 890dbc6ad7
4 changed files with 125 additions and 87 deletions

View File

@ -5,7 +5,7 @@
<link rel="import" href="state-card-cover.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_slider.html">
<link rel="import" href="state-card-input_number.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-scene.html">

View File

@ -0,0 +1,121 @@
<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="../../bower_components/paper-slider/paper-slider.html">
<link rel="import" href="../components/entity/state-info.html">
<link rel="import" href="../util/hass-util.html">
<dom-module id="state-card-input_number">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
paper-slider {
margin-left: 16px;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<div hidden='[[hiddenslider]]'>
<paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin
on-change='selectedValueChanged' on-tap='stopPropagation'
>
</paper-slider>
</div>
<paper-input
no-label-float
auto-validate
pattern='[0-9]*'
value='{{value}}'
type='number'
on-change='selectedValueChanged'
on-tap='stopPropagation'
hidden='[[hiddenbox]]'
>
</paper-input>
</div>
</template>
</dom-module>
<script>
class StateCardInputNumber extends Polymer.Element {
static get is() { return 'state-card-input_number'; }
static get properties() {
return {
hass: Object,
hiddenbox: {
type: Boolean,
value: true,
},
hiddenslider: {
type: Boolean,
value: true,
},
inDialog: {
type: Boolean,
value: false,
},
stateObj: {
type: Object,
observer: 'stateObjectChanged',
},
min: {
type: Number,
value: 0,
},
max: {
type: Number,
value: 100,
},
maxlength: {
type: Number,
value: 3
},
step: {
type: Number,
},
value: {
type: Number,
},
};
}
stateObjectChanged(newVal) {
this.min = Number(newVal.attributes.min);
this.max = Number(newVal.attributes.max);
this.step = Number(newVal.attributes.step);
this.value = Number(newVal.state);
this.maxlength = this.max.legnth;
if (newVal.attributes.mode === 'slider') {
this.hiddenbox = true;
this.hiddenslider = false;
} else {
this.hiddenbox = false;
this.hiddenslider = true;
}
}
selectedValueChanged() {
if (this.value === Number(this.stateObj.state)) {
return;
}
this.hass.callService('input_number', 'set_value', {
value: this.value,
entity_id: this.stateObj.entity_id,
});
}
stopPropagation(ev) {
ev.stopPropagation();
}
}
customElements.define(StateCardInputNumber.is, StateCardInputNumber);
</script>

View File

@ -1,83 +0,0 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
<link rel="import" href="../components/entity/state-info.html">
<dom-module id="state-card-input_slider">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
paper-slider {
margin-left: 16px;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<paper-slider
min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin
on-change='selectedValueChanged' on-tap='stopPropagation'>
</paper-slider>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-input_slider',
properties: {
hass: {
type: Object,
},
inDialog: {
type: Boolean,
value: false,
},
stateObj: {
type: Object,
observer: 'stateObjectChanged',
},
min: {
type: Number,
value: 0,
},
max: {
type: Number,
value: 100,
},
step: {
type: Number,
},
value: {
type: Number,
},
},
stateObjectChanged: function (newVal) {
this.min = Number(newVal.attributes.min);
this.max = Number(newVal.attributes.max);
this.step = Number(newVal.attributes.step);
this.value = Number(newVal.state);
},
selectedValueChanged: function () {
if (this.value === Number(this.stateObj.state)) {
return;
}
this.hass.callService('input_slider', 'select_value', {
value: this.value,
entity_id: this.stateObj.entity_id,
});
},
stopPropagation: function (ev) {
ev.stopPropagation();
},
});
</script>

6
src/util/hass-util.html Executable file → Normal file
View File

@ -15,7 +15,7 @@ window.hassUtil.DOMAINS_WITH_CARD = [
'cover',
'configurator',
'input_select',
'input_slider',
'input_number',
'input_text',
'media_player',
'scene',
@ -32,7 +32,7 @@ window.hassUtil.DOMAINS_WITH_MORE_INFO = [
window.hassUtil.DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];
window.hassUtil.HIDE_MORE_INFO = [
'input_select', 'scene', 'script', 'input_slider', 'input_text'
'input_select', 'scene', 'script', 'input_number', 'input_text'
];
window.hassUtil.LANGUAGE = navigator.languages ?
@ -289,7 +289,7 @@ window.hassUtil.domainIcon = function (domain, state) {
case 'input_select':
return 'mdi:format-list-bulleted';
case 'input_slider':
case 'input_number':
return 'mdi:ray-vertex';
case 'input_text':