// Configuration const LANGUAGE_CODE = "nl-NL"; const LANGUAGE = "nl"; const dataset = "gpblog"; // Default dataset const customSeasonSlug = null; // Can be set via URL parameter const DEBUG = true; // Set to true to enable debug logs // 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); }); // Find the next upcoming stage const now = new Date(); let upcomingEvent = null; let upcomingDateKey = null; if (DEBUG) console.log(`F1 Calendar: Finding upcoming event. Current time: ${now.toLocaleString()}`); // Find the next upcoming event and its date key for (const [dateKey, stages] of Object.entries(stagesByDate)) { const sortedStages = [...stages].sort((a, b) => new Date(a.date_time) - new Date(b.date_time)); for (const stage of sortedStages) { const stageTime = new Date(stage.date_time); if (DEBUG) console.log(`F1 Calendar: Checking stage '${stage.name}' at ${stageTime.toLocaleString()}`); if (stageTime >= now) { upcomingEvent = stage; upcomingDateKey = dateKey; if (DEBUG) console.log(`F1 Calendar: Found upcoming event: '${stage.name}' (id: ${stage.id}) at ${stageTime.toLocaleString()}`); break; } } if (upcomingEvent) break; } // If no upcoming event, use the last event if (!upcomingEvent && Object.keys(stagesByDate).length > 0) { const lastDateKey = Object.keys(stagesByDate).sort().pop(); const lastStages = stagesByDate[lastDateKey]; upcomingEvent = lastStages[lastStages.length - 1]; upcomingDateKey = lastDateKey; if (DEBUG) console.log(`F1 Calendar: No upcoming events found, using last event: '${upcomingEvent.name}' (id: ${upcomingEvent.id})`); } let upcomingStageIndex = -1; // Render groups of stages by date for mobile Object.entries(stagesByDate).forEach(([dateKey, stages], dateIndex) => { // 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", }); const isUpcomingDateGroup = dateKey === upcomingDateKey; if (DEBUG && isUpcomingDateGroup) { console.log(`F1 Calendar: Marking date group as upcoming: ${dayName} ${formattedDate}`); } mobileScheduleHTML += `

${dayName} ${formattedDate}

