diff --git a/.gitignore b/.gitignore index 8f322f0..aa626c6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +TODO # dependencies /node_modules diff --git a/TODO b/TODO new file mode 100644 index 0000000..656d0b0 --- /dev/null +++ b/TODO @@ -0,0 +1,3 @@ +marker legend + +Warning: validateDOMNesting(...): cannot appear as a child of . diff --git a/app/page.tsx b/app/page.tsx index 72fd377..ece5026 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,8 +3,9 @@ import Layout from "@/components/Layout"; export default function Home() { return ( -
-
+
+
+

Heading 1

Heading 2

diff --git a/app/tournois/page.tsx b/app/tournois/page.tsx index e6fb628..97afa31 100644 --- a/app/tournois/page.tsx +++ b/app/tournois/page.tsx @@ -7,12 +7,14 @@ import { Tournament } from "@/types"; * Imports the tournament map component, ensuring CSR only. * @remarks SSR is not supported by react-leaflet */ -const TournamentMapNoSSR = dynamic( - () => import("../../components/TournamentMap"), - { - ssr: false, - } -); +const TournamentMap = dynamic(() => import("@/components/TournamentMap"), { + ssr: false, + loading: () => ( +
+

Loading map...

+
+ ), +}); /** * Retrieves tournament data from /api/tournaments @@ -27,13 +29,16 @@ async function getTournaments() { export default async function Tournaments() { const tournamentData: Tournament[] = await getTournaments(); - console.log(tournamentData); return (
- - +
+ +
+
+ +
); diff --git a/components/TournamentMap.tsx b/components/TournamentMap.tsx index eb0eae3..3ad37a7 100644 --- a/components/TournamentMap.tsx +++ b/components/TournamentMap.tsx @@ -1,24 +1,100 @@ "use client"; import "leaflet/dist/leaflet.css"; -import { MapContainer, TileLayer, Marker } from "react-leaflet"; -import { LatLngLiteral } from "leaflet"; +import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"; +import L from "leaflet"; +import "leaflet-defaulticon-compatibility"; -export default function TournamentMap() { +import { + MapContainer, + TileLayer, + Marker, + Popup, + LayersControl, + LayerGroup, +} from "react-leaflet"; + +import { LatLngLiteral } from "leaflet"; +import { TournamentDataProps } from "@/types"; + +export default function TournamentMap({ tournamentData }: TournamentDataProps) { const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 }; + // TODO consider putting in page.tsx so that it is SSR + // TODO move to own hook/util + // TODO wrap in useEffect on initial load [] + function layerGroups(timeControl: string, colour: string) { + const filteredTournaments = tournamentData.filter( + (t) => t.time_control === timeControl + ); + + const iconOptions = new L.Icon({ + iconUrl: `images/leaflet/marker-icon-2x-${colour}.png`, + shadowUrl: "images/leaflet/marker-shadow.png", + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41], + }); + + return ( + + + {filteredTournaments.map((t) => { + const coordinates = { + lat: t.coordinates[0] + Math.random() * (-0.01 - 0.01) + 0.01, + lng: t.coordinates[1] + Math.random() * (-0.01 - 0.01) + 0.01, + }; + + return ( + + +

+ {t.date} +
+ + {t.tournament} + +

+ géolocalisation approximative + + + ); + })} + + + ); + } + + const classicalMarkers = layerGroups("Cadence Lente", "green"); + const rapidMarkers = layerGroups("Rapide", "blue"); + const blitzMarkers = layerGroups("Blitz", "yellow"); + const otherMarkers = layerGroups("1h KO", "red"); + return (
+ + {classicalMarkers} + {rapidMarkers} + {blitzMarkers} + {otherMarkers} +
); diff --git a/components/TournamentTable.tsx b/components/TournamentTable.tsx index 389293b..939ca91 100644 --- a/components/TournamentTable.tsx +++ b/components/TournamentTable.tsx @@ -1,11 +1,12 @@ "use client"; -import { Tournament, TournamentTableProps } from "@/types"; +import { TournamentDataProps } from "@/types"; import { useEffect, useState } from "react"; export default function TournamentTable({ tournamentData, -}: TournamentTableProps) { +}: TournamentDataProps) { + // TODO put most of this is a custom hook const [tournamentFilter, setTournamentFilter] = useState(""); // text from search bar const [filteredTournamentData, setFilteredTournamentData] = useState(tournamentData); @@ -13,22 +14,36 @@ export default function TournamentTable({ useEffect(() => { setFilteredTournamentData( tournamentData.filter((t) => - t.location.includes(tournamentFilter.toUpperCase()) + t.town.includes(tournamentFilter.toUpperCase()) ) ); }, [tournamentFilter]); - const tournaments = filteredTournamentData.map((t: Tournament) => ( + const tournaments = filteredTournamentData.map((t) => ( - {t.date} - {t.location} - - {t.tournament} - - {t.time_control} + + + {t.date} + + + + + {t.town} + + + + + {t.tournament} + + + + + {t.time_control} + + )); diff --git a/package-lock.json b/package-lock.json index 82da39f..f62aa67 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "eslint": "8.41.0", "eslint-config-next": "13.4.3", "leaflet": "^1.9.4", + "leaflet-defaulticon-compatibility": "^0.1.1", "mongodb": "^5.5.0", "next": "13.4.3", "postcss": "8.4.23", @@ -5870,6 +5871,11 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" }, + "node_modules/leaflet-defaulticon-compatibility": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.1.tgz", + "integrity": "sha512-vDBFdlUAwjSEGep9ih8kfJilf6yN8V9zTbF5NC/1ZwLeGko3RUQepspPnGCRMFV51dY3Lb3hziboicrFz+rxQA==" + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", diff --git a/package.json b/package.json index 7c55b8b..508df63 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "eslint": "8.41.0", "eslint-config-next": "13.4.3", "leaflet": "^1.9.4", + "leaflet-defaulticon-compatibility": "^0.1.1", "mongodb": "^5.5.0", "next": "13.4.3", "postcss": "8.4.23", diff --git a/public/images/leaflet/marker-icon-2x-black.png b/public/images/leaflet/marker-icon-2x-black.png new file mode 100644 index 0000000..23c94cf Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-black.png differ diff --git a/public/images/leaflet/marker-icon-2x-blue.png b/public/images/leaflet/marker-icon-2x-blue.png new file mode 100644 index 0000000..0015b64 Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-blue.png differ diff --git a/public/images/leaflet/marker-icon-2x-gold.png b/public/images/leaflet/marker-icon-2x-gold.png new file mode 100644 index 0000000..6992d65 Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-gold.png differ diff --git a/public/images/leaflet/marker-icon-2x-green.png b/public/images/leaflet/marker-icon-2x-green.png new file mode 100644 index 0000000..c359abb Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-green.png differ diff --git a/public/images/leaflet/marker-icon-2x-grey.png b/public/images/leaflet/marker-icon-2x-grey.png new file mode 100644 index 0000000..43b3eb4 Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-grey.png differ diff --git a/public/images/leaflet/marker-icon-2x-orange.png b/public/images/leaflet/marker-icon-2x-orange.png new file mode 100644 index 0000000..c3c8632 Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-orange.png differ diff --git a/public/images/leaflet/marker-icon-2x-red.png b/public/images/leaflet/marker-icon-2x-red.png new file mode 100644 index 0000000..1c26e9f Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-red.png differ diff --git a/public/images/leaflet/marker-icon-2x-violet.png b/public/images/leaflet/marker-icon-2x-violet.png new file mode 100644 index 0000000..ea748aa Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-violet.png differ diff --git a/public/images/leaflet/marker-icon-2x-yellow.png b/public/images/leaflet/marker-icon-2x-yellow.png new file mode 100644 index 0000000..8b677d9 Binary files /dev/null and b/public/images/leaflet/marker-icon-2x-yellow.png differ diff --git a/public/images/leaflet/marker-icon-black.png b/public/images/leaflet/marker-icon-black.png new file mode 100644 index 0000000..d262ae4 Binary files /dev/null and b/public/images/leaflet/marker-icon-black.png differ diff --git a/public/images/leaflet/marker-icon-blue.png b/public/images/leaflet/marker-icon-blue.png new file mode 100644 index 0000000..e2e9f75 Binary files /dev/null and b/public/images/leaflet/marker-icon-blue.png differ diff --git a/public/images/leaflet/marker-icon-gold.png b/public/images/leaflet/marker-icon-gold.png new file mode 100644 index 0000000..162fada Binary files /dev/null and b/public/images/leaflet/marker-icon-gold.png differ diff --git a/public/images/leaflet/marker-icon-green.png b/public/images/leaflet/marker-icon-green.png new file mode 100644 index 0000000..56db5ea Binary files /dev/null and b/public/images/leaflet/marker-icon-green.png differ diff --git a/public/images/leaflet/marker-icon-grey.png b/public/images/leaflet/marker-icon-grey.png new file mode 100644 index 0000000..ebbab8e Binary files /dev/null and b/public/images/leaflet/marker-icon-grey.png differ diff --git a/public/images/leaflet/marker-icon-orange.png b/public/images/leaflet/marker-icon-orange.png new file mode 100644 index 0000000..fbbce7b Binary files /dev/null and b/public/images/leaflet/marker-icon-orange.png differ diff --git a/public/images/leaflet/marker-icon-red.png b/public/images/leaflet/marker-icon-red.png new file mode 100644 index 0000000..3e64e06 Binary files /dev/null and b/public/images/leaflet/marker-icon-red.png differ diff --git a/public/images/leaflet/marker-icon-violet.png b/public/images/leaflet/marker-icon-violet.png new file mode 100644 index 0000000..28efc3c Binary files /dev/null and b/public/images/leaflet/marker-icon-violet.png differ diff --git a/public/images/leaflet/marker-icon-yellow.png b/public/images/leaflet/marker-icon-yellow.png new file mode 100644 index 0000000..b011eea Binary files /dev/null and b/public/images/leaflet/marker-icon-yellow.png differ diff --git a/public/images/leaflet/marker-shadow.png b/public/images/leaflet/marker-shadow.png new file mode 100644 index 0000000..84c5808 Binary files /dev/null and b/public/images/leaflet/marker-shadow.png differ diff --git a/public/images/map-bg.jpg b/public/images/map-bg.jpg new file mode 100644 index 0000000..53a29d3 Binary files /dev/null and b/public/images/map-bg.jpg differ diff --git a/types.ts b/types.ts index 48479e2..8ec911f 100644 --- a/types.ts +++ b/types.ts @@ -1,6 +1,6 @@ export interface Tournament { _id: string; - location: string; + town: string; department: string; tournament: string; url: string; @@ -9,6 +9,6 @@ export interface Tournament { coordinates: [number, number]; } -export interface TournamentTableProps { +export interface TournamentDataProps { tournamentData: Tournament[]; }