filter by medal events only

2026-02-14 12:19:04 +00:00 · 2026-02-06 22:22:20 +01:00
parent a98bc2178f
commit 282c855eeb
3 changed files with 229 additions and 93 deletions
--- a/ui/app/[[...slug]]/page.tsx
+++ b/ui/app/[[...slug]]/page.tsx
@ -4,7 +4,7 @@
 import { loadSchedule } from "../../lib/data";
 import { use, useEffect, useState } from "react";
 import Flag from "../flag";
-import { COPY, COPY_SUCCESS, FILTER_BY_COUNTRY, FILTER_BY_SPORT, LANGUAGE, MADE_BY_FABRICE, NOT_AFFILIATED, NO_EVENT_FOR_FILTERS } from "../../lib/text";
+import { ALL_EVENTS, COPY, COPY_SUCCESS, FILTER_BY_COUNTRY, FILTER_BY_EVENT_TYPE, FILTER_BY_SPORT, GOLD_MEDAL_EVENTS, LANGUAGE, MADE_BY_FABRICE, MEDAL_EVENTS, NOT_AFFILIATED, NO_EVENT_FOR_FILTERS } from "../../lib/text";
 import useLocalStorage from "@/lib/local-storage";
 import { GoogleAnalytics } from "@next/third-parties/google";