`; // Add all stages for this date stages.forEach((stage, stageIndex) => { 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; const isUpcomingStage = upcomingEvent && stage.id === upcomingEvent.id; if (isUpcomingStage) { upcomingStageIndex = stageIndex; if (DEBUG) console.log(`F1 Calendar: Marking stage as upcoming: '${stageName}' at index ${stageIndex}`); } 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 => { // Check if already initialized to prevent duplicate initialization if (target.classList.contains('f1-calendar-initialized')) { return; } target.classList.add('f1-calendar-initialized'); target.innerHTML = html; // Completely rewritten horizontal scrolling to upcoming event const initScrollToUpcoming = () => { if (DEBUG) console.log(`F1 Calendar: Initializing scroll to upcoming event`); // Use requestAnimationFrame to ensure DOM is fully rendered const performScroll = () => { if (DEBUG) console.log(`F1 Calendar: Performing scroll operation`); // Find the upcoming event element const upcomingStage = target.querySelector('[data-upcoming-stage="true"]'); if (DEBUG) { console.log(`F1 Calendar: Upcoming stage found: ${!!upcomingStage}`); // Debug all events const allEvents = target.querySelectorAll('.mobile-event'); console.log(`F1 Calendar: Total mobile events: ${allEvents.length}`); allEvents.forEach((event, index) => { const hasUpcoming = event.hasAttribute('data-upcoming-stage'); console.log(`F1 Calendar: Event ${index} has upcoming attribute: ${hasUpcoming}`); }); } if (!upcomingStage) { if (DEBUG) console.log(`F1 Calendar: No upcoming stage found, cannot scroll`); return false; } // Find the scrollable container that contains this event let scrollContainer = upcomingStage.closest('.mobile-stages-container'); if (DEBUG) { console.log(`F1 Calendar: Scroll container found: ${!!scrollContainer}`); // Debug the container hierarchy if (scrollContainer) { console.log(`F1 Calendar: Container class list:`, scrollContainer.classList.toString()); console.log(`F1 Calendar: Container computed style overflow-x:`, getComputedStyle(scrollContainer).overflowX); console.log(`F1 Calendar: Container computed style white-space:`, getComputedStyle(scrollContainer).whiteSpace); // Check all children to see the layout const children = scrollContainer.children; console.log(`F1 Calendar: Container has ${children.length} direct children`); let totalChildrenWidth = 0; for (let i = 0; i < children.length; i++) { const child = children[i]; const childWidth = child.offsetWidth; totalChildrenWidth += childWidth; console.log(`F1 Calendar: Child ${i} width: ${childWidth}px, class: ${child.className}`); } console.log(`F1 Calendar: Total children width: ${totalChildrenWidth}px`); } } if (!scrollContainer) { if (DEBUG) console.log(`F1 Calendar: No scroll container found`); return false; } // Check if this container actually has horizontal scrolling const hasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth; if (!hasHorizontalScroll) { if (DEBUG) console.log(`F1 Calendar: Current container doesn't have horizontal scroll, searching for alternative...`); // Look for a parent container that has horizontal scrolling let parent = upcomingStage.parentElement; let foundScrollableParent = null; while (parent && !foundScrollableParent) { if (parent.scrollWidth > parent.clientWidth) { foundScrollableParent = parent; if (DEBUG) console.log(`F1 Calendar: Found scrollable parent:`, parent.className); break; } parent = parent.parentElement; } if (foundScrollableParent) { scrollContainer = foundScrollableParent; } else { if (DEBUG) console.log(`F1 Calendar: No scrollable container found in hierarchy`); return false; } } // Get current scroll position and container dimensions const containerWidth = scrollContainer.clientWidth; const containerScrollWidth = scrollContainer.scrollWidth; // Get the position of the upcoming event relative to its container const eventRect = upcomingStage.getBoundingClientRect(); const containerRect = scrollContainer.getBoundingClientRect(); const eventOffsetInContainer = upcomingStage.offsetLeft; const eventWidth = upcomingStage.offsetWidth; if (DEBUG) { console.log(`F1 Calendar: Container width: ${containerWidth}px`); console.log(`F1 Calendar: Container scroll width: ${containerScrollWidth}px`); console.log(`F1 Calendar: Event offset in container: ${eventOffsetInContainer}px`); console.log(`F1 Calendar: Event width: ${eventWidth}px`); console.log(`F1 Calendar: Event rect:`, eventRect); console.log(`F1 Calendar: Container rect:`, containerRect); } // Calculate the scroll position to center the event const targetScrollLeft = eventOffsetInContainer - (containerWidth / 2) + (eventWidth / 2); // Ensure scroll position is within bounds const maxScrollLeft = containerScrollWidth - containerWidth; const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft)); if (DEBUG) { console.log(`F1 Calendar: Target scroll left: ${targetScrollLeft}px`); console.log(`F1 Calendar: Max scroll left: ${maxScrollLeft}px`); console.log(`F1 Calendar: Final scroll left: ${finalScrollLeft}px`); console.log(`F1 Calendar: Current scroll left: ${scrollContainer.scrollLeft}px`); } // Apply the scroll try { // Try smooth scrolling first scrollContainer.scrollTo({ left: finalScrollLeft, behavior: 'smooth' }); // Fallback for immediate scrolling setTimeout(() => { if (Math.abs(scrollContainer.scrollLeft - finalScrollLeft) > 5) { scrollContainer.scrollLeft = finalScrollLeft; if (DEBUG) console.log(`F1 Calendar: Applied fallback scroll: ${scrollContainer.scrollLeft}px`); } }, 1000); if (DEBUG) { setTimeout(() => { console.log(`F1 Calendar: Final scroll position after 300ms: ${scrollContainer.scrollLeft}px`); }, 3000); } return true; } catch (error) { if (DEBUG) console.error(`F1 Calendar: Error during scroll:`, error); return false; } }; // Try scrolling with multiple timing strategies let attempts = 0; const maxAttempts = 5; const tryScroll = () => { attempts++; if (DEBUG) console.log(`F1 Calendar: Scroll attempt ${attempts}/${maxAttempts}`); const success = performScroll(); if (!success && attempts < maxAttempts) { // Retry with exponential backoff const delay = Math.min(100 * Math.pow(2, attempts - 1), 1000); if (DEBUG) console.log(`F1 Calendar: Retrying in ${delay}ms`); setTimeout(tryScroll, delay); } }; // Start with requestAnimationFrame for better timing requestAnimationFrame(() => { requestAnimationFrame(() => { tryScroll(); }); }); }; // Initialize scrolling initScrollToUpcoming(); }); } // Main function to initialize the calendar async function initF1Calendar() { // Check if there are any uninitialized calendar containers const containers = document.querySelectorAll(".f1-calendar-container:not(.f1-calendar-initialized)"); if (!containers.length) { 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.querySelectorAll(".f1-calendar-container:not(.f1-calendar-initialized)").forEach(container => { container.classList.add('f1-calendar-initialized'); 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()

Bekijk alle foto's van de 2022-bolides van de Formule 1!

doorgpblog