From f6adaa6777bfc7e1f384bfd90719392e7dba0c49 Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Mon, 22 Apr 2024 14:58:20 +0100
Subject: [PATCH 1/7] fix: reenable board here and set destination stopmarker
 buttons

---
 src/components/Map/StopPopup.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Map/StopPopup.tsx b/src/components/Map/StopPopup.tsx
index 71ff278..434b0c0 100644
--- a/src/components/Map/StopPopup.tsx
+++ b/src/components/Map/StopPopup.tsx
@@ -144,19 +144,19 @@ function StopPopup({
       )}
 
       <div className="flex flex-col gap-2 mt-4">
-        {/* <Button
+        <Button
           onClick={() => handleSelectedStop(stopId, false)}
           disabled={isPastThisStop}
         >
           Board here
-        </Button> */}
+        </Button>
 
         <Button onClick={() => handleSelectedStop(stopId)}>View trips</Button>
-        {/* {isValidDestination && (
+        {isValidDestination && (
           <Button onClick={() => handleDestinationStop(stopId)}>
             set Destination
           </Button>
-        )} */}
+        )}
         <Button
           onClick={() => handleSaveStop(stopId, stopName)}
           className="flex flex-row justify-between gap-1"

From 405a5cc6380f6450f1b5a3ce902ad8a8afa21139 Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Mon, 22 Apr 2024 20:21:39 +0100
Subject: [PATCH 2/7] add experimental https to dev server

---
 .gitignore   | 2 ++
 package.json | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index b50558c..84c5c82 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,5 @@ prisma/*.tgz
 prisma/backup/*
 last_modified_log.txt
 prisma/*.db-journal
+
+certificates
\ No newline at end of file
diff --git a/package.json b/package.json
index fe0f1ee..b018624 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.8.10",
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

From b68759a6bd7a599ae3beac59f1dff3f3681e8f38 Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:15:33 +0100
Subject: [PATCH 3/7] add LeafletControl wrapper

---
 src/components/Map/LeafletControl.tsx | 37 +++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/Map/LeafletControl.tsx

diff --git a/src/components/Map/LeafletControl.tsx b/src/components/Map/LeafletControl.tsx
new file mode 100644
index 0000000..47add1c
--- /dev/null
+++ b/src/components/Map/LeafletControl.tsx
@@ -0,0 +1,37 @@
+import L from "leaflet";
+import React, { ReactNode, useEffect, useRef } from "react";
+
+const POSITION_CLASSES = {
+  bottomleft: "leaflet-bottom leaflet-left",
+  bottomright: "leaflet-bottom leaflet-right",
+  topleft: "leaflet-top leaflet-left",
+  topright: "leaflet-top leaflet-right",
+};
+
+type ControlPosition = keyof typeof POSITION_CLASSES;
+interface LeafLetControlProps {
+  position?: ControlPosition;
+  children: ReactNode;
+}
+
+const LeafletControl: React.FC<LeafLetControlProps> = ({
+  position,
+  children,
+}) => {
+  const divRef = useRef(null);
+
+  useEffect(() => {
+    if (divRef.current) {
+      L.DomEvent.disableClickPropagation(divRef.current);
+      L.DomEvent.disableScrollPropagation(divRef.current);
+    }
+  });
+
+  return (
+    <div ref={divRef} className={position && POSITION_CLASSES[position]}>
+      <div className={"leaflet-control"}>{children}</div>
+    </div>
+  );
+};
+
+export default LeafletControl;

From 1aaf9acd8feebc4f278fcd41405d578685b647ea Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:16:07 +0100
Subject: [PATCH 4/7] add UserLocation dot

---
 src/components/Map/MapContentLayer.tsx | 22 +++----
 src/components/Map/UserLocation.tsx    | 85 ++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Map/UserLocation.tsx

diff --git a/src/components/Map/MapContentLayer.tsx b/src/components/Map/MapContentLayer.tsx
index 8348579..1a9cb95 100644
--- a/src/components/Map/MapContentLayer.tsx
+++ b/src/components/Map/MapContentLayer.tsx
@@ -6,11 +6,8 @@ import {
   useMap,
   LayersControl,
   LayerGroup,
-  Marker,
-  Popup,
   Pane,
   useMapEvents,
-  Tooltip,
 } from "react-leaflet";
 import { LatLngTuple } from "leaflet";
 import {
@@ -22,33 +19,24 @@ import {
   useRef,
   useState,
 } from "react";
-import { useLocalStorage } from "usehooks-ts";
 
 import type { Route, Stop, StopTime } from "@prisma/client";
-import {
-  formatReadableDelay,
-  getDelayedTime,
-  parseDatetimeLocale,
-  timeSinceLastVehicleUpdate,
-} from "@/lib/timeHelpers";
+import { parseDatetimeLocale } from "@/lib/timeHelpers";
 import Bus from "./Bus";
 import usePrevious from "@/hooks/usePrevious";
 import isEqual from "react-fast-compare";
 import { DateTime } from "luxon";
 import useTripUpdates from "@/hooks/useTripUpdates";
 import useStopId from "@/hooks/useStopId";
-import { SavedStop } from "../SavedStops";
 import { Position } from "@turf/helpers";
 import MarkerClusterGroup from "./MarkerClusterGroup";
 import StopMarker from "./StopMarker";
-import StopPopup from "./StopPopup";
 import useVehicleUpdates from "@/hooks/useVehicleUpdates";
-import { Button } from "../ui/button";
 import { TripHandler } from "@/pages";
-import LiveText from "../LiveText";
 import L from "leaflet";
 import GPSGhost from "./GPSGhost";
 import { MAP_DEFAULT_ZOOM } from ".";
+import UserLocation from "./UserLocation";
 
 export type ValidStop = Stop & {
   stopLat: NonNullable<Stop["stopLat"]>;
@@ -137,6 +125,7 @@ function MapContentLayer({
 
   const { selectedStop } = useStopId(selectedStopId);
 
+  // Set map center location on new route selection
   useEffect(() => {
     if (!stopIds.length) return;
 
@@ -155,6 +144,7 @@ function MapContentLayer({
     }
   }, [center, map, prevCenter, previousStopIds, stopIds]);
 
+  // Set map dimensions onload/onresize
   useEffect(() => {
     if (map != null) {
       const mapContainer = map.getContainer();
@@ -299,6 +289,7 @@ function MapContentLayer({
               ))}
         </FeatureGroup>
       </LayersControl.Overlay>
+
       {/* Route stop markers */}
       <LayersControl.Overlay name="Stops" checked>
         <FeatureGroup ref={markerGroupRef}>
