Changed url for the flags to CDN (#37)

* Changed url for the flags to CDN
marcokreeft87 · Dec 25, 2022 · 38bb09b · 38bb09b
1 parent 959266c
commit 38bb09b
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 36 deletions.
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-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formulaone-card",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Frontend card for hass-formulaoneapi",
   "main": "index.js",
   "scripts": {

diff --git a/src/cards/driver-standings.ts b/src/cards/driver-standings.ts
@@ -21,17 +21,16 @@ export default class DriverStandings extends BaseCard {
     }  
 
     getCountryFlag = (nationality: string) => {
-        const country = countries.filter(x => x.Nationality === nationality)[0].Country;
-        const countryDashed = country.replace(" ","-");
+        const country = countries.filter(x => x.Nationality === nationality)[0];
 
-        return getCountryFlagUrl(countryDashed);
+        return getCountryFlagUrl(country.Code);
     }
 
     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" src="${this.getCountryFlag(standing.Driver.nationality)}">&nbsp;` : '')}${standing.Driver.code}</td>
+                <td>${(this.config.standings?.show_flag ? html`<img height="10" width="20" src="${this.getCountryFlag(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>` : '')}
                 <td class="width-60 text-center">${standing.points}</td>

diff --git a/src/cards/last-result.ts b/src/cards/last-result.ts
@@ -39,7 +39,7 @@ export default class LastResult extends BaseCard {
         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> `
+        return html`<h2><img height="25" src="${getCountryFlagUrl(data.Circuit.Location.country)}">&nbsp;  ${data.round} :  ${data.raceName}</h2>${imageWithLinkHtml}<br> `
     }
 
     render() : HTMLTemplateResult {

diff --git a/src/cards/next-race.ts b/src/cards/next-race.ts
@@ -35,7 +35,7 @@ export default class NextRace extends BaseCard {
         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> `
+        return html`<h2><img height="25" src="${getCountryFlagUrl(this.next_race.Circuit.Location.country)}">&nbsp;  ${this.next_race.round} :  ${this.next_race.raceName}</h2>${imageWithLinkHtml}<br> `
     }
 
     renderSeasonEnded(): HTMLTemplateResult {

diff --git a/src/data/countries.json b/src/data/countries.json
diff --git a/src/utils.ts b/src/utils.ts
@@ -24,16 +24,16 @@ export const checkConfig = (config: FormulaOneCardConfig) => {
     }
 };
 
-export const getCountryFlagUrl = (countryDashed: string) => {
-    const exceptions = [{ countryDashed: 'USA', name: 'United-States-of-America'}, { countryDashed: 'UAE', name: 'United-Arab-Emirates'}];
+export const getCountryFlagUrl = (countryCode: string) => {
+    const exceptions = [{ countryCode: 'USA', corrected: 'US'}, { countryCode: 'UAE', corrected: 'AE'}];
 
-    const exception = exceptions.filter(exception => exception.countryDashed == countryDashed);
+    const exception = exceptions.filter(exception => exception.countryCode == countryCode);
     if(exception.length > 0)
     {
-        countryDashed = exception[0].name; 
+        countryCode = exception[0].corrected; 
     }
 
-    return `https://www.countries-ofthe-world.com/flags-normal/flag-of-${countryDashed}.png`;
+    return `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`;
 }
 
 export const getCircuitName = (circuitName: string) => {

diff --git a/tests/cards/driver-standings.test.ts b/tests/cards/driver-standings.test.ts
@@ -56,7 +56,7 @@ describe('Testing driver-standings file', () => {
         const result = card.render();
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<table> <thead> <tr> <th class="width-50" colspan="2">&nbsp;</th> <th>Driver</th> <th>Team</th> <th class="width-60 text-center">Pts</th> <th class="text-center">Wins</th> </tr> </thead> <tbody> <tr> <td class="width-40 text-center">1</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Netherlands.png">&nbsp;VER</td> <td>Max Verstappen</td> <td>Red Bull</td> <td class="width-60 text-center">341</td> <td class="text-center">11</td> </tr> <tr> <td class="width-40 text-center">2</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Monaco.png">&nbsp;LEC</td> <td>Charles Leclerc</td> <td>Ferrari</td> <td class="width-60 text-center">237</td> <td class="text-center">3</td> </tr> <tr> <td class="width-40 text-center">3</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Mexico.png">&nbsp;PER</td> <td>Sergio Pérez</td> <td>Red Bull</td> <td class="width-60 text-center">235</td> <td class="text-center">2</td> </tr> <tr> <td class="width-40 text-center">4</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-United-Kingdom.png">&nbsp;RUS</td> <td>George Russell</td> <td>Mercedes</td> <td class="width-60 text-center">203</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">5</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Spain.png">&nbsp;SAI</td> <td>Carlos Sainz</td> <td>Ferrari</td> <td class="width-60 text-center">202</td> <td class="text-center">1</td> </tr> <tr> <td class="width-40 text-center">6</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-United-Kingdom.png">&nbsp;HAM</td> <td>Lewis Hamilton</td> <td>Mercedes</td> <td class="width-60 text-center">170</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">7</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-United-Kingdom.png">&nbsp;NOR</td> <td>Lando Norris</td> <td>McLaren</td> <td class="width-60 text-center">100</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">8</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-France.png">&nbsp;OCO</td> <td>Esteban Ocon</td> <td>Alpine F1 Team</td> <td class="width-60 text-center">66</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">9</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Spain.png">&nbsp;ALO</td> <td>Fernando Alonso</td> <td>Alpine F1 Team</td> <td class="width-60 text-center">59</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">10</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Finland.png">&nbsp;BOT</td> <td>Valtteri Bottas</td> <td>Alfa Romeo</td> <td class="width-60 text-center">46</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">11</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Australia.png">&nbsp;RIC</td> <td>Daniel Ricciardo</td> <td>McLaren</td> <td class="width-60 text-center">29</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">12</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Germany.png">&nbsp;VET</td> <td>Sebastian Vettel</td> <td>Aston Martin</td> <td class="width-60 text-center">24</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">13</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-France.png">&nbsp;GAS</td> <td>Pierre Gasly</td> <td>AlphaTauri</td> <td class="width-60 text-center">23</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">14</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Denmark.png">&nbsp;MAG</td> <td>Kevin Magnussen</td> <td>Haas F1 Team</td> <td class="width-60 text-center">22</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">15</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Canada.png">&nbsp;STR</td> <td>Lance Stroll</td> <td>Aston Martin</td> <td class="width-60 text-center">13</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">16</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Germany.png">&nbsp;MSC</td> <td>Mick Schumacher</td> <td>Haas F1 Team</td> <td class="width-60 text-center">12</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">17</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Japan.png">&nbsp;TSU</td> <td>Yuki Tsunoda</td> <td>AlphaTauri</td> <td class="width-60 text-center">11</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">18</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-China.png">&nbsp;ZHO</td> <td>Guanyu Zhou</td> <td>Alfa Romeo</td> <td class="width-60 text-center">6</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">19</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Thailand.png">&nbsp;ALB</td> <td>Alexander Albon</td> <td>Williams</td> <td class="width-60 text-center">4</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">20</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Netherlands.png">&nbsp;DEV</td> <td>Nyck de Vries</td> <td>Williams</td> <td class="width-60 text-center">2</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">21</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Canada.png">&nbsp;LAT</td> <td>Nicholas Latifi</td> <td>Williams</td> <td class="width-60 text-center">0</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">22</td> <td><img height="10" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Germany.png">&nbsp;HUL</td> <td>Nico Hülkenberg</td> <td>Aston Martin</td> <td class="width-60 text-center">0</td> <td class="text-center">0</td> </tr> </tbody> </table>');
+        expect(htmlResult).toMatch('<table> <thead> <tr> <th class="width-50" colspan="2">&nbsp;</th> <th>Driver</th> <th>Team</th> <th class="width-60 text-center">Pts</th> <th class="text-center">Wins</th> </tr> </thead> <tbody> <tr> <td class="width-40 text-center">1</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/nl.png">&nbsp;VER</td> <td>Max Verstappen</td> <td>Red Bull</td> <td class="width-60 text-center">341</td> <td class="text-center">11</td> </tr> <tr> <td class="width-40 text-center">2</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/mc.png">&nbsp;LEC</td> <td>Charles Leclerc</td> <td>Ferrari</td> <td class="width-60 text-center">237</td> <td class="text-center">3</td> </tr> <tr> <td class="width-40 text-center">3</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/me.png">&nbsp;PER</td> <td>Sergio Pérez</td> <td>Red Bull</td> <td class="width-60 text-center">235</td> <td class="text-center">2</td> </tr> <tr> <td class="width-40 text-center">4</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/gb.png">&nbsp;RUS</td> <td>George Russell</td> <td>Mercedes</td> <td class="width-60 text-center">203</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">5</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/es.png">&nbsp;SAI</td> <td>Carlos Sainz</td> <td>Ferrari</td> <td class="width-60 text-center">202</td> <td class="text-center">1</td> </tr> <tr> <td class="width-40 text-center">6</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/gb.png">&nbsp;HAM</td> <td>Lewis Hamilton</td> <td>Mercedes</td> <td class="width-60 text-center">170</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">7</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/gb.png">&nbsp;NOR</td> <td>Lando Norris</td> <td>McLaren</td> <td class="width-60 text-center">100</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">8</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/fr.png">&nbsp;OCO</td> <td>Esteban Ocon</td> <td>Alpine F1 Team</td> <td class="width-60 text-center">66</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">9</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/es.png">&nbsp;ALO</td> <td>Fernando Alonso</td> <td>Alpine F1 Team</td> <td class="width-60 text-center">59</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">10</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/fi.png">&nbsp;BOT</td> <td>Valtteri Bottas</td> <td>Alfa Romeo</td> <td class="width-60 text-center">46</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">11</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/au.png">&nbsp;RIC</td> <td>Daniel Ricciardo</td> <td>McLaren</td> <td class="width-60 text-center">29</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">12</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/de.png">&nbsp;VET</td> <td>Sebastian Vettel</td> <td>Aston Martin</td> <td class="width-60 text-center">24</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">13</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/fr.png">&nbsp;GAS</td> <td>Pierre Gasly</td> <td>AlphaTauri</td> <td class="width-60 text-center">23</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">14</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/dk.png">&nbsp;MAG</td> <td>Kevin Magnussen</td> <td>Haas F1 Team</td> <td class="width-60 text-center">22</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">15</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/ca.png">&nbsp;STR</td> <td>Lance Stroll</td> <td>Aston Martin</td> <td class="width-60 text-center">13</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">16</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/de.png">&nbsp;MSC</td> <td>Mick Schumacher</td> <td>Haas F1 Team</td> <td class="width-60 text-center">12</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">17</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/jp.png">&nbsp;TSU</td> <td>Yuki Tsunoda</td> <td>AlphaTauri</td> <td class="width-60 text-center">11</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">18</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/ch.png">&nbsp;ZHO</td> <td>Guanyu Zhou</td> <td>Alfa Romeo</td> <td class="width-60 text-center">6</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">19</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/th.png">&nbsp;ALB</td> <td>Alexander Albon</td> <td>Williams</td> <td class="width-60 text-center">4</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">20</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/nl.png">&nbsp;DEV</td> <td>Nyck de Vries</td> <td>Williams</td> <td class="width-60 text-center">2</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">21</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/ca.png">&nbsp;LAT</td> <td>Nicholas Latifi</td> <td>Williams</td> <td class="width-60 text-center">0</td> <td class="text-center">0</td> </tr> <tr> <td class="width-40 text-center">22</td> <td><img height="10" width="20" src="https://flagcdn.com/w40/de.png">&nbsp;HUL</td> <td>Nico Hülkenberg</td> <td>Aston Martin</td> <td class="width-60 text-center">0</td> <td class="text-center">0</td> </tr> </tbody> </table>');
     }),
     test('Calling cardSize with hass and sensor', () => {