Free ride enhancements (#636)

* WIP

* Finish

* Remove unnecessary check

* Add tracking

* Rework free ride button in home view

* Add animation to new free ride button

* Add freeRide flag to toJson

---------

Co-authored-by: adeveloper-wq <dajesch@gmail.com>

lib/common/map/layers/sg_layers_free.dart

@@ -18,7 +18,14 @@ class AllTrafficLightsPredictionLayer {
   /// The features to display.
   final List<dynamic> features = List.empty(growable: true);
 
-  AllTrafficLightsPredictionLayer({Map<String, dynamic>? propertiesBySgId, double? userBearing}) {
+  /// If a dark version of the layer should be used.
+  final bool isDark;
+
+  AllTrafficLightsPredictionLayer(
+    this.isDark, {
+    Map<String, dynamic>? propertiesBySgId,
+    double? userBearing,
+  }) {
     final freeRide = getIt<FreeRide>();
     if (freeRide.sgs == null || freeRide.sgs!.isEmpty) return;
     if (freeRide.sgBearings == null || freeRide.sgBearings!.isEmpty) return;
@@ -77,11 +84,11 @@ class AllTrafficLightsPredictionLayer {
           textFont: ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
           textSize: 24,
           textColor: Colors.white.value,
-          textHaloColor: Colors.black.value,
-          textHaloWidth: 1,
+          textHaloColor: const Color.fromARGB(255, 31, 31, 31).value,
+          textHaloWidth: 0.75,
           textAnchor: mapbox.TextAnchor.BOTTOM,
           textOffset: [0, -1],
-          textOpacity: 0.8,
+          textOpacity: 1,
         ),
         mapbox.LayerPosition(at: at),
       );
@@ -96,14 +103,14 @@ class AllTrafficLightsPredictionLayer {
             ["get", "greenNow"],
             false
           ],
-          "free-ride-red",
+          isDark ? "free-ride-red-dark" : "free-ride-red-light",
           [
             "==",
             ["get", "greenNow"],
             true
           ],
-          "free-ride-green",
-          "free-ride-none-light",
+          isDark ? "free-ride-green-dark" : "free-ride-green-light",
+          isDark ? "free-ride-none-dark" : "free-ride-none-light",
         ]),
       );
 
@@ -140,6 +147,14 @@ class AllTrafficLightsPredictionLayer {
             "get",
             "textSize",
           ]));
+
+      await mapController.style.setStyleLayerProperty(
+          layerId,
+          'text-opacity',
+          jsonEncode([
+            "get",
+            "opacity",
+          ]));
     }
   }
 
@@ -157,13 +172,26 @@ class AllTrafficLightsPredictionGeometryLayer {
   /// The ID of the Mapbox source.
   static const sourceId = "all-traffic-lights-prediction-geometry-source";
 
+  /// The ID of the chevron layer.
+  static const layerIdChevrons = "all-traffic-lights-predictions-geometry-layer-chevrons";
+
   /// The ID of the Mapbox layer.
   static const layerId = "all-traffic-lights-predictions-geometry-layer";
 
+  /// The ID of the background layer.
+  static const layerIdBackground = "all-traffic-lights-predictions-geometry-layer-background";
+
   /// The features to display.
   final List<dynamic> features = List.empty(growable: true);
 
-  AllTrafficLightsPredictionGeometryLayer({Map<String, dynamic>? propertiesBySgId, double? userBearing}) {
+  /// If a dark version of the layer should be used.
+  final bool isDark;
+
+  AllTrafficLightsPredictionGeometryLayer(
+    this.isDark, {
+    Map<String, dynamic>? propertiesBySgId,
+    double? userBearing,
+  }) {
     final freeRide = getIt<FreeRide>();
     if (freeRide.sgGeometries == null || freeRide.sgGeometries!.isEmpty) return;
 
@@ -196,12 +224,41 @@ class AllTrafficLightsPredictionGeometryLayer {
       await update(mapController);
     }
 
+    final trafficLightLineChevronLayerExists = await mapController.style.styleLayerExists(layerIdChevrons);
+    if (!trafficLightLineChevronLayerExists) {
+      await mapController.style.addLayerAt(
+          mapbox.SymbolLayer(
+            sourceId: sourceId,
+            id: layerIdChevrons,
+            symbolPlacement: mapbox.SymbolPlacement.LINE,
+            symbolSpacing: 0,
+            iconSize: 1,
+            iconAllowOverlap: true,
+            iconOpacity: 0.6,
+            iconIgnorePlacement: true,
+            iconRotate: 90,
+            iconImage: isDark ? "routechevronlight" : "routechevrondark",
+          ),
+          mapbox.LayerPosition(at: at));
+
+      await mapController.style.setStyleLayerProperty(
+          layerIdChevrons,
+          'icon-opacity',
+          jsonEncode([
+            "get",
+            "opacity",
+          ]));
+    }
+
     final trafficLightLineLayerExists = await mapController.style.styleLayerExists(layerId);
     if (!trafficLightLineLayerExists) {
       await mapController.style.addLayerAt(
         mapbox.LineLayer(
           sourceId: sourceId,
           id: layerId,
+          lineJoin: mapbox.LineJoin.ROUND,
+          lineCap: mapbox.LineCap.ROUND,
+          lineWidth: 20,
         ),
         mapbox.LayerPosition(at: at),
       );
@@ -216,14 +273,14 @@ class AllTrafficLightsPredictionGeometryLayer {
             ["get", "greenNow"],
             false
           ],
-          "#ff0000",
+          "#f30034",
           [
             "==",
             ["get", "greenNow"],
             true
           ],
-          "#00ff00",
-          "#000000",
+          "#17F54D",
+          isDark ? "#000000" : "#FFFFFF",
         ]),
       );
 
@@ -234,13 +291,48 @@ class AllTrafficLightsPredictionGeometryLayer {
             "get",
             "opacity",
           ]));
