Added actions to cards with track layout (#109)

marcokreeft87 · Jan 25, 2023 · a1e1cdc · a1e1cdc
1 parent de2a344
commit a1e1cdc
Show file tree

Hide file tree

Showing 29 changed files with 518 additions and 184 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,36 @@ or added by clicking the "Add to lovelace" button on the HACS dashboard after in
 | previous_race     | enum          |                           |   Hide/strikethrough or make the past races italic options are (hide, strikethrough or italic) |
 | standings         | object        |                                     | Configuration for the driver standings card     |
 | translations      | dictionary    |  _[translations](#Translations)_          | Dictionary to override the default translation  |
+| actions           | object        |  _[Actions](#actions)_                                    | The tap, double tap or hold actions set on the image of the countdown, last-result, results and next-race cards |
+
+
+### Actions
+
+This card supports all the default HA actions, except from more-info and toggle. See [Lovelace Actions](https://www.home-assistant.io/lovelace/actions/)
+for more detailed descriptions and examples.
+
+| Name            | Type        | Default      | Description                                                                                |
+| --------------- | ----------- | ------------ | ------------------------------------------------------------------------------------------ |
+| action          | string      | **Required** | `call-service`, `url`, `navigate`, `fire-dom-event`, `none`         |
+| service         | string      |              | Service to call when `action` is `call-service`                                            |
+| service_data    | object      |              | Optional data to include when `action` is `call-service`                                   |
+| url_path        | string      |              | URL to open when `action` is `url`                                                         |
+| navigation_path | string      |              | Path to navigate to when `action` is `navigate`                                            |
+| confirmation    | bool/object | `false`      | Enable confirmation dialog                                                                 |
+| haptic          | string      | `none`       | Haptic feedback (`success`, `warning`, `failure`, `light`, `medium`, `heavy`, `selection`) |
+
+Actions example:
+
+```
+type: custom:formulaone-card
+card_type: next_race
+actions:
+  tap_action:
+    action: navigate
+    navigation_path: /lovelace/overview
+
+```
+
 
 ```
 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-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formulaone-card",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Frontend card for Home Assistant to display Formula One data",
   "main": "index.js",
   "scripts": {

diff --git a/src/cards/base-card.ts b/src/cards/base-card.ts
@@ -1,3 +1,4 @@
+import { HomeAssistant } from "custom-card-helpers";
 import { HTMLTemplateResult } from "lit-html";
 import FormulaOneCard from "..";
 import ErgastClient from "../api/ergast-client";
@@ -7,10 +8,13 @@ export abstract class BaseCard {
     parent: FormulaOneCard;
     config: FormulaOneCardConfig;  
     client: ErgastClient;
+    hass: HomeAssistant;
 
-    constructor(config: FormulaOneCardConfig) {     
-        this.config = config;   
+    constructor(parent: FormulaOneCard) {     
+        this.config = parent.config;   
         this.client = new ErgastClient();
+        this.hass = parent._hass;
+        this.parent = parent;
     }    
 
     translation(key: string) : string {

diff --git a/src/cards/constructor-standings.ts b/src/cards/constructor-standings.ts
@@ -1,7 +1,7 @@
 import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
+import FormulaOneCard from "..";
 import { ConstructorStanding } from "../api/models";
-import { FormulaOneCardConfig } from "../types/formulaone-card-types";
 import { getApiErrorMessage, getApiLoadingMessage, getTeamImageUrl } from "../utils";
 import { BaseCard } from "./base-card";
 
@@ -12,8 +12,8 @@ export default class ConstructorStandings extends BaseCard {
         'wins' : 'Wins'
     };
 
-    constructor(config: FormulaOneCardConfig) {
-        super(config);
+    constructor(parent: FormulaOneCard) {
+        super(parent);
     }    
 
     cardSize(): number {        

diff --git a/src/cards/countdown.ts b/src/cards/countdown.ts
@@ -5,7 +5,7 @@ import { BaseCard } from "./base-card";
 import { asyncReplace } from 'lit/directives/async-replace.js';
 import { Race } from "../api/models";
 import { HomeAssistant } from "custom-card-helpers";
-import { FormulaOneCardConfig } from "../types/formulaone-card-types";
+import FormulaOneCard from "..";
 
 export default class Countdown extends BaseCard {
     hass: HomeAssistant;
@@ -30,10 +30,8 @@ export default class Countdown extends BaseCard {
         'qualifying' : 'Qualifying'
     };
 
-    constructor(hass: HomeAssistant, config: FormulaOneCardConfig) {
-        super(config);        
-
-        this.hass = hass;
+    constructor(parent: FormulaOneCard) {
+        super(parent);    
     }
 
     cardSize(): number {
@@ -42,7 +40,7 @@ export default class Countdown extends BaseCard {
 
     renderHeader(race: Race): HTMLTemplateResult {        
         return this.config.show_raceinfo ? 
-            html`<table><tr><td colspan="5">${renderHeader(this.config, race, true)}</td></tr>
+            html`<table><tr><td colspan="5">${renderHeader(this, race)}</td></tr>
             ${renderRaceInfo(this.hass, this.config, race, this)}</table>`
             : null;
     }

diff --git a/src/cards/driver-standings.ts b/src/cards/driver-standings.ts
@@ -1,7 +1,7 @@
 import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
+import FormulaOneCard from "..";
 import { Constructor, DriverStanding } from "../api/models";
-import { FormulaOneCardConfig } from "../types/formulaone-card-types";
 import { getApiErrorMessage, getApiLoadingMessage, getCountryFlagByNationality, getDriverName, getTeamImageUrl } from "../utils";
 import { BaseCard } from "./base-card";
 
@@ -13,9 +13,9 @@ export default class DriverStandings extends BaseCard {
         'wins' : 'Wins'
     };
 
-    constructor(config: FormulaOneCardConfig) {
-        super(config);
-    }    
+    constructor(parent: FormulaOneCard) {
+        super(parent);    
+    }
 
     cardSize(): number {
         return 12;

diff --git a/src/cards/last-result.ts b/src/cards/last-result.ts
@@ -1,7 +1,7 @@
 import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
+import FormulaOneCard from "..";
 import { Result } from "../api/models";
-import { FormulaOneCardConfig } from "../types/formulaone-card-types";
 import { getApiErrorMessage, getApiLoadingMessage, getDriverName, renderHeader } from "../utils";
 import { BaseCard } from "./base-card";
 
@@ -13,9 +13,9 @@ export default class LastResult extends BaseCard {
         'status' : 'Status'
     };
 
-    constructor(config: FormulaOneCardConfig) {
-        super(config);
-    }   
+    constructor(parent: FormulaOneCard) {
+        super(parent);    
+    }  
 
     cardSize(): number {
         return 11;
@@ -40,7 +40,7 @@ export default class LastResult extends BaseCard {
               ? html` 
                     <table>
                         <tr>
-                            <td>${renderHeader(this.config, response)}</td>
+                            <td>${renderHeader(this, response)}</td>
                         </tr>
                     </table>
                     <table>

diff --git a/src/cards/next-race.ts b/src/cards/next-race.ts
@@ -1,7 +1,7 @@
 import { HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
-import { FormulaOneCardConfig } from "../types/formulaone-card-types";
+import FormulaOneCard from "..";
 import { getApiErrorMessage, getApiLoadingMessage, getEndOfSeasonMessage, renderHeader, renderRaceInfo } from "../utils";
 import { BaseCard } from "./base-card";
 
@@ -23,11 +23,9 @@ export default class NextRace extends BaseCard {
         'endofseason' : 'Season is over. See you next year!'
     };
 
-    constructor(hass: HomeAssistant, config: FormulaOneCardConfig) {
-        super(config);
-
-        this.hass = hass;
-    }   
+    constructor(parent: FormulaOneCard) {
+        super(parent);    
+    } 
 
     cardSize(): number {
         return 8;
@@ -52,7 +50,7 @@ export default class NextRace extends BaseCard {
                 return html`<table>
                         <tbody>
                             <tr>
-                                <td colspan="5">${renderHeader(this.config, nextRace)}</td>
+                                <td colspan="5">${renderHeader(this, nextRace)}</td>
                             </tr>
                             ${renderRaceInfo( this.hass, this.config, nextRace, this)}    
                         </tbody>

diff --git a/src/cards/results.ts b/src/cards/results.ts
@@ -2,7 +2,7 @@ import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
 import FormulaOneCard from "..";
 import { Race, Result } from "../api/models";
-import { CardProperties, FormulaOneCardConfig } from "../types/formulaone-card-types";
+import { CardProperties } from "../types/formulaone-card-types";
 import { getApiErrorMessage, getApiLoadingMessage, getDriverName, renderHeader } from "../utils";
 import { BaseCard } from "./base-card";
 
@@ -18,13 +18,10 @@ export default class Results extends BaseCard {
         'selectrace' : 'Select race',
         'noresults' : 'Please select a race thats already been run.'
     };
-    parent: FormulaOneCard;
 
-    constructor(config: FormulaOneCardConfig, parent: FormulaOneCard) {
-        super(config);
-
-        this.parent = parent;
-    }
+    constructor(parent: FormulaOneCard) {
+        super(parent);    
+    } 
 
     cardSize(): number {
         return 11;
@@ -48,7 +45,7 @@ export default class Results extends BaseCard {
             return null;
         }
 
-        return renderHeader(this.config, race);
+        return renderHeader(this, race);
     }
 
     render() : HTMLTemplateResult {

diff --git a/src/cards/schedule.ts b/src/cards/schedule.ts
@@ -1,9 +1,9 @@
 import { formatTime, HomeAssistant } from "custom-card-helpers";
 import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
+import FormulaOneCard from "..";
 import { Circuit, Race } from "../api/models";
 import { formatDate } from "../lib/format_date";
-import { FormulaOneCardConfig } from "../types/formulaone-card-types";
 import { getApiErrorMessage, getApiLoadingMessage, getEndOfSeasonMessage } from "../utils";
 import { BaseCard } from "./base-card";
 
@@ -16,12 +16,10 @@ export default class Schedule extends BaseCard {
         'location' : 'Location',
         'endofseason' : 'Season is over. See you next year!'
     };
-
-    constructor(hass: HomeAssistant, config: FormulaOneCardConfig) {
-        super(config);
 
-        this.hass = hass;
-    }   
+    constructor(parent: FormulaOneCard) {
+        super(parent);    
+    }    
 
     cardSize(): number {
         return 12;