Update marker design for positions without bearing

6 files changed, 53 insertions, 30 deletions

diff --git a/src/Enmarcha.Backend/Services/Processors/CtagShuttleRealTimeProcessor.cs b/src/Enmarcha.Backend/Services/Processors/CtagShuttleRealTimeProcessor.cs
index 8f3e6db..ce2651f 100644
--- a/src/Enmarcha.Backend/Services/Processors/CtagShuttleRealTimeProcessor.cs
+++ b/src/Enmarcha.Backend/Services/Processors/CtagShuttleRealTimeProcessor.cs
@@ -209,7 +209,7 @@ public class CtagShuttleRealTimeProcessor : AbstractRealTimeProcessor
                     var dy = nextPoint.Y - currentPoint.Y;
                     var bearing = Math.Atan2(dx, dy) * 180.0 / Math.PI;
                     if (bearing < 0) bearing += 360.0;
-                    shuttleWgs84.OrientationDegrees = (int)Math.Round(bearing);
+                    shuttleWgs84.Bearing = (int)Math.Round(bearing);
                 }
 
                 activeArrival.CurrentPosition = shuttleWgs84;
@@ -220,7 +220,7 @@ public class CtagShuttleRealTimeProcessor : AbstractRealTimeProcessor
 
                 _logger.LogInformation(
                     "Shuttle position set: Lat={Lat}, Lon={Lon}, Bearing={Bearing}°",
-                    shuttleWgs84.Latitude, shuttleWgs84.Longitude, shuttleWgs84.OrientationDegrees);
+                    shuttleWgs84.Latitude, shuttleWgs84.Longitude, shuttleWgs84.Bearing);
             }
             else
             {
diff --git a/src/Enmarcha.Backend/Services/Processors/RenfeRealTimeProcessor.cs b/src/Enmarcha.Backend/Services/Processors/RenfeRealTimeProcessor.cs
index 750cb2d..2f23237 100644
--- a/src/Enmarcha.Backend/Services/Processors/RenfeRealTimeProcessor.cs
+++ b/src/Enmarcha.Backend/Services/Processors/RenfeRealTimeProcessor.cs
@@ -64,7 +64,7 @@ public class RenfeRealTimeProcessor : AbstractRealTimeProcessor
                     {
                         Latitude = position.Latitude,
                         Longitude = position.Longitude,
-                        OrientationDegrees = 0 // TODO: Set the proper degrees
+                        Bearing = 0 // TODO: Set the proper degrees
                     };
                 }
             }
diff --git a/src/Enmarcha.Backend/Services/ShapeTraversalService.cs b/src/Enmarcha.Backend/Services/ShapeTraversalService.cs
index 10de3e0..b89af1f 100644
--- a/src/Enmarcha.Backend/Services/ShapeTraversalService.cs
+++ b/src/Enmarcha.Backend/Services/ShapeTraversalService.cs
@@ -115,7 +115,7 @@ public class ShapeTraversalService
 
         // Transform from EPSG:25829 (meters) to EPSG:4326 (lat/lng)
         var pos = TransformToLatLng(busPoint);
-        pos.OrientationDegrees = (int)Math.Round(bearing);
+        pos.Bearing = (int)Math.Round(bearing);
         pos.ShapeIndex = forwardIndex;
         return (pos, closestPointIndex);
     }
diff --git a/src/Enmarcha.Backend/Types/ConsolidatedCirculation.cs b/src/Enmarcha.Backend/Types/ConsolidatedCirculation.cs
index 3f5b61a..75db225 100644
--- a/src/Enmarcha.Backend/Types/ConsolidatedCirculation.cs
+++ b/src/Enmarcha.Backend/Types/ConsolidatedCirculation.cs
@@ -33,7 +33,7 @@ public class Position
 {
     public required double Latitude { get; set; }
     public required double Longitude { get; set; }
-    public int OrientationDegrees { get; set; }
+    public int? Bearing { get; set; }
     public int ShapeIndex { get; set; }
 }
 
diff --git a/src/frontend/app/api/schema.ts b/src/frontend/app/api/schema.ts
index 4d34a44..fe90642 100644
--- a/src/frontend/app/api/schema.ts
+++ b/src/frontend/app/api/schema.ts
@@ -37,7 +37,7 @@ export const ShiftBadgeSchema = z.object({
 export const PositionSchema = z.object({
   latitude: z.number(),
   longitude: z.number(),
-  orientationDegrees: z.number().optional().nullable(),
+  bearing: z.number().optional().nullable(),
   shapeIndex: z.number().optional().nullable(),
 });
 
@@ -174,12 +174,7 @@ export const ConsolidatedCirculationSchema = z.object({
     .optional()
     .nullable(),
   currentPosition: z
-    .object({
-      latitude: z.number(),
-      longitude: z.number(),
-      orientationDegrees: z.number(),
-      shapeIndex: z.number().optional().nullable(),
-    })
+    .object(PositionSchema)
     .optional()
     .nullable(),
   isPreviousTrip: z.boolean().optional().nullable(),
diff --git a/src/frontend/app/components/stop/StopMapModal.tsx b/src/frontend/app/components/stop/StopMapModal.tsx
index 8d3c6f8..0aec0dd 100644
--- a/src/frontend/app/components/stop/StopMapModal.tsx
+++ b/src/frontend/app/components/stop/StopMapModal.tsx
@@ -15,7 +15,7 @@ import "./StopMapModal.css";
 export interface Position {
   latitude: number;
   longitude: number;
-  orientationDegrees?: number | null;
+  bearing?: number | null;
   shapeIndex?: number | null | undefined;
 }
 
@@ -475,26 +475,54 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
                         flexDirection: "column",
                         alignItems: "center",
                         gap: 6,
-                        transform: `rotate(${selectedBus.currentPosition.orientationDegrees}deg)`,
+                        transform: `rotate(${selectedBus.currentPosition.bearing ?? 0}deg)`,
                         transformOrigin: "center center",
                       }}
                     >
-                      <svg
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        style={{
-                          filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
-                        }}
-                      >
-                        <path
-                          d="M12 2 L22 22 L12 17 L2 22 Z"
-                          fill={selectedBus.colour}
-                          stroke="#000"
-                          strokeWidth="2"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
+                      {selectedBus.currentPosition.bearing ? (
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          style={{
+                            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
+                          }}
+                        >
+                          <path
+                            d="M12 2 L22 22 L12 17 L2 22 Z"
+                            fill={selectedBus.colour}
+                            stroke="#000"
+                            strokeWidth="2"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      ) : (
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          style={{
+                            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
+                          }}
+                        >
+                          <rect
+                            x="2"
+                            y="2"
+                            width="20"
+                            height="20"
+                            rx="4"
+                            fill={selectedBus.colour}
+                            stroke="#000"
+                            strokeWidth="2"
+                          />
+                          <path
+                            d="M12 6v3M12 15v3M6 12h3M15 12h3"
+                            stroke="#fff"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                          />
+                        </svg>
+                      )}
                     </div>
                   </Marker>
                 )}