Added cardsize for correct layout

marcokreeft87 · Dec 24, 2022 · 97684a4 · 97684a4
1 parent 7bd567a
commit 97684a4
Show file tree

Hide file tree

Showing 16 changed files with 212 additions and 25 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.6",
+  "version": "0.1.7",
   "description": "Frontend card for hass-formulaoneapi",
   "main": "index.js",
   "scripts": {

diff --git a/src/cards/constructor-standings.ts b/src/cards/constructor-standings.ts
@@ -9,8 +9,13 @@ export default class ConstructorStandings extends BaseCard {
         super(sensor, hass, config);
     }    
 
-    cardSize(): number {
-        throw new Error("Method not implemented.");
+    cardSize(): number {        
+        const data = this.sensor.data as ConstructorStanding[];        
+        if(!data) {
+            return 2;
+        }
+
+        return (data.length == 0 ? 1 : data.length / 2 ) + 1;
     }
 
     renderStandingRow(standing: ConstructorStanding): HTMLTemplateResult {

diff --git a/src/cards/driver-standings.ts b/src/cards/driver-standings.ts
@@ -12,7 +12,12 @@ export default class DriverStandings extends BaseCard {
     }    
 
     cardSize(): number {
-        throw new Error("Method not implemented.");
+        const data = this.sensor.data as DriverStanding[];
+        if(!data) {
+            return 2;
+        }
+
+        return (data.length == 0 ? 1 : data.length / 2 ) + 1;
     }  
 
     getCountryFlag = (nationality: string) => {

diff --git a/src/cards/last-result.ts b/src/cards/last-result.ts
@@ -11,7 +11,12 @@ export default class LastResult extends BaseCard {
     }   
 
     cardSize(): number {
-        throw new Error("Method not implemented.");
+        const data = this.sensor.data as Race;
+        if(!data || !data.Results) {
+            return 2;
+        }
+
+        return (data.Results.length == 0 ? 1 : data.Results.length / 2 ) + 1;
     }
 
     renderResultRow(result: Result): HTMLTemplateResult {

diff --git a/src/cards/next-race.ts b/src/cards/next-race.ts
@@ -19,7 +19,12 @@ export default class NextRace extends BaseCard {
     }   
 
     cardSize(): number {
-        throw new Error("Method not implemented.");
+        const data = this.next_race;
+        if(!data) {
+            return 2;
+        }
+
+        return 8;
     }
 
     renderHeader(): HTMLTemplateResult {

diff --git a/src/cards/schedule.ts b/src/cards/schedule.ts
@@ -17,7 +17,12 @@ export default class Schedule extends BaseCard {
     }   
 
     cardSize(): number {
-        throw new Error("Method not implemented.");
+        const data = this.sensor.data as Race[];        
+        if(!data) {
+            return 2;
+        }
+
+        return (data.length == 0 ? 1 : data.length / 2 ) + 1;
     }
 
     renderSeasonEnded(): HTMLTemplateResult {

diff --git a/src/index.ts b/src/index.ts
@@ -56,26 +56,25 @@ export default class FormulaOneCard extends LitElement {
     }
 
     renderCardType(): HTMLTemplateResult {
-        let card: BaseCard;
         switch(this.config.card_type) {
             case FormulaOneCardType.ConstructorStandings:
-                card =  new ConstructorStandings(this.config.sensor, this._hass, this.config);
+                this.card =  new ConstructorStandings(this.config.sensor, this._hass, this.config);
                 break;
             case FormulaOneCardType.DriverStandings:                
-                card =  new DriverStandings(this.config.sensor, this._hass, this.config);
+                this.card =  new DriverStandings(this.config.sensor, this._hass, this.config);
                 break;
             case FormulaOneCardType.Schedule:                
-                card =  new Schedule(this.config.sensor, this._hass, this.config);
+                this.card =  new Schedule(this.config.sensor, this._hass, this.config);
                 break;
             case FormulaOneCardType.NextRace:                
-                card =  new NextRace(this.config.sensor, this._hass, this.config); 
+                this.card =  new NextRace(this.config.sensor, this._hass, this.config); 
                 break;    
             case FormulaOneCardType.LastResult:                
-                card = new LastResult(this.config.sensor, this._hass, this.config);
+                this.card = new LastResult(this.config.sensor, this._hass, this.config);
                 break;
         }
 
-        return card.render();
+        return this.card.render();
     }
 
     render() : HTMLTemplateResult {

diff --git a/tests/cards/constructor-standings.test.ts b/tests/cards/constructor-standings.test.ts
@@ -41,5 +41,35 @@ describe('Testing constructor-standings file', () => {
         const htmlResult = getRenderString(result);
 
         expect(htmlResult).toMatch('<table> <thead> <tr> <th class="width-50">&nbsp;</th> <th>Constructor</th> <th class="width-60 text-center">Pts</th> <th class="text-center">Wins</th> </tr> </thead> <tbody> <tr> <td class="width-50 text-center">1</td> <td>Red Bull</td> <td class="width-60 text-center">576</td> <td class="text-center">13</td> </tr> <tr> <td class="width-50 text-center">2</td> <td>Ferrari</td> <td class="width-60 text-center">439</td> <td class="text-center">4</td> </tr> <tr> <td class="width-50 text-center">3</td> <td>Mercedes</td> <td class="width-60 text-center">373</td> <td class="text-center">0</td> </tr> <tr> <td class="width-50 text-center">4</td> <td>McLaren</td> <td class="width-60 text-center">129</td> <td class="text-center">0</td> </tr> <tr> <td class="width-50 text-center">5</td> <td>Alpine F1 Team</td> <td class="width-60 text-center">125</td> <td class="text-center">0</td> </tr> <tr> <td class="width-50 text-center">6</td> <td>Alfa Romeo</td> <td class="width-60 text-center">52</td> <td class="text-center">0</td> </tr> <tr> <td class="width-50 text-center">7</td> <td>Aston Martin</td> <td class="width-60 text-center">37</td> <td class="text-center">0</td> </tr> <tr> <td class="width-50 text-center">8</td> <td>Haas F1 Team</td> <td class="width-60 text-center">34</td> <td class="text-center">0</td> </tr> <tr> <td class="width-50 text-center">9</td> <td>AlphaTauri</td> <td class="width-60 text-center">34</td> <td class="text-center">0</td> </tr> <tr> <td class="width-50 text-center">10</td> <td>Williams</td> <td class="width-60 text-center">6</td> <td class="text-center">0</td> </tr> </tbody> </table>');
+    }),
+    test('Calling cardSize with hass and sensor', () => { 
+
+        hassEntity.attributes['data'] = data as ConstructorStanding[];
+        hass.states = {
+            'sensor.test_sensor_constructors': hassEntity
+        };
+
+        const card = new ConstructorStandings('sensor.test_sensor_constructors', hass, config);
+        expect(card.cardSize()).toBe(6);
+    }),
+    test('Calling cardSize with hass and sensor without data', () => { 
+
+        hassEntity.attributes['data'] = [];
+        hass.states = {
+            'sensor.test_sensor_constructors': hassEntity
+        };
+
+        const card = new ConstructorStandings('sensor.test_sensor_constructors', hass, config);
+        expect(card.cardSize()).toBe(2);
+    })
+    test('Calling cardSize with hass and sensor without data', () => { 
+
+        hassEntity.attributes['data'] = undefined;
+        hass.states = {
+            'sensor.test_sensor_constructors': hassEntity
+        };
+
+        const card = new ConstructorStandings('sensor.test_sensor_constructors', hass, config);
+        expect(card.cardSize()).toBe(2);
     })
 });
diff --git a/tests/cards/driver-standings.test.ts b/tests/cards/driver-standings.test.ts
@@ -57,5 +57,35 @@ describe('Testing driver-standings file', () => {
         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>');
+    }),
+    test('Calling cardSize with hass and sensor', () => { 
+
+        hassEntity.attributes['data'] = data as DriverStanding[];
+        hass.states = {
+            'sensor.test_sensor_constructors': hassEntity
+        };
+
+        const card = new DriverStandings('sensor.test_sensor_constructors', hass, config);
+        expect(card.cardSize()).toBe(12);
+    }),
+    test('Calling cardSize with hass and sensor without data', () => { 
+
+        hassEntity.attributes['data'] = [];
+        hass.states = {
+            'sensor.test_sensor_constructors': hassEntity
+        };
+
+        const card = new DriverStandings('sensor.test_sensor_constructors', hass, config);
+        expect(card.cardSize()).toBe(2);
+    }),
+    test('Calling cardSize with hass and sensor without data', () => { 
+
+        hassEntity.attributes['data'] = undefined;
+        hass.states = {
+            'sensor.test_sensor_constructors': hassEntity
+        };
+
+        const card = new DriverStandings('sensor.test_sensor_constructors', hass, config);
+        expect(card.cardSize()).toBe(2);
     })
 });
diff --git a/tests/cards/last-result.test.ts b/tests/cards/last-result.test.ts
@@ -67,5 +67,36 @@ describe('Testing last-result file', () => {
         const htmlResult = getRenderString(result);
 
         expect(htmlResult).toMatch('<h2><img height="25" src="https://www.countries-ofthe-world.com/flags-normal/flag-of-Singapore.png">&nbsp; 17 : Singapore Grand Prix</h2><a target="_new" href="http://en.wikipedia.org/wiki/Marina_Bay_Street_Circuit"><img width="100%" src="https://www.formula1.com/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/Singapore_Circuit.png.transform/7col/image.png"></a><br>');
+    }),
+    test('Calling cardSize with hass and sensor', () => { 
+
+        hassEntity.attributes['data'] = data as Race;
+        hass.states = {
+            'sensor.test_sensor_last_result': hassEntity
+        };
+
+        const card = new LastResult('sensor.test_sensor_last_result', hass, config);
+        expect(card.cardSize()).toBe(11);
+    }),
+    test('Calling cardSize with hass and sensor without data', () => { 
+
+        hassEntity.attributes['data'] = undefined;
+        hass.states = {
+            'sensor.test_sensor_last_result': hassEntity
+        };
+
+        const card = new LastResult('sensor.test_sensor_last_result', hass, config);
+        expect(card.cardSize()).toBe(2);
+    }),
+    test('Calling cardSize with hass and sensor', () => { 
+        const raceData = data as Race;
+        raceData.Results = [];
+        hassEntity.attributes['data'] = raceData;
+        hass.states = {
+            'sensor.test_sensor_last_result': hassEntity
+        };
+
+        const card = new LastResult('sensor.test_sensor_last_result', hass, config);
+        expect(card.cardSize()).toBe(2);
     })
 });
diff --git a/tests/cards/next-race.test.ts b/tests/cards/next-race.test.ts
@@ -117,5 +117,26 @@ describe('Testing next-race file', () => {
         const htmlResult = getRenderString(result);
 
         expect(htmlResult).toMatch('<table><tr><td class="text-center"><strong>Season is over. See you next year!</strong></td></tr></table>');
+    }),
+    test('Calling cardSize with hass and sensor', () => { 
+
+        const raceData = data as Race;
+        hassEntity.attributes['next_race'] = raceData;
+        hass.states = {
+            'sensor.test_sensor_races': hassEntity
+        };
+
+        const card = new NextRace('sensor.test_sensor_races', hass, config);
+        expect(card.cardSize()).toBe(8);
+    }),
+    test('Calling cardSize with hass and sensor without data', () => { 
+
+        hassEntity.attributes['next_race'] = undefined;
+        hass.states = {
+            'sensor.test_sensor_races': hassEntity
+        };
+
+        const card = new NextRace('sensor.test_sensor_races', hass, config);
+        expect(card.cardSize()).toBe(2);
     })
 });
