Add heading and config options what to show (#9)

* Add heading and config options what to show

* Heading added to the data table
* Option to show/hide from, default is to show
* Option to show hide heading, default is to hide

* Document new config options

* Add arriving station in docs

Author: Miicroo

README.md

@@ -6,6 +6,7 @@ Styled entities using the Västtrafik theme in a lovelace entities card. All tra
 This card also displays:
 * When the next vehicle is leaving
 * Departing station (which requires [this version](https://github.com/Miicroo/ha-vasttrafik) of the Västtrafik sensor)
+* Heading / arriving station
 * When you have to leave home in order to catch the vehicle (also known as the sensor delay).
 * Sorting of entities, showing the next entity to depart first
 
@@ -20,6 +21,8 @@ This card also displays:
 | title        | string  | Västtrafik   | The title of the card
 | municipality | string  | Göteborg     | The municipality of the station(s), [more info here](https://github.com/Miicroo/lovelace-vasttrafik-card#municipality)
 | sort         | boolean | true         | Whether to sort the departures (earliest first), or keep the entities in the given order
+| showFrom     | boolean | true         | Whether to show the departing station or not
+| showTo       | boolean | false        | Whether to show the arriving station or not
 
 ## Municipality
 As there are many lines with the same name or number in Västra Götaland, the styles are split by municipality. For accuracy, choose the municipality of your departing sensor(s).

dist/vasttrafik-card.js

@@ -23,31 +23,37 @@ customElements.whenDefined('card-tools').then(() => {
                 'en': {
                     'departureTime': 'Time',
                     'departureStation': 'From',
+                    'heading': 'Heading to',
                     'leaveHome': 'Leave in',
                 },
                 'sv': {
                     'departureTime': 'Avgår kl.',
                     'departureStation': 'Från',
+                    'heading': 'Till',
                     'leaveHome': 'Gå om',
                 },
                 'nb': {
                     'departureTime': 'Avgang kl.',
                     'departureStation': 'Går fra',
+                    'heading': 'Til',
                     'leaveHome': 'Gå om',
                 },
                 'nn': {
                     'departureTime': 'Avgang kl.',
                     'departureStation': 'Går fra',
+                    'heading': 'Til',
                     'leaveHome': 'Gå om',
                 },
                 'da': {
                     'departureTime': 'Afgang kl.',
                     'departureStation': 'Afgår fra',
+                    'heading': 'Til',
                     'leaveHome': 'Afsted om',
                 },
                 'nl': {
                     'departureTime': 'Vertrektijd',
                     'departureStation': 'Van',
+                    'heading': 'Naar',
                     'leaveHome': 'Vertrek over',
                 },
             };
@@ -56,6 +62,8 @@ customElements.whenDefined('card-tools').then(() => {
         setConfig(config) {
             this.title = config.title || 'Västtrafik';
             this.shouldSort = config.sort !== undefined ? !!(config.sort) : true;
+            this.showFrom = config.showFrom !== undefined ? !!(config.showFrom) : true;
+            this.showTo = config.showTo !== undefined ? !!(config.showTo) : false;
             this.municipality = config.municipality || 'Göteborg';
             this.entities = this._parseEntities(config.entities);
             this.config = config;
@@ -93,7 +101,8 @@ customElements.whenDefined('card-tools').then(() => {
                             <tr>
                                 <th align="left"></th>
                                 <th align="left">${this._getTranslatedText('departureTime')}</th>
-                                <th align="left">${this._getTranslatedText('departureStation')}</th>
+                                ${this.showFrom ? ct.LitHtml`<th align="left">${this._getTranslatedText('departureStation')}</th>` : ''}
+                                ${this.showTo ? ct.LitHtml`<th align="left">${this._getTranslatedText('heading')}</th>` : ''}
                                 <th align="left">${this._getTranslatedText('leaveHome')}</th>
                             </tr>
                             ${renderedEntities}
@@ -137,11 +146,13 @@ customElements.whenDefined('card-tools').then(() => {
             const departureTime = hassEntity.state;
             const timeUntilLeave = this._getTimeUntil(entity);
             const from = attributes.from || '';
+            const heading = attributes.to || '';
 
             return ct.LitHtml`<tr>
                             <td class="${lineClass} line">${line}</td>
                             <td>${departureTime}</td>
-                            <td>${from}</td>
+                            ${this.showFrom ? ct.LitHtml`<td>${from}</td>` : ''}
+                            ${this.showTo ? ct.LitHtml`<td>${heading}</td>` : ''}
                             <td>${timeUntilLeave} minutes</td>
                         </tr>`;
         }