From 425e346a4b5fb1758a1866433fc67211bdd427f3 Mon Sep 17 00:00:00 2001 From: Gabriel0109 Date: Thu, 23 Mar 2023 14:48:46 -0300 Subject: [PATCH] =?UTF-8?q?fix:=20esta=C3=A7=C3=B5es=20multimodais=20apare?= =?UTF-8?q?cendo=20corretamente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/imgs/whitePin.svg | 4 + src/components/CenterButton.jsx | 2 +- src/components/Header/Header.jsx | 8 +- src/components/InfoCard/InfoCard.jsx | 117 +++++++++++---------- src/components/InfoCard/styles.module.scss | 39 ++++--- src/hooks/getCode.jsx | 20 +++- src/hooks/getGPS.jsx | 15 ++- src/hooks/getMovingMarkers.jsx | 72 ++++--------- src/hooks/getName.jsx | 1 - src/hooks/getRoutes.jsx | 51 +++++---- src/hooks/getTheme.jsx | 45 +++++--- src/hooks/getTrips.jsx | 4 +- src/main.jsx | 18 ++-- src/pages/Home.jsx | 10 +- 14 files changed, 201 insertions(+), 205 deletions(-) create mode 100644 src/assets/imgs/whitePin.svg diff --git a/src/assets/imgs/whitePin.svg b/src/assets/imgs/whitePin.svg new file mode 100644 index 0000000..10dd4d6 --- /dev/null +++ b/src/assets/imgs/whitePin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/CenterButton.jsx b/src/components/CenterButton.jsx index b540ce0..932bf58 100644 --- a/src/components/CenterButton.jsx +++ b/src/components/CenterButton.jsx @@ -11,8 +11,8 @@ export default function CenterButton({ location }) { const { stopId } = useContext(CodeContext) const map = useMap() function fixCenter() { - console.log(location) map.setView(location); + map.setZoom(13) } useEffect(() => { diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index abc6e72..6cb4ac6 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -17,14 +17,14 @@ import { GPSContext } from '../../hooks/getGPS' export function Header(props) { let navigate = useNavigate() - const { code, setCode } = useContext(CodeContext) + const { code, setCode, setStopId } = useContext(CodeContext) const { setTrip } = useContext(TripContext) const {setPoints} = useContext(ShapeContext) - const {theme, setTheme, setSppo} = useContext(ThemeContext) + const {theme, setTheme, setSppo, setRouteType} = useContext(ThemeContext) const [newCode, setNewCode] = useState("") const [value, setValue] = useState('') const [codeIdentifier, setCodeIdentifier] = useState() - const { setRoutes, setPlataforms, setStopId} = useContext(RoutesContext) + const { setRoutes, setPlataforms} = useContext(RoutesContext) const { setResults, results, similarNames } = useContext(NameContext) const {setTracked, setInnerCircle} = useContext(MovingMarkerContext) const {stopFetching} = useContext(GPSContext) @@ -42,7 +42,7 @@ export function Header(props) { setSppo() setInnerCircle([]) stopFetching() - + setRouteType() } useEffect(() => { diff --git a/src/components/InfoCard/InfoCard.jsx b/src/components/InfoCard/InfoCard.jsx index 69f98d8..4ec222e 100644 --- a/src/components/InfoCard/InfoCard.jsx +++ b/src/components/InfoCard/InfoCard.jsx @@ -9,7 +9,7 @@ import styles from './styles.module.scss' import bus from '../../assets/imgs/bus.svg' import busSppo from '../../assets/imgs/busSppo.svg' import pin from '../../assets/imgs/pin.svg' -// import whitePin from '../../assets/imgs/whitePin.svg' +import whitePin from '../../assets/imgs/whitePin.svg' import { MovingMarkerContext } from '../../hooks/getMovingMarkers' import { FormContext } from "../../hooks/useForm"; @@ -23,15 +23,15 @@ import { GPSContext } from "../../hooks/getGPS" export function InfoCard() { - const [name, setName] = useState() - const [linha, setLinha] = useState(false) - const { theme } = useContext(ThemeContext) - const { code, setGpsUrl } = useContext(CodeContext) + const { code, setGpsUrl, gpsUrl } = useContext(CodeContext) const { routes, isParent, getMultiplePages, plataforms, setRoutes, activateLoader } = useContext(RoutesContext) const { setTracked, arrivals, setArrivals } = useContext(MovingMarkerContext) const { setTrip } = useContext(TripContext); const { stopFetching } = useContext(GPSContext) + const { theme } = useContext(ThemeContext) const { activateForm, setSelectedPlatform } = useContext(FormContext) + const [name, setName] = useState() + const [linha, setLinha] = useState(false) const [sortedPlatforms, setSortedPlatforms] = useState() @@ -50,17 +50,32 @@ export function InfoCard() { } useEffect(() => { - setSortedPlatforms(plataforms.map((e) => Object.values(e).sort((a, b) => { - const platformA = Object.values(a)[0]; - const platformB = Object.values(b)[0]; - if (platformA.platform_code < platformB.platform_code) { - return -1; - } - if (platformA.platform_code > platformB.platform_code) { - return 1; - } - return 0; - }))) + setSortedPlatforms( + plataforms.map((e) => + Object.values(e) + .sort((a, b) => { + const platformA = Object.values(a)[0]; + const platformB = Object.values(b)[0]; + if (platformA.platform_code < platformB.platform_code) { + return -1; + } + if (platformA.platform_code > platformB.platform_code) { + return 1; + } + return 0; + }) + .map((p) => { + const platform = Object.values(p)[0]; + const isConvencionais = platform.stop_desc.includes("Convencionais"); + const modifiedPlatform = { + ...platform, + isConvencionais: isConvencionais + }; + return { ...p, ...{ [Object.keys(p)[0]]: modifiedPlatform } }; + }) + ) + ); + }, [plataforms]) return ( @@ -76,7 +91,7 @@ export function InfoCard() { {!routes ? <> :
-
} @@ -101,18 +116,18 @@ export function InfoCard() { strokeWidthSecondary={4} /> : sortedPlatforms.map((e) => Object.values(e).map((values) => { - return
  • { getMultiplePages("/stop_times/?stop_id=" + Object.keys(values)), infoLinha(), setSelectedPlatform(Object.keys(values)), activateLoader(), setGpsUrl('?stop_id=' + Object.keys(values)) }}> + return
  • { getMultiplePages("/stop_times/?stop_id=" + Object.keys(values)[0]), infoLinha(), setSelectedPlatform(Object.keys(values)), activateLoader(), setGpsUrl('?stop_id=' + Object.keys(values)[0]) }}>
    - {Object.values(values)[0].stop_desc ? <> -
    + {!Object.values(values)[0].isConvencionais ? <> +

    {Object.values(values)[0].stop_desc}

    : <> -
    - -

    {'Ônibus: Plataforma ' + Object.values(values)[0].platform_code}

    +
    + +

    {Object.values(values)[0].stop_desc}

    } @@ -135,48 +150,36 @@ export function InfoCard() { strokeWidthSecondary={4} /> - // routes.map((e) => { - // return ( - //
  • setTrip(e.trip_id.trip_id)} className="flex justify-between border-b py-2.5"> - //
    - //
    - //
    - // {theme ? : } - //

    {e.trip_id.trip_short_name}

    - //
    - //

    {e.trip_id?.trip_headsign ?? 'Circular'}

    - - //
    - //
    - - //
    • - // ); - // }) + : arrivals.map((e) => { return
  • setTrip(e.trip_id.trip_id)} className="flex justify-between border-b py-2.5">
    -
    - {theme ? : - - } +
    + {e.trip_id.route_id.route_type === 702 ?<>

    {e.trip_id.trip_short_name}

    + + : <> + +

    {e.trip_id.trip_short_name}

    + + }

    {e.trip_id?.trip_headsign ?? 'Circular'}

    -
    -

    - {Math.ceil(parseInt(e.smallestEtas)) > 1 && Math.ceil(parseInt(e.smallestEtas) > -1) - ? `${Math.ceil((e.smallestEtas[0]))} min` : "Agora"} - - - - - - -

    - +
    + {e.smallestEtas != undefined ? +

    + {Math.ceil(parseInt(e.smallestEtas)) > 1 && Math.ceil(parseInt(e.smallestEtas) > -1) + ? `${Math.ceil((e.smallestEtas[0]))} min` : "Agora"} + + + + + +

    + : <>}
    • }) } @@ -212,7 +215,7 @@ export function InfoCard() { /> : routes.map((e) => { return
  • setTrip(e.trip_id.trip_id)} className="flex justify-between border-b py-2.5">
    -
    +

    {e.trip_id.trip_short_name}

    diff --git a/src/components/InfoCard/styles.module.scss b/src/components/InfoCard/styles.module.scss index 3162e44..40cd526 100644 --- a/src/components/InfoCard/styles.module.scss +++ b/src/components/InfoCard/styles.module.scss @@ -10,33 +10,38 @@ } -.routeList{ +.routeList { - li:last-child{ + li:last-child { border-bottom: none !important; } + .routeName { - // display: flex; - align-items: center; - // justify-content: space-between; - - .shortName { - display: flex; - background-color: var(--items-bg); - border-radius: 3px; - padding: 4px 3px; - p{ - color: var(--text-color); - } - } + align-items: center; + + .shortName { + display: flex; + border-radius: 3px; + padding: 4px 3px; + + } + } } -.directionBanner{ + +.directionBanner { background-color: var(--gray-100); text-align: center; padding: 8px; margin-bottom: 25px; } -#wifi1,#wifi2, #wifi3{ + +#wifi1, +#wifi2, +#wifi3 { opacity: 0; +} + +.bg-SPPO { + background-color: #004a80 !important; } \ No newline at end of file diff --git a/src/hooks/getCode.jsx b/src/hooks/getCode.jsx index e84efed..6cb5778 100644 --- a/src/hooks/getCode.jsx +++ b/src/hooks/getCode.jsx @@ -1,6 +1,6 @@ import { createContext, useEffect, useState } from "react"; import { useSearchParams } from "react-router-dom"; -import {toast } from 'react-toastify' +import { toast } from 'react-toastify' import { api } from "../services/api"; export const CodeContext = createContext() @@ -13,12 +13,14 @@ export function CodeProvider({ children }) { const [searchParams, setSearchParams] = useSearchParams(); const [codeExists, setCodeExists] = useState(false) const [active, setActive] = useState(false) - const [gpsUrl, setGpsUrl] = useState() + const [stopId, setStopId] = useState() + const [locationType, setLocationType] = useState() + const [gpsUrl, setGpsUrl] = useState() useEffect(() => { const urlCode = searchParams.get('code'); - if(urlCode !== null){ + if (urlCode !== null) { setCode(urlCode.toUpperCase()) } }, []) @@ -42,11 +44,21 @@ export function CodeProvider({ children }) { }) } + useEffect(() => { + if (code != undefined) { + api + .get("/stops/?stop_code=" + code.toUpperCase()) + .then(response => { + setStopId(response.data.results[0].stop_id) + setLocationType(response.data.results[0].location_type) + }) + } checkCode() + }, [code]) return ( - + {children} ) diff --git a/src/hooks/getGPS.jsx b/src/hooks/getGPS.jsx index e69c407..9a5c51c 100644 --- a/src/hooks/getGPS.jsx +++ b/src/hooks/getGPS.jsx @@ -26,23 +26,22 @@ export function GPSProvider({ children }) { data.results.forEach((item) => { allBuses.push(item); }); - - if (data.next) { - getGPS(data.next); - } else { setRealtime([...allBuses]); allBuses = []; - } }); } function startFetching() { - const id = setInterval(() => { - getGPS(gpsUrl); + getGPS(gpsUrl); + + const intervalId = setInterval(() => { + getGPS(gpsUrl); }, 6000); - setIntervalId(id); + setIntervalId(intervalId); + console.log("rodou"); } + function stopFetching() { clearInterval(intervalId); setIntervalId(null); diff --git a/src/hooks/getMovingMarkers.jsx b/src/hooks/getMovingMarkers.jsx index 9e401b8..aa241c3 100644 --- a/src/hooks/getMovingMarkers.jsx +++ b/src/hooks/getMovingMarkers.jsx @@ -20,7 +20,6 @@ export function MovingMarkerProvider({ children }) { const { setResults } = useContext(NameContext) const { routes } = useContext(RoutesContext) const { stopInfo } = useContext(TripContext) - const [tripsShortName, setTripShortName] = useState([]) const [center, setCenter] = useState() const [radius, setRadius] = useState() const [tracked, setTracked] = useState([]) @@ -40,30 +39,7 @@ export function MovingMarkerProvider({ children }) { setResults() }, [code]) - // NOVA CHAMADA EM STOP_TIMES PRA PODER TER O trip_short_name - // e filtrar os onibus do gps - async function getTripNames(url) { - let tripNames = []; - await api - .get(url) - .then(({ data }) => { - data.results.forEach((item) => { - tripNames.push(item); - }); - if (data.next) { - getTripNames(data.next); - } - setTripShortName([...tripNames]); - }); - } - - useEffect(() => { - if (stopId) { - getTripNames('/stop_times/?stop_id=' + stopId) - - } - }, [stopId]) - + useEffect(() => { if (realtime && routes) { let trackedBuses = [] @@ -97,7 +73,6 @@ export function MovingMarkerProvider({ children }) { trackedBuses.push(result); } }); - // if (routes) { let filteredGPS = trackedBuses.filter(item => { return routes.some(filterItem => { if (stopInfo) { @@ -109,40 +84,35 @@ export function MovingMarkerProvider({ children }) { }); setTracked(filteredGPS) setInnerCircle([]) - - // } } - }, [realtime, routes]) + }, [realtime]) useEffect(() => { - // Filtrar resultado pelo stop_id selecionado - // Mostrar só 3 primeiros (os 3 primeiros menores tempos maiores q 0) - // TENTAR RELACIONAR SEM O FOR - // usar reduce + if (routes && tracked) { - const arrivals = routes.reduce((acc, obj1) => { - const matched = tracked.filter(obj2 => - obj1.trip_id.trip_short_name === obj2.linha && - obj1.trip_id.direction_id === obj2.sentido - ); - - if (matched.length > 0) { - const sortedMatched = matched.sort((a, b) => a.chegada - b.chegada); - const smallestEtas = sortedMatched.slice(0, 3).map(obj2 => obj2.chegada); - const combinedObj = { ...obj1, smallestEtas }; - acc.push(combinedObj); + const arrivals = routes.reduce((acc, obj1) => { + const matched = tracked.filter(obj2 => + obj1.trip_id.trip_short_name === obj2.linha && + obj1.trip_id.direction_id === obj2.sentido); + + if (matched.length > 0) { + const sortedMatched = matched.sort((a, b) => a.chegada - b.chegada); + const smallestEtas = sortedMatched.slice(0, 3).map(obj2 => obj2.chegada); + const combinedObj = { ...obj1, smallestEtas }; + acc.push(combinedObj); + } + return acc; + }, []); + if(arrivals.length === 0){ + setArrivals(routes) + } else { + setArrivals(arrivals) } - - return acc; - }, []); - - setArrivals(arrivals); } - - }, [routes, tracked]) + }, [tracked]) return ( diff --git a/src/hooks/getName.jsx b/src/hooks/getName.jsx index 97775a5..aac4edd 100644 --- a/src/hooks/getName.jsx +++ b/src/hooks/getName.jsx @@ -1,5 +1,4 @@ import { createContext, useEffect, useState } from "react"; -import { toast } from 'react-toastify' import { api } from "../services/api"; import { useNavigate } from "react-router-dom"; diff --git a/src/hooks/getRoutes.jsx b/src/hooks/getRoutes.jsx index 5f2c5ee..b8624ba 100644 --- a/src/hooks/getRoutes.jsx +++ b/src/hooks/getRoutes.jsx @@ -1,5 +1,6 @@ import { createContext, useContext, useEffect, useState } from "react"; import { CodeContext } from "./getCode"; +import { ThemeContext } from "./getTheme"; import { api } from "../services/api"; import { ServiceIdContext } from "./getServiceId"; export const RoutesContext = createContext() @@ -8,30 +9,16 @@ export const RoutesContext = createContext() export function RoutesProvider({ children }) { - const { code } = useContext(CodeContext) + const { code, stopId, locationType } = useContext(CodeContext) const {serviceId} = useContext(ServiceIdContext) - const [stopId, setStopId] = useState() + const { routeType } = useContext(ThemeContext) const [routes, setRoutes] = useState() const [plataforms, setPlataforms] = useState([]) - const [locationType, setLocationType] = useState() const [stations, setStations] = useState() const [isParent, setIsParent] = useState() - const [childName, setChildName] = useState() const [loader, setLoader] = useState() - useEffect(() => { - if (code != undefined) { - api - .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) - }) - } - }, [code]) - function compareTripName(a, b) { const aShortName = a.trip_id.trip_short_name; const bShortName = b.trip_id.trip_short_name; @@ -78,7 +65,6 @@ export function RoutesProvider({ children }) { } else { if(locationType === 1){ - setLoader(false) getStations("/stop_times/?stop_id=" + stopId) } filteredTrips.sort(compareTripName) @@ -111,24 +97,35 @@ export function RoutesProvider({ children }) { setIsParent(false) } } - }, [stopId, locationType]) + }, [routeType]) useEffect(() => { - if (locationType != null || locationType != undefined || stations != undefined) { - const iteratee = stations.map((e) => e.stop_id) - const result = iteratee.reduce((acc, curr) => { - acc[curr.stop_desc] = acc[curr.stop_desc] || {}; - acc[curr.stop_desc][curr.stop_id] = curr; - return acc; - }, {}); - setPlataforms((prevResults) => [...prevResults, result]); + if (routeType) { + if (locationType != null || locationType != undefined || stations != undefined ) { + const iteratee = stations.map((e) => e.stop_id) + const result = iteratee.reduce((acc, curr) => { + if (routeType.includes(3) && routeType.includes(702)) { + acc[curr.platform_code] = acc[curr.platform_code] || {}; + acc[curr.platform_code][curr.stop_id] = curr; + return acc; + } else { + acc[curr.stop_desc] = acc[curr.stop_desc] || {}; + acc[curr.stop_desc][curr.stop_id] = curr; + return acc; + } + + }, {}); + setPlataforms((prevResults) => [...prevResults, result]); + } } }, [stations]); + + return ( - + {children} ) diff --git a/src/hooks/getTheme.jsx b/src/hooks/getTheme.jsx index bbc8391..ef708d4 100644 --- a/src/hooks/getTheme.jsx +++ b/src/hooks/getTheme.jsx @@ -11,15 +11,9 @@ export const ThemeContext = createContext() export function ThemeProvider({ children }) { - const { code } = useContext(CodeContext) const [theme, setTheme] = useState("") - const [routeType, setRouteType] = useState("") - const {stopId} = useContext(RoutesContext) - - useEffect(() => { - api.get('/stop_times/?stop_id=' + stopId) - .then(response => setRouteType(response.data.results[0].trip_id.route_id.route_type)) - }, [stopId]) + const [routeType, setRouteType] = useState([]) + const { stopId } = useContext(CodeContext) const setBrt = () => { document.documentElement.setAttribute("data-theme", "brt"); @@ -29,18 +23,37 @@ export function ThemeProvider({ children }) { document.documentElement.setAttribute("data-theme", "sppo"); }; + async function findTheme(url) { + let routeTypes = []; + await api + .get(url) + .then(({ data }) => { + data.results.forEach((item) => { + routeTypes.push(item.trip_id.route_id.route_type); + }); + const brtRoute = (e) => e === 702 + if (routeTypes.some(brtRoute)) { + setBrt(); + setTheme("") + } else if (routeTypes === 3 || 700) { + setSppo(); + setTheme("sppo") + } + setRouteType([...routeTypes]); + + }); + } + useEffect(() => { - if (routeType === 700 || routeType === 3) { - setSppo(); - setTheme("sppo") - } else if (routeType === 702) { - setBrt(); - setTheme("") + if (stopId) { + findTheme('/stop_times/?stop_id=' + stopId) } - }, [routeType, stopId]) + }, [stopId]) + + return ( - + {children} ) diff --git a/src/hooks/getTrips.jsx b/src/hooks/getTrips.jsx index 93ee29f..ad8234f 100644 --- a/src/hooks/getTrips.jsx +++ b/src/hooks/getTrips.jsx @@ -1,6 +1,6 @@ import { createContext, useEffect, useState, useContext } from "react"; -import { RoutesContext } from "./getRoutes"; import { api } from "../services/api"; +import { CodeContext } from "./getCode"; export const TripContext = createContext() @@ -8,7 +8,7 @@ export const TripContext = createContext() export function TripProvider({ children }) { - const { stopId, locationType, childName } = useContext(RoutesContext) + const { stopId, locationType, childName } = useContext(CodeContext) const [trip, setTrip] = useState('') const [stopInfo, setStopInfo] = useState() const [sequenceInfo, setSequenceInfo] = useState() diff --git a/src/main.jsx b/src/main.jsx index f7bed32..5658c09 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -24,10 +24,10 @@ ReactDOM.createRoot(document.getElementById('root')).render( - - - - + + + + @@ -35,11 +35,11 @@ ReactDOM.createRoot(document.getElementById('root')).render( - - - - - + + + + + diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 736177a..21a90e1 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -33,7 +33,7 @@ import { MovingMarkerContext } from "../hooks/getMovingMarkers"; export function Home() { const { setCode } = useContext(CodeContext) - const { center, tracked, innerCircle, arrivals } = useContext(MovingMarkerContext) + const { center, tracked, arrivals } = useContext(MovingMarkerContext) const { points } = useContext(ShapeContext) const { trip, sequenceInfo, stopInfo } = useContext(TripContext) const { activeForm } = useContext(FormContext) @@ -140,13 +140,7 @@ export function Home() { {/* REMOVER INNERCIRCLE */} - {innerCircle && innerCircle.length > 0 ? innerCircle.map((e) => { - return
    - -
    - }) : tracked ? tracked.map((e) => { + {tracked ? tracked.map((e) => { return