fixed dark mode and added styling to stops

agiledev-students-fall2023 · Dec 7, 2023 · 2456405 · 2456405
1 parent a212ec8
commit 2456405
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 77 deletions.
diff --git 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
@@ -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
@@ -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;
diff --git 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
@@ -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
@@ -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,28 +840,28 @@ 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',
   });
   infowindow.open(window.google.maps, marker);
 }
 
-function buildInfoContent(stopName, next_times) {
-  let content = '<div>';
-  content += `<p>${stopName}</p>`;
+function buildInfoContent(stopName, next_times, textColor) {
 
+  let content = '<div class="bg-gray-100 p-4 rounded-lg shadow-md">';
+  content += `<p class="text-md font-bold mb-4" style="color: ${textColor}">${stopName}</p>`;
   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 += `<p>Route ${route}: ${top3Times.join(', ')}</p>`;
+        content += `<p class="mb-2 font-bold"><span class="font-bold" style="color: ${textColor}" >Route ${route}:</span> ${top3Times.join(', ')}</p>`;
       } else if (times[0] === 'No info available') {
-        content += `<p>No times available for this route. Please check passiogo for available times.</p>`;
+        content += `<p class="mb-2 text-red-500">No times available for this route. Please check Passiogo for available times.</p>`;
       } else {
-        content += `<p>Route ${route}: No incoming shuttles at this stop.</p>`;
+        content += `<p class="mb-2"><span class="font-bold">Route ${route}:</span> No incoming shuttles at this stop.</p>`;
       }
     }
   }
@@ -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;