Fix sun more info card

src/more-infos/more-info-sun.html

@@ -4,18 +4,14 @@
 
 <dom-module id="more-info-sun">
   <template>
-    <div class='data-entry layout justified horizontal' id='rising'>
-      <div class='key'>
-        Rising <relative-ha-datetime datetime-obj="[[risingDate]]"></relative-ha-datetime>
+    <template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
+      <div class='data-entry layout justified horizontal' id='rising'>
+        <div class='key'>
+          <span>[[itemCaption(item)]]</span>
+          <relative-ha-datetime datetime-obj="[[itemDate(item)]]"></relative-ha-datetime>
+        </div>
+        <div class='value'>[[itemValue(item)]]</div>
       </div>
-      <div class='value'>[[risingTime]]</div>
-    </div>
-
-    <div class='data-entry layout justified horizontal' id='setting'>
-      <div class='key'>
-        Setting <relative-ha-datetime datetime-obj="[[settingDate]]"></relative-ha-datetime>
-      </div>
-      <div class='value'>[[settingTime]]</div>
-    </div>
+    </template>
   </template>
 </dom-module>

src/more-infos/more-info-sun.js

@@ -10,39 +10,40 @@ export default new Polymer({
   properties: {
     stateObj: {
       type: Object,
-      observer: 'stateObjChanged',
     },
 
     risingDate: {
       type: Object,
+      computed: 'computeRising(stateObj)',
     },
 
     settingDate: {
       type: Object,
-    },
-
-    risingTime: {
-      type: String,
-    },
-
-    settingTime: {
-      type: String,
+      computed: 'computeSetting(stateObj)',
     },
   },
 
-  stateObjChanged() {
-    this.risingDate = parseDateTime(this.stateObj.attributes.next_rising);
-    this.risingTime = formatTime(this.risingDate);
+  computeRising(stateObj) {
+    return parseDateTime(stateObj.attributes.next_rising);
+  },
 
-    this.settingDate = parseDateTime(this.stateObj.attributes.next_setting);
-    this.settingTime = formatTime(this.settingDate);
+  computeSetting(stateObj) {
+    return parseDateTime(stateObj.attributes.next_setting);
+  },
 
-    const root = Polymer.dom(this);
+  computeOrder(risingDate, settingDate) {
+    return risingDate > settingDate ?  ['set', 'ris'] : ['ris', 'set'];
+  },
 
-    if (self.risingDate > self.settingDate) {
-      root.appendChild(this.$.rising);
-    } else {
-      root.appendChild(this.$.setting);
-    }
+  itemCaption(type) {
+    return type === 'ris' ? 'Rising ' : 'Setting ';
+  },
+
+  itemDate(type) {
+    return type === 'ris' ? this.risingDate : this.settingDate;
+  },
+
+  itemValue(type) {
+    return formatTime(this.itemDate(type));
   },
 });