Add a more info card for the fan component (#177)

* Add a more info card for fan and make the fan icon spin

* Add direction support to fan more info

* Fix ESLint errors

* Fix ESLint errors

* Remove spinning fan icon :(
This commit is contained in:
Robbie Trencheny 2017-01-20 22:03:06 -08:00 committed by Paulus Schoutsen
parent 76016391e0
commit abe798d121
3 changed files with 173 additions and 10 deletions

View File

@ -1,19 +1,20 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='more-info-alarm_control_panel.html'>
<link rel='import' href='more-info-automation.html'>
<link rel='import' href='more-info-camera.html'>
<link rel='import' href='more-info-climate.html'>
<link rel='import' href='more-info-configurator.html'>
<link rel='import' href='more-info-cover.html'>
<link rel='import' href='more-info-default.html'>
<link rel='import' href='more-info-fan.html'>
<link rel='import' href='more-info-group.html'>
<link rel='import' href='more-info-sun.html'>
<link rel='import' href='more-info-configurator.html'>
<link rel='import' href='more-info-script.html'>
<link rel='import' href='more-info-light.html'>
<link rel='import' href='more-info-media_player.html'>
<link rel='import' href='more-info-camera.html'>
<link rel='import' href='more-info-updater.html'>
<link rel='import' href='more-info-alarm_control_panel.html'>
<link rel='import' href='more-info-lock.html'>
<link rel='import' href='more-info-media_player.html'>
<link rel='import' href='more-info-script.html'>
<link rel='import' href='more-info-sun.html'>
<link rel='import' href='more-info-updater.html'>
<script>
Polymer({

View File

@ -0,0 +1,162 @@
<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-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
<dom-module id='more-info-fan'>
<template>
<style is='custom-style' include='iron-flex'></style>
<style>
.container-speed_list,
.container-direction {
display: none;
}
.has-speed_list .container-speed_list,
.has-direction .container-direction {
display: block;
}
</style>
<div class$='[[computeClassNames(stateObj)]]'>
<div class="container-speed_list">
<paper-dropdown-menu label-float label='Speed'>
<paper-menu class='dropdown-content' selected='{{speedIndex}}'>
<template is='dom-repeat'
items='[[stateObj.attributes.speed_list]]'>
<paper-item>[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
</div>
<div class='container-oscillating' hidden$='[[computeHideOscillation(stateObj)]]'>
<div class='center horizontal layout single-row'>
<div class='flex'>Oscillate</div>
<paper-toggle-button
checked='[[oscillationToggleChecked]]'
on-change='oscillationToggleChanged'>
</paper-toggle-button>
</div>
</div>
<div class='container-direction'>
<div class='direction'>
<div>Direction</div>
<paper-icon-button icon='mdi:rotate-left'
on-tap='onDirectionLeft' title='Left'
disabled='[[computeIsRotatingLeft(stateObj)]]'></paper-icon-button>
<paper-icon-button icon='mdi:rotate-right'
on-tap='onDirectionRight' title='Right'
disabled='[[computeIsRotatingRight(stateObj)]]'></paper-icon-button>
</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'more-info-fan',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
observer: 'stateObjChanged',
},
speedIndex: {
type: Number,
value: -1,
observer: 'speedChanged',
},
oscillationToggleChecked: {
type: Boolean,
},
},
stateObjChanged: function (newVal) {
this.oscillationToggleChecked = newVal.attributes.oscillating;
if (newVal.attributes.speed_list) {
this.speedIndex = newVal.attributes.speed_list.indexOf(
newVal.attributes.speed);
} else {
this.speedIndex = -1;
}
this.async(function () {
this.fire('iron-resize');
}.bind(this), 500);
},
computeClassNames: function (stateObj) {
return 'more-info-fan ' + window.hassUtil.attributeClassNames(
stateObj, ['oscillating', 'speed_list', 'direction']
);
},
speedChanged: function (speedIndex) {
var speedInput;
// Selected Option will transition to '' before transitioning to new value
if (speedIndex === '' || speedIndex === -1) return;
speedInput = this.stateObj.attributes.speed_list[speedIndex];
if (speedInput === this.stateObj.attributes.speed) return;
this.hass.serviceActions.callService('fan', 'turn_on', {
entity_id: this.stateObj.entityId,
speed: speedInput,
});
},
oscillationToggleChanged: function (ev) {
var oldVal = this.stateObj.attributes.oscillating;
var newVal = ev.target.checked;
if (oldVal === newVal) return;
this.hass.serviceActions.callService('fan', 'oscillate', {
entity_id: this.stateObj.entityId,
oscillating: newVal,
});
},
onDirectionLeft: function () {
this.hass.serviceActions.callService('fan', 'set_direction', {
entity_id: this.stateObj.entityId,
direction: 'left'
});
},
onDirectionRight: function () {
this.hass.serviceActions.callService('fan', 'set_direction', {
entity_id: this.stateObj.entityId,
direction: 'right'
});
},
computeIsRotatingLeft: function (stateObj) {
return stateObj.attributes.direction === 'left';
},
computeIsRotatingRight: function (stateObj) {
return stateObj.attributes.direction === 'right';
},
computeHideOscillation: function (stateObj) {
return stateObj.attributes.direction;
},
});
</script>

View File

@ -23,9 +23,9 @@ window.hassUtil.DOMAINS_WITH_CARD = [
];
window.hassUtil.DOMAINS_WITH_MORE_INFO = [
'light', 'group', 'sun', 'climate', 'configurator', 'cover',
'script', 'media_player', 'camera', 'updater', 'alarm_control_panel',
'lock', 'automation',
'alarm_control_panel', 'automation', 'camera', 'climate', 'configurator',
'cover', 'fan', 'group', 'light', 'lock', 'media_player', 'script',
'sun', 'updater',
];
window.hassUtil.DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];