\n {time[`remarks_${langStringConvertor(language)}`] && (\n \n {`(${time[`remarks_${langStringConvertor(language)}`]})`}\n \n )}\n {(showLicensePlate && vehicleLocations?.[time.vehicle]?.license_plate) && {`(${vehicleLocations?.[time.vehicle]?.license_plate})`}}\n
\n \n );\n } else {\n return (\n <>\n -\n {minute[language]}\n \n );\n }\n };\n\n // console.log(index, time.diff, time.remarks_en);\n return (\n \n
\n
\n );\n};\n\nexport default StationEta;\n","import { Paper } from \"@material-ui/core\";\nimport React, { useEffect, useState } from \"react\";\nimport Constants from \"../../utils/constants\";\nimport { langStringConvertor } from \"../../utils/utils\";\nimport StationEta from \"../StationEta\";\nimport \"./styles.scss\";\n\nconst { LANGUAGES } = Constants;\nconst { feeText } = LANGUAGES;\n\nconst EtaCard = (props) => {\n const { stops, lang, message, etaDisplayMethod, themeColour, nearestStop, showLicensePlate, vehicleLocations } = props;\n\n const [language, setLanguage] = useState(props.lang);\n\n useEffect(() => {\n setLanguage(lang);\n }, [lang]);\n\n return (\n \n
\n {time ? (\n // {/* Eta Time */ }\n \n {stationName}\n {!!(message) && (\n {`${message}`}\n )}\n {!!isNearestStop && (\n {youAreHere[lang]}\n )}\n
\n \n {index === 0 &&\n time?.find((el) => el.eta_seq === 1).diff === 0 &&\n !time?.find((el) => el.eta_seq === 1).remarks_en ? (\n <>\n ) : (\n
\n ) : (\n \n {renderTimeHeader(\n time?.find((el) => el.eta_seq === 1),\n 0\n )}\n
\n )}\n \n {renderTime(\n time?.find((el) => el.eta_seq === 1),\n 0,\n themeColour\n )}\n
\n \n {renderTimeHeader(\n time?.find((el) => el.eta_seq === 2),\n 1\n )}\n
\n \n {renderTime(\n time?.find((el) => el.eta_seq === 2),\n 1,\n themeColour\n )}\n
\n \n {renderTimeHeader(\n time?.find((el) => el.eta_seq === 3),\n 2\n )}\n
\n {index === 0 &&\n time?.find((el) => el.eta_seq === 1).diff === 0 &&\n !time?.find((el) => el.eta_seq === 1).remarks_en && (\n \n {renderTime(\n time?.find((el) => el.eta_seq === 3),\n 2,\n themeColour\n )}\n
\n \n {renderTimeHeader(\n time?.find((el) => el.eta_seq === 3),\n 2\n )}\n
\n )}\n \n {renderTime(\n time?.find((el) => el.eta_seq === 4),\n 3,\n themeColour\n )}\n
\n \n
\n )}\n \n \n
\n \n \n
\n \n
\n \n \n {noScheduled[language]}\n \n
\n \n
\n {stops.map((station, index) => {\n const isNearestStop = !!nearestStop && station.stop_id === nearestStop.stop_id;\n return (\n
\n \n {/* Map */}\n \n {/* Route Path Border */}\n ({ x: -15, y: -15 })}\n // >\n // 
\n // \n \n {/* {console.log(\"vehicleCOlor\", vehicleColor)} */}\n ({ x: -(w/2), y: 20 })}\n >\n \n );\n }\n return \n ) : (\n \n )}\n \n {showLicensePlate && ({ x: -(w/2), y: 20 })}\n >\n \n \n \n );\n })\n : null}\n\n {/* Vehicle Icon */}\n {cars2 && cars2.length > 0\n ? cars2.map((car) => {\n if (car?.coordinates) {\n return (<>\n ({ x: -15, y: -15 })}\n >\n \n \n\n {showLicensePlate && ({ x: -(w/2), y: 20 })}\n >\n
\n );\n});\n\nexport default MapComp;\n","import React, { useEffect, useState } from \"react\";\nimport Constants from \"../../utils/constants\";\nimport moment from \"moment\";\nimport \"./styles.scss\";\nimport { langStringConvertor } from \"../../utils/utils\";\n\nconst { LANGUAGES } = Constants;\nconst { minute, scheduled, noScheduled } = LANGUAGES;\n\nconst FirstStationTitle = (props) => {\n const { time, timestamp, remarks } = props;\n\n const [language, setLanguage] = useState(props.language);\n\n useEffect(() => {\n setLanguage(props.language);\n }, [props.language]);\n\n const renderTime = (time, timestamp) => {\n if (typeof time === \"number\") {\n if (time >= 90) {\n return (\n <>\n \n {timestamp ? moment(timestamp).format(\"HH:mm\") : `-`}\n \n {/* {minute[language]} */}\n \n );\n } else {\n return (\n <>\n \n {time >= 0 && time < 90 ? time : \"-\"}\n \n {minute[language]}\n \n );\n }\n } else {\n return (\n <>\n -\n {minute[language]}\n \n );\n }\n };\n\n const renderSchedule = (timestamp) => {\n return (\n \n {timestamp ? moment(timestamp).format(\"HH:mm\") : `-`}\n \n );\n };\n\n return (\n \n {car.license_plate}\n
\n }\n \n {car.license_plate}\n
\n }\n ;\n }\n })}\n\n {/* Route Path Border */}\n {path2 && path2?.length > 0 && (\n \n {car.license_plate}\n
\n }\n \n \n );\n }\n })\n : null}\n \n \n {timestamp ? (\n <>\n
\n );\n};\n\nexport default FirstStationTitle;\n","const Pillar = ({ position, color }) => {\n return (\n \n
\n \n
\n \n
\n {renderTime(time, timestamp)}
\n \n
\n \n ) : (\n <>\n \n {scheduled[language]}\n {renderSchedule(timestamp)}\n
\n \n
\n \n
\n \n \n
\n \n
\n \n )}\n \n \n {noScheduled[language]}\n
\n \n
\n \n \n {getPosition(index) === \"first\" ? (\n
\n \n
\n \n {title}\n {notes ? ({notes}) : null}\n
\n \n {typeof time === \"number\" ? (\n
\n \n );\n};\n\nexport default StationTitle;\n","import React, { useState, useEffect, Fragment } from \"react\";\nimport { CircularProgress } from \"@material-ui/core\";\nimport { KeyboardArrowRight, MoreHoriz } from \"@material-ui/icons\";\n\nimport \"./styles.scss\";\nimport FirstStationTitle from \"../FirstStationTitle\";\nimport StationTitle from \"../StationTitle\";\nimport { langStringConvertor } from \"../../utils/utils\";\nimport Constants from \"../../utils/constants\";\nimport Pillar from \"../../components/Pillar\";\nimport contrastTest from \"../../utils/contrastTest\";\n\nconst { LANGUAGES } = Constants;\nconst { start, end } = LANGUAGES;\n\nconst SmallEtaCard = (props) => {\n const {\n origin,\n destination,\n stations,\n redirect,\n eta,\n displayType,\n court,\n routeCode,\n color,\n themeColour,\n showLicensePlate,\n vehicleLocations\n } = props;\n const firstStation = stations[0];\n const lastStation =\n displayType === \"combineStops\"\n ? stations[stations.length - 2] // get first route last stop\n : stations[stations.length - 1];\n\n const [language, setLanguage] = useState(props.language);\n\n useEffect(() => {\n setLanguage(props.language);\n }, [props.language]);\n\n const getTitle = (type) => {\n const allStopsFormat = () => {\n return stations.map((station, index) => {\n const stationEta = eta?.eta.find((el) => el.stopSeq === index + 1);\n\n //if firstEta is realtime 0mins, then use the second one\n const isFirstEtaRealtime =\n index === 0 &&\n stationEta?.eta?.[0]?.diff === 0 &&\n !stationEta?.eta?.[0]?.remarks_en;\n\n return (\n {renderTime(time, timestamp, licensePlate)}
\n ) : (\n \n \n {noScheduled[language]}\n
\n )}\n \n
\n );\n } else {\n return \n
\n \n
\n \n
\n );\n};\n\nexport default SmallEtaCard;\n","/* eslint-disable */\nimport { CircularProgress, Divider, List, ListItem } from \"@material-ui/core\";\nimport React, { useEffect, useState, useMemo } from \"react\";\nimport { useLocation, withRouter } from \"react-router-dom\";\nimport { clearIntervalAsync } from \"set-interval-async\";\nimport { setIntervalAsync } from \"set-interval-async/dynamic\";\nimport SmallEtaCard from \"../../components/SmallEtaCard\";\nimport Constants from \"../../utils/constants\";\nimport { getRouteStopEta } from \"../../utils/api\";\nimport \"./styles.scss\";\nimport { langStringConvertor } from \"../../utils/utils\";\n\nconst { LANGUAGES } = Constants;\nconst { appTitle, routesTitle } = LANGUAGES;\n\nconst Home = (props) => {\n const {\n routes,\n routeIds,\n lang,\n site,\n court,\n redirect,\n displayType,\n setCurrentTitle,\n displayRouteCode,\n firstStopEtaRoutes,\n fakeCircularRoutes,\n overrideDepartureTimeRoutes,\n themeColour,\n showLicensePlate\n } = props;\n const [isFirstTime, setIsFirstTime] = useState(true);\n const [isLoading, setIsLoading] = useState(true);\n const [etas, setEtas] = useState([]);\n const [preEtas, setPreEtas] = useState([]);\n const [vehicleLocations, setVehicleLocations] = useState(null);\n\n const getEta = async () => {\n await Promise.all(\n routes.map(async (route, index) => {\n return Promise.all(\n route.routeStops.map(async (direction, index) => {\n const tempResult = await getRouteStopEta(\n route.route_id,\n route.directions[index].route_seq\n );\n setVehicleLocations({...vehicleLocations, ...tempResult.vehicleLocation});\n\n let finalResult = null;\n\n /**\n * handle firstStopEtaRoutes\n */\n if (\n firstStopEtaRoutes &&\n firstStopEtaRoutes.length > 0 &&\n firstStopEtaRoutes.includes(parseInt(route.route_id, 10))\n ) {\n finalResult = { ...tempResult };\n const oppoEta = await getRouteStopEta(\n route.route_id,\n parseInt(route.directions[index].route_seq, 10) === 1 ? 2 : 1\n );\n if (tempResult && oppoEta?.eta.length > 0) {\n finalResult.eta = tempResult?.eta.map((el, indexx) => {\n if (indexx === 0) {\n el?.eta.push(oppoEta.eta[oppoEta.eta.length - 1].eta[0]);\n el?.eta.sort((a, b) => (a.diff < b.diff ? -1 : 1));\n const temp = el.eta.map((ele, indexxx) => ({\n ...ele,\n eta_seq: indexxx + 1,\n }));\n el.eta = temp;\n }\n return el;\n });\n }\n }\n if (\n overrideDepartureTimeRoutes &&\n overrideDepartureTimeRoutes.length > 0 &&\n overrideDepartureTimeRoutes.includes(parseInt(route.route_id, 10))\n ) {\n finalResult = { ...tempResult, needCheckTime: true };\n }\n return finalResult || tempResult;\n })\n );\n })\n ).then((result) => {\n overrideDepartureTimeRoutes && overrideDepartureTimeRoutes.length > 0\n ? setPreEtas(result)\n : setEtas(result);\n\n // console.log(result);\n });\n };\n\n useEffect(() => {\n if (preEtas && preEtas.length > 0) {\n const newEta = preEtas.map((routes) => {\n return routes.map((directions, index) => {\n if (directions.needCheckTime) {\n // console.log(\"check Another Route time\");\n const firstStationFirstTime = directions?.eta?.[0]?.eta?.[0];\n const otherBoundlastStationFirstTime =\n index === 0\n ? routes?.[1]?.eta?.[routes[1].eta.length - 1]?.eta?.[0]\n : routes?.[0]?.eta?.[routes[0].eta.length - 1]?.eta?.[0];\n if (otherBoundlastStationFirstTime?.vehicle) {\n if (\n otherBoundlastStationFirstTime?.diff >\n firstStationFirstTime?.diff\n // true\n ) {\n directions.eta[0].eta[0] = otherBoundlastStationFirstTime;\n }\n }\n }\n return directions;\n });\n });\n // console.log(\"newEta====\", newEta);\n setEtas(newEta);\n }\n }, [preEtas]);\n\n useEffect(() => {\n if (routes && routes.length > 0) {\n // console.log(routes);\n if (isFirstTime) {\n getEta();\n setIsFirstTime(false);\n }\n const timer = setIntervalAsync(async () => {\n await getEta();\n }, 10000);\n\n return () => {\n clearIntervalAsync(timer);\n };\n }\n }, [routes]);\n\n useEffect(() => {\n if (lang) {\n setIsLoading(false);\n setCurrentTitle(null);\n }\n }, [lang]);\n\n return (\n <>\n {isLoading ? (\n \n \n {language === \"zh\" || language === \"cn\"\n ? displayType === \"combineStops\"\n ? `${routeCode ? routeCode : \"\"}來往 ${destination}`\n : `${routeCode ? routeCode : \"\"}由 ${origin} 往 ${destination}`\n : displayType === \"combineStops\"\n ? `${routeCode ? routeCode : \"\"}To ${destination}`\n : `${routeCode ? routeCode : \"\"}From ${origin} \n To ${destination}`}\n \n \n
\n {eta && getTitle(displayType)}
\n - \n {routes.map((route, ind) =>\n route &&\n route.directions.length > 0 &&\n route.routeStops &&\n route.routeStops.length > 0\n ? route.directions\n .sort((a, b) =>\n `${a.route_seq}` > `${b.route_seq}` ? 1 : -1\n )\n .map((origin, index) => {\n /**\n * combine stops / fake circular routes\n */\n if (\n displayType === \"combineStops\" ||\n (fakeCircularRoutes &&\n fakeCircularRoutes.includes(route.route_id))\n ) {\n if (origin.route_seq > 1) {\n return (\n
\n
\n );\n};\n\nexport default SmallEtaCard;\n","/* eslint-disable */\nimport { CircularProgress, Divider, List, ListItem } from \"@material-ui/core\";\nimport React, { useEffect, useState, useMemo } from \"react\";\nimport { useLocation, withRouter } from \"react-router-dom\";\nimport { clearIntervalAsync } from \"set-interval-async\";\nimport { setIntervalAsync } from \"set-interval-async/dynamic\";\nimport { flatten } from \"lodash\";\nimport RNSmallEtaCard from \"../../components/RNSmallEtaCard\";\nimport Constants from \"../../utils/constants\";\nimport { getRouteStopEta, getRouteStopEtaByStop } from \"../../utils/api\";\nimport \"./styles.scss\";\nimport { langStringConvertor } from \"../../utils/utils\";\n\nconst { LANGUAGES } = Constants;\nconst { appTitle, routesTitle } = LANGUAGES;\n\nconst RNHome = (props) => {\n const {\n routes,\n routeIds,\n lang,\n site,\n court,\n redirect,\n displayType,\n setCurrentTitle,\n displayRouteCode,\n routeNetwork,\n showLicensePlate\n } = props;\n const [isFirstTime, setIsFirstTime] = useState(true);\n const [isLoading, setIsLoading] = useState(true);\n const [etas, setEtas] = useState([]);\n const [vehicleLocations, setVehicleLocations] = useState({});\n\n const getEta = async () => {\n await Promise.all(\n routes.map(async (route, index) => {\n // console.log(\"route,route\", route);\n return Promise.all(\n route.routeStops.map(async (direction, index) => {\n const tempResult = await getRouteStopEta(\n route.route_id,\n route.directions[index].route_seq\n );\n setVehicleLocations({...vehicleLocations, ...tempResult.vehicleLocation});\n // console.log(\"tempResult\", tempResult);\n const addStopSeq = {\n ...tempResult,\n eta: tempResult.eta.map((el, ind) => {\n return { ...el, stopId: direction[ind].stop_id };\n }),\n };\n return {\n ...addStopSeq,\n routeId: route.route_id,\n routeSeq: route.directions[index].route_seq,\n };\n })\n );\n })\n ).then((result) => {\n // console.log(\"====result\", flatten(result));\n setEtas(flatten(result));\n });\n };\n\n useEffect(() => {\n if (routeNetwork.length > 0) {\n // console.log(\"routeNetwork\", routeNetwork);\n }\n }, [routeNetwork]);\n\n useEffect(() => {\n if (routes && routes.length > 0) {\n if (isFirstTime) {\n getEta();\n setIsFirstTime(false);\n }\n const timer = setIntervalAsync(async () => {\n await getEta();\n }, 10000);\n\n return () => {\n clearIntervalAsync(timer);\n };\n }\n }, [routes]);\n\n useEffect(() => {\n if (lang) {\n setIsLoading(false);\n setCurrentTitle(null);\n }\n }, [lang]);\n\n return (\n <>\n {isLoading ? (\n \n {language === \"zh\" || language === \"cn\" ? (\n displayType === \"combineStops\" ? (\n \n {`${routeCode ? routeCode : \"\"}來往 ${destination}`}\n \n ) : (\n \n {`${routeCode ? routeCode : \"\"}由 ${origin} `}往 {destination}\n \n )\n ) : displayType === \"combineStops\" ? (\n {`${\n routeCode ? routeCode : \"\"\n }To ${destination}`}\n ) : (\n \n {`${routeCode ? routeCode : \"\"}From ${origin} `}\n To {destination}\n \n )}\n \n
\n \n {eta &&\n stations.map((station, index) => {\n if (stations.length > 3) {\n if (index !== stations.length - 1 && index !== 0) {\n if (index === 2) {\n return (\n
\n \n
\n );\n } else {\n return <>;\n }\n }\n }\n\n const tempEta = eta\n .flatMap((el) => el.eta)\n .filter((el) => el.stopId === station.stop_id)\n .flatMap((el) => el.eta)\n .sort((a, b) => a.diff - b.diff);\n\n const stationEta = tempEta;\n const isLastStation = index === stations.length - 1;\n\n //if firstEta is realtime 0mins, then use the second one\n const isFirstEtaRealtime =\n index === 0 &&\n stationEta?.[0]?.diff === 0 &&\n !stationEta?.[0]?.remarks_en;\n\n return (\n \n \n
\n - \n {routeNetwork.length > 0 &&\n routeNetwork.map((route, ind) => {\n // console.log(\"route\", route);\n // console.log(\"etas\", etas);\n return (\n
\n {time[`remarks_${langStringConvertor(language)}`] && (\n {`(${\n time[`remarks_${langStringConvertor(language)}`]\n })`}\n )}\n
\n \n );\n } else {\n return (\n <>\n -\n {minute[language]}\n \n );\n }\n };\n // console.log(index, time.diff, time.remarks_en);\n return (\n \n
\n
\n );\n};\n\nexport default StationEta;\n","import { Paper } from \"@material-ui/core\";\nimport React, { useEffect, useState } from \"react\";\nimport Constants from \"../../utils/constants\";\nimport { langStringConvertor } from \"../../utils/utils\";\nimport RNStationEta from \"../RNStationEta\";\nimport \"./styles.scss\";\n\nconst { LANGUAGES } = Constants;\nconst { feeText } = LANGUAGES;\n\nconst EtaCard = (props) => {\n const { stops, lang, description, message, etaDisplayMethod } = props;\n\n const [language, setLanguage] = useState(props.lang);\n\n useEffect(() => {\n setLanguage(lang);\n }, [lang]);\n\n return (\n \n
\n {time && time.length > 0 ? (\n // {/* Eta Time */ }\n \n {stationName}\n {!!message && {`${message}`}}\n
\n \n {routeIds.map((el) => {\n // console.log(description);\n // console.log(\"el\", el);\n const isNormalRoute =\n description[el][langStringConvertor(language)].match(/正常/);\n return (\n // \n // {description[el][langStringConvertor(language)]}\n // \n
\n \n {index === 0 &&\n time?.find((el) => el.eta_seq === 1)?.diff === 0 &&\n !time?.find((el) => el.eta_seq === 1)?.remarks_en ? (\n <>\n ) : (\n
\n ) : (\n \n {renderTimeHeader(\n time?.find((el) => el.eta_seq === 1),\n 0\n )}\n
\n )}\n \n {renderTime(\n time?.find((el) => el.eta_seq === 1),\n 0,\n themeColour\n )}\n
\n \n {renderTimeHeader(\n time?.find((el) => el.eta_seq === 2),\n 1\n )}\n
\n \n {renderTime(\n time?.find((el) => el.eta_seq === 2),\n 1,\n themeColour\n )}\n
\n \n {renderTimeHeader(\n time?.find((el) => el.eta_seq === 3),\n 2\n )}\n
\n {index === 0 &&\n time?.find((el) => el.eta_seq === 1)?.diff === 0 &&\n !time?.find((el) => el.eta_seq === 1)?.remarks_en && (\n \n {renderTime(\n time?.find((el) => el.eta_seq === 3),\n 2,\n themeColour\n )}\n
\n \n {renderTimeHeader(\n time?.find((el) => el.eta_seq === 3),\n 2\n )}\n
\n )}\n \n {renderTime(\n time?.find((el) => el.eta_seq === 4),\n 3,\n themeColour\n )}\n
\n \n
\n )}\n \n \n
\n \n \n
\n \n
\n \n \n {noScheduled[language]}\n \n
\n \n
\n {stops.map((station, index) => {\n return (\n el.routeId)}\n message={message}\n etaDisplayMethod={etaDisplayMethod}\n />\n );\n })}\n
\n \n {/* Map */}\n \n {path.map((el) => {\n return (\n <>\n {/* Route Path Border */}\n \n // \n // \n })\n : null}\n\n {/* Vehicle Icon */}\n {court !== \"rmb\" &&\n cars &&\n cars.length > 0 &&\n cars.map((car, index) => {\n const offsets = carPaths.find(\n (el) => el.license_plate === car.license_plate\n );\n return offsets?.path.length > 0 ? (\n \n ) : (\n \n );\n })}\n {court === \"rmb\" && cars && cars?.length > 0\n ? cars.map((car) => {\n if (car?.coordinates) {\n return (\n ({ x: -15, y: -15 })}\n >\n \n \n );\n }\n return <>;\n })\n : null}\n \n
\n );\n});\n\nexport default RNMapComp;\n","// import * as L from \"leaflet\";\nimport { decode } from \"@mapbox/polyline\";\nimport { CircularProgress } from \"@material-ui/core\";\nimport \"leaflet/dist/leaflet.css\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { clearIntervalAsync } from \"set-interval-async\";\nimport { setIntervalAsync } from \"set-interval-async/dynamic\";\nimport RNEtaCard from \"../../components/RNEtaCard\";\nimport RNMapComp from \"../../components/RNMap/index\";\nimport { getRouteStopEta, getRouteTraffic } from \"../../utils/api\";\nimport { hideStopDroppingStragegy, langStringConvertor } from \"../../utils/utils\";\nimport \"./styles.scss\";\n\n\n\nconst Eta = (props) => {\n const { lang, routes, displayType, setCurrentTitle, court, routeNetwork, hideStop, etaDisplayMethod, themeColour } =\n props;\n const { routeId, routeSeq } = props.match.params;\n\n const RNRoute = routeNetwork.find(\n (el) => `${el.normalRouteId}` === routeId && `${el.routeSeq}` === routeSeq\n );\n // console.log(\"RNRoute\", RNRoute);\n const route = routes.find((el) => `${el.route_id}` === routeId);\n const directionsStops = route?.routeStops;\n const [path, setPath] = useState([]);\n const [stops, setStops] = useState([]);\n const [vehicleLocations, setVehicleLocations] = useState(null);\n const [traffic, setTraffic] = useState([]);\n const [etaCardMsg, setEtaCardMsg] = useState(null);\n\n const [bounds, setBounds] = useState(new window.google.maps.LatLngBounds());\n\n const [isLoading, setIsLoading] = useState(true);\n\n const [isFirstTime, setIsFirstTime] = useState(true);\n\n const getStopsInfo = useCallback(async () => {\n // console.log(\"RNRoute\", RNRoute);\n const tempEta2 = await Promise.all(\n RNRoute.routeIds.flatMap(async (el, index) => {\n const eta = await getRouteStopEta(el, RNRoute.routeSeq);\n // console.log(\"eta\", eta);\n\n return {\n ...eta,\n vehicleLocation: Object.values(eta.vehicleLocation).map(\n (ele, index) => ({\n ...ele,\n vehicleId: Object.keys(eta.vehicleLocation)[index],\n routeId: el,\n })\n ),\n eta: eta.eta.map((ele, ind) => ({\n ...ele,\n routeId: el,\n stopId: RNRoute.routeList[el][ind],\n eta: ele.eta.map((ele) => ({ ...ele, routeId: el })),\n })),\n };\n })\n );\n // console.log(tempEta2);\n const tempStops = RNRoute.route_stops.map((el, index) => {\n const etas = tempEta2\n .flatMap((ele) => ele.eta)\n .filter((ele) => ele.stopId === el.stop_id)\n .flatMap((ele) => ele.eta)\n .sort((a, b) => a.diff - b.diff);\n // console.log(etas);\n return {\n ...el,\n ...RNRoute.stops[index],\n eta: etas.map((el, ind) => ({ ...el, eta_seq: ind + 1 })),\n };\n });\n\n let tempVL = [];\n tempEta2.map((el) => {\n tempVL = [...tempVL, ...el[\"vehicleLocation\"]];\n });\n\n // console.log(tempVL);\n setVehicleLocations(tempVL);\n\n setStops(tempStops);\n }, [RNRoute]);\n\n const getPath = useCallback(async () => {\n const tempBounds = bounds || new window.google.maps.LatLngBounds();\n if (RNRoute) {\n const tempPath = RNRoute.routeIds.map((el) => {\n const pathCoords = decode(RNRoute.shapes[el]).map((latlng) => {\n const latLng = new window.google.maps.LatLng(latlng[1], latlng[0]);\n tempBounds.extend(latLng);\n return { lat: latlng[1], lng: latlng[0] };\n });\n return { routeId: el, shape: pathCoords };\n });\n // console.log(tempPath);\n setBounds(tempBounds);\n setPath(tempPath);\n }\n }, [RNRoute, bounds]);\n\n const getTraffic = useCallback(async () => {\n if (RNRoute) {\n await Promise.all(\n RNRoute.routeIds.map(async (el) => {\n return { traffic: await getRouteTraffic(el, routeSeq), routeId: el };\n })\n ).then((result) => {\n setTraffic(result);\n });\n }\n }, [RNRoute, routeSeq]);\n\n const getCurrentTitle = useCallback(() => {\n if (route) {\n const origin = route.directions.find(\n (el) => `${el.route_seq}` === `${routeSeq}`\n )[`orig_${langStringConvertor(lang)}`];\n const destination = route.directions.find(\n (el) => `${el.route_seq}` === `${routeSeq}`\n )[`dest_${langStringConvertor(lang)}`];\n\n setCurrentTitle(\n lang === \"zh\" || lang === \"cn\"\n ? displayType === \"combineStops\"\n ? `來往 ${destination}`\n : `由 ${origin} 往 ${destination}`\n : displayType === \"combineStops\"\n ? `To ${destination}`\n : `From ${origin} To ${destination}`\n );\n }\n }, [displayType, lang, route, routeSeq, setCurrentTitle]);\n\n useEffect(() => {\n const getData = async () => {\n await getStopsInfo();\n await getPath();\n await getTraffic();\n };\n\n if (isFirstTime && routes && routes.length > 0) {\n getCurrentTitle();\n getData();\n setIsFirstTime(false);\n setIsLoading(false);\n }\n }, [\n displayType,\n getCurrentTitle,\n getPath,\n getStopsInfo,\n getTraffic,\n isFirstTime,\n routes,\n setCurrentTitle,\n ]);\n\n useEffect(() => {\n const timer = setIntervalAsync(async () => {\n await getStopsInfo();\n // await getEta();\n await getTraffic();\n }, 10000);\n\n return () => {\n clearIntervalAsync(timer);\n };\n }, [displayType, getStopsInfo, getTraffic]);\n\n return (\n <>\n {isLoading ? (\n \n // \n // {schedules.length > 0 &&\n // schedules.map((schedule, index) => {\n // return (\n // \n // {MonToSat[language]}\n // \n // );\n // })}\n // {/* \n // {MonToSat[language]}\n // \n // \n // {SunAndHol[language]}\n // */}\n // \n // {/* */}\n //
\n \n \n \n {schedules.length > 0 &&\n schedules.map((schedule, index) => {\n return \n
\n );\n};\n\nexport default CustomSwitch;\n","/* eslint-disable */\nimport { CircularProgress, Grid, Box } from \"@material-ui/core\";\nimport { find, sortBy } from \"lodash\";\nimport moment from \"moment\";\nimport React, { useEffect, useState, useMemo } from \"react\";\nimport ToggleButton from \"@material-ui/lab/ToggleButton\";\nimport ToggleButtonGroup from \"@material-ui/lab/ToggleButtonGroup\";\n\nimport ScheduleList from \"../../components/ScheduleList\";\nimport CustomSwitch from \"../../components/Switch\";\nimport Constants from \"../../utils/constants\";\nimport { validateCourtId } from \"../../utils/data\";\nimport \"./styles.scss\";\nimport { getRouteSchedule } from \"../../utils/api\";\nimport { langStringConvertor } from \"../../utils/utils\";\n\nconst { LANGUAGES } = Constants;\nconst { scheduleTitle, weekdays, notOperateToday, notOperateThatDay } =\n LANGUAGES;\n\nconst Schedule = (props) => {\n const { routes, lang, setCurrentTitle, court, isTodayHoliday, isRA, themeColour } = props;\n // const { routeId, routeSeq } = props.match.params;\n const [courtSchedules, setCourtSchedules] = useState(null);\n const [schedulesToShow, setSchedulesToShow] = useState([]);\n const [language, setLanguage] = useState(null);\n const [origins, setOrigins] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [typeOfSchedules, setTypeOfSchedules] = useState(null);\n // console.log(\"lang, courtSchedules\", lang, courtSchedules);\n const todayWeekday = useMemo(() => isTodayHoliday ? 8 : moment().isoWeekday(), [isTodayHoliday]);\n const [weekday, setWeekday] = useState(isTodayHoliday ? 8 : moment().isoWeekday());\n\n useEffect(() => {\n console.log(\"todayWeekday\", todayWeekday);\n }, [todayWeekday]);\n\n useEffect(() => {\n console.log(\"weekday\", weekday);\n }, [weekday]);\n\n const getCourtSchedules = async () => {\n console.log(\"getCourtSchedules\");\n await Promise.all(\n routes.map(async (route) => {\n const tempSchedule = await getRouteSchedule(route.route_id, weekday);\n return route.directions.map((direction) => {\n return {\n ...direction,\n schedule: tempSchedule.find(\n (el) => parseInt(el.route_seq, 10) === direction.route_seq\n ),\n description_en: route.description_en,\n description_sc: route.description_sc,\n description_tc: route.description_tc,\n };\n });\n })\n ).then((result) => {\n setCourtSchedules(result);\n });\n };\n\n const renderSchedules = () => {\n return courtSchedules.map((courtSchedule) =>\n courtSchedule.map((directions) => {\n // console.log(directions);\n const onlyOneRoute =\n courtSchedule.length === 1 && courtSchedule.length === 1;\n const description = directions[`description_tc`].match(/正常/)\n ? null\n : directions[`description_${langStringConvertor(lang)}`];\n const haveSchedule = directions?.schedule;\n return (\n \n \n {lang === \"zh\" || lang === \"cn\" ? \"由\" : \"From\"}\n \n {directions[`orig_${langStringConvertor(lang)}`]}\n
\n \n \n {\" \"}\n {lang === \"zh\" || lang === \"cn\" ? \"往\" : \"To\"}\n \n {directions[`dest_${langStringConvertor(lang)}`]}\n {description && (\n ({description})\n )}\n
\n \n {directions?.schedule?.schedules ? (\n \n \n {directions?.schedule?.schedules.map((time, index) => {\n let ra2dollar = false;\n {\n /**\n * This is For Royal Ascor Only\n */\n }\n if (isRA) {\n if (directions.route_seq === 1) {\n if (\n moment(time).diff(\n moment().startOf(\"day\").add(869, \"minutes\")\n ) > 0\n ) {\n ra2dollar = true;\n }\n } else {\n if (\n moment(time).diff(\n moment().startOf(\"day\").add(691, \"minutes\")\n ) < 0\n ) {\n ra2dollar = true;\n }\n }\n }\n {\n /**\n * This is For Royal Ascor Only -- END\n */\n }\n const now = moment();\n if (todayWeekday !== weekday || now.diff(time) < 0) {\n return (\n \n \n {moment(time).format(\"HH:mm\")}\n
\n \n \n \n \n \n
\n )}\n \n \n );\n })\n );\n };\n\n const handleWeekday = (event, newWeekday) => {\n console.log(newWeekday);\n if (newWeekday) {\n setWeekday(newWeekday);\n }\n };\n\n useEffect(() => {\n setWeekday(todayWeekday);\n }, [isTodayHoliday]);\n\n useEffect(() => {\n if (weekday && courtSchedules) {\n getCourtSchedules();\n }\n }, [weekday]);\n\n useEffect(() => {\n if (courtSchedules === null && routes && routes.length > 0) {\n getCourtSchedules();\n }\n }, [courtSchedules, routes]);\n\n useEffect(() => {\n setCurrentTitle(null);\n\n if (lang && courtSchedules) {\n setIsLoading(false);\n }\n }, [lang, courtSchedules]);\n\n return (\n \n {todayWeekday === weekday\n ? notOperateToday[lang]\n : notOperateThatDay[lang]}\n
\n \n {isLoading ? (\n \n
\n ) : (\n <>\n \n \n 00:00\n
\n 藍色班次 : 有長者$2乘車優惠
\n \n