Polymer .9: convert state cards

This commit is contained in:
Paulus Schoutsen 2015-05-17 23:09:25 -07:00
parent 4576a1d245
commit c3645e463e
7 changed files with 137 additions and 97 deletions

View File

@ -3,13 +3,27 @@
<link rel="import" href="./state-card-display.html"> <link rel="import" href="./state-card-display.html">
<link rel="import" href="../components/state-info.html"> <link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-configurator" attributes="stateObj" noscript> <dom-module is="state-card-configurator">
<template> <template>
<state-card-display stateObj="{{stateObj}}"></state-card-display> <state-card-display state-obj="[[stateObj]]"></state-card-display>
<!-- pre load the image so the dialog is rendered the proper size --> <!-- pre load the image so the dialog is rendered the proper size -->
<template if="{{stateObj.attributes.description_image}}"> <template if="[[stateObj.attributes.description_image]]">
<img hidden src="{{stateObj.attributes.description_image}}" /> <img hidden src="[[stateObj.attributes.description_image]]" />
</template> </template>
</template> </template>
</polymer-element> </dom-module>
<script>
(function() {
Polymer({
is: 'state-card-configurator',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script>

View File

@ -1,10 +1,10 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="state-card-display.html"> <link rel="import" href="state-card-display.html">
<!-- <link rel="import" href="state-card-toggle.html"> <link rel="import" href="state-card-toggle.html">
<link rel="import" href="state-card-thermostat.html"> <link rel="import" href="state-card-thermostat.html">
<link rel="import" href="state-card-configurator.html"> <link rel="import" href="state-card-configurator.html">
<link rel="import" href="state-card-scene.html"> --> <link rel="import" href="state-card-scene.html">
<dom-module is="state-card-content"> <dom-module is="state-card-content">
<style> <style>
@ -12,50 +12,46 @@
display: block; display: block;
} }
</style> </style>
<template>
<state-card-display state-obj="[[stateObj]]"></state-card-display>
<!-- <div id='cardContainer'></div> -->
</template>
</dom-module> </dom-module>
<script> <script>
Polymer({ (function() {
var uiUtil = window.hass.uiUtil;
Polymer({
is: 'state-card-content', is: 'state-card-content',
properties: { properties: {
stateObj: { stateObj: {
type: Object, type: Object,
value: {}, observer: 'stateObjChanged',
observe: 'stateObjChanged',
} }
}, },
stateObjChanged: function(oldVal, newVal) { stateObjChanged: function(newVal, oldVal) {
console.log('stateObjChanged'); var root = Polymer.dom(this);
return;
var cardContainer = this.$.cardContainer;
if (!newVal) { if (!newVal) {
if (cardContainer.lastChild) { if (root.lastChild) {
cardContainer.removeChild(cardContainer.lastChild); root.removeChild(root.lastChild);
} }
return; return;
} }
if (!oldVal || oldVal.cardType != newVal.cardType) { var newCardType = uiUtil.stateCardType(newVal);
if (cardContainer.lastChild) {
cardContainer.removeChild(cardContainer.lastChild); if (!oldVal || uiUtil.stateCardType(oldVal) != newCardType) {
if (root.lastChild) {
root.removeChild(root.lastChild);
} }
var stateCard = document.createElement("state-card-" + newVal.cardType); var stateCard = document.createElement("state-card-" + newCardType);
stateCard.stateObj = newVal; stateCard.stateObj = newVal;
cardContainer.appendChild(stateCard); root.appendChild(stateCard);
} else { } else {
root.lastChild.stateObj = newVal;
cardContainer.lastChild.stateObj = newVal;
} }
}, },
}); });
})();
</script> </script>

View File

@ -3,25 +3,37 @@
<link rel="import" href="./state-card-display.html"> <link rel="import" href="./state-card-display.html">
<link rel="import" href="./state-card-toggle.html"> <link rel="import" href="./state-card-toggle.html">
<polymer-element name="state-card-scene" attributes="stateObj"> <dom-module is="state-card-scene">
<template> <template>
<template if={{allowToggle}}> <template is='dom-if' if=[[allowToggle]]>
<state-card-toggle stateObj="{{stateObj}}"></state-card-toggle> <state-card-toggle state-obj="[[stateObj]]"></state-card-toggle>
</template> </template>
<template if={{!allowToggle}}> <template is='dom-if' if=[[!allowToggle]]>
<state-card-display stateObj="{{stateObj}}"></state-card-display> <state-card-display state-obj="[[stateObj]]"></state-card-display>
</template> </template>
</template> </template>
<script> </dom-module>
<script>
(function() { (function() {
Polymer({ Polymer({
allowToggle: false, is: 'state-card-scene',
stateObjChanged: function(oldVal, newVal) { properties: {
this.allowToggle = newVal.state === 'off' || stateObj: {
newVal.attributes.active_requested; type: Object,
},
allowToggle: {
type: Boolean,
value: false,
computed: 'computeAllowToggle(stateObj)',
},
},
computeAllowToggle: function(stateObj) {
return stateObj.state === 'off' || stateObj.attributes.active_requested;
}, },
}); });
})(); })();
</script> </script>
</polymer-element>

View File

@ -2,8 +2,7 @@
<link rel="import" href="../components/state-info.html"> <link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-thermostat" attributes="stateObj api"> <dom-module is="state-card-thermostat">
<template>
<style> <style>
.state { .state {
margin-left: 16px; margin-left: 16px;
@ -21,21 +20,33 @@
margin-top: -2px; margin-top: -2px;
} }
</style> </style>
<template>
<div horizontal justified layout> <div class='horizontal justified layout'>
<state-info stateObj="{{stateObj}}"></state-info> <state-info state-obj="[[stateObj]]"></state-info>
<div class='state'> <div class='state'>
<div class='target'> <div class='target'>[[stateObj.stateDisplay]]</div>
{{stateObj.stateDisplay}}
</div>
<div class='current'> <div class='current'>
Currently: {{stateObj.attributes.current_temperature}} {{stateObj.attributes.unit_of_measurement}} <span>Currently: </span>
<span>[[stateObj.attributes.current_temperature]]</span>
<span> </span>
<span>[[stateObj.attributes.unit_of_measurement]]</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
</dom-module>
<script> <script>
Polymer({}); (function() {
Polymer({
is: 'state-card-thermostat',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script> </script>
</polymer-element>

View File

@ -1,36 +1,45 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html"> <link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../bower_components/core-style/core-style.html">
<link rel="import" href="../components/state-info.html"> <link rel="import" href="../components/state-info.html">
<polymer-element name="state-card-toggle" attributes="stateObj"> <dom-module is="state-card-toggle">
<template> <template>
<core-style ref='ha-paper-toggle'></core-style> <div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<div horizontal justified layout> <paper-toggle-button class='self-center'
<state-info flex stateObj="{{stateObj}}"></state-info> checked="[[toggleChecked]]"
on-change="toggleChanged"
<paper-toggle-button self-center on-click="toggleClicked">
checked="{{toggleChecked}}"
on-change="{{toggleChanged}}"
on-click="{{toggleClicked}}">
</paper-toggle-button> </paper-toggle-button>
</div> </div>
</template> </template>
<script> </dom-module>
<script>
(function() {
var serviceActions = window.hass.serviceActions; var serviceActions = window.hass.serviceActions;
Polymer({ Polymer({
toggleChecked: false, is: 'state-card-toggle',
observe: { properties: {
'stateObj.state': 'stateChanged' stateObj: {
type: Object,
observer: 'stateObjChanged',
},
toggleChecked: {
type: Boolean,
value: false,
},
}, },
ready: function() { ready: function() {
this.forceStateChange = this.forceStateChange.bind(this); this.forceStateChange = this.forceStateChange.bind(this);
this.forceStateChange();
}, },
toggleClicked: function(ev) { toggleClicked: function(ev) {
@ -47,22 +56,22 @@
} }
}, },
stateObjChanged: function(oldVal, newVal) { stateObjChanged: function(newVal) {
if (newVal) { if (newVal) {
this.stateChanged(null, newVal.state); this.updateToggle(newVal);
} }
}, },
stateChanged: function(oldVal, newVal) { updateToggle: function(stateObj) {
this.toggleChecked = newVal === "on"; this.toggleChecked = stateObj && stateObj.state === "on";
}, },
forceStateChange: function() { forceStateChange: function() {
this.stateChanged(null, this.stateObj.state); this.updateToggle(this.stateObj);
}, },
turn_on: function() { turn_on: function() {
// We call stateChanged after a successful call to re-sync the toggle // We call updateToggle after a successful call to re-sync the toggle
// with the state. It will be out of sync if our service call did not // 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, // result in the entity to be turned on. Since the state is not changing,
// the resync is not called automatic. // the resync is not called automatic.
@ -70,12 +79,12 @@
}, },
turn_off: function() { turn_off: function() {
// We call stateChanged after a successful call to re-sync the toggle // We call updateToggle after a successful call to re-sync the toggle
// with the state. It will be out of sync if our service call did not // 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, // result in the entity to be turned on. Since the state is not changing,
// the resync is not called automatic. // the resync is not called automatic.
serviceActions.callTurnOff(this.stateObj.entityId).then(this.forceStateChange); serviceActions.callTurnOff(this.stateObj.entityId).then(this.forceStateChange);
}, },
}); });
</script> })();
</polymer-element> </script>

View File

@ -34,8 +34,6 @@
</style> </style>
<template> <template>
<!-- <core-style ref="ha-animations"></core-style> -->
<partial-base narrow="[[narrow]]" togglePanel="[[togglePanel]]"> <partial-base narrow="[[narrow]]" togglePanel="[[togglePanel]]">
<span header-title>{{headerTitle}}</span> <span header-title>{{headerTitle}}</span>

View File

@ -12,7 +12,7 @@
// how to render the card for this state // how to render the card for this state
cardType: { cardType: {
get: function() { get: function() {
console.warning('Deprecated method. Please use hass.uiUtil.stateCardType'); console.warn('Deprecated method. Please use hass.uiUtil.stateCardType');
return window.hass.uiUtil.stateCardType(this); return window.hass.uiUtil.stateCardType(this);
} }
}, },
@ -20,7 +20,7 @@
// how to render the more info of this state // how to render the more info of this state
moreInfoType: { moreInfoType: {
get: function() { get: function() {
console.warning('Deprecated method. Please use hass.uiUtil.stateMoreInfoType'); console.warn('Deprecated method. Please use hass.uiUtil.stateMoreInfoType');
return window.hass.uiUtil.stateMoreInfoType(this); return window.hass.uiUtil.stateMoreInfoType(this);
} }
}, },