feat: represent bearing as geographic terms (#1009)

Co-authored-by: Guyke5 <[email protected]>

Author: GuyKe5

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": "הסתר מידע לגיקים",

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>