@geops/rvf-mobility-web-component 0.1.23 → 0.1.24

package/src/RvfSharedMobilityLayerGroup2/index.tsx

@@ -0,0 +1 @@
+export { default } from "./RvfSharedMobilityLayerGroup2";

package/src/RvfSingleClickListener/RvfSingleClickListener.tsx

@@ -1,17 +1,21 @@
+import { GeoJSONSource } from "maplibre-gl";
 import { Feature, MapBrowserEvent } from "ol";
 import { GeoJSON } from "ol/format";
 import { unByKey } from "ol/Observable";
 import { toLonLat } from "ol/proj";
 import { useCallback, useEffect } from "preact/hooks";
 
+import { PROVIDER_LOGOS_BY_FEED_ID } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 import MobilityEvent from "../utils/MobilityEvent";
+import { fetchSharingStation } from "../utils/sharingGraphqlUtils";
 
 const geojson = new GeoJSON();
 
 function SingleClickListener() {
   const {
+    baseLayer,
     map,
     realtimeLayer,
     setStationId,
@@ -21,7 +25,23 @@ function SingleClickListener() {
     tenant,
     trainId,
   } = useMapContext();
-  const { setSelectedFeature, setSelectedFeatures } = useRvfContext();
+  const { selectedFeature, setSelectedFeature, setSelectedFeatures } =
+    useRvfContext();
+
+  // Send the selctedFEature to the parent window
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+
+    map.getTargetElement().dispatchEvent(
+      new MobilityEvent("selectedfeature", {
+        feature: selectedFeature
+          ? geojson.writeFeatureObject(selectedFeature)
+          : null,
+      }),
+    );
+  }, [map, selectedFeature]);
 
   const onPointerMove = useCallback(
     async (evt: MapBrowserEvent<PointerEvent>) => {
@@ -59,6 +79,9 @@ function SingleClickListener() {
 
   const onSingleClick = useCallback(
     async (evt: MapBrowserEvent<PointerEvent>) => {
+      if (!baseLayer.mapLibreMap) {
+        return;
+      }
       const [realtimeFeature] = evt.map.getFeaturesAtPixel(evt.pixel, {
         layerFilter: (l) => {
           return l === realtimeLayer;
@@ -95,26 +118,59 @@ function SingleClickListener() {
           return l.get("isQueryable");
         },
       }) as Feature[];
-      evt.map.getTargetElement().dispatchEvent(
-        new MobilityEvent("singleclick", {
-          ...evt,
-          features: geojson.writeFeaturesObject(features),
-          lonlat: toLonLat(evt.coordinate),
-        }),
-      );
-      // feature.get("form_factor"); //free float
-      // feature.get("num_vehicles_available"); // wfs livedata
-      // feature.get("provider_name"); // station sharing
-
-      if (newStationId || newTrainId || !features.length) {
-        setSelectedFeature(null);
-        setSelectedFeatures([]);
-      } else {
-        setSelectedFeatures(features);
-        setSelectedFeature(features[0]);
-      }
+
+      // Append more infos about the features
+      const addMoreData = async (features) => {
+        for (const feature of features) {
+          const clusterId = feature.get("cluster_id");
+          if (clusterId) {
+            const vtFeat = feature.get("vectorTileFeature");
+            const sourceId = vtFeat.layer.source;
+            const leaves =
+              (await (
+                baseLayer.mapLibreMap.getSource(sourceId) as GeoJSONSource
+              )?.getClusterLeaves(clusterId, 1000, 0)) || [];
+
+            feature.set(
+              "features",
+              leaves.map((l) => {
+                return geojson.readFeature(l);
+              }),
+            );
+          }
+
+          // Sharing station
+          const sharingStationId = selectedFeature?.get("station_id");
+          if (sharingStationId) {
+            const sharingStationInfo =
+              await fetchSharingStation(sharingStationId);
+            selectedFeature.setProperties(sharingStationInfo);
+            selectedFeature.set(
+              "provider_logo",
+              PROVIDER_LOGOS_BY_FEED_ID[selectedFeature?.get("feed_id")],
+            );
+          }
+        }
+        evt.map.getTargetElement().dispatchEvent(
+          new MobilityEvent("singleclick", {
+            ...evt,
+            features: geojson.writeFeaturesObject(features),
+            lonlat: toLonLat(evt.coordinate),
+          }),
+        );
+
+        if (newStationId || newTrainId || !features.length) {
+          setSelectedFeature(null);
+          setSelectedFeatures([]);
+        } else {
+          setSelectedFeatures(features);
+          setSelectedFeature(features[0]);
+        }
+      };
+      addMoreData(features);
     },
     [
+      baseLayer?.mapLibreMap,
       stationId,
       trainId,
       realtimeLayer,
@@ -122,6 +178,7 @@ function SingleClickListener() {
       tenant,
       setStationId,
       setTrainId,
+      selectedFeature,
       setSelectedFeature,
       setSelectedFeatures,
     ],

package/src/index.tsx

@@ -13,6 +13,7 @@ register(
     "extent",
     "maxextent",
     "geolocation",
+    "details",
     "layers",
     "layertree",
     "mapsurl",
@@ -23,7 +24,7 @@ register(
     "notificationbeforelayerid",
     "print",
     "realtime",
-    "realtimeUrl",
+    "realtimeurl",
     "search",
     "share",
     "tenant",

package/src/utils/constants.ts

@@ -1,4 +1,13 @@
-import { transformExtent } from "ol/proj";
+import { fromLonLat, toLonLat, transformExtent } from "ol/proj";
+
+import callBike from "../logos/callabike_logo.png";
+import flinkster from "../logos/flinkster_logo.png";
+import grueneFlotteLogo from "../logos/gruene_flotte_logo.png";
+import lastenVeloLogo from "../logos/lasten_velo_freiburg.png";
+import freloLogo from "../logos/logo_frelo_web_rgb.png";
+import naturEnergieLogo from "../logos/natur_energie_logo.png";
+import yoioLogo from "../logos/yoio_logo.png";
+import zeusLogo from "../logos/zeus_logo.png";
 
 export const RVF_EXTENT_4326 = [7.5, 47.7, 8.45, 48.4];
 
@@ -8,6 +17,10 @@ export const RVF_EXTENT_3857 = transformExtent(
   "EPSG:3857",
 );
 
+// @ts-expect-error - testsdsd sd
+window.fromLonLat = fromLonLat;
+// @ts-expect-error - testsdsd sd
+window.toLonLat = toLonLat;
 export const LAYER_PROP_IS_EXPORTING = "isExporting";
 
 export const RVF_LAYERS_TITLES = {
@@ -27,7 +40,14 @@ export const RVF_LAYERS_TITLES = {
 
 export const RVF_LAYERS_NAMES = {
   auto: "auto",
+  bikeFrelo: "frelo",
+  bikeOthers: "bikeothers",
   cargobike: "cargobike",
+  cargobikeFrelo: "cargobikefrelo",
+  cargobikeOthers: "cargobikeothers",
+  carGrf: "grueneflotte",
+  carNatur: "naturenergie",
+  carOthers: "carothers",
   echtzeit: "echtzeit",
   eroller: "e-roller",
   fahrrad: "fahrrad",
@@ -91,3 +111,54 @@ export const PROVIDER_BY_FEED_ID = {
   // "carvelo",
   // "CarSharing"
 };
+
+export const BIKE_FORM_FACTOR = "bicycle";
+export const CAR_FORM_FACTOR = "car";
+export const CARGOBIKE_FORM_FACTOR = "cargo_bicycle";
+export const SCOOTER_FORM_FACTOR = "scooter";
+
+// Station system ids
+// "pickebike_basel",
+// "dott_basel",
+// "gruene-flotte_freiburg",
+// "voi_ch",
+// "nextbike_df",
+// "carvelo2go_ch",
+// "naturenergie_sharing",
+// "lastenvelo_fr",
+// "donkey_neuchatel",
+// "flinkster_carsharing"
+export const GRUNFLOTTE_FEED_ID = "gruene-flotte_freiburg";
+export const NATURENERGIE_FEED_ID = "naturenergie_sharing";
+export const CAR_OTHERS_FEED_IDS = ["flinkster_carsharing"];
+
+export const FRELO_FEED_ID = "nextbike_df";
+export const BIKE_OTHERS_FEED_IDS = [
+  "callabike_ice", // don't exist in graphql
+  "pickebike_basel",
+  "donkey_neuchatel",
+];
+
+export const CARGOBIKE_FRELO_ID = "nextbike_df";
+export const CARGOBIKE_OTHERS_FEED_IDS = ["lastenvelo_fr", "carvelo2go_ch"];
+
+export const SCOOTER_OTHERS_FEED_IDS = ["voi_ch"];
+
+export const PROVIDER_LOGOS_BY_FEED_ID = {
+  callabike_ice: callBike,
+  flinkster_carsharing: flinkster,
+  "gruene-flotte_freiburg": grueneFlotteLogo,
+  lastenvelo_fr: lastenVeloLogo,
+  naturenergie_sharing: naturEnergieLogo,
+  nextbike_df: freloLogo,
+  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/createFreeFloatMobilityLayer.ts

@@ -57,7 +57,7 @@ function createFreeFloatMobilityLayer(
         "MobiData-BW:" +
         name +
         "&" +
-        "outputFormat=application/json&srsname=EPSG:3857&" +
+        "outputFormat=application/json" +
         "bbox=" +
         extent.join(",") +
         ",EPSG:3857";
@@ -72,7 +72,10 @@ function createFreeFloatMobilityLayer(
         if (xhr.status == 200) {
           const features = source
             .getFormat()
-            .readFeatures(xhr.responseText)
+            .readFeatures(xhr.responseText, {
+              dataProjection: "EPSG:4326",
+              featureProjection: "EPSG:3857",
+            })
             ?.filter((feature) => {
               if (formFactor) {
                 return feature.get("form_factor") === formFactor;

package/src/utils/createMobiDataBwWfsLayer.ts

@@ -78,11 +78,14 @@ function createMobiDataBwWfsLayer(
   name: string,
   color: string,
   layerOptions: Options = {
-    minZoom: 18,
+    minZoom: 0,
   },
 ): VectorLayer<Vector<Feature<Point>>> {
   const source = new Vector({
-    format: new GeoJSON(),
+    format: new GeoJSON({
+      dataProjection: "EPSG:4326",
+      featureProjection: "EPSG:3857",
+    }),
     strategy: bboxStrategy,
     url: function (extent) {
       return (
@@ -94,7 +97,7 @@ function createMobiDataBwWfsLayer(
         "MobiData-BW:" +
         name +
         "&" +
-        "outputFormat=application/json&srsname=EPSG:3857&" +
+        "outputFormat=application/json&" +
         "bbox=" +
         extent.join(",") +
         ",EPSG:3857"

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;