Skip to content

Instantly share code, notes, and snippets.

@subzero79
Created March 10, 2019 07:20
Show Gist options
  • Save subzero79/4abd170a94ea4cbc13689f00a49cb48b to your computer and use it in GitHub Desktop.
Save subzero79/4abd170a94ea4cbc13689f00a49cb48b to your computer and use it in GitHub Desktop.
class CustomFanCard extends Polymer.Element {
static get template() {
return Polymer.html`
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
.speed {
min-width: 30px;
max-width: 30px;
margin-left: 0px;
margin-right: 0px;
}
ha-entity-toggle {
margin-left: 16px;
}
</style>
<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
<div class='horizontal justified layout' on-click="stopPropagation">
<mwc-button
class='speed'
toggles name="1"
on-click='setSpeed'
disabled='[[_is1Speed]]'>1</mwc-button>
<mwc-button
class='speed'
toggles name="2"
on-click='setSpeed'
disabled='[[_is2Speed]]'>2</mwc-button>
<mwc-button
class='speed'
toggles name="3"
on-click='setSpeed'
disabled='[[_is3Speed]]'>3</mwc-button>
<mwc-button
class='speed'
toggles name="4"
on-click='setSpeed'
disabled='[[_is4Speed]]'>4</mwc-button>
<mwc-button
class='speed'
toggles name="5"
on-click='setSpeed'
disabled='[[_is5Speed]]'>5</mwc-button>
<mwc-button
class='speed'
toggles name="6"
on-click='setSpeed'
disabled='[[_is6Speed]]'>6</mwc-button>
<ha-entity-toggle hass="[[hass]]" state-obj="[[_stateObj]]"></ha-entity-toggle>
</div>
</hui-generic-entity-row>
`;
}
static get properties() {
return {
hass: {
type: Object,
observer: 'hassChanged'
},
_config: Object,
_stateObj: Object,
_is1Speed: Boolean,
_is2Speed: Boolean,
_is3Speed: Boolean,
_is4Speed: Boolean,
_is5Speed: Boolean,
_is6Speed: Boolean
}
}
setConfig(config) {
this._config = config;
}
hassChanged(hass) {
const config = this._config;
const stateObj = hass.states[config.entity];
let speed;
if (stateObj && stateObj.attributes) {
speed = stateObj.attributes.speed || 'off';
}
this.setProperties({
_stateObj: stateObj,
_is1Speed: speed === '1',
_is2Speed: speed === '2',
_is3Speed: speed == '3',
_is4Speed: speed == '4',
_is5Speed: speed == '5',
_is6Speed: speed == '6'
});
}
stopPropagation(e) {
e.stopPropagation();
}
setSpeed(e) {
const speed = e.currentTarget.getAttribute('name');
this.hass.callService('fan', 'set_speed', {
entity_id: this._config.entity, speed: speed
});
}
}
customElements.define('custom-fan-card', CustomFanCard);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment