From c74509a1574e92e9eb7aa5b62927648581395fde Mon Sep 17 00:00:00 2001
From: Guy Keren <101594251+GuyKe5@users.noreply.github.com>
Date: Sun, 2 Feb 2025 08:57:34 +0200
Subject: [PATCH] feat: represent bearing as geographic terms (#1009)

Co-authored-by: Guyke5 <guykeren2002@gmail.com>
---
 src/locale/he.json                            | 10 +++++++
 .../map-related/MapLayers/BusToolTip.tsx      | 28 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/locale/he.json b/src/locale/he.json
index 81bb1730..f255390f 100644
--- a/src/locale/he.json
+++ b/src/locale/he.json
@@ -154,6 +154,16 @@
   "at_time": "בשעה",
   "vehicle_ref": "לוחית רישוי",
   "drive_direction": "כיוון נסיעה",
+  "directions":{
+    "North": "צפון",
+    "Northeast": "צפון-מזרח",
+    "East": "מזרח",
+    "Southeast": "דרום-מזרח",
+    "South": "דרום",
+    "Southwest": "דרום-מערב",
+    "West": "מערב",
+    "Northwest": "צפון-מערב"
+  },
   "bearing": "מעלות",
   "coords": "נ.צ.",
   "hide_document": "הסתר מידע לגיקים",
diff --git a/src/pages/components/map-related/MapLayers/BusToolTip.tsx b/src/pages/components/map-related/MapLayers/BusToolTip.tsx
index a3a79487..98ce34a8 100644
--- a/src/pages/components/map-related/MapLayers/BusToolTip.tsx
+++ b/src/pages/components/map-related/MapLayers/BusToolTip.tsx
@@ -33,6 +33,26 @@ export function BusToolTip({ position, icon, children }: BusToolTipProps) {
       .finally(() => setIsLoading(false))
   }, [position])
 
+  function getDirectionFromAngle(angle: number): string {
+    // Normalize the angle to the range 0-360
+    angle = ((angle % 360) + 360) % 360
+    // Define the cardinal directions in clockwise order
+    const directions: string[] = [
+      t('directions.North', { defaultValue: 'North' }),
+      t('directions.Northeast', { defaultValue: 'Northeast' }),
+      t('directions.East', { defaultValue: 'East' }),
+      t('directions.Southeast', { defaultValue: 'Southeast' }),
+      t('directions.South', { defaultValue: 'South' }),
+      t('directions.Southwest', { defaultValue: 'Southwest' }),
+      t('directions.West', { defaultValue: 'West' }),
+      t('directions.Northwest', { defaultValue: 'Northwest' }),
+    ]
+    // Divide the angle into 8 equal sections (45 degrees each)
+    const index: number = Math.round(angle / 45) % 8
+
+    return directions[index]
+  }
+
   return (
     <div className={cn('bus-tooltip', { hebrew: i18n.language === 'he' })}>
       {isLoading || !siriRide ? (
@@ -56,6 +76,7 @@ export function BusToolTip({ position, icon, children }: BusToolTipProps) {
           <div className="content">
             <ul>
               <li>
+                {' '}
                 {`${t('from')}: `}
                 <span>{siriRide.gtfsRouteRouteLongName?.split('<->')[0]}</span>
               </li>
@@ -83,7 +104,12 @@ export function BusToolTip({ position, icon, children }: BusToolTipProps) {
               <li>
                 {`${t('drive_direction')}: `}
                 <span>
-                  ({position.point?.bearing} {t('bearing')})
+                  {/* ({position.point?.bearing} {t('bearing')}) */}
+                  {position.point?.bearing} {t('bearing')} (
+                  {position.point?.bearing !== undefined
+                    ? getDirectionFromAngle(position.point.bearing)
+                    : t('unknown', { defaultValue: 'unknown' })}
+                  )
                 </span>
               </li>
               <li>