diff --git a/rmv-card.js b/rmv-card.js index 638be78..a77e9ce 100644 --- a/rmv-card.js +++ b/rmv-card.js @@ -1,9 +1,9 @@ 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); } @@ -11,8 +11,13 @@ class RmvCard extends HTMLElement { 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 = ` - - ` - - 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 += ` +
+ ` + + 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 += ` + + + + ` + tablehtml += ` ` + tablehtml += ` ` + } + tablehtml += ` +
${linename}${destination}` - 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 += ` (${time})` } + tablehtml += `
+ ` + } + else { tablehtml += ` - - ${linename} - ${destination} +
+ + Error: Couldn't get state of entity ${entityId}.
Please check your RMV integration.
+
` - tablehtml += ` ` - if (!this.config.hide_minutes) { tablehtml += `${departureIn}` } - if (this.config.show_time) { tablehtml += ` (${time})` } - tablehtml += `` - - tablehtml += ` ` } - tablehtml += ` - - ` this.content.innerHTML = tablehtml }