Added option to show team icons in driver and constructor standings (#…

…104)

Use show_teamlogo in standings object

README.md

@@ -73,6 +73,8 @@ title: Constructor Standings
 type: custom:formulaone-card
 card_type: driver_standings
 title: Driver Standings
+standings:
+  show_teamlogo: true
 
 ```
 ![image](https://user-images.githubusercontent.com/10223677/194120796-28532a9d-a62d-44bb-8cb8-403bfa434a8b.png)
@@ -86,6 +88,7 @@ title: Driver Standings
 standings:
   show_flag: true
   show_team: true
+  show_teamlogo: true
 
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formulaone-card",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Frontend card for Home Assistant to display Formula One data",
   "main": "index.js",
   "scripts": {
@@ -42,6 +42,7 @@
     "babel-jest": "^29.3.1",
     "compression-webpack-plugin": "^10.0.0",
     "custom-card-helpers": "^1.9.0",
+    "isomorphic-fetch": "^3.0.0",
     "jest-environment-jsdom": "^29.3.1",
     "jest-ts-auto-mock": "^2.1.0",
     "ts-auto-mock": "^3.6.4",

src/cards/constructor-standings.ts

@@ -2,7 +2,7 @@ import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
 import { ConstructorStanding } from "../api/models";
 import { FormulaOneCardConfig } from "../types/formulaone-card-types";
-import { getApiErrorMessage, getApiLoadingMessage } from "../utils";
+import { getApiErrorMessage, getApiLoadingMessage, getTeamImageUrl } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class ConstructorStandings extends BaseCard {    
@@ -24,7 +24,7 @@ export default class ConstructorStandings extends BaseCard {
         return html`
             <tr>
                 <td class="width-50 text-center">${standing.position}</td>
-                <td>${standing.Constructor.name}</td>
+                <td>${(this.config.standings?.show_teamlogo ? html`<img class="constructor-logo" height="20" width="20" src="${getTeamImageUrl(standing.Constructor.constructorId)}">&nbsp;` : '')}${standing.Constructor.name}</td>
                 <td class="width-60 text-center">${standing.points}</td>
                 <td class="text-center">${standing.wins}</td>
             </tr>`;

src/cards/driver-standings.ts

@@ -1,8 +1,8 @@
 import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
-import { DriverStanding } from "../api/models";
+import { Constructor, DriverStanding } from "../api/models";
 import { FormulaOneCardConfig } from "../types/formulaone-card-types";
-import { getApiErrorMessage, getApiLoadingMessage, getCountryFlagByNationality, getDriverName } from "../utils";
+import { getApiErrorMessage, getApiLoadingMessage, getCountryFlagByNationality, getDriverName, getTeamImageUrl } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class DriverStandings extends BaseCard {
@@ -20,14 +20,18 @@ export default class DriverStandings extends BaseCard {
     cardSize(): number {
         return 12;
     }  
+
+    renderConstructorColumn(constructor: Constructor): HTMLTemplateResult {
+        return html`<td>${(this.config.standings.show_teamlogo ? html`<img class="constructor-logo" height="20" width="20" src="${getTeamImageUrl(constructor.constructorId)}">&nbsp;` : '')}${constructor.name}</td>`;
+    }
 
     renderStandingRow(standing: DriverStanding): HTMLTemplateResult {
         return html`
             <tr>
                 <td class="width-40 text-center">${standing.position}</td>
                 <td>${(this.config.standings?.show_flag ? html`<img height="10" width="20" src="${getCountryFlagByNationality(standing.Driver.nationality)}">&nbsp;` : '')}${standing.Driver.code}</td>
                 <td>${getDriverName(standing.Driver, this.config)}</td>
