diff --git a/src/components/Forms/Form-Arret-Proche.tsx b/src/components/Forms/Form-Arret-Proche.tsx index 6c2519c212d986e07eb9d47cbafcdb1849ecbd52..93a8f84e859e0a67e3fa548a1021d961d01700de 100644 --- a/src/components/Forms/Form-Arret-Proche.tsx +++ b/src/components/Forms/Form-Arret-Proche.tsx @@ -81,7 +81,10 @@ const FormArretProche = () => { className="mt-1" variant="primary" type="reset" - onClick={() => setShowResult(false)} + onClick={() => { + setFilter(""); + setShowResult(false); + }} > Clear </Button> diff --git a/src/components/Forms/Form-Arret.tsx b/src/components/Forms/Form-Arret.tsx index 7b2b4b92c8490d62a12df5011477c38499551477..09bf3bb013bc64d6e5f4540dee3cac3bd45c5260 100644 --- a/src/components/Forms/Form-Arret.tsx +++ b/src/components/Forms/Form-Arret.tsx @@ -47,7 +47,10 @@ const FormArret = () => { className="mt-1" variant="primary" type="reset" - onClick={() => setShowResult(false)} + onClick={() => { + setFilter(""); + setShowResult(false); + }} > Clear </Button> diff --git a/src/components/Forms/Form-Waiting-Time.tsx b/src/components/Forms/Form-Waiting-Time.tsx new file mode 100644 index 0000000000000000000000000000000000000000..586114f7c03e651a34dff4cbeeb97f2fc2f9af7b --- /dev/null +++ b/src/components/Forms/Form-Waiting-Time.tsx @@ -0,0 +1,71 @@ +import { useQuery } from "@tanstack/react-query"; +import { getWaitingTime } from "../../utils"; +import { useState } from "react"; +import { Button, Col, Form, Spinner } from "react-bootstrap"; + +const FormWaitingTime = () => { + const [showResult, setShowResult] = useState(false); + const [codeArret, setCodeArret] = useState("HBLI"); + + const { isPending, isError, error, data } = useQuery({ + queryKey: ["tempsAttente", { codeArret }], + enabled: showResult, + queryFn: async () => getWaitingTime(codeArret), + }); + + return ( + <> + <Form + onSubmit={(e) => { + e.preventDefault(); + setShowResult(true); + }} + > + <h1>Temps d'attente par rapport à un arrêt</h1> + <Col xs={4}> + <Form.Group className="mb-3" controlId="formCodeArret"> + <Form.Label>Code Arrêt</Form.Label> + <Form.Control + type="text" + defaultValue="HBLI" + onChange={(e) => setCodeArret(e.target.value)} + required + /> + </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"> + {data.map((time) => ( + <p key={time.id}> + Ligne: {time.ligne.numLigne} - Sens: {time.sens} - Temps: {time.temps} + </p> + ))} + </Col> + )} + </> + ); +}; + +export default FormWaitingTime; diff --git a/src/components/Formulaire.tsx b/src/components/Formulaire.tsx index 813486564a0e472df02873b47bc51203a3991e8b..e9ba065a289f27db6564c8b5caddd6801d11191d 100644 --- a/src/components/Formulaire.tsx +++ b/src/components/Formulaire.tsx @@ -1,7 +1,8 @@ -import { Col, Container, Form, Row } from "react-bootstrap"; +import { Container, Row } from "react-bootstrap"; import FormArret from "./Forms/Form-Arret"; import FormArretProche from "./Forms/Form-Arret-Proche"; import FormHoraire from "./Forms/Form-Horaire"; +import FormWaitingTime from "./Forms/Form-Waiting-Time"; type FormulaireProps = { selection: number; @@ -17,17 +18,7 @@ const Formulaire = ({ selection }: FormulaireProps) => { case 2: return <FormHoraire />; case 3: - return ( - <> - <h1>Temps d'attente par rapport à un arrêt</h1> - <Col xs={4}> - <Form.Group className="mb-3" controlId="formCodeArret"> - <Form.Label>Code Arrêt</Form.Label> - <Form.Control type="text" defaultValue="HBLI" required /> - </Form.Group> - </Col> - </> - ); + return <FormWaitingTime />; default: return <div>{selection}</div>; } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index b168d9e94cb0ab287a1b9e3c6cf20844f6581eb1..97decf79f9a78451ad5fb519f857c05c576f2b40 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -13,7 +13,7 @@ const Sidebar = ({ setSelection }: SidebarProps) => { <Navbar.Collapse id="basic-navbar-nav"> <Nav className="flex-row"> <NavDropdown - title="Temps d'attente" + title="Arrêts" id="temps-dattente-dropdown" className="flex-column" > diff --git a/src/models/Horaire.model.ts b/src/models/Horaire.model.ts index 8f54dfe59fc1999fcc7fe97fea81d6f0f1c50a5d..2d108d6d1fd465d1c269ec053a3aa4c85d024040 100644 --- a/src/models/Horaire.model.ts +++ b/src/models/Horaire.model.ts @@ -1,16 +1,16 @@ export type Horaire = { "ligne": { "numLigne": string, - "typeligne": 0, + "typeligne": number, "directionSens1": string, "directionSens2": string, "accessible": string, - "etatTrafic": 0 + "etatTrafic": number }, "arret": { "codeArret": string, "libelle": string, - "accessible": true + "accessible": boolean }, "codeCouleur": string, "notes": [ diff --git a/src/models/RemainingTime.model.ts b/src/models/RemainingTime.model.ts new file mode 100644 index 0000000000000000000000000000000000000000..b4cf0e87f5a548c7b513af7b9385452a1b846993 --- /dev/null +++ b/src/models/RemainingTime.model.ts @@ -0,0 +1,16 @@ +export type RemainingTime = { + id: number, + "sens": number, + "terminus": string, + "infotrafic": boolean, + "temps": string, + "dernierDepart": string, + "tempsReel": string, + "ligne": { + "numLigne": string, + "typeLigne": number + }, + "arret": { + "codeArret": string + } +} \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index 9bb050393431ba6def13b912f241d243170cefa7..97fbf1d0b1b51ca72f9a3ba80859964726bfc48b 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,6 +1,7 @@ import axios from "axios"; import { Arret } from "./models/Arret.model"; import { Horaire } from "./models/Horaire.model"; +import { RemainingTime } from "./models/RemainingTime.model"; const URL = `https://hackathon-login.osc-fr1.scalingo.io`; @@ -38,4 +39,9 @@ export const getHoraires = async (codeArret: string, numLigne: string, sense: "1 } const result = await axios.get<Horaire>(`${URL}/get_timetable_by_date/${codeArret}/${numLigne}/${sense}/${date}`); return result.data; +} + +export const getWaitingTime = async (codeArret: string) => { + const result = await axios.get<Omit<RemainingTime, "id">[]>(`${URL}/get_waitingtime_by_station/${codeArret}`); + return result.data.map((time, i) => { return { ...time, id: i } as RemainingTime }); } \ No newline at end of file