From 5acb76d3840788d6edddb91d36f3987c18bce619 Mon Sep 17 00:00:00 2001
From: Andrey Mityagin <6134677+avee87@users.noreply.github.com>
Date: Fri, 5 Mar 2021 14:01:18 +0000
Subject: [PATCH] Handle attribute not being present on the weather entity

---
 dist/weather-card.js | 116 +++++++++++++++++++++++--------------------
 1 file changed, 63 insertions(+), 53 deletions(-)

diff --git a/dist/weather-card.js b/dist/weather-card.js
index 32939505..cf1b58aa 100644
--- a/dist/weather-card.js
+++ b/dist/weather-card.js
@@ -185,66 +185,76 @@ class WeatherCard extends LitElement {
   }
 
   renderDetails(stateObj, lang) {
-    const sun = this.hass.states["sun.sun"];
-    let next_rising;
-    let next_setting;
+    this.numberElements++;
+
+    const items = [];
+
+    if (stateObj.attributes.humidity != null) {
+      items.push(html`
+        <ha-icon icon="mdi:water-percent"></ha-icon>
+        ${stateObj.attributes.humidity}<span class="unit"> % </span>
+      `);
+    }
+
+    if (stateObj.attributes.wind_speed != null) {
+      items.push(html`
+        <ha-icon icon="mdi:weather-windy"></ha-icon>
+        ${stateObj.attributes.wind_bearing != null
+          ? windDirections[
+              parseInt((stateObj.attributes.wind_bearing + 11.25) / 22.5)
+            ]
+          : ""}
+        ${stateObj.attributes.wind_speed}<span class="unit">
+          ${this.getUnit("length")}/h
+        </span>
+      `);
+    }
+
+    if (stateObj.attributes.pressure != null) {
+      items.push(html`
+        <ha-icon icon="mdi:gauge"></ha-icon>
+        ${stateObj.attributes.pressure}
+        <span class="unit"> ${this.getUnit("air_pressure")} </span>
+      `);
+    }
+
+    if (stateObj.attributes.visibility != null) {
+      items.push(html`
+        <ha-icon icon="mdi:weather-fog"></ha-icon> ${stateObj.attributes
+          .visibility}<span class="unit"> ${this.getUnit("length")} </span>
+      `);
+    }
 
+    const sun = this.hass.states['sun.sun'];
     if (sun) {
-      next_rising = new Date(sun.attributes.next_rising).toLocaleTimeString(lang, {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                    });
-      next_setting = new Date(sun.attributes.next_setting).toLocaleTimeString(lang, {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                    });
+      const next_rising = new Date(sun.attributes.next_rising).toLocaleTimeString(lang, {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+      const next_setting = new Date(sun.attributes.next_setting).toLocaleTimeString(lang, {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+
+      if (items.length % 2 == 1) {
+        items.push(html`<div />`);
+      }
+
+      items.push(html`
+        <ha-icon icon="mdi:weather-sunset-up"></ha-icon>
+        ${next_rising}
+      `);
+      items.push(html`
+        <ha-icon icon="mdi:weather-sunset-down"></ha-icon>
+        ${next_setting}
+      `);
     }
 
-    this.numberElements++;
+    const listItems = items.map(item => html`<li>${item}</li>`);
 
     return html`
       <ul class="variations ${this.numberElements > 1 ? "spacer" : ""}">
-        <li>
-          <ha-icon icon="mdi:water-percent"></ha-icon>
-          ${stateObj.attributes.humidity}<span class="unit"> % </span>
-        </li>
-        <li>
-          <ha-icon icon="mdi:weather-windy"></ha-icon> ${windDirections[
-            parseInt((stateObj.attributes.wind_bearing + 11.25) / 22.5)
-          ]}
-          ${stateObj.attributes.wind_speed}<span class="unit">
-            ${this.getUnit("length")}/h
-          </span>
-        </li>
-        <li>
-          <ha-icon icon="mdi:gauge"></ha-icon>
-          ${stateObj.attributes.pressure}
-          <span class="unit">
-            ${this.getUnit("air_pressure")}
-          </span>
-        </li>
-        <li>
-          <ha-icon icon="mdi:weather-fog"></ha-icon> ${stateObj.attributes
-            .visibility}<span class="unit">
-            ${this.getUnit("length")}
-          </span>
-        </li>
-        ${next_rising
-          ? html`
-              <li>
-                <ha-icon icon="mdi:weather-sunset-up"></ha-icon>
-                ${next_rising}
-              </li>
-            `
-          : ""}
-        ${next_setting
-          ? html`
-              <li>
-                <ha-icon icon="mdi:weather-sunset-down"></ha-icon>
-                ${next_setting}
-              </li>
-            `
-          : ""}
+        ${listItems}
       </ul>
     `;
   }