Added row_limit to limit table cards (#125)

formulaone-card.js.LICENSE.txt

@@ -21,9 +21,3 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */

src/cards/driver-standings.ts

@@ -2,7 +2,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 { getApiErrorMessage, getApiLoadingMessage, getCountryFlagByNationality, getDriverName, getTeamImageUrl } from "../utils";
+import { getApiErrorMessage, getApiLoadingMessage, getCountryFlagByNationality, getDriverName, getTeamImageUrl, reduceArray } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class DriverStandings extends BaseCard {
@@ -53,7 +53,7 @@ export default class DriverStandings extends BaseCard {
                         </tr>
                         </thead>
                         <tbody>
-                            ${response.map(standing => this.renderStandingRow(standing))}
+                            ${reduceArray(response, this.config.row_limit).map(standing => this.renderStandingRow(standing))}
                         </tbody>
                     </table>
                     `

src/cards/last-result.ts

@@ -2,7 +2,7 @@ import { html, HTMLTemplateResult } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
 import FormulaOneCard from "..";
 import { Result } from "../api/models";
-import { getApiErrorMessage, getApiLoadingMessage, getDriverName, renderHeader } from "../utils";
+import { getApiErrorMessage, getApiLoadingMessage, getDriverName, reduceArray, renderHeader } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class LastResult extends BaseCard {
@@ -54,7 +54,7 @@ export default class LastResult extends BaseCard {
                             </tr>
                         </thead>
                         <tbody>
-                            ${response.Results.map(result => this.renderResultRow(result))}
+                            ${reduceArray(response.Results, this.config.row_limit).map(result => this.renderResultRow(result))}
                         </tbody>
                     </table>`
               : html`${getApiErrorMessage('last result')}`),

src/cards/results.ts

@@ -3,7 +3,7 @@ import { until } from 'lit-html/directives/until.js';
 import FormulaOneCard from "..";
 import { Race, Result } from "../api/models";
 import { CardProperties } from "../types/formulaone-card-types";
-import { getApiErrorMessage, getApiLoadingMessage, getDriverName, renderHeader } from "../utils";
+import { getApiErrorMessage, getApiLoadingMessage, getDriverName, reduceArray, renderHeader } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class Results extends BaseCard {    
@@ -140,7 +140,7 @@ export default class Results extends BaseCard {
                                 </tr>
                             </thead>
                             <tbody>
-                                ${selectedRace.Results.map(result => this.renderResultRow(result))}
+                                ${reduceArray(selectedRace.Results, this.config.row_limit).map(result => this.renderResultRow(result))}
                             </tbody>
                         </table>` 
                 : html`<table>

src/cards/schedule.ts

@@ -4,7 +4,7 @@ import { until } from 'lit-html/directives/until.js';
 import FormulaOneCard from "..";
 import { Circuit, Race } from "../api/models";
 import { formatDate } from "../lib/format_date";
-import { getApiErrorMessage, getApiLoadingMessage, getEndOfSeasonMessage } from "../utils";
+import { getApiErrorMessage, getApiLoadingMessage, getEndOfSeasonMessage, reduceArray } from "../utils";
 import { BaseCard } from "./base-card";
 
 export default class Schedule extends BaseCard {
@@ -68,7 +68,7 @@ export default class Schedule extends BaseCard {
                                 </tr>
                             </thead>
                             <tbody>
-                                ${response.map(race => this.renderScheduleRow(race))}
+                                ${reduceArray(response, this.config.row_limit).map(race => this.renderScheduleRow(race))}
                             </tbody>
                         </table>`;
             }),

src/types/formulaone-card-types.ts

@@ -16,6 +16,7 @@ export interface FormulaOneCardConfig extends LovelaceCardConfig {
     show_raceinfo?: boolean;
     actions?: ActionOptions;
     f1_font?: boolean;
+    row_limit?: number;
 }
 
 export interface ActionOptions {
@@ -66,4 +67,4 @@ export interface ActionHandler extends HTMLElement {
 
 export interface ActionHandlerElement extends HTMLElement {
     actionHandler?: boolean;
-}
+}

src/utils.ts

@@ -190,4 +190,8 @@ export const getRefreshTime = (endpoint: string) => {
     }
 
     return refreshCacheHours;
+}
+
+export const reduceArray = <T>(array: T[], number: number) => {
+    return number ? array.slice(0, number) : array;
 }

tests/utils/reduceArray.test.ts

@@ -0,0 +1,27 @@
+import { reduceArray } from "../../src/utils";
+
+describe('reduceArray', () => {
+    it('should reduce the array to the size of the limit', () => {
+        const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'];
+        const limit = 10;
+        const result = reduceArray(array, limit);
+
+        expect(result.length).toBe(limit);
+    });
+
+    it('should not reduce the array if the limit is greater than the array size', () => {
+        const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'];
+        const limit = 20;
+        const result = reduceArray(array, limit);
+
+        expect(result.length).toBe(array.length);
+    });
+
+    it('should return an empty array if the array is empty', () => {
+        const array = [] as string[];
+        const limit = 20;
+        const result = reduceArray(array, limit);
+
+        expect(result.length).toBe(0);
+    });
+});