-                ${(this.config.standings?.show_team ? html`<td>${standing.Constructors[0].name}</td>` : '')}
+                ${(this.config.standings?.show_team ? html`${this.renderConstructorColumn(standing.Constructors[0])}` : '')}
                 <td class="width-60 text-center">${standing.points}</td>
                 <td class="text-center">${standing.wins}</td>
             </tr>`;

src/index.ts

@@ -4,7 +4,7 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { FormulaOneCardConfig, FormulaOneCardType } from './types/formulaone-card-types';
 import { CSSResult, html, HTMLTemplateResult, LitElement, PropertyValues } from 'lit';
 import { checkConfig, hasConfigOrCardValuesChanged } from './utils';
-import { style } from './styles';
+import { styles } from './styles';
 import ConstructorStandings from './cards/constructor-standings';
 import DriverStandings from './cards/driver-standings';
 import Schedule from './cards/schedule';
@@ -87,7 +87,7 @@ export default class FormulaOneCard extends LitElement {
     }
 
     static get styles(): CSSResult {
-        return style;
+        return styles;
     }
 
     render() : HTMLTemplateResult {

src/lib/constants.ts

@@ -1,14 +1,8 @@
-// Source:
-// https://github.com/home-assistant/frontend/blob/dev/src/data/entity.ts
-// https://github.com/home-assistant/frontend/blob/dev/src/data/translation.ts
-// https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/types.ts
-
-export const UNAVAILABLE = 'unavailable';
-export const UNKNOWN = 'unknown';
-export const UNAVAILABLE_STATES = [UNAVAILABLE, UNKNOWN];
-
-export const LAST_CHANGED = 'last-changed';
-export const LAST_UPDATED = 'last-updated';
+export const ImageConstants = {
+    FlagCDN : 'https://flagcdn.com/w40/',
+    TeamLogoCDN : 'https://www.formula1.com/content/dam/fom-website/teams/',
+    F1CDN : 'https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/',
+};
 
 export const TIMESTAMP_FORMATS = ['relative', 'total', 'date', 'time', 'datetime'];
 

src/styles.ts

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-export const style = css`
+export const styles = css`    
     table {
         width: 100%;
         border-spacing: 0;
@@ -45,4 +45,13 @@ export const style = css`
         text-decoration: none;
         color: var(--secondary-text-color);  
     }
+    .constructor-logo {
+        width: 20px;
+        margin: auto;
+        display: block;
+        float: left;
+        background-color: white;
+        border-radius: 50%;
+        margin-right: 3px;
+    }
 `;

src/types/formulaone-card-types.ts

@@ -23,6 +23,7 @@ export interface Translation {
 export interface StandingDisplayOptions {
     show_team?: boolean;
     show_flag?: boolean;
+    show_teamlogo?: boolean;
 }
 
 export enum PreviousRaceDisplay {

src/utils.ts

@@ -7,6 +7,7 @@ import { BaseCard } from "./cards/base-card";
 import { formatDateTimeRaceInfo } from "./lib/format_date_time";
 import { HomeAssistant } from "custom-card-helpers";
 import { formatDateNumeric } from "./lib/format_date";
+import { ImageConstants } from "./lib/constants";
 
 export const hasConfigOrCardValuesChanged = (node: FormulaOneCard, changedProps: PropertyValues) => {
     if (changedProps.has('config')) {
@@ -62,7 +63,20 @@ export const getCountryFlagUrl = (countryCode: string) => {
         countryCode = exception[0].corrected; 
     }
 
-    return `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`;
+    return `${ImageConstants.FlagCDN}${countryCode.toLowerCase()}.png`;
+}
+
+export const getTeamImageUrl = (teamName: string) => {
+    teamName = teamName.toLocaleLowerCase().replace('_', '-');
+    const exceptions = [{ teamName: 'red-bull', corrected: 'red-bull-racing'}, { teamName: 'alfa', corrected: 'alfa-romeo'}, { teamName: 'haas', corrected: 'haas-f1-team'}];
+
+    const exception = exceptions.filter(exception => exception.teamName == teamName);
+    if(exception.length > 0)
+    {
+        teamName = exception[0].corrected;
+    }
+
+    return `${ImageConstants.TeamLogoCDN}/2023/${teamName.toLowerCase()}-logo.png.transform/2col-retina/image.png`;
 }
 
 export const getCircuitName = (circuitName: string) => {
@@ -100,7 +114,7 @@ export const renderHeader = (config: FormulaOneCardConfig, race: Race, hide_race
     const countryDashed = race.Circuit.Location.country.replace(" ","-")
     const circuitName = getCircuitName(countryDashed);
 
-    const imageHtml = html`<img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/${circuitName}_Circuit.png.transform/7col/image.png">`;
+    const imageHtml = html`<img width="100%" src="${ImageConstants.F1CDN}Circuit%20maps%2016x9/${circuitName}_Circuit.png.transform/7col/image.png">`;
     const imageWithLinkHtml = config.image_clickable ? html`<a target="_new" href="${race.Circuit.url}">${imageHtml}</a>` : imageHtml;
     const raceName = html`<h2><img height="25" src="${getCountryFlagByName(race.Circuit.Location.country)}">&nbsp;  ${race.round} :  ${race.raceName}</h2>`;