// Configuration const LANGUAGE_CODE = "nl-NL"; const LANGUAGE = "nl"; const dataset = "gpblog"; // Default dataset const customSeasonSlug = null; // Can be set via URL parameter // Stages translations object for all supported languages const stagesLabels = { en: { "Practice": "Practice", "Qualification": "Qualification", "Race": "Race", "Sprint Race": "Sprint Race", "Sprint Shootout": "Sprint Shootout", "First Practice": "First Practice", "Second Practice": "Second Practice", "Third Practice": "Third Practice", "Last Practice": "Last Practice", "First Qualification": "First Qualification", "Second Qualification": "Second Qualification", "Third Qualification": "Third Qualification", "Sprint Shootout 1": "Sprint Shootout 1", "Sprint Shootout 2": "Sprint Shootout 2", "Sprint Shootout 3": "Sprint Shootout 3", // UI labels "upcoming_race": "Upcoming race", "overview": "Overview", "timezone_info": "Times are in your local timezone" }, nl: { "Practice": "Training", "Qualification": "Kwalificatie", "Race": "Race", "Sprint Race": "Sprint Race", "Sprint Shootout": "Sprint Shootout", "First Practice": "Eerste Training", "Second Practice": "Tweede Training", "Third Practice": "Derde Training", "Last Practice": "Laatste Training", "First Qualification": "Eerste Kwalificatie", "Second Qualification": "Tweede Kwalificatie", "Third Qualification": "Derde Kwalificatie", "Sprint Shootout 1": "Sprint Kwalificatie 1", "Sprint Shootout 2": "Sprint Kwalificatie 2", "Sprint Shootout 3": "Sprint Kwalificatie 3", // UI labels "upcoming_race": "Komende race", "overview": "Overzicht", "timezone_info": "Tijden zijn in je lokale tijdzone" }, fr: { "Practice": "Essais", "Qualification": "Qualification", "Race": "Course", "Sprint Race": "Course Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Essais Libres 1", "Second Practice": "Essais Libres 2", "Third Practice": "Essais Libres 3", "Last Practice": "Derniers Essais Libres", "First Qualification": "Première Qualification", "Second Qualification": "Deuxième Qualification", "Third Qualification": "Troisième Qualification", "Sprint Shootout 1": "Qualifications Sprint 1", "Sprint Shootout 2": "Qualifications Sprint 2", "Sprint Shootout 3": "Qualifications Sprint 3", // UI labels "upcoming_race": "Prochaine course", "overview": "Aperçu", "timezone_info": "Les horaires sont dans votre fuseau horaire local" }, de: { "Practice": "Training", "Qualification": "Qualifikation", "Race": "Rennen", "Sprint Race": "Sprint-Rennen", "Sprint Shootout": "Sprint-Shootout", "First Practice": "Erstes Training", "Second Practice": "Zweites Training", "Third Practice": "Drittes Training", "Last Practice": "Letztes Training", "First Qualification": "Erste Qualifikation", "Second Qualification": "Zweite Qualifikation", "Third Qualification": "Dritte Qualifikation", "Sprint Shootout 1": "Sprint-Qualifikation 1", "Sprint Shootout 2": "Sprint-Qualifikation 2", "Sprint Shootout 3": "Sprint-Qualifikation 3", // UI labels "upcoming_race": "Nächstes Rennen", "overview": "Übersicht", "timezone_info": "Zeiten sind in Ihrer lokalen Zeitzone" }, es: { "Practice": "Práctica", "Qualification": "Clasificación", "Race": "Carrera", "Sprint Race": "Carrera Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primera Práctica", "Second Practice": "Segunda Práctica", "Third Practice": "Tercera Práctica", "Last Practice": "Última Práctica", "First Qualification": "Primera Clasificación", "Second Qualification": "Segunda Clasificación", "Third Qualification": "Tercera Clasificación", "Sprint Shootout 1": "Clasificación Sprint 1", "Sprint Shootout 2": "Clasificación Sprint 2", "Sprint Shootout 3": "Clasificación Sprint 3", // UI labels "upcoming_race": "Próxima carrera", "overview": "Resumen", "timezone_info": "Los horarios están en tu zona horaria local" }, it: { "Practice": "Prove", "Qualification": "Qualifiche", "Race": "Gara", "Sprint Race": "Gara Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Prime Prove", "Second Practice": "Seconde Prove", "Third Practice": "Terze Prove", "Last Practice": "Ultime Prove", "First Qualification": "Prima Qualifica", "Second Qualification": "Seconda Qualifica", "Third Qualification": "Terza Qualifica", "Sprint Shootout 1": "Qualifiche Sprint 1", "Sprint Shootout 2": "Qualifiche Sprint 2", "Sprint Shootout 3": "Qualifiche Sprint 3", // UI labels "upcoming_race": "Prossima gara", "overview": "Panoramica", "timezone_info": "Gli orari sono nel tuo fuso orario locale" }, pt: { "Practice": "Treino", "Qualification": "Qualificação", "Race": "Corrida", "Sprint Race": "Corrida Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primeiro Treino", "Second Practice": "Segundo Treino", "Third Practice": "Terceiro Treino", "Last Practice": "Último Treino", "First Qualification": "Primeira Qualificação", "Second Qualification": "Segunda Qualificação", "Third Qualification": "Terceira Qualificação", "Sprint Shootout 1": "Qualificação Sprint 1", "Sprint Shootout 2": "Qualificação Sprint 2", "Sprint Shootout 3": "Qualificação Sprint 3", // UI labels "upcoming_race": "Próxima corrida", "overview": "Visão geral", "timezone_info": "Os horários estão no seu fuso horário local" }, "pt-br": { "Practice": "Treino", "Qualification": "Qualificação", "Race": "Corrida", "Sprint Race": "Corrida Sprint", "Sprint Shootout": "Sprint Shootout", "First Practice": "Primeiro Treino", "Second Practice": "Segundo Treino", "Third Practice": "Terceiro Treino", "Last Practice": "Último Treino", "First Qualification": "Primeira Qualificação", "Second Qualification": "Segunda Qualificação", "Third Qualification": "Terceira Qualificação", "Sprint Shootout 1": "Classificação Sprint 1", "Sprint Shootout 2": "Classificação Sprint 2", "Sprint Shootout 3": "Classificação Sprint 3", // UI labels "upcoming_race": "Próxima corrida", "overview": "Visão geral", "timezone_info": "Os horários estão no seu fuso horário local" }, da: { "Practice": "Træning", "Qualification": "Kvalifikation", "Race": "Løb", "Sprint Race": "Sprintløb", "Sprint Shootout": "Sprint Shootout", "First Practice": "Første Træning", "Second Practice": "Anden Træning", "Third Practice": "Tredje Træning", "Last Practice": "Sidste Træning", "First Qualification": "Første Kvalifikation", "Second Qualification": "Anden Kvalifikation", "Third Qualification": "Tredje Kvalifikation", "Sprint Shootout 1": "Sprint Kvalifikation 1", "Sprint Shootout 2": "Sprint Kvalifikation 2", "Sprint Shootout 3": "Sprint Kvalifikation 3", // UI labels "upcoming_race": "Kommende løb", "overview": "Oversigt", "timezone_info": "Tiderne er i din lokale tidszone" }, lt: { "Practice": "Treniruotė", "Qualification": "Kvalifikacija", "Race": "Lenktynės", "Sprint Race": "Sprint Lenktynės", "Sprint Shootout": "Sprint Shootout", "First Practice": "Pirmoji Treniruotė", "Second Practice": "Antroji Treniruotė", "Third Practice": "Trečioji Treniruotė", "Last Practice": "Paskutinė Treniruotė", "First Qualification": "Pirmoji Kvalifikacija", "Second Qualification": "Antroji Kvalifikacija", "Third Qualification": "Trečioji Kvalifikacija", "Sprint Shootout 1": "Sprinto Kvalifikacija 1", "Sprint Shootout 2": "Sprinto Kvalifikacija 2", "Sprint Shootout 3": "Sprinto Kvalifikacija 3", // UI labels "upcoming_race": "Artėjančios lenktynės", "overview": "Apžvalga", "timezone_info": "Laikai yra jūsų vietinėje laiko juostoje" } }; // Helper function for translations function getGpBlogDatasetTranslatedModel(model) { const translations = { track: `${LANGUAGE}/grandsprix`, calendar: `${LANGUAGE}/f1-calendar`, }; return translations[model] || model; } // Fetch the latest season if no custom season is provided async function getLatestSeason() { try { const response = await fetch( `https://dataset-service.newsifier.nl/api/v1/gpblog/Season/items/index?orderBy%5Bname%5D=desc&take=1` ); if (!response.ok) { throw new Error("Failed to fetch latest season"); } const data = await response.json(); return data.data[0]?.slug || null; } catch (error) { console.error("Error fetching latest season:", error); return null; } } // Fetch stages for a season async function fetchStages(seasonSlug) { try { const response = await fetch( `https://dataset-service.newsifier.nl/api/v1/gpblog/Stage/items/index?orderBy%5Bdate_time%5D=asc&where%5Bseason%5D%5Bslug%5D=${seasonSlug}&include%5Btrack%5D%5Binclude%5D%5Bcountry%5D=true` ); if (!response.ok) { throw new Error("Failed to fetch stages"); } const data = await response.json(); return data.data || []; } catch (error) { console.error("Error fetching stages:", error); return []; } } // Process stages data function processStages(stages) { // Get unique track IDs const tracksIds = [...new Set(stages.map(stage => stage.track_id))]; // Group stages by track const tracks = stages.reduce((acc, stage) => { const trackId = stage.track_id; if (!acc[trackId]) { acc[trackId] = { ...stage.track, stages: [], }; } acc[trackId].stages.push(stage); return acc; }, {}); return { tracksIds, tracks }; } // Find the upcoming race track ID function findUpcomingRaceTrackId(stages) { const now = new Date(); // First, find the earliest stage that's in the future const upcomingStage = stages.find(stage => new Date(stage.date_time) >= now); // If we found an upcoming stage, return its track_id if (upcomingStage) { return upcomingStage.track_id; } // If all races are in the past, return the first track as fallback return stages.length > 0 ? stages[0].track_id : null; } // Format date for display function formatDate(dateString, options) { return new Date(dateString).toLocaleString(LANGUAGE_CODE, options); } // Group stages by day function groupStagesByDay(stages) { return stages.reduce((acc, stage) => { const dayName = new Date(stage.date_time).toLocaleDateString(LANGUAGE_CODE, { weekday: "long", }); if (!acc[dayName]) { acc[dayName] = []; } acc[dayName].push(stage); return acc; }, {}); } // Render the F1 calendar function renderF1Calendar(tracksIds, tracks, upcomingTrackId, tagData) { if (!tracksIds.length || !upcomingTrackId) { document.querySelectorAll(".f1-calendar-container").forEach(target => { target.innerHTML = '

