Hide empty 'Currently' on climate statecard (#1047)

* hide currently if no value

* zero is falsy. align items

* don't hide falsy values

* computed property instead of observer

* guard null/undefined

src/components/ha-climate-state.html

@@ -3,6 +3,12 @@
 <dom-module id="ha-climate-state">
   <template>
     <style>
+      :host {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
       .target {
         color: var(--primary-text-color);
       }
@@ -24,10 +30,12 @@
       [[computeTarget(stateObj)]]
     </div>
 
+    <template is='dom-if' if='[[currentStatus]]'>
       <div class='current'>
-      Currently: [[computeCurrentStatus(stateObj)]]
+        Currently: [[currentStatus]]
       </div>
     </template>
+  </template>
 </dom-module>
 
 <script>
@@ -37,17 +45,21 @@ class HaClimateState extends Polymer.Element {
   static get properties() {
     return {
       stateObj: Object,
+      currentStatus: {
+        type: String,
+        computed: 'computeCurrentStatus(stateObj)',
+      },
     };
   }
 
   computeCurrentStatus(stateObj) {
-    if ('current_temperature' in stateObj.attributes) {
+    if (stateObj.attributes.current_temperature != null) {
       return `${stateObj.attributes.current_temperature} ${stateObj.attributes.unit_of_measurement}`;
-    } else if ('current_humidity' in stateObj.attributes) {
+    }
+    if (stateObj.attributes.current_humidity != null) {
       return `${stateObj.attributes.current_humidity} ${stateObj.attributes.unit_of_measurement}`;
     }
-
+    return null;
-    return '';
   }
 
   computeTarget(stateObj) {