@geops/rvf-mobility-web-component 0.1.30 → 0.1.31

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.30",
+  "version": "0.1.31",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",
@@ -21,6 +21,7 @@
     "react-icons": "^5.4.0",
     "react-spatial": "^1.12.2",
     "rosetta": "^1.1.0",
+    "showdown": "^2.1.0",
     "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {

package/src/NotificationLayer/NotificationLayer.tsx

@@ -1,3 +1,5 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import useMapContext from "../utils/hooks/useMapContext";
@@ -86,7 +88,8 @@ const useNotifications = () => {
       abortCtrl = new AbortController();
       const response = await fetch(url, { signal: abortCtrl.signal });
       const data = await response.json();
-      setNotifications(getNotificationsWithStatus(data, now));
+      const notifications = getNotificationsWithStatus(data, now);
+      setNotifications(notifications);
       setShouldAddPreviewNotifications(true);
     };
 
@@ -150,7 +153,34 @@ const useNotifications = () => {
   return notifications;
 };
 
-export default function NotificationLayer() {
+export default function NotificationLayer(props: MaplibreStyleLayerOptions) {
   useNotifications();
+  const { baseLayer, map } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      isQueryable: true,
+      layersFilter: ({ metadata }) => {
+        return metadata?.["general.filter"] === "notifications";
+      },
+      maplibreLayer: baseLayer,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+    map.addLayer(layer);
+
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
   return null;
 }

package/src/NotificationLayer/notificationUtils.ts

@@ -142,6 +142,7 @@ const addNotificationsLayers = (
         features,
         type: "FeatureCollection",
       },
+      generateId: true,
       type: "geojson",
     },
     [
@@ -154,6 +155,9 @@ const addNotificationsLayers = (
         ],
         id: "notificationsActive",
         layout: { visibility: "visible" },
+        metadata: {
+          "general.filter": "notifications",
+        },
         paint: {
           "line-color": "rgba(255,0,0,1)",
           "line-dasharray": [2, 2],

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -3,7 +3,9 @@ import type { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 
 import useRvfContext from "../utils/hooks/useRvfContext";
-import RVFSellingPointDetails from "./RVFSellingPointDetails/RVFSellingPointDetails";
+import RvfLineNetworkDetails from "./RvfLineNetworkDetails/RvfLineNetworkDetails";
+import RvfNotificationDetails from "./RvfNotificationDetails";
+import RvfSellingPointDetails from "./RvfSellingPointDetails";
 import RvfSharedMobilityDetails from "./RvfSharedMobilityDetail";
 
 export type RvfFeatureDetailsProps = JSX.HTMLAttributes<HTMLDivElement> &
@@ -20,9 +22,11 @@ const getIsSharedMobility = (selectedFeature): boolean => {
 };
 
 function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
-  const { selectedFeature } = useRvfContext();
+  const { selectedFeature, selectedFeatures } = useRvfContext();
   const isSharedMobility = getIsSharedMobility(selectedFeature);
   const isSellingPoint = !!selectedFeature.get("tickets");
+  const isNotification = !!selectedFeature.get("disruption_type");
+  const isLineNetwork = !!selectedFeature.get("original_line_id");
 
   const showDefaultData = () => {
     return Object.entries(selectedFeature.getProperties()).map(
@@ -41,11 +45,22 @@ function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
 
   return (
     <div {...props}>
-      {isSellingPoint && <RVFSellingPointDetails feature={selectedFeature} />}
+      {isSellingPoint && <RvfSellingPointDetails feature={selectedFeature} />}
       {isSharedMobility && (
         <RvfSharedMobilityDetails selectedFeature={selectedFeature} />
       )}
-      {!isSharedMobility && !isSellingPoint && showDefaultData()}
+      {isNotification && <RvfNotificationDetails feature={selectedFeature} />}
+      {isLineNetwork && (
+        <RvfLineNetworkDetails
+          feature={selectedFeature}
+          features={selectedFeatures}
+        />
+      )}
+      {!isLineNetwork &&
+        !isNotification &&
+        !isSharedMobility &&
+        !isSellingPoint &&
+        showDefaultData()}
     </div>
   );
 }

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -0,0 +1,98 @@
+import { Feature } from "ol";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import useMapContext from "../../utils/hooks/useMapContext";
+
+let cacheLineInfosById = null;
+
+function RvfLineNetworkDetails({
+  feature,
+  features,
+}: {
+  feature: Feature;
+  features: Feature[];
+}) {
+  const { apikey, mapsurl } = useMapContext();
+  const [lineInfos, setLineInfos] = useState(null);
+  useEffect(() => {
+    const fetchInfos = async () => {
+      if (!cacheLineInfosById) {
+        const response = await fetch(
+          `${mapsurl}/data/network_plans_rvf_prototype.json?key=${apikey}`,
+        );
+        const data = await response.json();
+        cacheLineInfosById = data["geops.lnp.lines"];
+      }
+      setLineInfos(cacheLineInfosById);
+    };
+    fetchInfos();
+  }, [apikey, mapsurl]);
+
+  const lineNetworkIdsByOperator = useMemo(() => {
+    const byOperators = {};
+
+    [
+      ...new Set(
+        features.map((f) => {
+          return f.get("original_line_id");
+        }),
+      ),
+    ]
+      .filter((id) => {
+        return !!id && !!lineInfos?.[id];
+      })
+      .map((id) => {
+        const { operator_name: operatorName } = lineInfos[id];
+        if (!byOperators[operatorName]) {
+          byOperators[operatorName] = [];
+        }
+        byOperators[operatorName].push(lineInfos[id]);
+      });
+
+    return byOperators;
+  }, [features, lineInfos]);
+
+  if (!feature || !lineInfos) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {Object.entries(lineNetworkIdsByOperator).map(
+        ([operatorName, linesInfos]) => {
+          return (
+            <div className={"flex flex-col gap-2"} key={operatorName}>
+              <div>{operatorName}</div>
+              {linesInfos.map((lineInfo) => {
+                const {
+                  // color,
+                  // external_id,
+                  long_name: longName,
+                  short_name: shortName,
+                  // text_color,
+                } = lineInfo;
+
+                return (
+                  <div className={"flex items-center gap-2"} key={shortName}>
+                    <div>
+                      <div
+                        className={
+                          "rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
+                        }
+                      >
+                        {shortName}
+                      </div>
+                    </div>
+                    <div>{longName}</div>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        },
+      )}
+    </div>
+  );
+}
+
+export default RvfLineNetworkDetails;

package/src/RvfFeatureDetails/RvfLineNetworkDetails/index.js

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

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -0,0 +1,77 @@
+import { Feature } from "ol";
+import showdown from "showdown";
+
+import RvfLink from "../../RvfLink";
+const converter = new showdown.Converter();
+// text = "# hello, markdown!",
+// html = converter.makeHtml(text);
+function RvfNotificationDetails({ feature }: { feature: Feature }) {
+  const {
+    affected_products: affectedProducts,
+    affected_time_intervals: timeIntervals,
+    links,
+    long_description: description,
+    title,
+  } = feature.getProperties();
+
+  let end = "",
+    start = "";
+  let products = [];
+  let externalLinks = [];
+  try {
+    const timeInterval = JSON.parse(timeIntervals)?.[0] || {};
+    const dateStart = new Date(timeInterval.start);
+    start =
+      dateStart.toLocaleDateString() + " " + dateStart.toLocaleTimeString();
+    const dateEnd = new Date(timeInterval.end);
+    end = dateEnd.toLocaleDateString() + " " + dateEnd.toLocaleTimeString();
+
+    products = JSON.parse(affectedProducts);
+    products.sort((a, b) => {
+      return a.name.localeCompare(b.name);
+    });
+    externalLinks = JSON.parse(links);
+  } catch (e) {
+    console.error(e);
+  }
+  return (
+    <div className={"flex flex-col gap-4 text-sm"}>
+      <div>
+        <div className="text-base font-bold">{title}</div>
+        <div className="text-xs">
+          {start} - {end}
+        </div>
+      </div>
+      <div
+        className={"flex flex-col gap-2"}
+        dangerouslySetInnerHTML={{
+          __html: converter.makeHtml(description).replace("<hr />", "<br />"),
+        }}
+      ></div>
+      {externalLinks?.map(({ label, uri }) => {
+        return (
+          <RvfLink href={uri} key={uri}>
+            {label}
+          </RvfLink>
+        );
+      })}
+      <div className={"font-bold"}>Betroffened Lines:</div>
+      <div className={"flex flex-wrap gap-1"}>
+        {products?.map(({ name }) => {
+          return (
+            <div
+              className={
+                "rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
+              }
+              key={name}
+            >
+              {name}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default RvfNotificationDetails;

package/src/RvfFeatureDetails/RvfNotificationDetails/index.ts

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

package/src/RvfFeatureDetails/{RVFSellingPointDetails/RVFSellingPointDetails.tsx → RvfSellingPointDetails/RvfSellingPointDetails.tsx}

@@ -10,7 +10,7 @@ const ICON_BY_OPERATED_BY = {
   Videozentrum: <Video />,
 };
 
-function RVFSellingPointDetails({ feature }: { feature: Feature }) {
+function RvfSellingPointDetails({ feature }: { feature: Feature }) {
   if (!feature) {
     return null;
   }
@@ -44,4 +44,4 @@ function RVFSellingPointDetails({ feature }: { feature: Feature }) {
   );
 }
 
-export default RVFSellingPointDetails;
+export default RvfSellingPointDetails;

package/src/RvfFeatureDetails/RvfSellingPointDetails/index.js

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

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -16,7 +16,6 @@ function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
       return null;
     }
     return new MaplibreStyleLayer({
-      isQueryable: true,
       layersFilter: ({ metadata }) => {
         return (
           metadata?.["rvf.filter"] === "netzplan_lines" ||
@@ -24,8 +23,10 @@ function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
         );
       },
       maplibreLayer: baseLayer,
-      minZoom: 10,
       name: RVF_LAYERS_NAMES.liniennetz,
+      queryRenderedLayersFilter: ({ metadata }) => {
+        return metadata?.["rvf.filter"] === "netzplan_trips_info";
+      },
       ...(props || {}),
     });
   }, [baseLayer, props]);

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -117,9 +117,7 @@ const realtimeLayerProps = {
     { properties: { delay: delayA, type: typeA } },
     { properties: { delay: delayB, type: typeB } },
   ) => {
-    // console.log(trajA, trajB);
     if (typeA !== typeB) {
-      // console.log(trajA.properties.type, trajB.properties.type);
       if (PRIORITY_FROM_TYPE[typeA] < PRIORITY_FROM_TYPE[typeB]) {
         return -1;
       }
@@ -520,7 +518,7 @@ function RvfMobilityMap({
       <MapContext.Provider value={mapContextValue}>
         <RvfContext.Provider value={rvfContextValue}>
           <div
-            className="relative size-full border font-sans @container/main"
+            className="relative size-full overflow-hidden rounded-[16px] border font-sans  @container/main"
             ref={eventNodeRef}
             style={styleProps}
           >
@@ -549,7 +547,7 @@ function RvfMobilityMap({
                   title={RVF_LAYERS_TITLES.verkaufsstellen}
                 />
                 <RvfLineNetworkPlanLayer
-                  isQueryable={false}
+                  isQueryable={true}
                   minZoom={10}
                   title={RVF_LAYERS_TITLES.liniennetz}
                 />
@@ -666,7 +664,7 @@ function RvfMobilityMap({
               {hasToolbar && (
                 <div
                   className={
-                    "z-[100] flex justify-around overflow-x-hidden border-t bg-white p-1 @lg/main:block @lg/main:border-r @lg/main:p-0 "
+                    "z-[100] flex justify-around overflow-x-hidden border-t bg-white p-1 @lg/main:block @lg/main:border-r @lg/main:border-t-0 @lg/main:p-0 "
                   }
                 >
                   {hasLayerTree && (

package/src/RvfSelectedFeatureHighlightLayer/RvfSelectedFeatureHighlightLayer.tsx

@@ -61,7 +61,15 @@ function SingleClickListener() {
           feature.set("num_vehicles_available", feature.get("point_count"));
         }
 
-        source?.setData(geojson.writeFeatureObject(feature));
+        if (!feature.get("disruption_type")) {
+          try {
+            const wrote = geojson.writeFeatureObject(feature);
+            source?.setData(wrote);
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          } catch (error) {
+            // console.error(e);
+          }
+        }
       }
     }
 

package/src/utils/getFeatureInformationTitle.ts

@@ -13,11 +13,15 @@ const getFeatureInformationTitle = (feature: Feature) => {
   const selectedFeature = features?.[0] || feature;
   const {
     category,
+    disruption_type: disruptionType,
     feed_id: feedId,
     long_name: longName,
     tickets,
   } = selectedFeature.getProperties();
 
+  if (disruptionType) {
+    return "MOCO Meldung";
+  }
   if (category) {
     return TITLE_BY_CATEGORY[category] || defaultTitle;
   }

package/tailwind.config.mjs

@@ -86,7 +86,7 @@ export default {
       lg: getClamp(19, 25), // H4
       sm: getClamp(13, 15), // small
       xl: getClamp(24, 31), // h3
-      xs: getClamp(13, 15), // small
+      xs: getClamp(12, 13), // xtra small
     },
   },
 };

package/src/RvfFeatureDetails/RVFSellingPointDetails/index.js

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