Made tab order configurable (#276)

README.md

@@ -74,6 +74,7 @@ or added by clicking the "Add to lovelace" button on the HACS dashboard after in
 | next_race_delay   | number        |                                     | Delay (in hours) before the card switches to the next race |
 | 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)    |
 
 
 ### Actions

package.json

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

src/cards/results.ts

@@ -43,19 +43,22 @@ export default class Results extends BaseCard {
         const tabs: FormulaOneCardTab[] = [{
             title: 'Results',
             icon: this.icon('results'),
-            content: this.renderResults(selectedRace)
+            content: this.renderResults(selectedRace),
+            order: this.tabOrder('results')
         }, {
             title: 'Qualifying',
             icon: this.icon('qualifying'),
-            content: this.renderQualifying(selectedRace)
+            content: this.renderQualifying(selectedRace),
+            order: this.tabOrder('qualifying')
         }, {
             title: 'Sprint',
             icon: this.icon('sprint'),
             content: this.renderSprint(selectedRace),
-            hide: !selectedRace?.SprintResults
+            hide: !selectedRace?.SprintResults,
+            order: this.tabOrder('sprint')
         }];
 
-        return tabs;
+        return tabs.sort((a, b) => a.order - b.order);
     }
 
     renderSprint(selectedRace: Race) : HTMLTemplateResult {
@@ -363,4 +366,10 @@ export default class Results extends BaseCard {
 
         return this.config.icons[key];
     }
+
+    tabOrder(tab: string) : number {
+        const tabsOrder = this.config.tabs_order?.map(tab => tab.toLowerCase()) ?? ['results', 'qualifying', 'sprint'];
+
+        return tabsOrder.indexOf(tab);
+    }
 }

src/types/formulaone-card-types.ts

@@ -27,6 +27,7 @@ export interface FormulaOneCardConfig extends LovelaceCardConfig {
     next_race_delay?: number;
     show_lastyears_result?: boolean;
     only_show_date?: boolean;
+    tabs_order?: string[];
 }
 
 export interface ValueChangedEvent {
@@ -130,7 +131,8 @@ export interface FormulaOneCardTab {
     title: string
     icon: string
     content: HTMLTemplateResult,
-    hide?: boolean
+    hide?: boolean,
+    order?: number
 }
 
 export interface SelectChangeEvent {

tests/cards/results.test.ts

@@ -436,6 +436,46 @@ describe('Testing results file', () => {
         expect(fetchMock).toHaveBeenCalledWith("https://ergast.com/api/f1/2022/5/results.json", {"headers": {"Accept": "application/json"}});
         expect(fetchMock).toHaveBeenCalledWith("https://ergast.com/api/f1/2022/5/qualifying.json", {"headers": {"Accept": "application/json"}});
         expect(fetchMock).toHaveBeenCalledWith("https://ergast.com/api/f1/2022/5/sprint.json", {"headers": {"Accept": "application/json"}});
+    }),    
+    test('Calling setSelectedRace with selectedSeason undefined no results', async () => {
+        // Arrange
+        parent.properties.set('cardValues', { selectedSeason: '2022', selectedRace: undefined });
+        const card = new Results(parent);
+
+        setFetchMock();
+
+        // Act
+        card.setSelectedRace({ target: { value: '5' } });
+
+        // Assert
+        expect(fetchMock).toHaveBeenCalledWith("https://ergast.com/api/f1/2022/5/results.json", {"headers": {"Accept": "application/json"}});
+        expect(fetchMock).toHaveBeenCalledWith("https://ergast.com/api/f1/2022/5/qualifying.json", {"headers": {"Accept": "application/json"}});
+        expect(fetchMock).toHaveBeenCalledWith("https://ergast.com/api/f1/2022/5/sprint.json", {"headers": {"Accept": "application/json"}});
+    }),
+    test('Calling render without tab_order should arrange tabs in default order', async () => {
+        // Arrange
+        const card = new Results(parent);
+
+        // Act
+        const tabs = card.renderTabs(lastRace);
+
+        // Assert
+        expect(tabs[0].title).toBe('Results');
+        expect(tabs[1].title).toBe('Qualifying');
+        expect(tabs[2].title).toBe('Sprint');
+    }),
+    test('Calling render without tab_order should arrange tabs in given order', async () => {
+        // Arrange
+        const card = new Results(parent);
+        card.config.tabs_order = ['Qualifying', 'Sprint', 'Results'];
+
+        // Act
+        const tabs = card.renderTabs(lastRace);
+
+        // Assert
+        expect(tabs[0].title).toBe('Qualifying');
+        expect(tabs[1].title).toBe('Sprint');
+        expect(tabs[2].title).toBe('Results');
     })
 
     function setFetchMock() {