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