No F1 calendar data available

'; }); return; } // Get the upcoming race track const track = tracks[upcomingTrackId]; const tag = tagData.find((tag) => tag.model_id === track.id); const slug = tag?.slug || track.slug; const name = tag?.title || track.name; const translatedTrack = getGpBlogDatasetTranslatedModel("track"); // Group stages by day for the upcoming race const stagesByDay = groupStagesByDay(track.stages || []); // Create HTML for desktop schedule let desktopScheduleHTML = ""; Object.entries(stagesByDay).forEach(([dayName, dayStages]) => { if (dayStages.length > 0) { let stagesHTML = ""; // Get the date from the first stage in this day const date = new Date(dayStages[0].date_time); const formattedDate = `${String(date.getDate()).padStart(2, "0")}.${String( date.getMonth() + 1 ).padStart(2, "0")}.${String(date.getFullYear()).slice(-2)}`; dayStages.forEach(stage => { const stageTime = new Date(stage.date_time).toLocaleString(LANGUAGE_CODE, { hour: "2-digit", minute: "2-digit", }); // Translate stage name using stagesLabels if available const stageName = stagesLabels[LANGUAGE]?.[stage.name] || stage.name; stagesHTML += `

${stageName}

${stageTime}

`; }); desktopScheduleHTML += `

