jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extract climate state into a separate component (#820)

Browse Source
This commit is contained in:
Andrey 2018-01-21 08:09:45 +02:00 committed by Paulus Schoutsen
parent 50ed7678a1
commit 3c95559f33
2 changed files with 59 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/ha-climate-state.html Normal file
View File

@ -0,0 +1,56 @@
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="ha-climate-state">
<template>
<style>
.target {
color: var(--primary-text-color);
}
.current {
color: var(--secondary-text-color);
}
.state-label {
font-weight: bold;
text-transform: capitalize;
}
</style>
<div class='target'>
<span class="state-label">
[[stateObj.state]]
</span>
[[computeTargetTemperature(stateObj)]]
</div>
<div class='current'>
Currently: [[stateObj.attributes.current_temperature]]
[[stateObj.attributes.unit_of_measurement]]
</div>
</template>
</dom-module>
<script>
class HaClimateState extends Polymer.Element {
static get is() { return 'ha-climate-state'; }
static get properties() {
return {
stateObj: Object,
};
}
computeTargetTemperature(stateObj) {
if (stateObj.attributes.target_temp_low &&
stateObj.attributes.target_temp_high) {
return `${stateObj.attributes.target_temp_low} - ${stateObj.attributes.target_temp_high} ${stateObj.attributes.unit_of_measurement}`;
} else if (stateObj.attributes.temperature) {
return `${stateObj.attributes.temperature} ${stateObj.attributes.unit_of_measurement}`;
}
return '';
}
}
customElements.define(HaClimateState.is, HaClimateState);
</script>

50
src/state-summary/state-card-climate.html
View File

@ -2,6 +2,7 @@
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../components/ha-climate-state.html">
<link rel="import" href="../components/entity/state-info.html">
<dom-module id="state-card-climate">
@ -13,44 +14,15 @@
line-height: 1.5;
}
.state {
ha-climate-state {
margin-left: 16px;
text-align: right;
}
.target {
color: var(--primary-text-color);
}
.current {
color: var(--secondary-text-color);
}
.state-label {
font-weight: bold;
text-transform: capitalize;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<div class='state'>
<div class='target'>
<span class="state-label">
[[stateObj.state]]
</span>
<span>
[[computeTargetTemperature(stateObj)]]
</span>
</div>
<div class='current'>
<span>Currently: </span>
<span>[[stateObj.attributes.current_temperature]]</span>
<span> </span>
<span>[[stateObj.attributes.unit_of_measurement]]</span>
</div>
</div>
<ha-climate-state state-obj="[[stateObj]]"></ha-climate-state>
</div>
</template>
</dom-module>
@ -68,22 +40,6 @@ class StateCardClimate extends Polymer.Element {
},
};
}
computeTargetTemperature(stateObj) {
var stateTemp = '';
if (stateObj.attributes.target_temp_low &&
stateObj.attributes.target_temp_high) {
stateTemp = stateObj.attributes.target_temp_low + ' - ' +
stateObj.attributes.target_temp_high + ' ' +
stateObj.attributes.unit_of_measurement;
} else if (stateObj.attributes.temperature) {
stateTemp = stateObj.attributes.temperature + ' ' +
stateObj.attributes.unit_of_measurement;
}
return stateTemp;
}
}
customElements.define(StateCardClimate.is, StateCardClimate);
</script>