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

View File

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

View File

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

View File

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