From 2456405da118b571ac55c367032cfb5f7fe19983 Mon Sep 17 00:00:00 2001 From: anaspacheco Date: Thu, 7 Dec 2023 00:33:47 -0500 Subject: [PATCH] fixed dark mode and added styling to stops --- back-end/app.js | 18 ---- front-end/src/App.js | 3 +- .../src/components/settings/SettingsPage.js | 13 +-- front-end/src/hooks/darkMode.js | 15 +-- front-end/src/utils/stopTimes.js | 12 +-- front-end/src/utils/stops.js | 101 +++++++++++------- 6 files changed, 85 insertions(+), 77 deletions(-) diff --git a/back-end/app.js b/back-end/app.js index 81a5fbd..2eb49de 100644 --- a/back-end/app.js +++ b/back-end/app.js @@ -36,24 +36,6 @@ app.use('/stopfind', stopRoutes()); app.use(express.urlencoded({ extended: true })); -cron.schedule('0 0 * * *', () => { - fetchDataForRoutes([ - 'routesA_W', - 'routesA_F', - 'routesA_Wknd', - 'routesB_W', - 'routesB_F', - 'routesC_W', - 'routesE_W', - 'routesE_F', - 'routesF_W', - 'routesG_W', - 'routesG_F', - 'routesG_Wknd', - 'routesW_Wknd', - ]); -}); - app.post('/getRoute', async (req, res) => { const routeFinding = require('./getOptimizedRoute.js'); const busStops = {}; diff --git a/front-end/src/App.js b/front-end/src/App.js index d2e5fc8..fed43ca 100644 --- a/front-end/src/App.js +++ b/front-end/src/App.js @@ -13,12 +13,12 @@ import FeedbackSupportPage from './components/settings/FeedbackSupportPage'; import PrivacyPolicyPage from './components/settings/PrivacyPolicyPage'; import LoadingScreen from './components/LoadingScreen'; import TutorialComponent from './components/TutorialComponent'; +import useDarkMode from './hooks/darkMode'; // Import hooks and utilities import { registerService } from './utils/serviceRegister'; import { getMapCenter, loadGoogleMapsAPI } from './utils/mapUtility'; import { queryRoutes } from './utils/routes'; -import { getNextTimes } from './utils/stopTimes'; // Import CSS import './index.css'; @@ -32,6 +32,7 @@ function App() { const isFirstTimeUser = localStorage.getItem('isFirst') !== 'false'; const [tutorialIndex, setTutorialIndex] = useState(0); const [tutorialOn, setTutorialOn] = useState(isFirstTimeUser); + const [colorTheme, setColorTheme] = useDarkMode(); const localStorageItems = {}; for (let i = 0; i < localStorage.length; i++) { diff --git a/front-end/src/components/settings/SettingsPage.js b/front-end/src/components/settings/SettingsPage.js index d379cfa..068c928 100644 --- a/front-end/src/components/settings/SettingsPage.js +++ b/front-end/src/components/settings/SettingsPage.js @@ -7,12 +7,13 @@ const SettingsPage = () => { const [colorTheme, setTheme] = useDarkMode(); const [isDarkMode, setIsDarkMode] = useState(false); + useEffect(() => { + setIsDarkMode(colorTheme === 'dark'); + }, [colorTheme]); + const toggleDarkTheme = () => { - - const nextTheme = isDarkMode ? 'light' : 'dark'; - - setIsDarkMode(!isDarkMode); - // Set the new theme in localStorage + const nextTheme = colorTheme === 'dark' ? 'light' : 'dark'; + setIsDarkMode(nextTheme === 'dark'); setTheme(nextTheme); }; @@ -47,4 +48,4 @@ const SettingsPage = () => { ); }; -export default SettingsPage; +export default SettingsPage; \ No newline at end of file diff --git a/front-end/src/hooks/darkMode.js b/front-end/src/hooks/darkMode.js index 1581ba8..b102304 100644 --- a/front-end/src/hooks/darkMode.js +++ b/front-end/src/hooks/darkMode.js @@ -1,24 +1,25 @@ +// useDarkMode.js import { useState, useEffect } from 'react'; const useDarkMode = () => { const getInitialTheme = () => { const storedTheme = localStorage.getItem('theme-color'); - // Treat 'dark' as true, and any other value as false - return storedTheme === 'dark'; + return storedTheme || 'light'; }; - const [isDarkMode, setIsDarkMode] = useState(getInitialTheme); + const [colorTheme, setColorTheme] = useState(getInitialTheme); useEffect(() => { - localStorage.setItem('theme-color', isDarkMode ? 'dark' : 'light'); - if (isDarkMode) { + localStorage.setItem('theme-color', colorTheme); + + if (colorTheme === 'dark') { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } - }, [isDarkMode]); + }, [colorTheme]); - return [isDarkMode, setIsDarkMode]; + return [colorTheme, setColorTheme]; }; export default useDarkMode; diff --git a/front-end/src/utils/stopTimes.js b/front-end/src/utils/stopTimes.js index bb44b9f..70faf68 100644 --- a/front-end/src/utils/stopTimes.js +++ b/front-end/src/utils/stopTimes.js @@ -58,7 +58,7 @@ export async function getNextTimes(stopName, route) { } export async function getMatchingName(stopName, route){ - if (route === "A") { + if (route == "A") { if(stopName==="Cadman Plaza & Clark Street"){ return "Cadman Plaza & Clark St." } else if(stopName==="6 Metro Tech Center" || stopName==="Metro Tech Way"){ @@ -72,7 +72,7 @@ export async function getMatchingName(stopName, route){ } else if(stopName==="Cleveland Pl & Spring St"){ return "Cleveland & Spring St." } - } else if (route === "B") { + } else if (route == "B") { if(stopName==="Lafayette & E. 4th St"){ return "Layfayette & E 4th St." } else if(stopName==="Cleveland Pl & Spring St"){ @@ -84,7 +84,7 @@ export async function getMatchingName(stopName, route){ } else if(stopName==="Broadway & Broome St."){ return "Broadway & Broome St." } - } else if (route === "C") { + } else if (route == "C") { if(stopName==="Avenue C At 14th Street"){ return "Ave. C & 14th St." } else if(stopName==="Avenue C At 16th Street"){ @@ -104,7 +104,7 @@ export async function getMatchingName(stopName, route){ } else if(stopName==="14th Street At Avenue B"){ return "14th St. & Ave. B" } - } else if (route === "E") { + } else if (route == "E") { if(stopName==="First Avenue At 17th Street"){ return "1st Ave. at 17th St." } else if(stopName==="First Avenue At 24th Street"){ @@ -128,7 +128,7 @@ export async function getMatchingName(stopName, route){ } else if(stopName==="715 Broadway"){ return "715 Broadway Departure" } - } else if (route === "F") { + } else if (route == "F") { if(stopName==="Third Avenue At 30th Street"){ return "3rd Ave. at 30th St." } else if(stopName==="Lexington Avenue At 31st Street"){ @@ -154,7 +154,7 @@ export async function getMatchingName(stopName, route){ } else if(stopName==="715 Broadway"){ return "715 Broadway Departure" } - } else if (route === "W") { + } else if (route == "W") { if(stopName==="Lexington Avenue At 31st Street"){ return "Lexington Ave. at 31 St." } else if(stopName==="First Avenue At 26th Street"){ diff --git a/front-end/src/utils/stops.js b/front-end/src/utils/stops.js index 3988333..7700b1e 100644 --- a/front-end/src/utils/stops.js +++ b/front-end/src/utils/stops.js @@ -760,48 +760,70 @@ function addRouteMarkersOnMap(routeId, routestops, routeGroupId, showStopName) { function getCorrespondingRoute(routeIDs) { let routes = []; + if (typeof routeIDs === 'string') { routeIDs = [routeIDs]; } + + let anyRouteSelected = false; + for (let i = 0; i < routeIDs.length; i++) { - let route = routeIDs[i]; - if (route === '44748') { - routes.push('C'); - } else if (route === '44676') { - routes.push('A'); - } else if (route === '44753') { - routes.push('W'); - } else if (route === '44745') { - routes.push('B'); - } else if (route === '41890') { - routes.push('CH'); - } else if (route === '44749') { - routes.push('E'); - } else if (route === '44750') { - routes.push('F'); - } else if (route === '44752') { - routes.push('G'); - } else if (route === '44754') { - routes.push('MP'); - } else if (route === '44755') { - routes.push('ME'); - } else if (route === '44756') { - routes.push('MW'); - } else if (route === '44757') { - routes.push('BL'); - } else if (route === '45769') { - routes.push('FR'); + const route = routeIDs[i]; + if (isSelectedRoute(route)) { + const translatedRoute = translateRoute(route); + routes.push(translatedRoute); + anyRouteSelected = true; } } + + if (!anyRouteSelected) { + for (let i = 0; i < routeIDs.length; i++) { + const route = routeIDs[i]; + const translatedRoute = translateRoute(route); + routes.push(translatedRoute); + } + } + return routes; } + +function translateRoute(routeID) { + switch (routeID) { + case '44748': + return 'C'; + case '44676': + return 'A'; + case '44753': + return 'W'; + case '44745': + return 'B'; + case '41890': + return 'CH'; + case '44749': + return 'E'; + case '44750': + return 'F'; + case '44752': + return 'G'; + case '44754': + return 'MP'; + case '44755': + return 'ME'; + case '44756': + return 'MW'; + case '44757': + return 'BL'; + case '45769': + return 'FR'; + default: + return routeID; + } +} + async function onMarkerClick(theStop, marker) { const stopName = marker.title; - //console.log(stopName); - //console.log(theStop.routeIDs); const routes = getCorrespondingRoute(theStop.routeIDs); - //console.log(routes); let next_times = {}; for (let i = 0; i < routes.length; i++) { if (checkIfInfoisAvailable(routes[i])) { @@ -818,7 +840,7 @@ async function onMarkerClick(theStop, marker) { } async function displayStopInfo(marker, stopName, next_times) { - const contentString = buildInfoContent(stopName, next_times); + const contentString = buildInfoContent(stopName, next_times, marker.color); const infowindow = new window.google.maps.InfoWindow({ content: contentString, ariaLabel: 'Uluru', @@ -826,20 +848,20 @@ async function displayStopInfo(marker, stopName, next_times) { infowindow.open(window.google.maps, marker); } -function buildInfoContent(stopName, next_times) { - let content = '
'; - content += `

${stopName}

`; +function buildInfoContent(stopName, next_times, textColor) { + let content = '
'; + content += `

${stopName}

`; for (const route in next_times) { if (next_times.hasOwnProperty(route)) { const times = next_times[route]; if (times != null && times[0] !== 'No info available' && times.length !== 0) { const top3Times = times.slice(0, 3); - content += `

Route ${route}: ${top3Times.join(', ')}

`; + content += `

Route ${route}: ${top3Times.join(', ')}

`; } else if (times[0] === 'No info available') { - content += `

No times available for this route. Please check passiogo for available times.

`; + content += `

No times available for this route. Please check Passiogo for available times.

`; } else { - content += `

Route ${route}: No incoming shuttles at this stop.

`; + content += `

Route ${route}: No incoming shuttles at this stop.

`; } } } @@ -848,6 +870,7 @@ function buildInfoContent(stopName, next_times) { return content; } + function checkIfInfoisAvailable(route_id) { if ( route_id === 'MP' || @@ -901,6 +924,7 @@ function createMarkerForStop(stop, zoomLevel, routeColor, showStopName, idx) { routeId: stop.routeId, title: stop.name, label: createMarkerLabel(stop.name, showStopName), + color: routeColor, }; return new window.google.maps.Marker(markerOptions); } @@ -940,14 +964,13 @@ function recreateStopMarkerCluster() { showTitle: false, }); // Add event listeners to the marker cluster - window.google.maps.event.addListener(stopMarkerCluster, 'click', onClusterMarkerClick); //window.google.maps.event.addListener(stopMarkerCluster, 'mouseover', onClusterMarkerHover); } async function onClusterMarkerClick(cluster) { const markers = cluster.getMarkers(); - console.log(markers); + //console.log(markers); if (markers) { const marker = markers[0]; const sID = marker.stopId;