From 7fd24293e16b1408182b1ec56c0cdafb358ccb21 Mon Sep 17 00:00:00 2001 From: cyril charignon Date: Thu, 21 Dec 2023 16:42:05 +0100 Subject: [PATCH] geoloc via le paquet react-geolocated --- package-lock.json | 9 ++ package.json | 1 + .../forms/#FormItin\303\251raires.1.tsx#" | 128 ------------------ .../forms/FormItin\303\251raires.1.tsx" | 0 .../forms/FormItin\303\251raires.tsx" | 74 ++++++---- "src/contextes/ctx-page-itin\303\251raire.ts" | 6 +- 6 files changed, 61 insertions(+), 157 deletions(-) delete mode 100644 "src/composants/forms/#FormItin\303\251raires.1.tsx#" delete mode 100644 "src/composants/forms/FormItin\303\251raires.1.tsx" diff --git a/package-lock.json b/package-lock.json index 5e06354..5cbebca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,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": { @@ -3503,6 +3504,14 @@ "react": "^18.2.0" } }, + "node_modules/react-geolocated": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/react-geolocated/-/react-geolocated-4.1.2.tgz", + "integrity": "sha512-/Ec26Wb1h06bB/axHYclBxrG0Yqob0T0W9awRi87cyedC3rMnpOR+Aqb7Q26FAEF+dNWXIpVDGNw1YZtlPUAEw==", + "peerDependencies": { + "react": ">= 16.8.0 < 19.0.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", diff --git a/package.json b/package.json index d33fe40..b9769ff 100644 --- 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\303\251raires.1.tsx#" "b/src/composants/forms/#FormItin\303\251raires.1.tsx#" deleted file mode 100644 index 2c7adf1..0000000 --- "a/src/composants/forms/#FormItin\303\251raires.1.tsx#" +++ /dev/null @@ -1,128 +0,0 @@ -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 IconButton from "@mui/material/IconButton"; -import { Button } from "@mui/material"; -import { positionVersGeom } from "../../fonctions/pour_leaflet"; -import { propsFormItinéraires, geo } from "./FormItinéraires"; - - - -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([[0, 0]]); - geo.watchPosition( - position => setMaPosition(positionVersGeom(position)) - ); - - function changePartirDeMaPosition() { - étapes.changeDépart({ - type_étape: "ma-position", - nom: "Ma position", - géom: ma_position, - }); - } - - - // Lance la gestion des clics - if (carte && étapes.départ.étape instanceof LieuAvecÉtapes && étapes.arrivée.étape instanceof LieuAvecÉtapes && !étapes.étape_pas_clic.étape) { - carte.off("click"); - carte.on( - "click", - e => { - setDonnéesModifiées(true); - new ÉtapeClic( - e.latlng, - étapes, - carte, - setDonnéesModifiées - ); - } - ); - } else if (carte) { - carte.off("click"); - } - - - const propsDesAutocomplètes = { - setDonnéesModifiées: setDonnéesModifiées, - }; - - return ( -
e.preventDefault()}> - - - - - - - - - - - - - - - étapes.changeDépart(val)} /> - - - - étapes.inverse()} - > - - - - étapes.changeArrivée(val)} /> - - - - - - - - - - - - étapes.changeÉtapePasClic(val)} /> - - - -
- ); -} diff --git "a/src/composants/forms/FormItin\303\251raires.1.tsx" "b/src/composants/forms/FormItin\303\251raires.1.tsx" deleted file mode 100644 index e69de29..0000000 diff --git "a/src/composants/forms/FormItin\303\251raires.tsx" "b/src/composants/forms/FormItin\303\251raires.tsx" index d34b62c..092d306 100644 --- "a/src/composants/forms/FormItin\303\251raires.tsx" +++ "b/src/composants/forms/FormItin\303\251raires.tsx" @@ -1,26 +1,24 @@ 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>, } -const geo = navigator.geolocation; +//const geo = navigator.geolocation; export default function FormItinéraires({ setZone }: propsFormItinéraires) { @@ -28,17 +26,34 @@ 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([[0, 0]]); - geo.watchPosition( - position => setMaPosition(positionVersGeom(position)) - ) + /* const [ma_position, setMaPosition] = useState([[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 = + ; + return (
e.preventDefault()}> @@ -83,8 +112,6 @@ export default function FormItinéraires({ setZone }: propsFormItinéraires) { - - étapes.changeDépart(val)} /> - + {bouton_partir_de_ma_position} étapes.inverse()} diff --git "a/src/contextes/ctx-page-itin\303\251raire.ts" "b/src/contextes/ctx-page-itin\303\251raire.ts" index 8dc52b5..4400f0c 100644 --- "a/src/contextes/ctx-page-itin\303\251raire.ts" +++ "b/src/contextes/ctx-page-itin\303\251raire.ts" @@ -17,9 +17,9 @@ export type tContexteItinéraire = { setStats: React.Dispatch>, } - +// 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({ 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, })