From ff3b60462f8527b5de6a671417fd668a9019c1b2 Mon Sep 17 00:00:00 2001
From: Ramin Farhadi <ra680091@CMN9J7HFG4MN.local>
Date: Thu, 6 Jun 2024 11:15:10 -0400
Subject: [PATCH] campus bar added.

---
 public/data/campuses.json    | 28 ++++++++++++++++------------
 src/App.tsx                  | 20 +++++++++++++++++---
 src/components/Campuses.scss |  7 +++++++
 src/components/Campuses.tsx  | 16 +++++++++-------
 4 files changed, 49 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Campuses.scss

diff --git a/public/data/campuses.json b/public/data/campuses.json
index 5d68211..2581aac 100644
--- a/public/data/campuses.json
+++ b/public/data/campuses.json
@@ -1,24 +1,28 @@
 {
     "campuses": [
         {
-                "name": "University of Central Florida",
-                "Latitude": "28.6024321",
-                "Longitude": "-81.2026402"
+                "name": "Main Campus",
+                "latitude": "28.602368",
+                "longitude": "-81.200142",
+                "zoom": "15"
         },
         {
-                "name": "UCF College of Medicine",
-                "Latitude": "28.3680993",
-                "Longitude": "-81.2811666"
+                "name": "College of Medicine",
+                "latitude": "28.3680993",
+                "longitude": "-81.2811666",
+                "zoom":"17"
         },
         {
-                "name": "UCF Downtown",
-                "Latitude": "28.5462775",
-                "Longitude": "-81.3872291"
+                "name": "Downtown",
+                "latitude": "28.5462775",
+                "longitude": "-81.3872291",
+                "zoom": "17"
         },   
         {
-                "name": "Rosen College of Hospitality Management",
-                "Latitude": "28.42829",
-                "Longitude": "-81.4419018"
+                "name": "Rosen College",
+                "latitude": "28.42829",
+                "longitude": "-81.4419018",
+                "zoom": "17"
     
         }
     ]
diff --git a/src/App.tsx b/src/App.tsx
index 8ab701d..94e9d80 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -77,8 +77,9 @@ function App() {
   // Campuses 
   interface CampusesDataType {
     name: string,
-    Latitude: string,
-    Longitude: string,
+    latitude: string,
+    longitude: string,
+    zoom: string
   }
   const [campusesData, setCampusesData] = useState<CampusesDataType[]>([]);
 
@@ -137,6 +138,19 @@ function App() {
     });
   };
 
+  const campusHandler = (latitude: string, longitude: string, zoom: string) => {
+    const lat = Number(latitude)
+    const lon = Number(longitude)
+    const mapZoom = Number(zoom);
+    mapRef.current!.flyTo({
+      center: [
+        lon!,
+        lat!
+      ],
+      zoom: mapZoom
+    })
+  }
+
   useMemo(() => {
     fetch('/data/geojson/new/buildingPoints.geojson')
       .then((responseText) => responseText.json())
@@ -406,7 +420,7 @@ function App() {
         </Map>
       </div>
       <div>
-      <Campuses campusesData={campusesData} />
+      <Campuses campusesData={campusesData} campusHandler={campusHandler} />
       </div>
       <footer className='footer pt-3'>
           <div className="d-flex justify-content-center">
diff --git a/src/components/Campuses.scss b/src/components/Campuses.scss
new file mode 100644
index 0000000..096af6e
--- /dev/null
+++ b/src/components/Campuses.scss
@@ -0,0 +1,7 @@
+.campus-bar {
+    font-size: 0.8rem;
+}
+
+.campus-bar a:hover {
+    background-color: transparent;
+}
diff --git a/src/components/Campuses.tsx b/src/components/Campuses.tsx
index fa7ba6b..6f0516e 100644
--- a/src/components/Campuses.tsx
+++ b/src/components/Campuses.tsx
@@ -1,21 +1,23 @@
+import './Campuses.scss';
 
 interface Campus {
   name: string;
-  Latitude: string;
-  Longitude: string;
+  latitude: string;
+  longitude: string;
+  zoom: string;
 }
 interface CampusesProps {
   campusesData: Campus[];
+  campusHandler: (latitude: string, longitude: string, zoom: string) => void;
 }
 
-const Campuses = ({ campusesData }: CampusesProps) => {
-
+const Campuses = ({ campusesData, campusHandler }: CampusesProps) => {
   return (
-    <ul>
+    <div className="campus-bar d-flex flex-wrap justify-content-center py-1 bg-secondary">
     { campusesData.map((campusData, index) => (
-        <li key={index}>{campusData.name}</li>
+        <a key={index} onClick={()=> campusHandler(campusData.latitude, campusData.longitude, campusData.zoom)} role="button" className="link-underline-light link-offset-2 link-underline-opacity-100 link-underline-opacity-0-hover ms-3 ms-md-5 text-white">{campusData.name}</a>
       ))}
-  </ul>
+  </div>
   );
 };