hi all.
Using the F1 integration, created a dedicated dashboard,
have various tabs...
trying to create a tab that shows "Practice Sessions", as a vertical card, with sub cards say for fp1, fp2 and fp3, while session show the data for drivers for that session and after session show say the best times.
anyone got something like this working, thats willing to share the raw yaml.
type: custom:grid-layout
title: Practice Sessions
name: Practice Sessions
path: practice_sessions
icon: mdi:car-speedometer
cards:
- type: vertical-stack
cards:
- type: markdown
content: "## ⏱️ Free Practice 1 (FP1)"
- type: conditional
conditions:
- condition: state
entity: sensor.f1_current_session
state: Practice 1
card:
type: custom:f1-live-session-card
session_entity: sensor.f1_current_session
session_status_entity: sensor.f1_session_status
track_status_entity: sensor.f1_track_status
weather_entity: sensor.f1_track_weather
driver_positions_entity: sensor.f1_driver_positions
show_drivers: true
show_intervals: true
show_pit_status: true
show_tyre_compound: true
show_lap_times: true
show_sector_times: true
- type: conditional
conditions:
- condition: state
entity: sensor.f1_current_session
state_not: Practice 1
card:
type: custom:button-card
entity: sensor.f1_current_season
show_name: false
show_state: false
show_icon: false
styles:
grid:
- grid-template-areas: "'standings'"
card:
- padding: 16px
- border-radius: 8px
- background: rgba(255,255,255,0.03)
custom_fields:
standings: |
[[[
if (!entity?.attributes?.last_p1_results) return "Historical FP1 driver data loading or unavailable.";
const results = entity.attributes.last_p1_results;
let table = `<table style="width:100%; border-collapse: collapse; font-family: sans-serif;">
<thead>
<tr style="border-bottom: 2px solid rgba(255,255,255,0.2); text-align: left; font-size: 13px;">
<th style="padding: 8px 4px;">Pos</th>
<th style="padding: 8px 4px;">Driver</th>
<th style="padding: 8px 4px;">Team</th>
<th style="padding: 8px 4px; text-align: center;">Laps</th>
<th style="padding: 8px 4px;">Best Lap</th>
</tr>
</thead>
<tbody>`;
results.forEach(r => {
const totalLaps = r.laps || r.FastestLap?.lap || '-';
table += `<tr style="border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px;">
<td style="padding: 8px 4px; font-weight: bold;">${r.position}</td>
<td style="padding: 8px 4px;">${r.Driver.givenName} ${r.Driver.familyName}</td>
<td style="padding: 8px 4px; color: var(--secondary-text-color);">${r.Constructor.name}</td>
<td style="padding: 8px 4px; text-align: center; font-weight: 500;">${totalLaps}</td>
<td style="padding: 8px 4px; font-family: monospace;">${r.FastestLap?.Time?.time || 'No Time'}</td>
</tr>`;
});
table += '</tbody></table>';
return table;
]]]
- type: markdown
content: "## ⏱️ Free Practice 2 (FP2)"
- type: conditional
conditions:
- condition: state
entity: sensor.f1_current_session
state: Practice 2
card:
type: custom:f1-live-session-card
session_entity: sensor.f1_current_session
session_status_entity: sensor.f1_session_status
track_status_entity: sensor.f1_track_status
weather_entity: sensor.f1_track_weather
driver_positions_entity: sensor.f1_driver_positions
show_drivers: true
show_intervals: true
show_pit_status: true
show_tyre_compound: true
show_lap_times: true
show_sector_times: true
- type: conditional
conditions:
- condition: state
entity: sensor.f1_current_session
state_not: Practice 2
card:
type: custom:button-card
entity: sensor.f1_current_season
show_name: false
show_state: false
show_icon: false
styles:
grid:
- grid-template-areas: "'standings'"
card:
- padding: 16px
- border-radius: 8px
- background: rgba(255,255,255,0.03)
custom_fields:
standings: |
[[[
if (!entity?.attributes?.last_p2_results) return "Historical FP2 driver data loading or unavailable.";
const results = entity.attributes.last_p2_results;
let table = `<table style="width:100%; border-collapse: collapse; font-family: sans-serif;">
<thead>
<tr style="border-bottom: 2px solid rgba(255,255,255,0.2); text-align: left; font-size: 13px;">
<th style="padding: 8px 4px;">Pos</th>
<th style="padding: 8px 4px;">Driver</th>
<th style="padding: 8px 4px;">Team</th>
<th style="padding: 8px 4px; text-align: center;">Laps</th>
<th style="padding: 8px 4px;">Best Lap</th>
</tr>
</thead>
<tbody>`;
results.forEach(r => {
const totalLaps = r.laps || r.FastestLap?.lap || '-';
table += `<tr style="border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px;">
<td style="padding: 8px 4px; font-weight: bold;">${r.position}</td>
<td style="padding: 8px 4px;">${r.Driver.givenName} ${r.Driver.familyName}</td>
<td style="padding: 8px 4px; color: var(--secondary-text-color);">${r.Constructor.name}</td>
<td style="padding: 8px 4px; text-align: center; font-weight: 500;">${totalLaps}</td>
<td style="padding: 8px 4px; font-family: monospace;">${r.FastestLap?.Time?.time || 'No Time'}</td>
</tr>`;
});
table += '</tbody></table>';
return table;
]]]
- type: markdown
content: "## ⏱️ Free Practice 3 (FP3)"
- type: conditional
conditions:
- condition: state
entity: sensor.f1_current_session
state: Practice 3
card:
type: custom:f1-live-session-card
session_entity: sensor.f1_current_session
session_status_entity: sensor.f1_session_status
track_status_entity: sensor.f1_track_status
weather_entity: sensor.f1_track_weather
driver_positions_entity: sensor.f1_driver_positions
show_drivers: true
show_intervals: true
show_pit_status: true
show_tyre_compound: true
show_lap_times: true
show_sector_times: true
- type: conditional
conditions:
- condition: state
entity: sensor.f1_current_session
state_not: Practice 3
card:
type: custom:button-card
entity: sensor.f1_current_season
show_name: false
show_state: false
show_icon: false
styles:
grid:
- grid-template-areas: "'standings'"
card:
- padding: 16px
- border-radius: 8px
- background: rgba(255,255,255,0.03)
custom_fields:
standings: |
[[[
if (!entity?.attributes?.last_p3_results) return "Historical FP3 driver data loading or unavailable.";
const results = entity.attributes.last_p3_results;
let table = `<table style="width:100%; border-collapse: collapse; font-family: sans-serif;">
<thead>
<tr style="border-bottom: 2px solid rgba(255,255,255,0.2); text-align: left; font-size: 13px;">
<th style="padding: 8px 4px;">Pos</th>
<th style="padding: 8px 4px;">Driver</th>
<th style="padding: 8px 4px;">Team</th>
<th style="padding: 8px 4px; text-align: center;">Laps</th>
<th style="padding: 8px 4px;">Best Lap</th>
</tr>
</thead>
<tbody>`;
results.forEach(r => {
const totalLaps = r.laps || r.FastestLap?.lap || '-';
table += `<tr style="border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px;">
<td style="padding: 8px 4px; font-weight: bold;">${r.position}</td>
<td style="padding: 8px 4px;">${r.Driver.givenName} ${r.Driver.familyName}</td>
<td style="padding: 8px 4px; color: var(--secondary-text-color);">${r.Constructor.name}</td>
<td style="padding: 8px 4px; text-align: center; font-weight: 500;">${totalLaps}</td>
<td style="padding: 8px 4px; font-family: monospace;">${r.FastestLap?.Time?.time || 'No Time'}</td>
</tr>`;
});
table += '</tbody></table>';
return table;
]]]
subview: false
show_icon_and_title: true