From fa227f463ecb224d4f5b0e73b877a66b0a5fcd0b Mon Sep 17 00:00:00 2001 From: Firas Yahyaoui <firas.yahyaoui@imt-atlantique.net> Date: Wed, 17 Jan 2024 16:45:15 +0100 Subject: [PATCH] add: fetch timetable for stop --- src/components/Forms/Form-Horaire.tsx | 77 +++++++++++++++++++++++++++ src/components/Formulaire.tsx | 26 +-------- src/models/Horaire.model.ts | 39 ++++++++++++++ src/utils.ts | 10 ++++ 4 files changed, 128 insertions(+), 24 deletions(-) create mode 100644 src/components/Forms/Form-Horaire.tsx create mode 100644 src/models/Horaire.model.ts diff --git a/src/components/Forms/Form-Horaire.tsx b/src/components/Forms/Form-Horaire.tsx new file mode 100644 index 0000000..02692c7 --- /dev/null +++ b/src/components/Forms/Form-Horaire.tsx @@ -0,0 +1,77 @@ +import { useQuery } from "@tanstack/react-query"; +import { getHoraires } from "../../utils"; +import { useState } from "react"; +import { Button, Col, Form, Spinner } from "react-bootstrap"; + +const FormHoraire = () => { + const [showResult, setShowResult] = useState(false); + const [codeArret, setCodeArret] = useState("HBLI2"); + const [numLigne, setNumLigne] = useState("C5"); + const [sens, setSens] = useState<"1" | "2">("1"); + + const { isPending, isError, error, data } = useQuery({ + queryKey: ["horaires", { codeArret, numLigne, sens }], + enabled: showResult, + queryFn: () => getHoraires(codeArret, numLigne, sens), + }); + + return ( + <> + <Form + onSubmit={(e) => { + e.preventDefault(); + setShowResult(true); + }} + > + <h1>Horaires (théoriques)</h1> + <Col xs={4}> + <Form.Group className="mb-3" controlId="formCodeArret"> + <Form.Label>Code Arrêt</Form.Label> + <Form.Control type="text" defaultValue="HBLI2" onChange={(e) => setCodeArret(e.target.value)} required /> + </Form.Group> + + <Form.Group className="mb-3" controlId="formNumLigne"> + <Form.Label>Numéro Ligne</Form.Label> + <Form.Control type="text" defaultValue="C5" onChange={(e) => setNumLigne(e.target.value)} required /> + </Form.Group> + + <Form.Group className="mb-3" controlId="formSens"> + <Form.Label>Sens</Form.Label> + <Form.Select aria-label="Default select example" onChange={(e) => setSens(e.target.value === "2" ? "2" : "1")}> + <option value="1">Un</option> + <option value="2">Deux</option> + </Form.Select> + </Form.Group> + </Col> + <Button className="mt-1" variant="primary" type="submit"> + Submit + </Button> + <Button + className="mt-1" + variant="primary" + type="reset" + onClick={() => setShowResult(false)} + > + Clear + </Button> + </Form> + {!showResult ? ( + <></> + ) : isPending ? ( + <Spinner animation="border" role="status"> + <span className="visually-hidden">Loading...</span> + </Spinner> + ) : isError ? ( + <p> + An error has occured: {error.name} - {error.message} + </p> + ) : ( + <Col md={4} className="mt-3"> + {<p>{data.ligne.numLigne}</p>} + </Col> + )} + </> + ); +}; + +export default FormHoraire; diff --git a/src/components/Formulaire.tsx b/src/components/Formulaire.tsx index 62999c7..8134865 100644 --- a/src/components/Formulaire.tsx +++ b/src/components/Formulaire.tsx @@ -1,6 +1,7 @@ import { Col, Container, Form, Row } from "react-bootstrap"; import FormArret from "./Forms/Form-Arret"; import FormArretProche from "./Forms/Form-Arret-Proche"; +import FormHoraire from "./Forms/Form-Horaire"; type FormulaireProps = { selection: number; @@ -14,30 +15,7 @@ const Formulaire = ({ selection }: FormulaireProps) => { case 1: return <FormArret />; case 2: - return ( - <> - <h1>Horaires (théoriques)</h1> - <Col xs={4}> - <Form.Group className="mb-3" controlId="formCodeArret"> - <Form.Label>Code Arrêt</Form.Label> - <Form.Control type="text" defaultValue="HBLI2" required /> - </Form.Group> - - <Form.Group className="mb-3" controlId="formNumLigne"> - <Form.Label>Numéro Ligne</Form.Label> - <Form.Control type="text" defaultValue="C5" required /> - </Form.Group> - - <Form.Group className="mb-3" controlId="formSens"> - <Form.Label>Sens</Form.Label> - <Form.Select aria-label="Default select example"> - <option value="1">Un</option> - <option value="2">Deux</option> - </Form.Select> - </Form.Group> - </Col> - </> - ); + return <FormHoraire />; case 3: return ( <> diff --git a/src/models/Horaire.model.ts b/src/models/Horaire.model.ts new file mode 100644 index 0000000..8f54dfe --- /dev/null +++ b/src/models/Horaire.model.ts @@ -0,0 +1,39 @@ +export type Horaire = { + "ligne": { + "numLigne": string, + "typeligne": 0, + "directionSens1": string, + "directionSens2": string, + "accessible": string, + "etatTrafic": 0 + }, + "arret": { + "codeArret": string, + "libelle": string, + "accessible": true + }, + "codeCouleur": string, + "notes": [ + { + "code": string, + "libelle": string + } + ], + "horaires": [ + { + "heure": string, + "passages": [ + string + ] + } + ], + "prochainsHoraires": [ + { + "heure": string, + "passages": [ + string + ] + } + ], + "plageDeService": string +} \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index afe9631..9bb0503 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,5 +1,6 @@ import axios from "axios"; import { Arret } from "./models/Arret.model"; +import { Horaire } from "./models/Horaire.model"; const URL = `https://hackathon-login.osc-fr1.scalingo.io`; @@ -28,4 +29,13 @@ export const getStops = async () => { export const getNearbyStops = async (latitude: string, longitude: string) => { const result = await axios.get<Omit<Arret, "id">[]>(`${URL}/get_nearest_stations/${latitude}/${longitude}`); return result.data.map((arret, i) => { return { ...arret, id: i } as Arret }) +} + +export const getHoraires = async (codeArret: string, numLigne: string, sense: "1" | "2", date?: string) => { + if (!date) { + const result = await axios.get<Horaire>(`${URL}/get_timetable/${codeArret}/${numLigne}/${sense}`); + return result.data; + } + const result = await axios.get<Horaire>(`${URL}/get_timetable_by_date/${codeArret}/${numLigne}/${sense}/${date}`); + return result.data; } \ No newline at end of file -- GitLab