Fix dashboard not rendering if state of RMV-entity is undefined

rmv-card.js

@@ -1,18 +1,23 @@
 class RmvCard extends HTMLElement {
   sec2time(timeInSeconds) {
-    var pad = function(num, size) { return ('000' + num).slice(size * -1); },
-        time = parseFloat(timeInSeconds).toFixed(3),
-        hours = Math.floor(time / 60 / 60),
-        minutes = Math.floor(time / 60) % 60;
+    var pad = function (num, size) { return ('000' + num).slice(size * -1); },
+      time = parseFloat(timeInSeconds).toFixed(3),
+      hours = Math.floor(time / 60 / 60),
+      minutes = Math.floor(time / 60) % 60;
 
     return pad(hours, 2) + ':' + pad(minutes, 2);
   }
 
   set hass(hass) {
     const entityId = this.config.entity
     const state = hass.states[entityId]
-    if (this.config.friendly_name) { var name = this.config.friendly_name }
-    else { var name = state.attributes['friendly_name'] }
+
+    if (this.config.friendly_name) {
+      var name = this.config.friendly_name
+    }
+    else {
+      var name = state?.attributes['friendly_name'] ?? entityId
+    }
 
     if (!this.content) {
       const card = document.createElement('ha-card')
@@ -56,52 +61,84 @@ class RmvCard extends HTMLElement {
       span.Bahn {
         background-color: #000000;
       }
+      .error-container {
+        display: flex;
+        align-items: center;
+        padding: 12px;
+        gap: 12px;
+        border-radius: 8px;
+        background-color: var(--error-color);
+        color: var(--text-primary-color);
+        font-weight: 500;
+        margin: 8px;
+      }
+      ha-icon {
+        --mdc-icon-size: 24px;
+        flex-shrink: 0;
+      }
+      .error-message {
+        font-size: 0.9em;
+      }
       `
       card.appendChild(style)
       card.appendChild(this.content)
       this.appendChild(card)
     }
 
-    var tablehtml = `
-  <table>
-  `
-
-    const next = {
-      'line': state.attributes['line'],
-      'product': state.attributes['product'],
-      'destination': state.attributes['destination'],
-      'departure_time': state.attributes['departure_time'],
-      'minutes': state.attributes['minutes'],
-      'direction': state.attributes['direction']
-    }
-    const journeys = [next].concat(state.attributes['next_departures'])
-    for (const journey of journeys) {
-      var destination = journey['destination']
-      if (typeof journey['destination'] === 'undefined') {
-        destination = journey['direction']
+    var tablehtml = ''
+
+    if (typeof state !== 'undefined') {
+      tablehtml += `
+    <table>
+    `
+
+      const next = {
+        'line': state.attributes['line'],
+        'product': state.attributes['product'],
+        'destination': state.attributes['destination'],
+        'departure_time': state.attributes['departure_time'],
+        'minutes': state.attributes['minutes'],
+        'direction': state.attributes['direction']
       }
-      const linename = journey['line']
-      const product = journey['product']
+      const journeys = [next].concat(state.attributes['next_departures'])
+
+      for (const journey of journeys) {
+        var destination = journey['destination']
+        if (typeof journey['destination'] === 'undefined') {
+          destination = journey['direction']
+        }
+        const linename = journey['line']
+        const product = journey['product']
+
+        const jtime = new Date(journey['departure_time'] + 'Z')
+        const time = jtime.toISOString().substr(11, 5)
+        const departureIn = this.config.convert_minutes ? this.sec2time(parseInt(journey['minutes']) * 60) : parseInt(journey['minutes'])
+
+        tablehtml += `
+          <tr>
+            <td class="shrink" style="text-align:center;"><span class="line ${product} ${linename}">${linename}</span></td>
+            <td class="expand">${destination}</td>
+        `
+        tablehtml += `          <td class="shrink" style="text-align:right;">`
 
-      const jtime = new Date(journey['departure_time'] + 'Z')
-      const time = jtime.toISOString().substr(11, 5)
-      const departureIn = this.config.convert_minutes ? this.sec2time(parseInt(journey['minutes'])*60) : parseInt(journey['minutes'])
+        if (!this.config.hide_minutes) { tablehtml += `${departureIn}` }
+        if (this.config.show_time) { tablehtml += ` <small>(${time})</small>` }
 
+        tablehtml += `</td>`
+        tablehtml += `        </tr>`
+      }
+      tablehtml += `
+    </table>
+    `
+    }
+    else {
       tablehtml += `
-        <tr>
-          <td class="shrink" style="text-align:center;"><span class="line ${product} ${linename}">${linename}</span></td>
-          <td class="expand">${destination}</td>
+        <div class="error-container">
+          <ha-icon icon="mdi:alert-circle"></ha-icon>
+          <span class="error-message">Error: Couldn't get state of entity <i>${entityId}</i>.<br/>Please check your RMV integration.</span>
+        </div>
       `
-      tablehtml += `          <td class="shrink" style="text-align:right;">`
-      if (!this.config.hide_minutes) { tablehtml += `${departureIn}` }
-      if (this.config.show_time) { tablehtml += ` <small>(${time})</small>` }
-      tablehtml += `</td>`
-
-      tablehtml += `        </tr>`
     }
-    tablehtml += `
-  </table>
-  `
 
     this.content.innerHTML = tablehtml
   }