Add input_select to the frontend
This commit is contained in:
parent
4a9cb96175
commit
7373733c41
|
@ -2,6 +2,7 @@
|
|||
|
||||
<link rel="import" href="state-card-configurator.html">
|
||||
<link rel="import" href="state-card-display.html">
|
||||
<link rel="import" href="state-card-input_select.html">
|
||||
<link rel="import" href="state-card-media_player.html">
|
||||
<link rel="import" href="state-card-rollershutter.html">
|
||||
<link rel="import" href="state-card-scene.html">
|
||||
|
|
|
@ -4,6 +4,7 @@ import stateCardType from '../util/state-card-type';
|
|||
|
||||
require('./state-card-configurator');
|
||||
require('./state-card-display');
|
||||
require('./state-card-input_select');
|
||||
require('./state-card-media_player');
|
||||
require('./state-card-scene');
|
||||
require('./state-card-rollershutter');
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
|
||||
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<dom-module id="state-card-input_select">
|
||||
<style>
|
||||
paper-dropdown-menu {
|
||||
margin-left: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class='horizontal justified layout'>
|
||||
<state-info state-obj="[[stateObj]]"></state-info>
|
||||
<paper-dropdown-menu no-label-float selected-item-label='{{selectedOption}}' on-tap='stopPropagation'>
|
||||
<paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
|
||||
<template is='dom-repeat' items='[[stateObj.attributes.options]]'>
|
||||
<paper-item>[[item]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
|
@ -0,0 +1,40 @@
|
|||
import hass from '../util/home-assistant-js-instance';
|
||||
import Polymer from '../polymer';
|
||||
|
||||
require('../components/state-info');
|
||||
|
||||
const { serviceActions } = hass;
|
||||
|
||||
export default new Polymer({
|
||||
is: 'state-card-input_select',
|
||||
|
||||
properties: {
|
||||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
selectedOption: {
|
||||
type: String,
|
||||
observer: 'selectedOptionChanged',
|
||||
},
|
||||
},
|
||||
|
||||
computeSelected(stateObj) {
|
||||
return stateObj.attributes.options.indexOf(stateObj.state);
|
||||
},
|
||||
|
||||
selectedOptionChanged(option) {
|
||||
// Selected Option will transition to '' before transitioning to new value
|
||||
if (option === '' || option === this.stateObj.state) {
|
||||
return;
|
||||
}
|
||||
serviceActions.callService('input_select', 'select_option', {
|
||||
option,
|
||||
entity_id: this.stateObj.entityId,
|
||||
});
|
||||
},
|
||||
|
||||
stopPropagation(ev) {
|
||||
ev.stopPropagation();
|
||||
},
|
||||
});
|
|
@ -2,6 +2,7 @@ import canToggle from './can-toggle';
|
|||
|
||||
const DOMAINS_WITH_CARD = [
|
||||
'configurator',
|
||||
'input_select',
|
||||
'media_player',
|
||||
'rollershutter',
|
||||
'scene',
|
||||
|
|
Loading…
Reference in New Issue