Create cards and more-info elements dynamically

This commit is contained in:
Paulus Schoutsen 2015-01-01 22:02:28 -08:00
parent a0a1573dc9
commit 5e9303dbf2
4 changed files with 34 additions and 48 deletions

View File

@ -3,7 +3,7 @@
<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-content" attributes="api stateObj" noscript> <polymer-element name="state-card-content" attributes="api stateObj">
<template> <template>
<style> <style>
:host { :host {
@ -11,19 +11,20 @@
} }
</style> </style>
<template id="state-card-display"> <div id='card'></div>
<state-card-display
stateObj="{{stateObj}}">
</state-card-display>
</template> </template>
<script>
Polymer({
stateObjChanged: function() {
while (this.$.card.lastChild) {
this.$.card.removeChild(this.$.card.lastChild);
}
<template id="state-card-toggle"> var stateCard = document.createElement("state-card-" + this.stateObj.cardType);
<state-card-toggle stateCard.api = this.api;
stateObj="{{stateObj}}" stateCard.stateObj = this.stateObj;
api="{{api}}"> this.$.card.appendChild(stateCard);
</state-card-display> }
</template> });
</script>
<template bind ref="{{'state-card-' + stateObj.cardType}}"></template>
</template>
</polymer-element> </polymer-element>

View File

@ -25,7 +25,7 @@
}; };
PolymerExpressions.prototype.HATimeStripDate = function(timeString) { PolymerExpressions.prototype.HATimeStripDate = function(timeString) {
return timeString.split(' ')[0]; return (timeString || "").split(' ')[0];
}; };
</script> </script>

View File

@ -5,7 +5,7 @@
<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">
<polymer-element name="more-info-content" attributes="api stateObj" noscript> <polymer-element name="more-info-content" attributes="api stateObj">
<template> <template>
<style> <style>
:host { :host {
@ -13,31 +13,20 @@
} }
</style> </style>
<template id="more-info-light"> <div id='moreInfo'></div>
<more-info-light
api="{{api}}"
stateObj="{{stateObj}}">
</more-info-light>
</template> </template>
<script>
Polymer({
stateObjChanged: function() {
while (this.$.moreInfo.lastChild) {
this.$.moreInfo.removeChild(this.$.moreInfo.lastChild);
}
<template id="more-info-group"> var moreInfo = document.createElement("more-info-" + this.stateObj.moreInfoType);
<more-info-group moreInfo.api = this.api;
api="{{api}}" moreInfo.stateObj = this.stateObj;
stateObj="{{stateObj}}"> this.$.moreInfo.appendChild(moreInfo);
</more-info-group> }
</template> });
</script>
<template id="more-info-sun">
<more-info-sun
api="{{api}}"
stateObj="{{stateObj}}">
</more-info-sun>
</template>
<template id="more-info-default">
<more-info-default stateObj="{{stateObj}}"></more-info-default>
</template>
<template bind ref="{{'more-info-' + stateObj.moreInfoType}}"></template>
</template>
</polymer-element> </polymer-element>

View File

@ -46,11 +46,7 @@
<script> <script>
Polymer({ Polymer({
observe: { stateObjChanged: function() {
'stateObj.attributes': 'setOrder'
},
setOrder: function() {
var rising = ha.util.parseTime(this.stateObj.attributes.next_rising); var rising = ha.util.parseTime(this.stateObj.attributes.next_rising);
var setting = ha.util.parseTime(this.stateObj.attributes.next_setting); var setting = ha.util.parseTime(this.stateObj.attributes.next_setting);