Added option to refresh cache (#341)

* Added option to refresh cache

* -

* 100% coverage

README.md

@@ -79,6 +79,7 @@ or added by clicking the "Add to lovelace" button on the HACS dashboard after in
 | show_lastyears_result | boolean   | `false`                             | Show the winner of last year (next_race, countdown) |
 | only_show_date    | boolean       | `false`                             | Show the date of the next race (next_race)          |
 | tabs_order        | array         |'results', 'qualifying', 'sprint'    | Determine the order of the tabs (result)    |
+| show_refresh      | boolean       |`false`                              | Show the refresh button (top right)    |
 
 
 ### Actions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formulaone-card",
-  "version": "1.8.9",
+  "version": "1.9.0",
   "description": "Frontend card for Home Assistant to display Formula One data",
   "main": "index.js",
   "scripts": {

src/api/ergast-client.ts

@@ -79,4 +79,11 @@ export default class ErgastClient extends ClientBase {
 
       return results.MRData.RaceTable.Races[0];
     }
+
+    async RefreshCache() {
+      await this.GetData<Root>('current.json', true, 0);
+      await this.GetData<Root>('current/last/results.json', true, 0);
+      await this.GetData<Root>('current/driverStandings.json', true, 0);
+      await this.GetData<Root>('current/constructorStandings.json', true, 0);
+    }
 }

src/cards/results.ts

@@ -117,10 +117,11 @@ export default class Results extends BaseCard {
                     <tbody>
                         ${reduceArray(selectedRace.Results, this.config.row_limit).map(result => this.renderResultRow(result, result.position === fastest?.position))}
                     </tbody>
-                    ${fastest ? html`<tfoot>
+                    ${fastest ? html`
                     <tfoot>
                         <tr>
                             <td colspan="6" class="text-right"><small>* Fastest lap: ${fastest.FastestLap.Time.time}</small></td>
+                        </tr>
                     </tfoot>` : ''}
                 </table>` 
         : null;

src/index.ts

@@ -120,6 +120,7 @@ export default class FormulaOneCard extends LitElement {
         try {
             return html`
                 <ha-card elevation="2">
+                    ${this.renderRefreshButton()}
                     ${this.warning ? html`<hui-warning>${this.warning}</hui-warning>` : ''}
                     ${this.config.title ? html`<h1 class="card-header${(this.config.f1_font ? ' formulaone-font' : '')}">${this.config.title}</h1>` : ''}
                     ${this.card.render()}
@@ -133,4 +134,16 @@ export default class FormulaOneCard extends LitElement {
     getCardSize() {
         return this.card.cardSize();
     }
+
+    /* istanbul ignore next */
+    renderRefreshButton() {
+        return this.config.show_refresh ? html`<div class="refresh-cache" @click=${(e: Event) => this.refreshCache(e)}><ha-icon slot="icon" icon="mdi:refresh"></ha-icon></div>` : null;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    refreshCache(event: Event) {
+        console.log('Refreshing cache...');
+
+        this.card.client.RefreshCache();
+    }
 }

src/styles.ts

@@ -79,4 +79,9 @@ export const styles = css`
     .weather-info td {
         width: 33%;
     }
+    .refresh-cache {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+    }
 `;

src/types/formulaone-card-types.ts

@@ -3,31 +3,32 @@ import { HTMLTemplateResult } from 'lit-element';
 
 export interface FormulaOneCardConfig extends LovelaceCardConfig {
     show_icon?: boolean;
-    title?: string;//x
-    name?: string;//x
-    hass?: HomeAssistant;//x
-    card_type?: FormulaOneCardType;//x
-    date_locale?: string;//x
-    image_clickable?: boolean;//x
-    show_carnumber?: boolean;//x
-    location_clickable?: boolean;//x
-    previous_race?: PreviousRaceDisplay;//x
-    standings?: StandingDisplayOptions;//x
+    title?: string;
+    name?: string;
+    hass?: HomeAssistant;
+    card_type?: FormulaOneCardType;
+    date_locale?: string;
+    image_clickable?: boolean;
+    show_carnumber?: boolean;
+    location_clickable?: boolean;
+    previous_race?: PreviousRaceDisplay;
+    standings?: StandingDisplayOptions;
     translations?: Translation;
-    show_raceinfo?: boolean;//x
-    hide_tracklayout?: boolean;//x
-    hide_racedatetimes?: boolean;//x
+    show_raceinfo?: boolean;
+    hide_tracklayout?: boolean;
+    hide_racedatetimes?: boolean;
     actions?: ActionOptions;
-    f1_font?: boolean; //x
-    row_limit?: number;//x
+    f1_font?: boolean; 
+    row_limit?: number;
     icons?: CustomIcons;
-    countdown_type?: CountdownType | CountdownType[] | undefined;//x
-    show_weather?: boolean;//x
-    weather_options?: WeatherOptions;//x
-    next_race_delay?: number;//x
-    show_lastyears_result?: boolean;//x
-    only_show_date?: boolean;//x
-    tabs_order?: string[];//x
+    countdown_type?: CountdownType | CountdownType[] | undefined;
+    show_weather?: boolean;
+    weather_options?: WeatherOptions;
+    next_race_delay?: number;
+    show_lastyears_result?: boolean;
+    only_show_date?: boolean;
+    tabs_order?: string[];
+    show_refresh?: boolean;
 }
 
 export interface ValueChangedEvent {

tests/index.test.ts

@@ -303,6 +303,22 @@ describe('Testing index file function setConfig', () => {
         // Assert
         const htmlResult = getRenderString(result);
         expect(htmlResult).toMatch('<ha-card elevation="2"> <hui-warning>Error for warning</hui-warning> <h1 class="card-header">Test</h1> </ha-card>');
+    }),
+    test('Calling refresh cache should set cache', async () => {
+        // Arrange
+        const event = new Event('refresh-cache');
+        const config: FormulaOneCardConfig = {
+            type: '',
+            title: 'Test',
+            card_type: FormulaOneCardType.Countdown,
+            show_refresh: true
+        }
+        card.setConfig(config);
+
+        // Act
+        card.refreshCache(event);
+
+        // Assert
     })
 })