@geops/rvf-mobility-web-component 0.1.24-beta.0 → 0.1.24

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.24-beta.0",
+  "version": "0.1.24",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -55,7 +55,10 @@ import StationsLayer from "../StationsLayer";
 // @ts-expect-error bad type definition
 import tailwind from "../style.css";
 import { RVF_EXTENT_3857, RVF_LAYERS_TITLES } from "../utils/constants";
+import getBgColor from "../utils/getBgColor";
 import getFeatureInformationTitle from "../utils/getFeatureInformationTitle";
+import { getRadius } from "../utils/getRadius";
+import getTextColor from "../utils/getTextColor";
 import { I18nContext } from "../utils/hooks/useI18n";
 import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
 import { MapContext } from "../utils/hooks/useMapContext";
@@ -63,6 +66,7 @@ import { RvfContext } from "../utils/hooks/useRvfContext";
 import useUpdatePermalink from "../utils/hooks/useUpdatePermalink";
 import i18n from "../utils/i18n";
 import MobilityEvent from "../utils/MobilityEvent";
+import realtimeRVFStyle from "../utils/realtimeRVFStyle";
 // @ts-expect-error bad type definition
 import style from "./index.css";
 
@@ -94,6 +98,12 @@ const realtimeLayerProps = {
   bboxParameters: {
     line_tags: "RVF",
   },
+  style: realtimeRVFStyle,
+  styleOptions: {
+    getBgColor: getBgColor,
+    getRadius: getRadius,
+    getTextColor: getTextColor,
+  },
 };
 
 function RvfMobilityMap({
@@ -490,11 +500,11 @@ function RvfMobilityMap({
                 {hasNotification && <NotificationLayer />}
                 <RvfTarifZonenLayer title={RVF_LAYERS_TITLES.tarifzonen} />
                 <RvfSellingPointsLayer
-                  isQueryable
+                  isQueryable={false}
                   title={RVF_LAYERS_TITLES.verkaufsstellen}
                 />
                 <RvfLineNetworkPlanLayer
-                  isQueryable
+                  isQueryable={false}
                   minZoom={10}
                   title={RVF_LAYERS_TITLES.liniennetz}
                 />

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -35,7 +35,6 @@ function SingleClickListener() {
       feature.setStyle(null);
       layer.getSource().addFeature(feature);
       if (vectorTileFeature) {
-        console.log(vectorTileFeature);
         baseLayer?.mapLibreMap.setFeatureState(vectorTileFeature, {
           hover: true,
         });

package/src/RvfSharedMobilityLayerGroup2/RvfSharedMobilityLayerGroup2.tsx

@@ -243,7 +243,6 @@ function RvfSharedMobilityLayerGroup2(props: GroupOptions) {
         extent,
         abortController,
       );
-      // console.log("scooterData", scooterData);
       setScooterData(scooterData);
     };
 
@@ -483,6 +482,7 @@ function RvfSharedMobilityLayerGroup2(props: GroupOptions) {
       sources: {
         [BIKE_FRELO_SOURCE_ID]: {
           data: { features: [], type: "FeatureCollection" },
+          // data: "https://api.mobidata-bw.de/geoserver/MobiData-BW/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=MobiData-BW%3Asharing_stations_bicycle&maxFeatures=20000&outputFormat=application/json",
           promoteId: "id",
           type: "geojson",
         },

package/src/utils/constants.ts

@@ -16,7 +16,6 @@ export const RVF_EXTENT_3857 = transformExtent(
   "EPSG:4326",
   "EPSG:3857",
 );
-console.log(fromLonLat([7.844388, 47.991351]));
 
 // @ts-expect-error - testsdsd sd
 window.fromLonLat = fromLonLat;
@@ -155,3 +154,11 @@ export const PROVIDER_LOGOS_BY_FEED_ID = {
   yoio_freiburg: yoioLogo,
   zeus_freiburg: zeusLogo,
 };
+
+export const LINE_COLOR_BY_NAME = {
+  "1": "#E8001B",
+  "2": "#13A538",
+  "3": "#F59E00",
+  "4": "#EA5297",
+  "5": "#008BC5",
+};

package/src/utils/getBgColor.ts

@@ -1,3 +1,18 @@
 import { realtimeConfig } from "mobility-toolbox-js/ol";
 
-export default realtimeConfig.getBgColor;
+import { LINE_COLOR_BY_NAME } from "./constants";
+
+const getBgColor = (type, line) => {
+  if (type === "bus") {
+    return "#646363";
+  }
+  if (type === "tram") {
+    const lineColor = LINE_COLOR_BY_NAME[line?.name];
+    if (lineColor) {
+      return lineColor;
+    }
+  }
+  return realtimeConfig.getBgColor(type);
+};
+
+export default getBgColor;

package/src/utils/getDelayColor.test.ts

@@ -2,18 +2,19 @@ import getDelayColor from "./getDelayColor";
 
 describe("getDelayColor", () => {
   it("returns green", () => {
-    expect(getDelayColor(0)).toBe("#16a34a");
-    expect(getDelayColor(2.49 * 60 * 1000)).toBe("#16a34a");
-  });
-  it("returns yellow", () => {
-    expect(getDelayColor(3 * 60 * 1000)).toBe("#ca8a04");
-    expect(getDelayColor(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
+    expect(getDelayColor(0)).toBe("transparent");
   });
+  // it("returns yellow", () => {
+  //   expect(getDelayColor(3 * 60 * 1000)).toBe("#ca8a04");
+  //   expect(getDelayColor(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
+  // });
   it("returns orange", () => {
+    expect(getDelayColor(0.5 * 60 * 1000)).toBe("#ea580c");
+    expect(getDelayColor(2.49 * 60 * 1000)).toBe("#ea580c");
     expect(getDelayColor(5 * 60 * 1000)).toBe("#ea580c");
-    expect(getDelayColor(9.49 * 60 * 1000 - 1)).toBe("#ea580c");
   });
   it("returns red", () => {
+    expect(getDelayColor(9.49 * 60 * 1000 - 1)).toBe("#dc2626");
     expect(getDelayColor(10 * 60 * 1000)).toBe("#dc2626");
     expect(getDelayColor(180 * 60 * 1000)).toBe("#dc2626");
   });

package/src/utils/getDelayColor.ts

@@ -2,22 +2,22 @@
  * Returns a color class to display the delay.
  * @param {Number} time Delay time in milliseconds.
  */
-const getDelayColor = (timeInMs: number) => {
+const getDelayColor = (timeInMs: number, isText = false) => {
   // we use rounded value to fit the getDelayString method.
   const minutes = Math.round(timeInMs / 1000 / 60);
   // if (minutes >= 60) {
   // }
-  if (minutes >= 10) {
+  if (minutes > 5) {
     return "#dc2626"; // "text-red-600";
   }
-  if (minutes >= 5) {
+  if (minutes >= 1) {
     return "#ea580c"; // "text-orange-600";
     // return "#d97706"; // "text-amber-600";
   }
-  if (minutes >= 3) {
-    return "#ca8a04"; // "text-yellow-600";
-  }
-  return "#16a34a"; // "text-green-600";
+  // if (minutes >= 3) {
+  //   return "#ca8a04"; // "text-yellow-600";
+  // }
+  return isText ? "#16a34a" : "transparent"; // "text-green-600";
 };
 
 export default getDelayColor;

package/src/utils/getDelayColorForVehicle.test.ts

@@ -6,22 +6,29 @@ describe("getDelayColorForVehicle", () => {
     expect(getDelayColorForVehicle(0, true, false)).toBe("#a0a0a0");
   });
   it("returns null delay (no realtime train) color", () => {
-    expect(getDelayColorForVehicle(null)).toBe("#a0a0a0");
+    expect(getDelayColorForVehicle(null)).toBe("transparent");
   });
 
-  it("returns green", () => {
-    expect(getDelayColorForVehicle(0)).toBe("#16a34a");
-    expect(getDelayColorForVehicle(2.49 * 60 * 1000)).toBe("#16a34a");
-  });
-  it("returns yellow", () => {
-    expect(getDelayColorForVehicle(3 * 60 * 1000)).toBe("#ca8a04");
-    expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
+  it("returns transparent", () => {
+    expect(getDelayColorForVehicle(0)).toBe("transparent");
+    expect(getDelayColorForVehicle(0.4 * 60 * 1000)).toBe("transparent");
   });
+  // it("returns green", () => {
+  //   expect(getDelayColorForVehicle(0)).toBe("#16a34a");
+  //   expect(getDelayColorForVehicle(2.49 * 60 * 1000)).toBe("#16a34a");
+  // });
+  // it("returns yellow", () => {
+  //   expect(getDelayColorForVehicle(3 * 60 * 1000)).toBe("#ca8a04");
+  //   expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ca8a04");
+  // });
   it("returns orange", () => {
+    expect(getDelayColorForVehicle(1 * 60 * 1000)).toBe("#ea580c");
+    expect(getDelayColorForVehicle(3 * 60 * 1000)).toBe("#ea580c");
+    expect(getDelayColorForVehicle(4.49 * 60 * 1000 - 1)).toBe("#ea580c");
     expect(getDelayColorForVehicle(5 * 60 * 1000)).toBe("#ea580c");
-    expect(getDelayColorForVehicle(9.49 * 60 * 1000 - 1)).toBe("#ea580c");
   });
   it("returns red", () => {
+    expect(getDelayColorForVehicle(9.49 * 60 * 1000 - 1)).toBe("#dc2626");
     expect(getDelayColorForVehicle(10 * 60 * 1000)).toBe("#dc2626");
     expect(getDelayColorForVehicle(180 * 60 * 1000)).toBe("#dc2626");
   });

package/src/utils/getDelayColorForVehicle.ts

@@ -17,9 +17,9 @@ const getDelayColorForVehicle = (
       : "#a0a0a0"; // gray
   }
   if (delayInMs === null) {
-    return "#a0a0a0";
+    return "transparent";
   }
-  return getDelayColor(delayInMs);
+  return getDelayColor(delayInMs, isDelayText);
 };
 
 export default getDelayColorForVehicle;

package/src/utils/getMainColorForVehicle.ts

@@ -10,12 +10,13 @@ import getBgColor from "./getBgColor";
 
 // This function returns the main color of a line using a line, trajectory, stopsequence or departure object.
 const getMainColorForVehicle = (object: unknown = null): string => {
-  let color =
-    (object as RealtimeTrajectory)?.properties?.line?.color ||
+  const line =
+    (object as RealtimeTrajectory)?.properties?.line ||
     // @ts-expect-error bad type definition
-    (object as RealtimeStopSequence)?.line?.color ||
-    (object as RealtimeLine)?.color;
+    (object as RealtimeStopSequence)?.line ||
+    (object as RealtimeLine);
 
+  let color = line?.color;
   if (!color) {
     let type: RealtimeMot =
       (object as RealtimeTrajectory)?.properties?.type ||
@@ -34,7 +35,7 @@ const getMainColorForVehicle = (object: unknown = null): string => {
         type = "rail";
       }
     }
-    color = getBgColor(type) || getBgColor("rail");
+    color = getBgColor(type, line);
   }
 
   if (color && color[0] !== "#") {

package/src/utils/getRadius.ts

@@ -0,0 +1,39 @@
+import { realtimeConfig } from "mobility-toolbox-js/ol";
+
+// mobility-portal config
+// const trackerRadiusMapping = {
+//   0: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 4, 4, 6, 7, 7, 7],
+//   1: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 4, 4, 6, 7, 7, 7],
+//   2: [0, 0, 0, 0, 0, 2, 2, 4, 4, 6, 6, 7, 7, 7, 12, 12, 15],
+//   3: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 4, 6, 6, 6],
+//   4: [0, 0, 0, 0, 0, 2, 2, 4, 4, 6, 6, 7, 7, 7, 12, 12, 15],
+//   5: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 4, 4, 4, 7, 7, 7],
+//   6: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 4, 4, 4, 7, 7, 7],
+//   7: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 4, 4, 4, 7, 7, 7],
+//   8: [0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 4, 6, 6, 6],
+//   9: [0, 0, 0, 0, 0, 2, 2, 4, 4, 6, 6, 7, 7, 7, 12, 12, 15],
+// };
+
+const radiusMapping: number[][] = [
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 2, 2, 3, 7, 7, 7, 7, 7, 7, 12, 12, 15], // [0, 0, 0, 0, 0, 2, 2, 3, 7, 7, 7, 12, 15, 15, 15, 15, 15],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 2, 2, 3, 7, 7, 7, 7, 7, 7, 12, 12, 15],
+];
+
+export const getRadius = (type = 0, zoom = 0, cancelled = false) => {
+  try {
+    // @ts-expect-error - bad type definition
+    const typeIdx = realtimeConfig.getTypeIndex(type);
+    return radiusMapping[typeIdx][zoom] * (cancelled ? 2 : 1);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    return 1;
+  }
+};

package/src/utils/getTextColor.ts

@@ -0,0 +1,10 @@
+import { realtimeConfig } from "mobility-toolbox-js/ol";
+
+const getTextColor = (type) => {
+  if (type === "bus" || type === "tram") {
+    return "#fff";
+  }
+  return realtimeConfig.getTextColor(type);
+};
+
+export default getTextColor;