+    }
+
+    final trafficLightLineBackgroundLayerExists = await mapController.style.styleLayerExists(layerIdBackground);
+    if (!trafficLightLineBackgroundLayerExists) {
+      await mapController.style.addLayerAt(
+        mapbox.LineLayer(
+          sourceId: sourceId,
+          id: layerIdBackground,
+          lineJoin: mapbox.LineJoin.ROUND,
+          lineCap: mapbox.LineCap.ROUND,
+          lineWidth: 26,
+        ),
+        mapbox.LayerPosition(at: at),
+      );
 
       await mapController.style.setStyleLayerProperty(
-          layerId,
-          'line-width',
+        layerIdBackground,
+        "line-color",
+        jsonEncode([
+          "case",
+          [
+            "==",
+            ["get", "greenNow"],
+            false
+          ],
+          isDark ? "#FF7B7B" : "#B50000",
+          [
+            "==",
+            ["get", "greenNow"],
+            true
+          ],
+          isDark ? "#8EFFB4" : "#00B01C",
+          isDark ? "#000000" : "#FFFFFF",
+        ]),
+      );
+
+      await mapController.style.setStyleLayerProperty(
+          layerIdBackground,
+          'line-opacity',
           jsonEncode([
             "get",
-            "lineWidth",
+            "opacity",
           ]));
     }
   }

lib/common/map/symbols.dart

@@ -65,8 +65,10 @@ class SymbolLoader {
     await add("greenwavedark", "assets/images/green-wave-dark.png", 200, 200);
     await add("greenwavelight", "assets/images/green-wave-light.png", 200, 200);
 
-    await add("free-ride-green", "assets/images/trafficlights/free-ride-green.png", 200, 200);
-    await add("free-ride-red", "assets/images/trafficlights/free-ride-red.png", 200, 200);
+    await add("free-ride-green-dark", "assets/images/trafficlights/free-ride-green-dark.png", 200, 200);
+    await add("free-ride-green-light", "assets/images/trafficlights/free-ride-green-light.png", 200, 200);
+    await add("free-ride-red-dark", "assets/images/trafficlights/free-ride-red-dark.png", 200, 200);
+    await add("free-ride-red-light", "assets/images/trafficlights/free-ride-red-light.png", 200, 200);
     await add("free-ride-none-light", "assets/images/trafficlights/free-ride-none-light.png", 200, 200);
     await add("free-ride-none-dark", "assets/images/trafficlights/free-ride-none-dark.png", 200, 200);
   }

lib/feedback/services/feedback.dart

@@ -7,9 +7,9 @@ import 'package:priobike/feedback/models/question.dart';
 import 'package:priobike/http.dart';
 import 'package:priobike/logging/logger.dart';
 import 'package:priobike/main.dart';
-import 'package:priobike/ride/services/ride.dart';
 import 'package:priobike/settings/models/backend.dart';
 import 'package:priobike/settings/services/settings.dart';
+import 'package:priobike/tracking/services/tracking.dart';
 import 'package:priobike/user.dart';
 
 class Feedback with ChangeNotifier {
@@ -44,7 +44,11 @@ class Feedback with ChangeNotifier {
     isSendingFeedback = true;
     notifyListeners();
 
-    final sessionId = getIt<Ride>().sessionId;
+    final sessionId = getIt<Tracking>().track?.sessionId;
+    if (sessionId == null) {
+      log.e("Error sending feedback: No sessionId available.");
+      return false;
+    }
     final userId = await User.getOrCreateId();
 
     // Send all of the answered questions to the backend.