From 5e9303dbf207b526500fba29fda203d3ada93e1a Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 1 Jan 2015 22:02:28 -0800
Subject: [PATCH] Create cards and more-info elements dynamically

---
 .../polymer/cards/state-card-content.html     | 31 ++++++-------
 .../polymer/home-assistant-api.html           |  2 +-
 .../polymer/more-infos/more-info-content.html | 43 +++++++------------
 .../polymer/more-infos/more-info-sun.html     |  6 +--
 4 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/homeassistant/components/http/www_static/polymer/cards/state-card-content.html b/homeassistant/components/http/www_static/polymer/cards/state-card-content.html
index 9d831f7a955..eecf3d2db37 100644
--- a/homeassistant/components/http/www_static/polymer/cards/state-card-content.html
+++ b/homeassistant/components/http/www_static/polymer/cards/state-card-content.html
@@ -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>
diff --git a/homeassistant/components/http/www_static/polymer/home-assistant-api.html b/homeassistant/components/http/www_static/polymer/home-assistant-api.html
index fb8dc40d51d..9342745c44c 100644
--- a/homeassistant/components/http/www_static/polymer/home-assistant-api.html
+++ b/homeassistant/components/http/www_static/polymer/home-assistant-api.html
@@ -25,7 +25,7 @@
   };
 
   PolymerExpressions.prototype.HATimeStripDate = function(timeString) {
-    return timeString.split(' ')[0];
+    return (timeString || "").split(' ')[0];
   };
 
 </script>
diff --git a/homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html b/homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html
index 59dc6623599..3292809cd2d 100644
--- a/homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html
+++ b/homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html
@@ -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>
diff --git a/homeassistant/components/http/www_static/polymer/more-infos/more-info-sun.html b/homeassistant/components/http/www_static/polymer/more-infos/more-info-sun.html
index 9bf74b104b9..20b63b30afa 100644
--- a/homeassistant/components/http/www_static/polymer/more-infos/more-info-sun.html
+++ b/homeassistant/components/http/www_static/polymer/more-infos/more-info-sun.html
@@ -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);