Add event journey view

packages/frontend/src/app.tsx

@@ -30,6 +30,7 @@ import { NewJourney } from "./journey/NewJourney.tsx";
 import { useConfMode } from "./utils/useConfMode.tsx";
 import { CGU } from "./page/CGU.tsx";
 import { Invite } from "./page/Invite.tsx";
+import { EventParticipantJourney } from "./events/EventParticipantJourney.tsx";
 
 export function App() {
 	const [loaded, setLoaded] = useState(false);
@@ -97,6 +98,10 @@ export function App() {
 			path: "events/:id",
 			element: <EventDetail/>,
 		},
+		{
+			path: "events/:id/participants/:idparticipant/journey",
+			element: <EventParticipantJourney/>,
+		},
 		{
 			path: "journeys",
 			element: <ListJourneys/>,

packages/frontend/src/events/EventParticipantJourney.tsx

@@ -0,0 +1,78 @@
+import { useParams } from "react-router-dom";
+import { useApi } from "../utils/useApi.ts";
+import { TUser } from "../types/TUser.ts";
+import { TEvent } from "../types/TEvent.ts";
+import { Card } from "../components/Card/Card.tsx";
+import { distanceToHumanReadable } from "../utils/distanceToHumanReadable.ts";
+import { TUserJourney } from "../types/TUserJourney.ts";
+import Map, {
+	Layer, LineLayer, Source,
+} from "react-map-gl";
+import { useState } from "preact/hooks";
+
+const accessToken = import.meta.env.VITE_MAPBOX_KEY;
+
+const layerStyle: LineLayer = {
+	id: "point",
+	type: "line",
+	layout: {
+		"line-join": "round",
+		"line-cap": "round",
+	},
+	paint: {
+		"line-color": "#3457D5",
+		"line-width": 5,
+		"line-opacity": 1,
+	},
+};
+
+export function EventParticipantJourney() {
+	const {
+		id, idparticipant,
+	} = useParams();
+	const user = useApi<TUser>(`/users/${idparticipant}`);
+	const event = useApi<TEvent>(`/events/${id}`);
+	const journey = useApi<TUserJourney>(`/events/${id}/participations/${idparticipant}/journey`);
+	const [viewState, setViewState] = useState({
+		longitude: 1.2084545,
+		latitude: 44.3392763,
+		zoom: 4,
+	});
+	return (
+		<div className={"mx-2 flex flex-col gap-2"}>
+			<h1>Trajet de { user.data?.username } lors de l'évènement { event.data?.name }</h1>
+			<Card className={"grid grid-cols-2"}>
+				<p>Distance totale</p>
+				<p>{ distanceToHumanReadable(journey.data?.total_distance) }</p>
+				<div className={"flex gap-4 col-span-2"}>
+					<p>Altitude max: { distanceToHumanReadable(journey.data?.max_elevation) }</p>
+					<p>Altitude min: { distanceToHumanReadable(journey.data?.min_elevation) }</p>
+					<p>Dénivelé positif: { distanceToHumanReadable(journey.data?.total_elevation_gain) }</p>
+					<p>Dénivelé négatif: { distanceToHumanReadable(journey.data?.total_elevation_loss) }</p>
+				</div>
+				<div className={"flex gap-4 col-span-2"}>
+					<p>Temps total: { journey.data?.total_time }</p>
+					<p>Vitesse moyenne: { journey.data?.avg_speed }</p>
+					<p>Vitesse de pointe: { journey.data?.max_speed }</p>
+				</div>
+			</Card>
+			<Card className={"grow mb-2"}>
+				<Map
+					{...viewState}
+					onMove={evt => setViewState(evt.viewState)}
+					style={{
+						height: "calc(100% - 48px)",
+						width: "100%",
+					}}
+					mapLib={import("mapbox-gl")}
+					mapStyle={"mapbox://styles/mapbox/navigation-night-v1"}
+					mapboxAccessToken={accessToken}
+				>
+					<Source id="tracks" type="geojson" data={journey.data?.file}>
+						<Layer {...layerStyle}/>
+					</Source>
+				</Map>
+			</Card>
+		</div>
+	);
+}

packages/frontend/src/events/EventParticipants.tsx

@@ -18,6 +18,7 @@ import {
 	DoReload, useReload,
 } from "../utils/useReload.ts";
 import { ModalAddParticipants } from "./ModalAddParticipants.tsx";
+import { Link } from "react-router-dom";
 
 interface EventParticipantsProps {
 	event: TEvent
@@ -85,7 +86,11 @@ export function EventParticipant(props: EventParticipantsProps) {
 						<Cell><EventRole role={p.role} eventId={props.event.id} userId={p.user.id} doReload={doReload}/></Cell>,
 						<Cell>{ dateTimeToFrenchString(p.joinedDateTime, false) }</Cell>,
 						<Cell>{ p.isImagePublic ? "Publiques" : "Privées" }</Cell>,
-						<Cell>{ p.journey !== undefined ? <OpenInNew/> : undefined }</Cell>,
+						<Cell>
+							{ p.journey !== undefined ?
+								<Link to={`/events/${props.event.id}/participants/${p.user.id}/journey`}><OpenInNew/></Link> :
+								undefined }
+						</Cell>,
 						<Cell>
 							{ p.user.id !== props.event.owner.id ?
 								<DeleteOutlined className={"cursor-pointer"} onClick={() => removeParticipant(p.user.id)}/> :