Fixed country flag and circuit image for UAE

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formulaone-card",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Frontend card for hass-formulaoneapi",
   "main": "index.js",
   "scripts": {

src/cards/last-result.ts

@@ -1,7 +1,7 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
 import { FormulaOneCardConfig, Race, Result } from "../types/formulaone-card-types";
-import { getCountryFlagUrl, getDriverName } from "../utils";
+import { getCircuitName, getCountryFlagUrl, getDriverName } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class LastResult extends BaseCard {
@@ -26,7 +26,8 @@ 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 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 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> `

src/cards/next-race.ts

@@ -3,7 +3,7 @@ import { html, HTMLTemplateResult } from "lit-html";
 import { formatDateNumeric } from "../lib/format_date";
 import { formatDateTimeRaceInfo } from "../lib/format_date_time";
 import { FormulaOneCardConfig, Race } from "../types/formulaone-card-types";
-import { getCountryFlagUrl } from "../utils";
+import { getCircuitName, getCountryFlagUrl } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class NextRace extends BaseCard {
@@ -20,8 +20,10 @@ export default class NextRace extends BaseCard {
 
     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 countryDashed = this.next_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 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> `

src/utils.ts

@@ -25,7 +25,7 @@ export const checkConfig = (config: FormulaOneCardConfig) => {
 };
 
 export const getCountryFlagUrl = (countryDashed: string) => {
-    const exceptions = [{ countryDashed: 'USA', name: 'United-States-of-America'}];
+    const exceptions = [{ countryDashed: 'USA', name: 'United-States-of-America'}, { countryDashed: 'UAE', name: 'United-Arab-Emirates'}];
 
     const exception = exceptions.filter(exception => exception.countryDashed == countryDashed);
     if(exception.length > 0)
@@ -36,6 +36,18 @@ export const getCountryFlagUrl = (countryDashed: string) => {
     return `https://www.countries-ofthe-world.com/flags-normal/flag-of-${countryDashed}.png`;
 }
 
+export const getCircuitName = (circuitName: string) => {
+    const exceptions = [{ countryDashed: 'UAE', name: 'Abu_Dhabi'}];
+
+    const exception = exceptions.filter(exception => exception.countryDashed == circuitName);
+    if(exception.length > 0)
+    {
+        circuitName = exception[0].name; 
+    }
+
+    return circuitName;
+}
+
 export const getDriverName = (driver: Driver, config: FormulaOneCardConfig) => {
     const permanentNumber = driver.code == 'VER' ? 1 : driver.permanentNumber;
     return `${driver.givenName} ${driver.familyName}${(config.show_carnumber ? ` #${permanentNumber}` : '')}`;

tests/utils/getCircuitName.test.ts

@@ -0,0 +1,11 @@
+import { getCircuitName } from '../../src/utils';
+
+describe('Testing util file function getCircuitName', () => {
+    test('Passing Japan should return expected circuit name', () => {         
+        expect(getCircuitName('Japan')).toBe('Japan')
+    }),
+    test('Passing UAE should return expected circuit name', () => {         
+        expect(getCircuitName('UAE')).toBe('Abu_Dhabi')
+    })
+})
+

tests/utils/getCountryFlagUrl.test.ts

@@ -7,6 +7,9 @@ describe('Testing util file function getCountryFlagUrl', () => {
     test('Passing USA should return expected flag url', () => {         
         expect(getCountryFlagUrl('USA')).toBe('https://www.countries-ofthe-world.com/flags-normal/flag-of-United-States-of-America.png')
     }),
+    test('Passing UAE should return expected flag url', () => {         
+        expect(getCountryFlagUrl('UAE')).toBe('https://www.countries-ofthe-world.com/flags-normal/flag-of-United-Arab-Emirates.png')
+    }),
     test('Passing Saudi Arabia should return expected flag url', () => {         
         expect(getCountryFlagUrl('Saudi-Arabia')).toBe('https://www.countries-ofthe-world.com/flags-normal/flag-of-Saudi-Arabia.png')
     })