mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 07:16:39 +00:00
Remove thermostat, hvac, rollershutter (#143)
This commit is contained in:
Justin Weberg
Robbie Trencheny
parent
f3081ed48f
commit
3b5e1f9871
@ -7,7 +7,6 @@
|
|||||||
<link rel='import' href='more-info-group.html'>
|
<link rel='import' href='more-info-group.html'>
|
||||||
<link rel='import' href='more-info-sun.html'>
|
<link rel='import' href='more-info-sun.html'>
|
||||||
<link rel='import' href='more-info-configurator.html'>
|
<link rel='import' href='more-info-configurator.html'>
|
||||||
<link rel='import' href='more-info-thermostat.html'>
|
|
||||||
<link rel='import' href='more-info-script.html'>
|
<link rel='import' href='more-info-script.html'>
|
||||||
<link rel='import' href='more-info-light.html'>
|
<link rel='import' href='more-info-light.html'>
|
||||||
<link rel='import' href='more-info-media_player.html'>
|
<link rel='import' href='more-info-media_player.html'>
|
||||||
@ -15,7 +14,6 @@
|
|||||||
<link rel='import' href='more-info-updater.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-alarm_control_panel.html'>
|
||||||
<link rel='import' href='more-info-lock.html'>
|
<link rel='import' href='more-info-lock.html'>
|
||||||
<link rel='import' href='more-info-hvac.html'>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Polymer({
|
Polymer({
|
||||||
|
|||||||
@ -1,299 +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='../../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-dropdown-menu/paper-dropdown-menu.html'>
|
|
||||||
<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
|
||||||
|
|
||||||
<dom-module id='more-info-hvac'>
|
|
||||||
<template>
|
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-away_mode,
|
|
||||||
.container-aux_heat,
|
|
||||||
.container-temperature,
|
|
||||||
.container-humidity,
|
|
||||||
.container-operation_list,
|
|
||||||
.container-fan_list,
|
|
||||||
.container-swing_list {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-away_mode .container-away_mode,
|
|
||||||
.has-aux_heat .container-aux_heat,
|
|
||||||
.has-temperature .container-temperature,
|
|
||||||
.has-humidity .container-humidity,
|
|
||||||
.has-operation_list .container-operation_list,
|
|
||||||
.has-fan_list .container-fan_list,
|
|
||||||
.has-swing_list .container-swing_list {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-operation_list iron-icon,
|
|
||||||
.container-fan_list iron-icon,
|
|
||||||
.container-swing_list iron-icon {
|
|
||||||
margin: 22px 16px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-dropdown-menu {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-row {
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
|
||||||
<div class='container-temperature'>
|
|
||||||
<div class='single-row'>
|
|
||||||
<div>Target Temperature</div>
|
|
||||||
<paper-slider
|
|
||||||
min='[[stateObj.attributes.min_temp]]'
|
|
||||||
max='[[stateObj.attributes.max_temp]]'
|
|
||||||
step='0.5' pin
|
|
||||||
value='[[stateObj.attributes.temperature]]'
|
|
||||||
on-change='targetTemperatureSliderChanged'>
|
|
||||||
</paper-slider>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='container-humidity'>
|
|
||||||
<div class='single-row'>
|
|
||||||
<div>Target Humidity</div>
|
|
||||||
<paper-slider
|
|
||||||
min='[[stateObj.attributes.min_humidity]]'
|
|
||||||
max='[[stateObj.attributes.max_humidity]]'
|
|
||||||
step='1' pin
|
|
||||||
value='[[stateObj.attributes.humidity]]'
|
|
||||||
on-change='targetHumiditySliderChanged'>
|
|
||||||
</paper-slider>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='container-operation_list'>
|
|
||||||
<div class='controls'>
|
|
||||||
<paper-dropdown-menu label-float label='Operation'>
|
|
||||||
<paper-menu class="dropdown-content" selected="{{operationIndex}}">
|
|
||||||
<template is='dom-repeat'
|
|
||||||
items='[[stateObj.attributes.operation_list]]'>
|
|
||||||
<paper-item>[[item]]</paper-item>
|
|
||||||
</template>
|
|
||||||
</paper-menu>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='container-fan_list'>
|
|
||||||
<paper-dropdown-menu label-float label='Fan Mode'>
|
|
||||||
<paper-menu class="dropdown-content" selected="{{fanIndex}}">
|
|
||||||
<template is='dom-repeat'
|
|
||||||
items='[[stateObj.attributes.fan_list]]'>
|
|
||||||
<paper-item>[[item]]</paper-item>
|
|
||||||
</template>
|
|
||||||
</paper-menu>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='container-swing_list'>
|
|
||||||
<paper-dropdown-menu label-float label='Swing Mode'>
|
|
||||||
<paper-menu class="dropdown-content" selected="{{swingIndex}}">
|
|
||||||
<template is='dom-repeat'
|
|
||||||
items='[[stateObj.attributes.swing_list]]'>
|
|
||||||
<paper-item>[[item]]</paper-item>
|
|
||||||
</template>
|
|
||||||
</paper-menu>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='container-away_mode'>
|
|
||||||
<div class='center horizontal layout single-row'>
|
|
||||||
<div class='flex'>Away Mode</div>
|
|
||||||
<paper-toggle-button
|
|
||||||
checked='[[awayToggleChecked]]'
|
|
||||||
on-change='awayToggleChanged'>
|
|
||||||
</paper-toggle-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='container-aux_heat'>
|
|
||||||
<div class='center horizontal layout single-row'>
|
|
||||||
<div class='flex'>Aux Heat</div>
|
|
||||||
<paper-toggle-button
|
|
||||||
checked='[[auxToggleChecked]]'
|
|
||||||
on-change='auxToggleChanged'>
|
|
||||||
</paper-toggle-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'more-info-hvac',
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
hass: {
|
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
|
|
||||||
stateObj: {
|
|
||||||
type: Object,
|
|
||||||
observer: 'stateObjChanged',
|
|
||||||
},
|
|
||||||
|
|
||||||
operationIndex: {
|
|
||||||
type: Number,
|
|
||||||
value: -1,
|
|
||||||
observer: 'handleOperationmodeChanged',
|
|
||||||
},
|
|
||||||
|
|
||||||
fanIndex: {
|
|
||||||
type: Number,
|
|
||||||
value: -1,
|
|
||||||
observer: 'handleFanmodeChanged',
|
|
||||||
},
|
|
||||||
|
|
||||||
swingIndex: {
|
|
||||||
type: Number,
|
|
||||||
value: -1,
|
|
||||||
observer: 'handleSwingmodeChanged',
|
|
||||||
},
|
|
||||||
|
|
||||||
awayToggleChecked: {
|
|
||||||
type: Boolean,
|
|
||||||
},
|
|
||||||
|
|
||||||
auxToggleChecked: {
|
|
||||||
type: Boolean,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
stateObjChanged: function (newVal) {
|
|
||||||
this.awayToggleChecked = newVal.attributes.away_mode === 'on';
|
|
||||||
this.auxheatToggleChecked = newVal.attributes.aux_heat === 'on';
|
|
||||||
|
|
||||||
if (newVal.attributes.fan_list) {
|
|
||||||
this.fanIndex = newVal.attributes.fan_list.indexOf(
|
|
||||||
newVal.attributes.fan_mode);
|
|
||||||
} else {
|
|
||||||
this.fanIndex = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newVal.attributes.operation_list) {
|
|
||||||
this.operationIndex = newVal.attributes.operation_list.indexOf(
|
|
||||||
newVal.attributes.operation_mode);
|
|
||||||
} else {
|
|
||||||
this.operationIndex = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newVal.attributes.swing_list) {
|
|
||||||
this.swingIndex = newVal.attributes.swing_list.indexOf(
|
|
||||||
newVal.attributes.swing_mode);
|
|
||||||
} else {
|
|
||||||
this.swingIndex = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.async(function () {
|
|
||||||
this.fire('iron-resize');
|
|
||||||
}.bind(this), 500);
|
|
||||||
},
|
|
||||||
|
|
||||||
computeClassNames: function (stateObj) {
|
|
||||||
return 'more-info-hvac ' + window.hassUtil.attributeClassNames(
|
|
||||||
stateObj,
|
|
||||||
['away_mode', 'aux_heat', 'temperature', 'humidity', 'operation_list',
|
|
||||||
'fan_list', 'swing_list']
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
targetTemperatureSliderChanged: function (ev) {
|
|
||||||
var temperature = ev.target.value;
|
|
||||||
|
|
||||||
if (temperature === this.stateObj.attributes.temperature) return;
|
|
||||||
|
|
||||||
this.callServiceHelper('set_temperature', { temperature: temperature });
|
|
||||||
},
|
|
||||||
|
|
||||||
targetHumiditySliderChanged: function (ev) {
|
|
||||||
var humidity = ev.target.value;
|
|
||||||
|
|
||||||
if (humidity === this.stateObj.attributes.humidity) return;
|
|
||||||
|
|
||||||
this.callServiceHelper('set_humidity', { humidity: humidity });
|
|
||||||
},
|
|
||||||
|
|
||||||
awayToggleChanged: function (ev) {
|
|
||||||
var oldVal = this.stateObj.attributes.away_mode === 'on';
|
|
||||||
var newVal = ev.target.checked;
|
|
||||||
|
|
||||||
if (oldVal === newVal) return;
|
|
||||||
|
|
||||||
this.callServiceHelper('set_away_mode', { away_mode: newVal });
|
|
||||||
},
|
|
||||||
|
|
||||||
auxToggleChanged: function (ev) {
|
|
||||||
var oldVal = this.stateObj.attributes.aux_heat === 'on';
|
|
||||||
var newVal = ev.target.checked;
|
|
||||||
|
|
||||||
if (oldVal === newVal) return;
|
|
||||||
|
|
||||||
this.callServiceHelper('set_aux_heat', { aux_heat: newVal });
|
|
||||||
},
|
|
||||||
|
|
||||||
handleFanmodeChanged: function (fanIndex) {
|
|
||||||
var fanInput;
|
|
||||||
// Selected Option will transition to '' before transitioning to new value
|
|
||||||
if (fanIndex === '' || fanIndex === -1) return;
|
|
||||||
|
|
||||||
fanInput = this.stateObj.attributes.fan_list[fanIndex];
|
|
||||||
if (fanInput === this.stateObj.attributes.fan_mode) return;
|
|
||||||
|
|
||||||
this.callServiceHelper('set_fan_mode', { fan_mode: fanInput });
|
|
||||||
},
|
|
||||||
|
|
||||||
handleOperationmodeChanged: function (operationIndex) {
|
|
||||||
var operationInput;
|
|
||||||
// Selected Option will transition to '' before transitioning to new value
|
|
||||||
if (operationIndex === '' || operationIndex === -1) return;
|
|
||||||
|
|
||||||
operationInput = this.stateObj.attributes.operation_list[operationIndex];
|
|
||||||
if (operationInput === this.stateObj.attributes.operation_mode) return;
|
|
||||||
|
|
||||||
this.callServiceHelper('set_operation_mode', { operation_mode: operationInput });
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSwingmodeChanged: function (swingIndex) {
|
|
||||||
var swingInput;
|
|
||||||
// Selected Option will transition to '' before transitioning to new value
|
|
||||||
if (swingIndex === '' || swingIndex === -1) return;
|
|
||||||
|
|
||||||
swingInput = this.stateObj.attributes.swing_list[swingIndex];
|
|
||||||
if (swingInput === this.stateObj.attributes.swing_mode) return;
|
|
||||||
|
|
||||||
this.callServiceHelper('set_swing_mode', { swing_mode: swingInput });
|
|
||||||
},
|
|
||||||
|
|
||||||
callServiceHelper: function (service, data) {
|
|
||||||
// We call stateChanged after a successful call to re-sync the inputs
|
|
||||||
// with the state. It will be out of sync if our service call did not
|
|
||||||
// result in the entity to be turned on. Since the state is not changing,
|
|
||||||
// the resync is not called automatic.
|
|
||||||
/* eslint-disable no-param-reassign */
|
|
||||||
data.entity_id = this.stateObj.entityId;
|
|
||||||
/* eslint-enable no-param-reassign */
|
|
||||||
this.hass.serviceActions.callService('hvac', service, data)
|
|
||||||
.then(function () {
|
|
||||||
this.stateObjChanged(this.stateObj);
|
|
||||||
}.bind(this));
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,119 +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='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
|
|
||||||
|
|
||||||
<dom-module id='more-info-thermostat'>
|
|
||||||
<template>
|
|
||||||
<style is="custom-style" include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
paper-slider {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.away-mode-toggle {
|
|
||||||
display: none;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-away_mode .away-mode-toggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class$='[[computeClassNames(stateObj)]]'>
|
|
||||||
<div>
|
|
||||||
<div>Target Temperature</div>
|
|
||||||
<paper-slider
|
|
||||||
min='[[tempMin]]' max='[[tempMax]]' step='0.5'
|
|
||||||
value='[[targetTemperatureSliderValue]]' pin
|
|
||||||
on-change='targetTemperatureSliderChanged'>
|
|
||||||
</paper-slider>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='away-mode-toggle'>
|
|
||||||
<div class='center horizontal layout'>
|
|
||||||
<div class='flex'>Away Mode</div>
|
|
||||||
<paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
|
|
||||||
</paper-toggle-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'more-info-thermostat',
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
hass: {
|
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
|
|
||||||
stateObj: {
|
|
||||||
type: Object,
|
|
||||||
observer: 'stateObjChanged',
|
|
||||||
},
|
|
||||||
|
|
||||||
tempMin: {
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
|
|
||||||
tempMax: {
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
|
|
||||||
targetTemperatureSliderValue: {
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
|
|
||||||
awayToggleChecked: {
|
|
||||||
type: Boolean,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
stateObjChanged: function (newVal) {
|
|
||||||
this.targetTemperatureSliderValue = newVal.attributes.temperature;
|
|
||||||
this.awayToggleChecked = newVal.attributes.away_mode === 'on';
|
|
||||||
|
|
||||||
this.tempMin = newVal.attributes.min_temp;
|
|
||||||
this.tempMax = newVal.attributes.max_temp;
|
|
||||||
},
|
|
||||||
|
|
||||||
computeClassNames: function (stateObj) {
|
|
||||||
return window.hassUtil.attributeClassNames(stateObj, ['away_mode']);
|
|
||||||
},
|
|
||||||
|
|
||||||
targetTemperatureSliderChanged: function (ev) {
|
|
||||||
this.hass.serviceActions.callService('thermostat', 'set_temperature', {
|
|
||||||
entity_id: this.stateObj.entityId,
|
|
||||||
temperature: ev.target.value,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleChanged: function (ev) {
|
|
||||||
const newVal = ev.target.checked;
|
|
||||||
|
|
||||||
if (newVal && this.stateObj.attributes.away_mode === 'off') {
|
|
||||||
this.service_set_away(true);
|
|
||||||
} else if (!newVal && this.stateObj.attributes.away_mode === 'on') {
|
|
||||||
this.service_set_away(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
service_set_away: function (awayMode) {
|
|
||||||
// We call stateChanged after a successful call to re-sync the toggle
|
|
||||||
// with the state. It will be out of sync if our service call did not
|
|
||||||
// result in the entity to be turned on. Since the state is not changing,
|
|
||||||
// the resync is not called automatic.
|
|
||||||
this.hass.serviceActions.callService(
|
|
||||||
'thermostat', 'set_away_mode',
|
|
||||||
{ away_mode: awayMode, entity_id: this.stateObj.entityId })
|
|
||||||
|
|
||||||
.then(function () { this.stateObjChanged(this.stateObj); }.bind(this));
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -4,14 +4,11 @@
|
|||||||
<link rel="import" href="state-card-configurator.html">
|
<link rel="import" href="state-card-configurator.html">
|
||||||
<link rel="import" href="state-card-cover.html">
|
<link rel="import" href="state-card-cover.html">
|
||||||
<link rel="import" href="state-card-display.html">
|
<link rel="import" href="state-card-display.html">
|
||||||
<link rel="import" href="state-card-hvac.html">
|
|
||||||
<link rel="import" href="state-card-input_select.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_slider.html">
|
||||||
<link rel="import" href="state-card-media_player.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">
|
<link rel="import" href="state-card-scene.html">
|
||||||
<link rel="import" href="state-card-script.html">
|
<link rel="import" href="state-card-script.html">
|
||||||
<link rel="import" href="state-card-thermostat.html">
|
|
||||||
<link rel="import" href="state-card-toggle.html">
|
<link rel="import" href="state-card-toggle.html">
|
||||||
<link rel="import" href="state-card-weblink.html">
|
<link rel="import" href="state-card-weblink.html">
|
||||||
|
|
||||||
|
|||||||
@ -1,44 +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="../components/entity/state-info.html">
|
|
||||||
|
|
||||||
<dom-module id="state-card-hvac">
|
|
||||||
<template>
|
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
.state {
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
|
|
||||||
margin-left: 16px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
text-align: right;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
|
||||||
<div class='state'>[[stateObj.state]]</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'state-card-hvac',
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
inDialog: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
stateObj: {
|
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,79 +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-icon-button/paper-icon-button.html">
|
|
||||||
|
|
||||||
<link rel="import" href="../components/entity/state-info.html">
|
|
||||||
|
|
||||||
<dom-module id="state-card-rollershutter">
|
|
||||||
<template>
|
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state {
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
width: 127px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
|
||||||
<div class='state'>
|
|
||||||
<paper-icon-button icon="mdi:arrow-up" on-tap='onMoveUpTap'
|
|
||||||
disabled='[[computeIsFullyClosed(stateObj)]]'></paper-icon-button>
|
|
||||||
<paper-icon-button icon="mdi:stop" on-tap='onStopTap'></paper-icon-button>
|
|
||||||
<paper-icon-button icon="mdi:arrow-down" on-tap='onMoveDownTap'
|
|
||||||
disabled='[[computeIsFullyOpen(stateObj)]]'></paper-icon-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'state-card-rollershutter',
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
hass: {
|
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
|
|
||||||
inDialog: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
stateObj: {
|
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computeIsFullyOpen: function (stateObj) {
|
|
||||||
return stateObj.attributes.current_position === 100;
|
|
||||||
},
|
|
||||||
|
|
||||||
computeIsFullyClosed: function (stateObj) {
|
|
||||||
return stateObj.attributes.current_position === 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
onMoveUpTap: function () {
|
|
||||||
this.hass.serviceActions.callService('rollershutter', 'move_up',
|
|
||||||
{ entity_id: this.stateObj.entityId });
|
|
||||||
},
|
|
||||||
|
|
||||||
onMoveDownTap: function () {
|
|
||||||
this.hass.serviceActions.callService('rollershutter', 'move_down',
|
|
||||||
{ entity_id: this.stateObj.entityId });
|
|
||||||
},
|
|
||||||
|
|
||||||
onStopTap: function () {
|
|
||||||
this.hass.serviceActions.callService('rollershutter', 'stop',
|
|
||||||
{ entity_id: this.stateObj.entityId });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,65 +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="../components/entity/state-info.html">
|
|
||||||
|
|
||||||
<dom-module id="state-card-thermostat">
|
|
||||||
<template>
|
|
||||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply(--paper-font-body1);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state {
|
|
||||||
margin-left: 16px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.target {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.current {
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
|
||||||
<div class='state'>
|
|
||||||
<div class='target'>[[computeTargetTemperature(stateObj)]]</div>
|
|
||||||
|
|
||||||
<div class='current'>
|
|
||||||
<span>Currently: </span>
|
|
||||||
<span>[[stateObj.attributes.current_temperature]]</span>
|
|
||||||
<span> </span>
|
|
||||||
<span>[[stateObj.attributes.unit_of_measurement]]</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'state-card-thermostat',
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
inDialog: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
stateObj: {
|
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computeTargetTemperature: function (stateObj) {
|
|
||||||
return stateObj.attributes.temperature + ' ' + stateObj.attributes.unit_of_measurement;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user