Feat/onibus aparecem no mapa usando dados realtime (#70)

package.json

@@ -13,11 +13,11 @@
     "axios": "^1.1.3",
     "leaflet": "^1.9.3",
     "leaflet-control-geocoder": "^2.4.0",
-    "leaflet-routing-machine": "^3.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
     "react-leaflet": "^4.1.0",
+    "react-leaflet-tracking-marker": "^1.0.16",
     "react-loader-spinner": "^5.3.4",
     "react-router-dom": "^6.4.5",
     "react-toastify": "^9.1.1",

src/assets/styles/globals.scss

@@ -69,4 +69,29 @@ a {
 }
 .leaflet-top{
     z-index: 400 !important;
+}
+.marker-test{
+    div{
+background-image: url(../imgs/movingMarker.svg);
+    background-position: center center;
+    background-size: cover;
+    position: relative;
+    width: 25px !important;
+    z-index: 1;
+    height: 35px !important;
+    }
+    position: relative;
+    p{
+        position: absolute;
+        padding-left: 15px;
+        padding-right: 4px;
+        border-radius: 4px;
+        left: 10px ;
+        top: 12.5px;
+        background-color: #F8AC04;
+        font-weight: bold;
+    }
+}
+.marker-test.shadowed{
+    opacity: 0.5 !important;
 }

src/components/Header/Header.jsx

@@ -12,6 +12,7 @@ import { ThemeContext } from '../../hooks/getTheme'
 import { RoutesContext } from '../../hooks/getRoutes'
 import { NameContext } from '../../hooks/getName'
 import { api } from '../../services/api'
+import { GPSContext } from '../../hooks/getGPS'
 
 export function Header(props) {
     let navigate = useNavigate()
@@ -24,6 +25,7 @@ export function Header(props) {
     const [codeIdentifier, setCodeIdentifier] = useState()
     const { setRoutes, setPlataforms} = useContext(RoutesContext)
     const { setResults, results, similarNames } = useContext(NameContext)
+    const {setTracked} = useContext(GPSContext)
     function clearInfo() {
         setTrip('')
         setCode("")
@@ -32,6 +34,7 @@ export function Header(props) {
         setPlataforms([])
         setRoutes()
         setResults()
+        setTracked()
 
     }
 
@@ -46,6 +49,7 @@ export function Header(props) {
         setPlataforms([])
         setRoutes()
         setPoints("")
+        setTracked()
         if (event.target.value.length == 0) {
             setResults()
         }
@@ -57,7 +61,6 @@ export function Header(props) {
                 if (response.data.count == 0) {
                     similarNames('/stops/?stop_name=' + newCode)
                     setCodeIdentifier(false)
-                    console.log(newCode)
                 } else {
                     setCodeIdentifier(true)
                     setResults()

src/components/InfoCard/InfoCard.jsx

@@ -10,12 +10,14 @@ import { Oval } from 'react-loader-spinner'
 import { ThemeContext } from '../../hooks/getTheme'
 import { api } from '../../services/api'
 import { GrClose } from 'react-icons/gr'
+import { GPSContext } from '../../hooks/getGPS'
 
 export function InfoCard() {
     const [name, setName] = useState()
     const { theme } = useContext(ThemeContext)
     const { code } = useContext(CodeContext)
     const { routes, isParent, getMultiplePages, plataforms, setRoutes, stopId, locationType } = useContext(RoutesContext)
+    const {setTracked} = useContext(GPSContext)
     const { setTrip } = useContext(TripContext);
 
 
@@ -30,7 +32,7 @@ export function InfoCard() {
             {isParent ? <div className="fixed bottom-0 translate-x-1/2 right-1/2 w-11/12 z-[401]">
                 <div className={styles.routesCard}>
                     {!routes ? <></> : <div className='flex justify-end'>
-                        <button onClick={() => setRoutes()}>
+                        <button onClick={() => (setRoutes(), setTracked())}>
                             <GrClose />
                         </button>
                     </div>}

src/components/MovingMarkers.jsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { Popup } from "react-leaflet";
+import { LeafletTrackingMarker } from "react-leaflet-tracking-marker";
+
+
+
+
+
+export default function BusMarker({ data, icon }) {
+
+
+    const [prevPos, setPrevPos] = useState([data.lat, data.lng]);
+
+    useEffect(() => {
+        if (prevPos[1] !== data.lng && prevPos[0] !== data.lat) setPrevPos([data.lat, data.lng]);
+    }, [data.lat, data.lng, prevPos]);
+
+    return (
+        <>
+
+            <LeafletTrackingMarker
+                icon={icon}
+                position={[data.lat, data.lng]}
+                previousPosition={prevPos}
+                duration={5000}
+                rotationAngle={0}
+            >
+                <Popup>
+                    {data.code ? <h1> Código: {data.code} </h1> : <></>}
+                    <h1>{data.hora[0]}:{data.hora[1]}s atrás</h1>
+                    {data.velocidade} km/h
+                </Popup>
+            </LeafletTrackingMarker>
+
+        </>
+    );
+}

src/components/garages.js

@@ -0,0 +1,87 @@
+export const garage1 = [
+    [-43.392344893801699, -22.964318256382398],
+    [-43.391557696530398, -22.964214301948399],
+    [-43.391471507304097, -22.964386680400899],
+    [-43.391444773157701, -22.964457001089698],
+    [-43.391433582893498, -22.964522388097699],
+    [-43.391342531032898, -22.9647583171426],
+    [-43.390932555293098, -22.965555436634101],
+    [-43.391727351835698, -22.965898915602398],
+    [-43.392158612729702, -22.965103217039701],
+    [-43.392344893801699, -22.964318256382398]
+
+]
+
+export const garage2 = [
+    [-43.252336267604598, -22.854517681445799],
+    [-43.252323021490199, -22.854361209302301],
+    [-43.252261844208697, -22.854094480276],
+    [-43.252219217243102, -22.853921843718101],
+    [-43.252176591176699, -22.853948484335],
+    [-43.252108918092098, -22.853773921429301],
+    [-43.252096057786801, -22.853755994343601],
+    [-43.252083975395102, -22.853746640495],
+    [-43.252070335377702, -22.853740015189501],
+    [-43.2520496797489, -22.853738846070801],
+    [-43.252034870612697, -22.853740404596],
+    [-43.252023958239, -22.853745860782801],
+    [-43.252000450860102, -22.853763813948799],
+    [-43.251092775910799, -22.854300021228902],
+    [-43.251114660013499, -22.854335226089798],
+    [-43.250961586408003, -22.8544248884978],
+    [-43.250963072987297, -22.8545185501909],
+    [-43.251147423214903, -22.854563151168399],
+    [-43.251159316749003, -22.854589911395301],
+    [-43.2514685477353, -22.854688032826399],
+    [-43.251493821382702, -22.854686546247098],
+    [-43.251777126712902, -22.8547929945011],
+    [-43.252032837245601, -22.854900036307601],
+    [-43.2521327429317, -22.8549250131788],
+    [-43.252201725429302, -22.8549107409379],
+    [-43.252279032951002, -22.8548714918259],
+    [-43.2523230394766, -22.854827486199401],
+    [-43.252337311717497, -22.854775154649701],
+    [-43.252338500621299, -22.854719254589899],
+    [-43.252341025018197, -22.854668014817001],
+    [-43.252336267604598, -22.854517681445799]
+
+]
+
+
+
+
+
+export const garageShape = [
+    [-22.876145835262001, -43.330629625256897],
+    [-22.8760725998706, -43.329684999862799],
+    [-22.876057995779799, -43.329340889570297],
+    [-22.8767061497689, -43.329316106053398],
+    [-22.877123931624102, -43.3293064896028],
+    [-22.8771881198358, -43.330439655165897],
+    [-22.877100304635299, -43.330459672276],
+    [-22.876449037193201, -43.3306087528916],
+    [-22.876145835262001, -43.330629625256897]
+]
+export const garage3 = [
+    [-43.608508828519597, -22.916106981052302],
+    [-43.6084118501267, -22.9160938266687],
+    [-43.608244727312297, -22.916062939453099],
+    [-43.608111460375497, -22.9160259206596],
+    [-43.608015841757698, -22.9160711889342],
+    [-43.607872913404201, -22.916071382288401],
+    [-43.607872100417097, -22.916018715291401],
+    [-43.607852199319503, -22.915941005772801],
+    [-43.607526198675103, -22.915837708743201],
+    [-43.607516535459702, -22.9162602695957],
+    [-43.606940147369897, -22.916076783616599],
+    [-43.606983063917198, -22.918768251253798],
+    [-43.607023986667599, -22.9205969830643],
+    [-43.608423215758798, -22.920762747003199],
+    [-43.608674493533002, -22.920398318327699],
+    [-43.6087773471967, -22.920176171393202],
+    [-43.608859432816502, -22.9199973753785],
+    [-43.608829358587897, -22.9199057506499],
+    [-43.608703000243203, -22.919675699573801],
+    [-43.608697573733998, -22.918518085940899],
+    [-43.608508828519597, -22.916106981052302]
+]

src/hooks/getGPS.jsx

@@ -0,0 +1,91 @@
+import { useContext } from "react";
+import { createContext, useEffect, useState } from "react";
+import { CodeContext } from "./getCode";
+import axios from "axios";
+import { RoutesContext } from "./getRoutes";
+import * as turf from '@turf/turf'
+import { TripContext } from "./getTrips";
+import { garage1 } from "../components/garages";
+
+export const GPSContext = createContext()
+
+
+
+
+export function GPSProvider({ children }) {
+    const { routes } = useContext(RoutesContext)
+    const {trip, stopInfo} = useContext(TripContext)
+    const [tracked, setTracked] = useState([])
+    const [currentTrack, setCurrentTrack] = useState({});
+
+    const URL = atob(import.meta.env.VITE_BRT_URL)
+    const Login = atob(import.meta.env.VITE_BRT_USR)
+    const Pass = atob(import.meta.env.VITE_BRT_PW)
+    const Client = atob(import.meta.env.VITE_BRT_ID)
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            axios.get(URL, {
+                method: 'GET',
+                mode: "cors",
+                headers: {
+                    'Access-Control-Allow-Origin': '*',
+                    "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
+                    'login': Login,
+                    'senha': Pass,
+                    'idcliente': Client
+
+                }
+            })
+                .then(response => {
+                    let trackedBuses = [];
+                    response.data.veiculos.forEach((item) => {
+                        const currentTime = new Date().getTime();
+                        const timeDifference = currentTime - item.dataHora
+                        const seconds = Math.floor(timeDifference / 1000);
+                        const minutes = Math.floor(seconds / 60);
+                        const remainingSeconds = seconds % 60;
+
+
+
+                        const result = {
+                            code: item.codigo,
+                            linha: item.linha,
+                            lat: item.latitude,
+                            lng: item.longitude,
+                            velocidade: item.velocidade,
+                            hora: [minutes, remainingSeconds]
+                        };
+
+                        const alreadyExists = trackedBuses.some(r => r.lat === result.lat && r.lng === result.lng);
+                        var pt = turf.point([item.longitude, item.latitude])
+                        var poly = turf.polygon([garage1]);
+                        var scaledPoly = turf.transformScale(poly, 1.5);
+                        if (!alreadyExists && !turf.booleanPointInPolygon(pt, scaledPoly)) {
+                            trackedBuses.push(result);
+                        }
+
+                    });
+
+                    let filteredGPS = trackedBuses.filter(item => {
+                        return routes.some(filterItem => {
+                            return item.linha === filterItem.trip_id.trip_short_name
+                        });
+                    });
+
+                    setTracked(filteredGPS)
+
+                })
+        }, 6000);
+        return () => clearInterval(interval);
+    }, [routes]);
+    useEffect(() => {
+        var teste = import.meta.env.BRT_URL
+    }, [])
+
+    return (
+        <GPSContext.Provider value={{ tracked, currentTrack, setTracked }}>
+            {children}
+        </GPSContext.Provider>
+    )
+}

src/hooks/getName.jsx

@@ -47,7 +47,6 @@ export function NameProvider({ children }) {
                 if (response.data.count == 0 ) {
                     similarNames('/stops/?stop_name=' + firstCode)
                     setCodeR(false)
-                    console.log(firstCode)
                 } else {
                     setCodeR(true)
                     setResults()

src/hooks/getRoutes.jsx

@@ -14,6 +14,7 @@ export function RoutesProvider({ children }) {
     const [locationType, setLocationType] = useState()
     const [stations, setStations] = useState()
     const [isParent, setIsParent] = useState()
+    const [childName, setChildName] = useState()
 
 
     useEffect(() => {
@@ -22,6 +23,7 @@ export function RoutesProvider({ children }) {
                 .get("/stops/?stop_code=" + code.toUpperCase())
                 .then(response => {
                     setStopId(response.data.results[0].stop_id)
+                    setChildName(response.data.results[0].stop_name)
                     setLocationType(response.data.results[0].location_type)
                 })
         }
@@ -83,7 +85,7 @@ export function RoutesProvider({ children }) {
     }, [stations]);
 
     return (
-        <RoutesContext.Provider value={{ routes, stopId, setRoutes, getMultiplePages, isParent, plataforms, setPlataforms, stations}}>
+        <RoutesContext.Provider value={{ routes, stopId, setRoutes, getMultiplePages, isParent, plataforms, setPlataforms, stations, locationType, childName}}>
             {children}
         </RoutesContext.Provider>
     )