Merge pull request #75 from agiledev-students-fall2023/Jaden's-Branch

Minor routes page UI changes

front-end/src/components/RoutesPage.js

@@ -23,9 +23,7 @@ function RoutesPage() {
 
   return (
     <div className="route-container">
-      <Link className="saved-item" to="/saved-routes">
-        Saved Routes
-      </Link>
+      <div className="input-wrapper">
       <div className="location-input">
         <label>From:</label>
         <LocationFilter
@@ -43,6 +41,7 @@ function RoutesPage() {
           }}
         />
       </div>
+      </div>
 
       {showSubpage && (
         <RoutesSubpage location1={fromLocation} location2={toLocation} />

front-end/src/components/RoutesSubpage.js

@@ -1,4 +1,5 @@
 import { React, useState, useEffect } from "react";
+import { Link } from "react-router-dom";
 import "../css/routesSubpage.css";
 import "../css/basicUI.css";
 import HeartIcon from "../images/heart-svg.svg";
@@ -10,11 +11,13 @@ import { localStorageSave, localStorageLoad } from '../utils/localStorageSaveLoa
 function RoutesSubpage({ location1, location2 }) {
   const [isSaveDialogOpen, setSaveDialogOpen] = useState(false);
   const [isRouteSaved, setIsRouteSaved] = useState(false);
+  const [displayText, setDisplayText] = useState("Click to save route ->");
 
   useEffect(() => {
     const loadedRoutes = localStorageLoad('routes');
     if (loadedRoutes && loadedRoutes.some((route) => route.from === location1.name && route.to === location2.name)) {
       setIsRouteSaved(true);
+      setDisplayText("View saved routes here");
     } else {
       setIsRouteSaved(false);
     }
@@ -27,7 +30,6 @@ function RoutesSubpage({ location1, location2 }) {
       const loadedRoutes = localStorageLoad('routes') || [];
       const updatedRoutes = loadedRoutes.filter((route) => route.from !== location1.name || route.to !== location2.name);
       localStorageSave('routes', updatedRoutes);
-      setIsRouteSaved(false);
     }
   };
 
@@ -47,7 +49,13 @@ function RoutesSubpage({ location1, location2 }) {
       };
       loadedRoutes.push(newRoute);
       localStorageSave('routes', loadedRoutes);
+
       setIsRouteSaved(true);
+
+      setDisplayText("Saved");
+      setTimeout (() => {
+        setDisplayText("View saved routes here");
+      }, 3000);
   };
 
   const startNavigation = () => {
@@ -63,12 +71,17 @@ function RoutesSubpage({ location1, location2 }) {
   return (
     <div className="routes-subpage-container">
       <div className="title-container">
-        <img
-          src={isRouteSaved ? HeartIconLoaded : HeartIcon}
-          alt="Saved Icon"
-          className="saved-icon"
-          onClick={openSaveDialog}
-        />
+          <Link className={'save '+(!isRouteSaved ? 'halfw' : 'fullw')} to="/saved-routes">
+            {displayText}
+          </Link>
+          {!isRouteSaved &&             
+            <img
+              src={isRouteSaved ? HeartIconLoaded : HeartIcon}
+              alt="Saved Icon"
+              className="saved-icon red"
+              onClick={openSaveDialog}
+            />
+          }
       </div>
       <RouteMap location1={location1} location2={location2} />
       <div className="route-info">

front-end/src/css/routeMap.css

@@ -7,7 +7,7 @@
   }
 
 .route_map{
-    @apply bg-lightTone opacity-60 border-solid drop-shadow-2xl border-2 border-darkTone rounded-3xl;
+    @apply bg-lightTone w-80 opacity-60 border-solid drop-shadow-2xl border-2 border-darkTone rounded-3xl;
 }
 
 .dark .rooute_map{

front-end/src/css/routesPage.css

@@ -6,8 +6,12 @@
   @apply bg-darkMode-darkTone;
 }
 
+.input-wrapper{
+  @apply flex flex-col items-center;
+}
+
 .location-input {
-  @apply my-0.5 w-full;
+  @apply my-0.5 w-80;
 }
 
 .location-input label {
@@ -30,3 +34,4 @@
   @apply  mr-0 mb-1 p-1 flex ml-auto text-lg bg-darkMode-darkMidTone text-white rounded-md;
 }
 
+

front-end/src/css/routesSubpage.css

@@ -13,11 +13,27 @@ img {
 }
 
 .title-container {
-  @apply flex items-center ml-auto; 
+  @apply flex justify-items-start w-80;
 }
 
 .saved-icon {
-  @apply w-16 h-16 mb-0 grayscale-0;
+  @apply w-16 h-16 mb-0 grayscale-0 ;
+}
+
+.save{
+  @apply transition-all duration-700 ease-out bg-lightMidTone text-darkTone text-sm px-5 my-3 pt-2 rounded-xl p-2 mx-0;
+}
+
+.halfw{
+  @apply w-72;
+}
+
+.fullw{
+  @apply w-full text-right;
+}
+
+.red{
+  filter: invert(72%) sepia(45%) saturate(5044%) hue-rotate(319deg) brightness(105%) contrast(82%);
 }
 
 .route-info {
@@ -26,9 +42,8 @@ img {
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem;
-  margin: 2%;
-  width: 80%;
-  margin-top: 20px;
+  width: 90%;
+  margin-top: 10px;
   background-color: #fff;
   border: 0.5px solid #4e4a4a;
   border-radius: 8px;

front-end/src/utils/transportMarker.js

@@ -1,5 +1,5 @@
 const MAX_ANIMATION_DURATION = 7000;
-const busIcons = ['A', 'B', 'C', 'E', 'F', 'G', 'W'];
+const busIcons = ['A', 'B', 'C', 'E', 'F', 'G', 'W', 'Cobble Hill'];
 
 export function updateTransportMarkers(transportData, markerRef, map) {
   if (!transportData) {
@@ -25,26 +25,31 @@ export function updateTransportMarkers(transportData, markerRef, map) {
       animateMarker(markerRef.current[transport], currentPosition, newPosition, MAX_ANIMATION_DURATION);
     } else {
       // Create a new marker
-      let transportMarker = createTransportMarker(newPosition, transportData[transport][0], map);
+      let route = transportData[transport][0].route; // get last char of route
+      let routeChar = route.slice(-1); 
+      if (route === 'Ferry Route') { routeChar = 'Ferry_Route'; }
+      else if (route === 'Cobble Hill') { routeChar = 'Cobble_Hill'; }
+      let transportMarker = createTransportMarker(newPosition, transportData[transport][0], map, routeChar);
       markerRef.current[transport] = transportMarker;
     }
   });
 }
 
-function createTransportMarker(position, transportInfo, map) {
-  let icon = busIcons[Math.floor(Math.random() * busIcons.length)]
+function createTransportMarker(position, transportInfo, map, route) {
+  if(route === 'Ferry_Route'){ console.log('ferry'); }
+
   let transportMarker = new window.google.maps.Marker({
     position,
     map,
     title: String(transportInfo.busId),
     icon: {
-      url: 'busIcons/busIcon_route'+busIcons[Math.floor(Math.random() * busIcons.length)]+'.png',
+      url: 'busIcons/busIcon_route'+route+'.png',
       scaledSize: new window.google.maps.Size(30, 30),
     },
   });
 
   let infowindow = new window.google.maps.InfoWindow({
-    content: `<div><strong>No.${transportInfo.busId}</strong><br>Line: ${transportInfo.bus}</div>`,
+    content: `<div><strong>No.${transportInfo.busId}</strong><br>Line: ${transportInfo.route}<br>Passengers: ${transportInfo.paxLoad}</div>`,
   });
 
   transportMarker.addListener('click', () => {

front-end/tailwind.config.js

@@ -4,6 +4,9 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      transitionProperty: {
+        'width': 'width'
+      },
       /*add more fonts here*/
       fontFamily: {
         mainUI: ['Merriweather', 'sans-serif'],