diff --git a/tests/cards/schedule.test.ts b/tests/cards/schedule.test.ts
@@ -99,5 +99,35 @@ describe('Testing schedule file', () => {
         const htmlResult = getRenderString(result);
 
         expect(htmlResult).toMatch('<table><tr><td class="text-center"><strong>Season is over. See you next year!</strong></td></tr></table>');
+    }),
+    test('Calling cardSize with hass and sensor', () => { 
+
+        hassEntity.attributes['data'] = data as Race[];
+        hass.states = {
+            'sensor.test_sensor_races': hassEntity
+        };
+
+        const card = new Schedule('sensor.test_sensor_races', hass, config);
+        expect(card.cardSize()).toBe(12);
+    }),
+    test('Calling cardSize with hass and sensor without data', () => { 
+
+        hassEntity.attributes['data'] = [];
+        hass.states = {
+            'sensor.test_sensor_races': hassEntity
+        };
+
+        const card = new Schedule('sensor.test_sensor_races', hass, config);
+        expect(card.cardSize()).toBe(2);
+    })
+    test('Calling cardSize with hass and sensor without data', () => { 
+
+        hassEntity.attributes['data'] = undefined;
+        hass.states = {
+            'sensor.test_sensor_races': hassEntity
+        };
+
+        const card = new Schedule('sensor.test_sensor_races', hass, config);
+        expect(card.cardSize()).toBe(2);
     })
 });
diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -179,6 +179,27 @@ describe('Testing index file function setConfig', () => {
         const result = card['shouldUpdate'](props);
 
         expect(result).toBeTruthy();
+    }),
+    test.each`
+    type | expected
+    ${FormulaOneCardType.ConstructorStandings}, ${2}
+    ${FormulaOneCardType.DriverStandings}, ${2}
+    ${FormulaOneCardType.LastResult}, ${2}
+    ${FormulaOneCardType.NextRace}, ${8}
+    ${FormulaOneCardType.Schedule}, ${2}
+    `('Calling getCardSize with type should return card size', ({ type, expected }) => {  
+
+        const config: FormulaOneCardConfig = {
+            type: '',
+            title: 'Test',
+            card_type: type.toString(),
+            sensor: 'sensor.test_sensor_races'
+        }
+
+        card.setConfig(config);
+        card.hass = hass;
+        card.render();
+        expect(card.getCardSize()).toBe(expected);
     })
 })