${dayName} ${formattedDate}

${stagesHTML}

`; } }); // Create HTML for mobile schedule let mobileScheduleHTML = ""; // Group stages by date for mobile view const stagesByDate = {}; track.stages.forEach(stage => { const currentDate = new Date(stage.date_time); const dateKey = `${currentDate.getFullYear()}-${currentDate.getMonth()}-${currentDate.getDate()}`; if (!stagesByDate[dateKey]) { stagesByDate[dateKey] = []; } stagesByDate[dateKey].push(stage); }); // Render groups of stages by date for mobile - exactly matching F1CalendarList.tsx Object.entries(stagesByDate).forEach(([dateKey, stages]) => { // Get the date from the first stage in this group const date = new Date(stages[0].date_time); const formattedDate = `${String(date.getDate()).padStart(2, "0")}.${String( date.getMonth() + 1 ).padStart(2, "0")}.${String(date.getFullYear()).slice(-2)}`; // Get the day name, same as used in desktop view const dayName = date.toLocaleDateString(LANGUAGE_CODE, { weekday: "long", }); mobileScheduleHTML += `

${dayName} ${formattedDate}

`; // Add all stages for this date stages.forEach(stage => { const stageDateTime = new Date(stage.date_time).toLocaleString(LANGUAGE_CODE, { weekday: "short", hour: "2-digit", minute: "2-digit", }); // Translate stage name using stagesLabels if available const stageName = stagesLabels[LANGUAGE]?.[stage.name] || stage.name; mobileScheduleHTML += `