@ -72,8 +72,25 @@ export interface Calendar {

 const COLORS = ['azzurro', 'giallo', 'rosa', 'rosso', 'verde', 'viola'];

+
+const EVENT_TYPE_ALL = "all";
+const EVENT_TYPE_MEDAL = "medal-events";
+const EVENT_TYPE_GOLD_MEDAL = "gold-medal-events";
+
+const EVENT_TYPES = [{
+  key: EVENT_TYPE_ALL.toUpperCase(),
+  name: ALL_EVENTS
+}, {
+  key: EVENT_TYPE_MEDAL.toUpperCase(),
+  name: MEDAL_EVENTS,
+}, {
+  key: EVENT_TYPE_GOLD_MEDAL.toUpperCase(),
+  name: GOLD_MEDAL_EVENTS,
+}]
+
 const DEFAULT_NOC = "world";
 const DEFAULT_SPORT = "all-sports";
+const DEFAULT_EVENT_TYPE = EVENT_TYPE_ALL;

 export default function Home({
  params,
@ -94,17 +111,27 @@ export default function Home({

  const getParams = () => ({
    noc: slug?.length ? slug[0].toLowerCase() : DEFAULT_NOC,
-    sport: slug?.length && slug.length >= 2 ? slug[1].toLowerCase() : DEFAULT_SPORT,
+    sport: slug?.length >= 2 ? slug[1].toLowerCase() : DEFAULT_SPORT,
+    type: slug?.length >= 3 ? slug[2].toLowerCase() : DEFAULT_EVENT_TYPE,
  })

-  const generateLink = ({ noc, sport }: { noc?: string; sport?: string }) => {
-    const { noc: newNOC, sport: newSport } = getParams();
+  const generateLink = ({ noc, sport, type }: { noc?: string; sport?: string; type?: string }) => {
+    const { noc: newNOC, sport: newSport, type: newType } = getParams();
+
+    if (type && type !== DEFAULT_EVENT_TYPE) {
+      return `/${noc || newNOC}/${sport || newSport}/${type}`.toLowerCase();
+    }
+
    return `/${noc || newNOC}/${sport || newSport}`.toLowerCase();
  }

  const generateCalendarLink = () => {
    const host = typeof window !== 'undefined' ? window.location.host : '';
-    const { noc, sport } = getParams();
+    const { noc, sport, type } = getParams();
+
+    if(type !== DEFAULT_EVENT_TYPE) {
+      return `http://${host}/api/data/${language}/${sport}/${type}.ics`;
+    }

    return `http://${host}/api/data/${language}/${sport}/${noc === DEFAULT_NOC ? "calendar" : noc}.ics`;
  };
@ -114,19 +141,23 @@ export default function Home({
  useEffect(() => {
    let selectedNOC = DEFAULT_NOC;
    let selectedSport = DEFAULT_SPORT;
+
    if (qs.get('noc')) {
      selectedNOC = qs.get('noc')!.toLowerCase();
-    } else if (slug && slug.length >= 1) {
-      selectedNOC = slug[0].toLowerCase();
+    } else if (slug?.length >= 1) {
+      selectedNOC = getParams().noc.toLowerCase();
    }

    if (qs.get('sport')) {
      selectedSport = qs.get('sport')!.toLowerCase();
-    } else if (slug && slug.length >= 2) {
-      selectedSport = slug[1].toLowerCase();
+    } else if (slug?.length >= 2) {
+      selectedSport = getParams().sport.toLowerCase();
    }

-    const expectedUrl = `/${selectedNOC}/${selectedSport}`;
+    let expectedUrl = `/${selectedNOC}/${selectedSport}`;
+    if (getParams().type !== DEFAULT_EVENT_TYPE) {
+      expectedUrl = `/${selectedNOC}/${selectedSport}/${getParams().type}`;
+    }
    if (pathname !== expectedUrl) {
      permanentRedirect(expectedUrl);
    }
@ -145,20 +176,31 @@ export default function Home({
      return false;
    }

-    const { noc, sport } = getParams();
+    const { noc, sport, type } = getParams();

-    if (noc !== DEFAULT_NOC) {
-      if (!event.nocs.includes(noc.toUpperCase())) {
+    if (
+      noc !== DEFAULT_NOC &&
+      !event.nocs.includes(noc.toUpperCase())
+    ) {
+      visible = false;
+    }
+
+    if (
+      sport !== DEFAULT_SPORT &&
+      event.sport !== sport.toUpperCase()
+    ) {
+      visible = false;
+    }
+
+    if (type !== DEFAULT_EVENT_TYPE) {
+      if (
+        (type === "medal-events" && event.medal === "0") ||
+        (type === "gold-medal-events" && event.medal !== "1")
+      ) {
        visible = false;
      }
    }

-    if (sport !== DEFAULT_SPORT) {
-      if (event.sport !== sport.toUpperCase()) {
-        visible = false;
-      }
-    }
-    console.log({ es: event.sport, en: event.nocs, sport, noc, visible })
    return visible;
  }

@ -188,7 +230,6 @@ export default function Home({

    const events = data.events.filter(event => filter(event));

-
    let main = (
      <div>
        <div className="text-center pt-10 mb-100">
@ -341,13 +382,12 @@ export default function Home({
    const header = (
      <div className="navbar bg-main">
        <div className={`flex-1 ${googleSans.className}`}>
-          <a href="/" className="text-xl font-bold">Olympics Calendar</a>
+          <a href="/world/all-sports" className="text-xl font-bold">Olympics Calendar</a>
        </div>
        <div className="flex">
          <label htmlFor="my-drawer-5" className="drawer-button btn btn-main btn-ghost">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block h-5 w-5 stroke-current"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg>
          </label>
-          {/*  */}
        </div>
      </div>
    );
@ -468,6 +508,35 @@ export default function Home({
                </div>
              </div>

+              <div className="mt-2 pt-2 border-t-1 border-slate-300">
+                <span className="font-bold">{translate(FILTER_BY_EVENT_TYPE)}</span>
+                {getParams().type !== DEFAULT_EVENT_TYPE && (
+                  <div className="my-1">
+                    <a href={generateLink({ type: DEFAULT_EVENT_TYPE })} className="btn bg-white btn-sm">
+                      <span className="font-bold text-red-400">X</span> {translate(EVENT_TYPES.find(type => type.key === getParams().type.toUpperCase())?.name || {})}
+                    </a>
+                  </div>
+                )}
+                <div className="bg-white h-[100px] max-h-[100px] overflow-y-scroll">
+                  <ul>
+                    {EVENT_TYPES.toSorted((a, b) => translate(a.name).localeCompare(translate(b.name))).map(type => {
+                      if (type.key === getParams().type.toUpperCase()) {
+                        return (
+                          <li key={type.key}>
+                            <a href={generateLink({ type: DEFAULT_EVENT_TYPE })}><div aria-label="success" className="status status-success"></div> {translate(type.name)}</a>
+                          </li>
+                        )
+                      }
+                      return (
+                        <li key={type.key}>
+                          <a href={generateLink({ type: type.key })}>{translate(type.name)}</a>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                </div>
+              </div>
+
              <div className="mt-2 pt-2 border-t-1 border-slate-300">
                <span className="font-bold">{translate(LANGUAGE)}</span>
                <div className="bg-white h-[200px] max-h-[200px] overflow-y-scroll">
--- a/ui/lib/text.ts
+++ b/ui/lib/text.ts
@ -106,3 +106,51 @@ export const LANGUAGE = {
  ja: "言語",
  ru: "Язык",
 }
+
+export const FILTER_BY_EVENT_TYPE = {
+  en: "Filter by event type",
+  fr: "Filtrer par type d'événement",
+  es: "Filtrar por tipo de evento",
+  de: "Nach Veranstaltungstyp filtern",
+  it: "Filtra per tipo di evento",
+  pt: "Filtrar por tipo de evento",
+  zh: "按事件类型筛选",
+  ja: "イベントタイプでフィルタリング",
+  ru: "Фильтр по типу события"
+}
+
+export const ALL_EVENTS = {
+  en: "All events",
+  fr: "Tous les événements",
+  es: "Todos los eventos",
+  de: "Alle Veranstaltungen",
+  it: "Tutti gli eventi",
+  pt: "Todos os eventos",
+  zh: "所有事件",
+  ja: "すべてのイベント",
+  ru: "Все события"
+};
+
+export const MEDAL_EVENTS = {
+  en: "Medal events",
+  fr: "Épreuves de médailles",
+  es: "Eventos de medallas",
+  de: "Medaillenveranstaltungen",
+  it: "Eventi di medaglia",
+  pt: "Eventos de medalha",
+  zh: "奖牌赛事",
+  ja: "メダルイベント",
+  ru: "Медальные события"
+};
+
+export const GOLD_MEDAL_EVENTS = {
+  en: "Gold medal events",
+  fr: "Épreuves de médailles d'or",
+  es: "Eventos de medallas de oro",
+  de: "Goldmedaillenveranstaltungen",
+  it: "Eventi di medaglia d'oro",
+  pt: "Eventos de medalha de ouro",
+  zh: "金牌赛事",
+  ja: "金メダルイベント",
+  ru: "Золотые медальные события"
+};