Added booleans hiding races, link and carnumber (#13)

marcokreeft87 · Oct 15, 2022 · d5bc523 · d5bc523
1 parent fa4a552
commit d5bc523
Show file tree

Hide file tree

Showing 20 changed files with 179 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,9 @@ or added by clicking the "Add to lovelace" button on the HACS dashboard after in
 | card_type         | string        |  **Required**                       | The type of card you want to display (driver_standings,constructor_standings,next_race,schedule,last_result)            |
 | title             | string        |                                     | The header of the card ( hidden when null or empty)            |
 | date_locale       | string        |                                     | Override the locale used for the date and time formatting   |
-| image_clickable   | boolean       |                                     | Click on image leads to wikipedia, or not   |
+| image_clickable   | boolean       | `false`                             | Click on image leads to wikipedia, or not   |
+| show_carnumber    | boolean       | `false`                             | Show the number of the car   |
+| location_clickable    | boolean       | `false`                             | Click on the location leads to wikipedia   |
 
 ```
 type: custom:formulaone-card

diff --git a/formulaone-card.js b/formulaone-card.js
diff --git a/formulaone-card.js.gz b/formulaone-card.js.gz
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formulaone-card",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Frontend card for hass-formulaoneapi",
   "main": "index.js",
   "scripts": {

diff --git a/src/cards/base-card.ts b/src/cards/base-card.ts
@@ -9,9 +9,10 @@ export abstract class BaseCard {
     hass: HomeAssistant;
     config: FormulaOneCardConfig;
 
-    constructor(sensor: string, hass: HomeAssistant) {
+    constructor(sensor: string, hass: HomeAssistant, config: FormulaOneCardConfig) {
         this.sensor_entity_id = sensor;
         this.hass = hass;
+        this.config = config;
 
         this.sensor = this.getSensor();
     }    

diff --git a/src/cards/constructor-standings.ts b/src/cards/constructor-standings.ts
@@ -1,12 +1,12 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
-import { ConstructorStanding } from "../types/formulaone-card-types";
+import { ConstructorStanding, FormulaOneCardConfig } from "../types/formulaone-card-types";
 import { BaseCard } from "./base-card";
 
 export default class ConstructorStandings extends BaseCard {
 
-    constructor(sensor: string, hass: HomeAssistant) {
-        super(sensor, hass);
+    constructor(sensor: string, hass: HomeAssistant, config: FormulaOneCardConfig) {
+        super(sensor, hass, config);
     }    
 
     renderStandingRow(standing: ConstructorStanding): HTMLTemplateResult {

diff --git a/src/cards/driver-standings.ts b/src/cards/driver-standings.ts
@@ -1,20 +1,21 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
-import { DriverStanding } from "../types/formulaone-card-types";
+import { DriverStanding, FormulaOneCardConfig } from "../types/formulaone-card-types";
+import { getDriverName } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class DriverStandings extends BaseCard {
 
-    constructor(sensor: string, hass: HomeAssistant) {
-        super(sensor, hass);
+    constructor(sensor: string, hass: HomeAssistant, config: FormulaOneCardConfig) {
+        super(sensor, hass, config);
     }    
 
     renderStandingRow(standing: DriverStanding): HTMLTemplateResult {
         return html`
             <tr>
                 <td class="width-50 text-center">${standing.position}</td>
                 <td>${standing.Driver.code}</td>
-                <td>${standing.Driver.givenName} ${standing.Driver.familyName}</td>
+                <td>${getDriverName(standing.Driver, this.config)}</td>
                 <td class="width-60 text-center">${standing.points}</td>
                 <td class="text-center">${standing.wins}</td>
             </tr>`;

diff --git a/src/cards/last-result.ts b/src/cards/last-result.ts
@@ -1,26 +1,21 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
 import { FormulaOneCardConfig, Race, Result } from "../types/formulaone-card-types";
-import { getCountryFlagUrl } from "../utils";
+import { getCountryFlagUrl, getDriverName } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class LastResult extends BaseCard {
 
-    date_locale?: string;
-    image_clickable?: boolean;
-
     constructor(sensor: string, hass: HomeAssistant, config: FormulaOneCardConfig) {
-        super(sensor, hass);
-
-        this.image_clickable = config.image_clickable;
+        super(sensor, hass, config);
     } 
 
     renderResultRow(result: Result): HTMLTemplateResult {
 
         return html`
             <tr>
                 <td class="width-50 text-center">${result.position}</td>
-                <td>${result.Driver.givenName} ${result.Driver.familyName}</td>
+                <td>${getDriverName(result.Driver, this.config)}</td>
                 <td>${result.grid}</td>
                 <td class="width-60 text-center">${result.points}</td>
                 <td class="text-center">${result.status}</td>
@@ -32,7 +27,7 @@ export default class LastResult extends BaseCard {
         const data = this.sensor.data as Race;
         const countryDashed = data.Circuit.Location.country.replace(" ","-");
         const imageHtml = html`<img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/${countryDashed}_Circuit.png.transform/7col/image.png">`;
-        const imageWithLinkHtml = this.image_clickable ? html`<a target="_new" href="${data.Circuit.url}">${imageHtml}</a>` : imageHtml;
+        const imageWithLinkHtml = this.config.image_clickable ? html`<a target="_new" href="${data.Circuit.url}">${imageHtml}</a>` : imageHtml;
 
         return html`<h2><img height="25" src="${getCountryFlagUrl(countryDashed)}">&nbsp;  ${data.round} :  ${data.raceName}</h2>${imageWithLinkHtml}<br> `
     }

diff --git a/src/cards/next-race.ts b/src/cards/next-race.ts
@@ -9,24 +9,20 @@ import { BaseCard } from "./base-card";
 export default class NextRace extends BaseCard {
 
     next_race: Race;
-    date_locale?: string;
-    image_clickable?: boolean;
 
     constructor(sensor: string, hass: HomeAssistant, config: FormulaOneCardConfig) {
-        super(sensor, hass);
+        super(sensor, hass, config);
 
         const sensorEntity = this.hass.states[this.sensor_entity_id];
 
         this.next_race = sensorEntity.attributes['next_race'] as Race;
-        this.date_locale = config.date_locale;
-        this.image_clickable = config.image_clickable;
     } 
 
     renderHeader(): HTMLTemplateResult {
 
         const countryDashed = this.next_race.Circuit.Location.country.replace(" ","-");
         const imageHtml = html`<img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/${countryDashed}_Circuit.png.transform/7col/image.png">`;
-        const imageWithLinkHtml = this.image_clickable ? html`<a target="_new" href="${this.next_race.Circuit.url}">${imageHtml}</a>` : imageHtml;
+        const imageWithLinkHtml = this.config.image_clickable ? html`<a target="_new" href="${this.next_race.Circuit.url}">${imageHtml}</a>` : imageHtml;
 
         return html`<h2><img height="25" src="${getCountryFlagUrl(countryDashed)}">&nbsp;  ${this.next_race.round} :  ${this.next_race.raceName}</h2>${imageWithLinkHtml}<br> `
     }
@@ -52,7 +48,7 @@ export default class NextRace extends BaseCard {
                     <tr>
                         <td colspan="5">${this.renderHeader()}</td>
                     </tr>
-                    <tr><td>Date</td><td>${formatDateNumeric(raceDate, this.hass.locale, this.date_locale)}</td><td>&nbsp;</td><td>Practice 1</td><td align="right">${freePractice1}</td></tr>
+                    <tr><td>Date</td><td>${formatDateNumeric(raceDate, this.hass.locale, this.config.date_locale)}</td><td>&nbsp;</td><td>Practice 1</td><td align="right">${freePractice1}</td></tr>
                     <tr><td>Race</td><td>${this.next_race.round}</td><td>&nbsp;</td><td>Practice 2</td><td align="right">${freePractice2}</td></tr>
                     <tr><td>Race name</td><td>${this.next_race.raceName}</td><td>&nbsp;</td><td>Practice 3</td><td align="right">${freePractice3}</td></tr>
                     <tr><td>Circuit name</td><td>${this.next_race.Circuit.circuitName}</td><td>&nbsp;</td><td>Qualifying</td><td align="right">${qualifyingDate}</td></tr>

diff --git a/src/cards/schedule.ts b/src/cards/schedule.ts
@@ -1,28 +1,30 @@
 import {  formatTime, HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
 import { formatDate } from "../lib/format_date";
-import { FormulaOneCardConfig, Race } from "../types/formulaone-card-types";
+import { Circuit, FormulaOneCardConfig, Race } from "../types/formulaone-card-types";
 import { BaseCard } from "./base-card";
 
 export default class Schedule extends BaseCard {
-
-    date_locale?: string;
 
     constructor(sensor: string, hass: HomeAssistant, config: FormulaOneCardConfig) {
-        super(sensor, hass);
-
-        this.date_locale = config.date_locale;
+        super(sensor, hass, config);
     } 
 
+    renderLocation(circuit: Circuit) {
+        const locationConcatted = `${circuit.Location.locality}, ${circuit.Location.country}`;
+        return this.config.location_clickable ? html`<a href="${circuit.url}" target="_blank">${locationConcatted}</a>` : locationConcatted;
+    }
+
     renderScheduleRow(race: Race): HTMLTemplateResult {
         const raceDate = new Date(race.date + 'T' + race.time);
+        const renderClass = this.config.previous_race && raceDate < new Date() ? this.config.previous_race : '';
 
         return html`
-            <tr>
+            <tr class="${renderClass}"> 
                 <td class="width-50 text-center">${race.round}</td>
                 <td>${race.Circuit.circuitName}</td>
-                <td>${race.Circuit.Location.locality}, ${race.Circuit.Location.country}</td>
-                <td class="width-60 text-center">${formatDate(raceDate, this.hass.locale, this.date_locale)}</td>
+                <td>${this.renderLocation(race.Circuit)}</td>
+                <td class="width-60 text-center">${formatDate(raceDate, this.hass.locale, this.config.date_locale)}</td>
                 <td class="text-center">${formatTime(raceDate, this.hass.locale)}</td>
             </tr>`;
     }

diff --git a/src/consts.ts b/src/consts.ts
diff --git a/src/index.ts b/src/index.ts
@@ -56,9 +56,9 @@ export default class FormulaOneCard extends LitElement {
     renderCardType(): HTMLTemplateResult {
         switch(this.config.card_type) {
             case FormulaOneCardType.ConstructorStandings:
-                return new ConstructorStandings(this.config.sensor, this._hass).render();
+                return new ConstructorStandings(this.config.sensor, this._hass, this.config).render();
             case FormulaOneCardType.DriverStandings:                
-                return new DriverStandings(this.config.sensor, this._hass).render();
+                return new DriverStandings(this.config.sensor, this._hass, this.config).render();
             case FormulaOneCardType.Schedule:                
                 return new Schedule(this.config.sensor, this._hass, this.config).render();
             case FormulaOneCardType.NextRace:                

diff --git a/src/styles.ts b/src/styles.ts
@@ -32,4 +32,17 @@ export const style = css`
     .width-60 {
         width: 60px;
     }
+    .hide { 
+        display: none;
+    }
+    .strikethrough {
+        text-decoration: line-through;
+    }
+    .italic {
+        font-style: italic;
+    }
+    a {
+        text-decoration: none;
+        color: var(--secondary-text-color);  
+    }
 `;
diff --git a/src/types/formulaone-card-types.ts b/src/types/formulaone-card-types.ts
@@ -9,6 +9,15 @@ export interface FormulaOneCardConfig extends LovelaceCardConfig {
     sensor?: string;
     date_locale?: string;
     image_clickable?: boolean;
+    show_carnumber?: boolean;
+    location_clickable?: boolean;
+    previous_race?: PreviousRaceDisplay;
+}
+
+export enum PreviousRaceDisplay {
+    Strikethrough = 'strikethrough',
+    Italic = 'italic',
+    Hide = 'hide'
 }
 
 export interface FormulaOneSensor {

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,6 +1,6 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { PropertyValues } from "lit";
-import { FormulaOneCardConfig } from "./types/formulaone-card-types";
+import { Driver, FormulaOneCardConfig } from "./types/formulaone-card-types";
 
 export const hasConfigOrEntitiesChanged = (node: FormulaOneCardConfig, changedProps: PropertyValues) => {
     if (changedProps.has('config')) {
@@ -34,4 +34,9 @@ export const getCountryFlagUrl = (countryDashed: string) => {
     }
 
     return `https://www.countries-ofthe-world.com/flags-normal/flag-of-${countryDashed}.png`;
+}
+
+export const getDriverName = (driver: Driver, config: FormulaOneCardConfig) => {
+    const permanentNumber = driver.code == 'VER' ? 1 : driver.permanentNumber;
+    return `${driver.givenName} ${driver.familyName}${(config.show_carnumber ? ` #${permanentNumber}` : '')}`;
 }
diff --git a/tests/cards/constructor-standings.test.ts b/tests/cards/constructor-standings.test.ts
@@ -5,19 +5,20 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { getRenderString } from '../utils';
 import { MRData } from '../testdata/constructorStandings.json'
 import { HassEntity } from 'home-assistant-js-websocket';
-import { ConstructorStanding } from '../../src/types/formulaone-card-types';
+import { ConstructorStanding, FormulaOneCardConfig } from '../../src/types/formulaone-card-types';
 
 describe('Testing constructor-standings file', () => {
     const hass = createMock<HomeAssistant>();
     const data = MRData['StandingsTable']['StandingsLists'][0]['ConstructorStandings'];
     const hassEntity = createMock<HassEntity>();
+    const config = createMock<FormulaOneCardConfig>();
 
     test('Calling render with hass and wrong sensor', () => { 
         hass.states = {
             'sensor.test_sensor_wrong_sensor': hassEntity
         };  
 
-        const card = new ConstructorStandings('sensor.test_sensor_wrong_sensor', hass);
+        const card = new ConstructorStandings('sensor.test_sensor_wrong_sensor', hass, config);
         expect(() => card.render()).toThrowError('Please pass the correct sensor (constructors)');
     }),
     test('Calling render with hass and sensor but no data', () => {   
@@ -26,7 +27,7 @@ describe('Testing constructor-standings file', () => {
             'sensor.test_sensor_constructors': hassEntity
         };
 
-        const card = new ConstructorStandings('sensor.test_sensor_constructors', hass);
+        const card = new ConstructorStandings('sensor.test_sensor_constructors', hass, config);
         expect(() => card.render()).toThrowError('Please pass the correct sensor (constructors)');
     }),
     test('Calling render with hass and sensor', () => {   
@@ -35,7 +36,7 @@ describe('Testing constructor-standings file', () => {
             'sensor.test_sensor_constructors': hassEntity
         };
 
-        const card = new ConstructorStandings('sensor.test_sensor_constructors', hass);
+        const card = new ConstructorStandings('sensor.test_sensor_constructors', hass, config);
         const result = card.render();
         const htmlResult = getRenderString(result);
 

diff --git a/tests/cards/driver-standings.test.ts b/tests/cards/driver-standings.test.ts
@@ -5,19 +5,20 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { getRenderString } from '../utils';
 import { MRData } from '../testdata/driverStandings.json'
 import { HassEntity } from 'home-assistant-js-websocket';
-import { DriverStanding } from '../../src/types/formulaone-card-types';
+import { DriverStanding, FormulaOneCardConfig } from '../../src/types/formulaone-card-types';
 
 describe('Testing driver-standings file', () => {
     const hass = createMock<HomeAssistant>();
     const data = MRData['StandingsTable']['StandingsLists'][0]['DriverStandings'];
     const hassEntity = createMock<HassEntity>();
+    const config = createMock<FormulaOneCardConfig>();
 
     test('Calling render with hass and wrong sensor', () => { 
         hass.states = {
             'sensor.test_sensor_wrong_sensor': hassEntity
         };  
 
-        const card = new DriverStandings('sensor.test_sensor_wrong_sensor', hass);
+        const card = new DriverStandings('sensor.test_sensor_wrong_sensor', hass, config);
         expect(() => card.render()).toThrowError('Please pass the correct sensor (drivers)');
     }),
     test('Calling render with hass and sensor but no data', () => {   
@@ -26,7 +27,7 @@ describe('Testing driver-standings file', () => {
             'sensor.test_sensor_drivers': hassEntity
         };
 
-        const card = new DriverStandings('sensor.test_sensor_drivers', hass);
+        const card = new DriverStandings('sensor.test_sensor_drivers', hass, config);
         expect(() => card.render()).toThrowError('Please pass the correct sensor (drivers)');
     }),
     test('Calling render with hass and sensor', () => {   
@@ -35,7 +36,7 @@ describe('Testing driver-standings file', () => {
             'sensor.test_sensor_drivers': hassEntity
         };
 
-        const card = new DriverStandings('sensor.test_sensor_drivers', hass);
+        const card = new DriverStandings('sensor.test_sensor_drivers', hass, config);
         const result = card.render();
         const htmlResult = getRenderString(result);