${stageName}

${stageDateTime}

`; }); // Close the date group container mobileScheduleHTML += `

`; }); // Create the main HTML const html = ` ${stagesLabels[LANGUAGE]?.upcoming_race || "Komende race"}

${desktopScheduleHTML}

${mobileScheduleHTML}

${stagesLabels[LANGUAGE]?.timezone_info || "Tijden zijn in je lokale tijdzone"}

`; document.querySelectorAll(".f1-calendar-container").forEach(target => { target.innerHTML = html; // After rendering, scroll to today's events if they exist setTimeout(() => { console.log('F1 Calendar: Starting auto-scroll to relevant day'); const today = new Date(); today.setHours(0, 0, 0, 0); // Normalize to start of day for date comparison const currentHour = new Date().getHours(); const currentMinutes = new Date().getMinutes(); console.log(`F1 Calendar: Looking for ${today.toDateString()}, headers found: ${target.querySelectorAll('.mobile-date-header').length}`); // Find today's date group and scroll it into view const dateHeaders = target.querySelectorAll('.mobile-date-header'); let foundToday = false; let closestUpcomingDay = null; let closestDayDiff = Infinity; // First, try to find today or determine closest upcoming day dateHeaders.forEach((header, index) => { const dateText = header.textContent; const dayName = today.toLocaleDateString(LANGUAGE_CODE, { weekday: 'long' }); console.log(`F1 Calendar: Header ${index}: "${dateText.trim()}", looking for day: "${dayName}"`); if (dateText.includes(dayName)) { foundToday = true; console.log('F1 Calendar: Found today in schedule, scrolling to it'); // Found today's date group const mobileStagesContainer = header.nextElementSibling; if (mobileStagesContainer && mobileStagesContainer.classList.contains('mobile-stages-container')) { // Make parent container visible and scroll into view const parentGroup = header.closest('.mobile-date-group'); if (parentGroup) { parentGroup.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); // Now find the current or next upcoming event in the horizontal container const events = mobileStagesContainer.querySelectorAll('.mobile-event'); let currentOrNextEvent = null; let minTimeDiff = Infinity; events.forEach(event => { const timeElement = event.querySelector('.mobile-event-time'); if (timeElement) { // Extract time from the event const timeText = timeElement.textContent.trim(); const [hours, minutes] = timeText.split(':').map(part => parseInt(part)); if (!isNaN(hours) && !isNaN(minutes)) { // Calculate time difference in minutes const eventTimeInMinutes = hours * 60 + minutes; const currentTimeInMinutes = currentHour * 60 + currentMinutes; const timeDiff = eventTimeInMinutes - currentTimeInMinutes; // We want either the current event or the next upcoming one if ((timeDiff >= 0 && timeDiff < minTimeDiff) || (currentOrNextEvent === null && timeDiff < 0)) { currentOrNextEvent = event; minTimeDiff = Math.max(0, timeDiff); } } } }); // Scroll to the current or next event if (currentOrNextEvent) { // Calculate position to center the event in the container const containerWidth = mobileStagesContainer.offsetWidth; const eventOffset = currentOrNextEvent.offsetLeft; const eventWidth = currentOrNextEvent.offsetWidth; const scrollPosition = eventOffset - (containerWidth / 2) + (eventWidth / 2); // Scroll the container horizontally mobileStagesContainer.scrollLeft = Math.max(0, scrollPosition); console.log('F1 Calendar: Scrolled horizontally to current/upcoming event'); } else { console.log('F1 Calendar: No current/upcoming event found to scroll to'); } } else { console.log('F1 Calendar: Could not find parent group for today'); } } else { console.log('F1 Calendar: Could not find mobile stages container for today'); } } else { // This is not today, check if it's an upcoming day const dateMatch = dateText.match(/(\d{2})\.(\d{2})\.(\d{2})/); if (dateMatch && dateMatch.length >= 4) { // Extract date components: [DD, MM, YY] const day = parseInt(dateMatch[1]); const month = parseInt(dateMatch[2]) - 1; // JS months are 0-indexed const year = 2000 + parseInt(dateMatch[3]); // Assuming format is DD.MM.YY const eventDate = new Date(year, month, day); console.log(`F1 Calendar: Comparing date from header: ${eventDate.toDateString()} with today: ${today.toDateString()}`); // If this date is in the future and closer than our current closest if (eventDate > today) { const dayDiff = (eventDate - today) / (1000 * 60 * 60 * 24); if (dayDiff < closestDayDiff) { closestDayDiff = dayDiff; closestUpcomingDay = header; console.log(`F1 Calendar: New closest upcoming day: ${eventDate.toDateString()}, diff: ${dayDiff.toFixed(1)} days`); } } } else { console.log(`F1 Calendar: Could not parse date from header: "${dateText.trim()}"`); } } }); // If today wasn't found, scroll to the closest upcoming day if (!foundToday && closestUpcomingDay) { console.log('F1 Calendar: Today not found, scrolling to closest upcoming day'); const mobileStagesContainer = closestUpcomingDay.nextElementSibling; if (mobileStagesContainer && mobileStagesContainer.classList.contains('mobile-stages-container')) { const parentGroup = closestUpcomingDay.closest('.mobile-date-group'); if (parentGroup) { parentGroup.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); // Scroll to the first event of the day const firstEvent = mobileStagesContainer.querySelector('.mobile-event'); if (firstEvent) { const containerWidth = mobileStagesContainer.offsetWidth; const eventOffset = firstEvent.offsetLeft; const eventWidth = firstEvent.offsetWidth; const scrollPosition = eventOffset - (containerWidth / 2) + (eventWidth / 2); mobileStagesContainer.scrollLeft = Math.max(0, scrollPosition); console.log('F1 Calendar: Scrolled to first event of closest upcoming day'); } else { console.log('F1 Calendar: No events found for closest upcoming day'); } } else { console.log('F1 Calendar: Could not find parent group for closest upcoming day'); } } else { console.log('F1 Calendar: Could not find mobile stages container for closest upcoming day'); } } else if (!foundToday) { console.log('F1 Calendar: Today not found and no upcoming days found'); } }, 100); // Small delay to ensure DOM is ready }); } // Main function to initialize the calendar async function initF1Calendar() { const target = document.querySelector(".f1-calendar-container"); if (!target || target.style.display === "none") { return; } try { // Get season slug let seasonSlug = customSeasonSlug; if (!seasonSlug) { seasonSlug = await getLatestSeason(); } if (!seasonSlug) { throw new Error("No season found"); } // Fetch stages for the season const stages = await fetchStages(seasonSlug); if (!stages.length) { throw new Error("No stages found for this season"); } // Find the upcoming race track ID const upcomingTrackId = findUpcomingRaceTrackId(stages); // Process the stages data const { tracksIds, tracks } = processStages(stages); const tagData = await getCollectionItemsTags( dataset, "grandsprix", [upcomingTrackId] ); // Render the calendar renderF1Calendar(tracksIds, tracks, upcomingTrackId, tagData); } catch (error) { console.error("Error initializing F1 calendar:", error); document.getElementById( "f1-calendar-container" ).innerHTML = `