@@ -320,6 +311,9 @@ function MapContentLayer({
         </FeatureGroup>
       </LayersControl.Overlay>
 
+      {/* User Location dot */}
+      <UserLocation />
+
       {/* Trip line shape */}
       {!!shape && (
         <LayersControl.Overlay name="Route Path" checked>
diff --git a/src/components/Map/UserLocation.tsx b/src/components/Map/UserLocation.tsx
new file mode 100644
index 0000000..aeed352
--- /dev/null
+++ b/src/components/Map/UserLocation.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useRef, useState } from "react";
+import { useMap, CircleMarker, Circle, LayerGroup } from "react-leaflet";
+import { Locate } from "lucide-react";
+import LeafletControl from "./LeafletControl";
+import { Button } from "../ui/button";
+import { LocationEvent } from "leaflet";
+
+function UserLocation() {
+  const map = useMap();
+  const [userLocation, setUserLocation] = useState<L.LatLng | null>(null);
+  const [radius, setRadius] = useState(0);
+  const prevLocation = useRef<L.LatLng | null>();
+
+  // Watch current user location
+  useEffect(() => {
+    const handleSetLocation = (e: LocationEvent) => {
+      if (
+        !prevLocation.current ||
+        e.latlng.lat !== prevLocation.current.lat ||
+        e.latlng.lng !== prevLocation.current.lng
+      ) {
+        prevLocation.current = userLocation;
+        setUserLocation(e.latlng);
+        setRadius(e.accuracy);
+      }
+    };
+
+    map
+      .locate({
+        watch: true,
+        enableHighAccuracy: true,
+        maximumAge: 10_000,
+        timeout: 15_000,
+      })
+      .on("locationerror", (e) => console.error(e))
+      .on("locationfound", (e) => handleSetLocation(e));
+
+    return () => {
+      map.stopLocate();
+      map.off("locationfound", handleSetLocation);
+      map.off("locationerror");
+    };
+  }, [map, userLocation]);
+
+  return (
+    <LeafletControl position={"bottomright"}>
+      <Button
+        onClick={() => {
+          if (userLocation) {
+            map.setView(userLocation);
+          }
+        }}
+        size={"icon"}
+        className="mb-4 mr-2 lg:mb-10 lg:mr-10"
+      >
+        <Locate />
+      </Button>
+      <LayerGroup>
+        {!!userLocation && (
+          <>
+            {radius > 100 && (
+              <Circle
+                center={userLocation}
+                radius={radius}
+                stroke={false}
+                fillOpacity={0.2}
+              />
+            )}
+            <CircleMarker
+              center={userLocation}
+              radius={6}
+              color="white"
+              stroke
+              weight={2}
+              fillColor="#1869E5"
+              fillOpacity={1}
+            />
+          </>
+        )}
+      </LayerGroup>
+    </LeafletControl>
+  );
+}
+
+export default UserLocation;

From 71895168dfca9b41b560af4f5687816838830d86 Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:28:35 +0100
Subject: [PATCH 5/7] fix: Location button position when footer visible

---
 src/components/Map/MapContentLayer.tsx | 4 +++-
 src/components/Map/UserLocation.tsx    | 7 +++++--
 src/pages/index.tsx                    | 5 ++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Map/MapContentLayer.tsx b/src/components/Map/MapContentLayer.tsx
index 1a9cb95..2cf464d 100644
--- a/src/components/Map/MapContentLayer.tsx
+++ b/src/components/Map/MapContentLayer.tsx
@@ -55,6 +55,7 @@ type Props = {
   center: LatLngTuple;
   routesById: Map<string, Route>;
   shape: Position[] | undefined;
+  showFooter: boolean;
   stopsById: Map<string, Stop>;
   stopTimes: StopTime[] | undefined;
   stopTimesByStopId: Map<StopTime["tripId"], StopTime>;
@@ -77,6 +78,7 @@ function MapContentLayer({
   stopTimesByStopId,
   setShowSavedStops,
   shape,
+  showFooter,
   stops,
   stopsById,
   selectedStopId,
@@ -312,7 +314,7 @@ function MapContentLayer({
       </LayersControl.Overlay>
 
       {/* User Location dot */}
-      <UserLocation />
+      <UserLocation className={showFooter ? "!mb-24" : ""} />
 
       {/* Trip line shape */}
       {!!shape && (
diff --git a/src/components/Map/UserLocation.tsx b/src/components/Map/UserLocation.tsx
index aeed352..b6386c1 100644
--- a/src/components/Map/UserLocation.tsx
+++ b/src/components/Map/UserLocation.tsx
@@ -4,8 +4,11 @@ import { Locate } from "lucide-react";
 import LeafletControl from "./LeafletControl";
 import { Button } from "../ui/button";
 import { LocationEvent } from "leaflet";
+import { cn } from "@/lib/utils";
 
-function UserLocation() {
+type Props = { className?: string };
+
+function UserLocation({ className = "" }: Props) {
   const map = useMap();
   const [userLocation, setUserLocation] = useState<L.LatLng | null>(null);
   const [radius, setRadius] = useState(0);
@@ -51,7 +54,7 @@ function UserLocation() {
           }
         }}
         size={"icon"}
-        className="mb-4 mr-2 lg:mb-10 lg:mr-10"
+        className={cn(className, "mb-4 mr-2 lg:mb-10 lg:mr-10")}
       >
         <Locate />
       </Button>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 461145d..990d215 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -278,6 +278,8 @@ export default function Home() {
     setDestId(null);
   };
 
+  const showFooter = useMemo(() => !!routeId, [routeId]);
+
   return (
     <main className="flex min-h-[100svh] flex-col items-center justify-between text-slate-950 dark:text-white">
       <div className="relative w-full">
@@ -366,6 +368,7 @@ export default function Home() {
             selectedDateTime={selectedDateTime}
             selectedStopId={stopId}
             selectedDestinationStopId={destId}
+            showFooter={showFooter}
             stopTimes={stopTimes}
             stopTimesByStopId={stopTimesByStopId}
             setShowSavedStops={setShowSavedStops}
@@ -431,7 +434,7 @@ export default function Home() {
         />
       )}
 
-      {!!routeId && (
+      {!!showFooter && (
         <Footer
           destination={destinationStop}
           route={selectedRoute}

From 6c7f1c694f9d4e524900295b084db0c0a64a1612 Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:30:34 +0100
Subject: [PATCH 6/7] style: change setView to flyTo UserLocation

---
 src/components/Map/UserLocation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Map/UserLocation.tsx b/src/components/Map/UserLocation.tsx
index b6386c1..7c76c99 100644
--- a/src/components/Map/UserLocation.tsx
+++ b/src/components/Map/UserLocation.tsx
@@ -50,7 +50,7 @@ function UserLocation({ className = "" }: Props) {
       <Button
         onClick={() => {
           if (userLocation) {
-            map.setView(userLocation);
+            map.flyTo(userLocation);
           }
         }}
         size={"icon"}

From 89b593b49800447a0f58a4a0c786c8c04b1a4924 Mon Sep 17 00:00:00 2001
From: David Abell <79927957+david-abell@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:31:23 +0100
Subject: [PATCH 7/7] bump version to 0.9.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b018624..282ddac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "irish-buses",
-  "version": "0.8.10",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "dev": "next dev --experimental-https",