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

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.25",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -55,7 +55,11 @@ 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 fullTrajectoryStyle from "../utils/fullTrajectoryStyle";
+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 +67,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 +99,13 @@ const realtimeLayerProps = {
   bboxParameters: {
     line_tags: "RVF",
   },
+  fullTrajectoryStyle: fullTrajectoryStyle,
+  style: realtimeRVFStyle,
+  styleOptions: {
+    getBgColor: getBgColor,
+    getRadius: getRadius,
+    getTextColor: getTextColor,
+  },
 };
 
 function RvfMobilityMap({
@@ -490,11 +502,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}
                 />
@@ -503,10 +515,10 @@ function RvfMobilityMap({
                   title={RVF_LAYERS_TITLES.sharedMobility}
                 />
 
-                <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
+                <div className="pointer-events-none absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
                   <ScaleLine className="bg-slate-50/70" />
                   <Copyright
-                    className="bg-slate-50/70"
+                    className="pointer-events-auto bg-slate-50/70"
                     options={copyrightOptions}
                   />
                 </div>

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/fullTrajectoryStyle.ts

@@ -0,0 +1,57 @@
+import type { FeatureLike } from "ol/Feature";
+
+import { Circle, Fill, Stroke, Style } from "ol/style";
+
+const borderStyle = new Style({
+  image: new Circle({
+    fill: new Fill({
+      color: "#000000",
+    }),
+    radius: 5,
+  }),
+  stroke: new Stroke({
+    color: "#000000",
+    width: 6,
+  }),
+  zIndex: 2,
+});
+
+const fullTrajectoryStyle = (
+  feature: FeatureLike,
+  resolution: number,
+  options: { getBgColor: (type: string, line: { name: string }) => string },
+): Style[] => {
+  let lineColor = "#ffffff"; // white
+
+  const type = feature.get("type");
+  let stroke = feature.get("stroke");
+
+  if (stroke && stroke[0] !== "#") {
+    stroke = `#${stroke}`;
+  }
+  console.log(feature.getProperties());
+  lineColor =
+    stroke || options?.getBgColor(type, { name: feature.get("line_name") });
+
+  // Don't allow white lines, use red instead.
+  lineColor = /#ffffff/i.test(lineColor) ? "#ff0000" : lineColor;
+
+  const style = [
+    borderStyle,
+    new Style({
+      image: new Circle({
+        fill: new Fill({
+          color: lineColor,
+        }),
+        radius: 4,
+      }),
+      stroke: new Stroke({
+        color: lineColor,
+        width: 4,
+      }),
+      zIndex: 3,
+    }),
+  ];
+  return style;
+};
+export default fullTrajectoryStyle;

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,20 @@ 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.5 * 60 * 1000)).toBe("transparent");
+    expect(getDelayColor(2.49 * 60 * 1000)).toBe("transparent");
+    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(3 * 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 >= 3) {
     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(1 * 60 * 1000)).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(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;