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