Error loading F1 calendar: ${error.message}

`; } } const getCollectionItemsTags = async (dataset, collection, ids) => { try { const res = await fetch(`https://cloud1-service.newsifier.nl/api/v2/tag/dataset/${dataset}/${collection}?ids=${ids.join(',')}`, { headers: { "Content-Type": "application/json", "x-tenant": `gpblog.com-${LANGUAGE}`, "accept-language": LANGUAGE, }, }); const data = await res.json(); return data.data; } catch (err) { return []; } }; initF1Calendar()

15 meest gefaalde pitsstraatacties in F1 ooit...?

doorMichael Janiec

30 jaar DTM geschiedenis Mercedes eindigt - vertrekkend icoon blikt terug

Vettel verklaart hoe Ferrari in 2019 voor de titel kan vechten

RB heeft hernieuwd vertrouwen na succesvol optreden in Jeddah

F1 Live | Verstappen getipt als grootste Nederlandse sporter, Norris verklaart problemen

Lando Norris over relatie met engineer: 'Je moet altijd klaar zijn voor wat komt'

Zagen ze bij McLaren Piastri als de nieuwe Lando Norris?

Voormalig Formule 3-collega onthult waar Verstappen in uitblinkt

Brundle ziet iets opvallends in data bij Hamilton: 'Het is steeds hetzelfde'

'Hamilton heeft niet veel aanpassingstijd nodig, want hij is getalenteerd'

Bijna 5 jaar na crash wacht Grosjean nog altijd op test bij Mercedes

'Red Bull zou kunnen instorten als Verstappen een transfer maakt'

Voormalig F1-coureur maakt zich weinig zorgen over Verstappen en Red Bull

Populair nieuws

'Sabbatical voor Verstappen? Als ik een bod van 300 miljoen euro zie, zou ik glimlachen!'

Brundle ziet iets opvallends in data bij Hamilton: 'Het is steeds hetzelfde'

Voormalig Formule 3-collega onthult waar Verstappen in uitblinkt

Voormalig F1-ingenieur ziet Verstappen wereldkampioen worden en Norris achter Piastri eindigen