geoloc via le paquet react-geolocated

ccharign · Dec 21, 2023 · 7fd2429 · 7fd2429
1 parent f91f532
commit 7fd2429
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 157 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",
+    "react-geolocated": "^4.1.2",
     "react-router-dom": "^6.18.0"
   },
   "devDependencies": {

diff --git a/src/composants/forms/#FormItinéraires.1.tsx# b/src/composants/forms/#FormItinéraires.1.tsx#
diff --git a/src/composants/forms/FormItinéraires.1.tsx b/src/composants/forms/FormItinéraires.1.tsx
diff --git a/src/composants/forms/FormItinéraires.tsx b/src/composants/forms/FormItinéraires.tsx
@@ -1,44 +1,59 @@
 import { useContext, useState } from "react";
-import ChoixZone from "../molécules/choixZone";
-import AutoComplèteDistant from "../molécules/autoComplèteDistant";
-import LieuAvecÉtapes from "../../classes/Lieu";
-import { ÉtapeClic } from "../../classes/ÉtapeClic";
 
 import SwapVertIcon from '@mui/icons-material/SwapVert';
-
 import { Container, Row, Col } from "react-bootstrap";
-import { contexte_iti } from "../../contextes/ctx-page-itinéraire";
-import BoutonEnvoi from "../molécules/BoutonEnvoi";
+import { useGeolocated } from "react-geolocated";
 import IconButton from "@mui/material/IconButton";
 import { Button } from "@mui/material";
-import { positionVersGeom } from "../../fonctions/pour_leaflet";
 
-import {GéométrieOsm} from "../../classes/types"
+import { contexte_iti } from "../../contextes/ctx-page-itinéraire";
+import BoutonEnvoi from "../molécules/BoutonEnvoi";
+import ChoixZone from "../molécules/choixZone";
+import AutoComplèteDistant from "../molécules/autoComplèteDistant";
+import LieuAvecÉtapes from "../../classes/Lieu";
+import { ÉtapeClic } from "../../classes/ÉtapeClic";
 
 
 export type propsFormItinéraires = {
     setZone: React.Dispatch<React.SetStateAction<string>>,
 }
 
-const geo = navigator.geolocation;
+//const geo = navigator.geolocation;
 
 
 export default function FormItinéraires({ setZone }: propsFormItinéraires) {
 
     const { zone, carte, étapes } = useContext(contexte_iti);
     const [données_modifiées, setDonnéesModifiées] = useState(true); // Indique si des modifs ont été faites depuis le dernier calcul d’itinéraire
 
-    const [ma_position, setMaPosition] = useState<GéométrieOsm>([[0, 0]]);
-    geo.watchPosition(
-        position => setMaPosition(positionVersGeom(position))
-    )
+    /* const [ma_position, setMaPosition] = useState<GéométrieOsm>([[0, 0]]);
+* geo.watchPosition(
+*     position => setMaPosition(positionVersGeom(position))
+* )
+     */
+    const { coords, isGeolocationAvailable, isGeolocationEnabled } =
+        useGeolocated({
+            positionOptions: {
+                enableHighAccuracy: true,
+            },
+            userDecisionTimeout: 5000,
+            watchPosition: true,
+            watchLocationPermissionChange: true,
+            onError: e => alert("Erreur à la géolocalisation : " + e)
+        });
+
 
     function changePartirDeMaPosition() {
+        if (!coords){
+            throw new Error("Localisation pas disponible");
+        }
+        const {longitude, latitude} = coords;
+
         étapes.changeDépart({
-                type_étape: "ma-position",
-                nom: "Ma position",
-                géom: ma_position,
-            });
+            type_étape: "ma-position",
+            nom: "Ma position",
+            géom: [[longitude, latitude]],
+        });
     }
 
 
@@ -66,6 +81,20 @@ export default function FormItinéraires({ setZone }: propsFormItinéraires) {
         setDonnéesModifiées: setDonnéesModifiées,
     }
 
+    const bouton_partir_de_ma_position =
+        <Button
+            variant="outlined"
+            onClick={changePartirDeMaPosition}
+            disabled={isGeolocationAvailable || isGeolocationEnabled}
+        >
+            {
+                (isGeolocationAvailable || isGeolocationEnabled)
+                    ? "Géolocalisation non disponible"
+                    : "Partir de ma position"
+            }
+
+        </Button>;
+
     return (
         <form onSubmit={e => e.preventDefault()}>
             <Container>
@@ -83,22 +112,15 @@ export default function FormItinéraires({ setZone }: propsFormItinéraires) {
 
                 <Row className="my-3">
 
-
-
                     <AutoComplèteDistant
                         {...propsDesAutocomplètes}
                         étape={étapes.départ}
                         label="Départ"
                         placeHolder="2 rue bidule, mon café, ..."
                         onChange={val => étapes.changeDépart(val)}
                     />
-                    <Button
-                        variant="outlined"
-                        onClick={changePartirDeMaPosition}
-                    >
-                        Partir de ma position
-                    </Button>
 
+                    {bouton_partir_de_ma_position}
 
                     <IconButton
                         onClick={() => étapes.inverse()}

diff --git a/src/contextes/ctx-page-itinéraire.ts b/src/contextes/ctx-page-itinéraire.ts
@@ -17,9 +17,9 @@ export type tContexteItinéraire = {
     setStats: React.Dispatch<React.SetStateAction<ReactNode>>,
 }
 
-
+// Création d’un objet Étapes factice pour initialiser le contexte
 const fonctionNull = ((_e: LieuJson | null | ((_prev: LieuJson | null) => LieuJson | null)) => null);
-const fonctionNull2 = ((_e: any  | ((_prev: any ) => any )) => null);
+const fonctionNull2 = ((_e: any | ((_prev: any) => any)) => null);
 
 const gère_une_étape = new GèreUneÉtape(null, fonctionNull, null, [], fonctionNull2, null);
 
@@ -29,5 +29,5 @@ export const contexte_iti = createContext<tContexteItinéraire>({
     zone: "",
     étapes: new Étapes(gère_une_étape, gère_une_étape, [], fonctionNull2, gère_une_étape, null, [], fonctionNull2),
     setTiroir: (_clef, _ouvert) => null,
-    setStats: ()=>null,
+    setStats: () => null,
 })