mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
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
Pascal Vizeli
parent
9153c80229
commit
890dbc6ad7
@ -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">
|
||||
|
||||
121
src/state-summary/state-card-input_number.html
Normal file
121
src/state-summary/state-card-input_number.html
Normal 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>
|
||||
@ -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
6
src/util/hass-util.html
Executable file → Normal 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':
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user