@geops/rvf-mobility-web-component 0.1.40 → 0.1.42

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

package/src/NotificationLayer/NotificationLayer.tsx

@@ -92,6 +92,7 @@ const useNotifications = (): FeatureCollection => {
       abortCtrl = new AbortController();
       const response = await fetch(url, { signal: abortCtrl.signal });
       const data = await response.json();
+
       const notifications = getNotificationsWithStatus(data, now);
       setNotifications(notifications);
       setShouldAddPreviewNotifications(true);

package/src/NotificationLayer/notificationUtils.ts

@@ -12,6 +12,89 @@ export const getTime = (str) => {
   return parseInt(str?.substr(0, 8).replace(/:/g, ""), 10);
 };
 
+export const isNotificationNotOutOfDate = (notification, now) => {
+  // TODO: The backend should be responsible to returns only good notifications.
+  let notOutOfDate = notification.properties.affected_time_intervals.some(
+    (ati) => {
+      return now < new Date(ati.end);
+    },
+  );
+  if (!notOutOfDate) {
+    notOutOfDate = notification.properties.publications.some((publication) => {
+      return (
+        now >= new Date(publication.visible_from) &&
+        now <= new Date(publication.visible_until)
+      );
+    });
+  }
+  return notOutOfDate;
+};
+export const isNotificationPublished = (notification, now) => {
+  if (!notification?.properties?.publications?.length) {
+    // If there is no piblications date, use the time intervals
+    return isNotificationActive(notification, now);
+  }
+  return notification.properties.publications.some((publication) => {
+    return (
+      now >= new Date(publication.visible_from) &&
+      now <= new Date(publication.visible_until)
+    );
+  });
+};
+
+export const isNotificationActive = (notification, now: Date) => {
+  return notification.properties.affected_time_intervals.some(
+    (affectedTimeInterval) => {
+      const {
+        end,
+        start,
+        time_of_day_end: dayTimeEnd,
+        time_of_day_start: dayTimeStart,
+      } = affectedTimeInterval;
+      const nowTime = getTime(now.toTimeString());
+      const startTime = getTime(dayTimeStart);
+      const endTime = getTime(dayTimeEnd);
+      const inRange = new Date(start) <= now && now <= new Date(end);
+      return startTime && endTime
+        ? inRange && startTime <= nowTime && nowTime <= endTime
+        : inRange;
+    },
+  );
+};
+
+const getStartsString = (notification, now) => {
+  const next = notification.properties.affected_time_intervals.reduce(
+    (a, b) => {
+      const aEnd = new Date(a.end);
+      const aStart = new Date(a.start);
+      const bStart = new Date(b.start);
+      return now < aEnd && aStart < bStart ? a : b;
+    },
+    [],
+  );
+  const nextStartDate = new Date(next.start);
+  let starts;
+  if (
+    now.toDateString() === nextStartDate.toDateString() ||
+    now.getTime() - nextStartDate.getTime() > 0
+  ) {
+    if (next.time_of_day_start) {
+      starts = `ab ${next.time_of_day_start.substr(0, 5)}`;
+    } else {
+      starts = `ab ${nextStartDate.toLocaleTimeString(["de"], {
+        hour: "2-digit",
+        hour12: false,
+        minute: "2-digit",
+      })}`;
+    }
+  } else {
+    starts = `ab ${nextStartDate.toLocaleDateString(["de-DE"], {
+      day: "numeric",
+      month: "short",
+    })}`;
+  }
+  return starts;
+};
 /**
  *
  * @param {Array.<Object>} notifications Raw notifications
@@ -20,124 +103,86 @@ export const getTime = (str) => {
  */
 const getNotificationsWithStatus = (notifications, now) => {
   return notifications
-    .filter((notification) => {
-      // TODO: The backend should be responsible to returns only good notifications.
-      let notOutOfDate = notification.properties.affected_time_intervals.some(
-        (ati) => {
-          return now < new Date(ati.end);
-        },
-      );
-      if (!notOutOfDate) {
-        notOutOfDate = notification.properties.publications.some(
-          (publication) => {
-            return (
-              now >= new Date(publication.visible_from) &&
-              now <= new Date(publication.visible_until)
-            );
-          },
-        );
-      }
-      return notOutOfDate;
-    })
-    .map((n) => {
-      const isPublished = n.properties.publications.some((publication) => {
-        return (
-          now >= new Date(publication.visible_from) &&
-          now <= new Date(publication.visible_until)
-        );
-      });
-      const isActive = n.properties.affected_time_intervals.some((ati) => {
-        const {
-          end,
-          start,
-          time_of_day_end: dayTimeEnd,
-          time_of_day_start: dayTimeStart,
-        } = ati;
-        const nowTime = getTime(now.toTimeString());
-        const startTime = getTime(dayTimeStart);
-        const endTime = getTime(dayTimeEnd);
-        const inRange = new Date(start) <= now && now <= new Date(end);
-        return startTime && endTime
-          ? inRange && startTime <= nowTime && nowTime <= endTime
-          : inRange;
-      });
-
-      const next = n.properties.affected_time_intervals.reduce((a, b) => {
-        const aEnd = new Date(a.end);
-        const aStart = new Date(a.start);
-        const bStart = new Date(b.start);
-        return now < aEnd && aStart < bStart ? a : b;
-      }, []);
-      const nextStartDate = new Date(next.start);
-      let starts;
-      if (
-        now.toDateString() === nextStartDate.toDateString() ||
-        now.getTime() - nextStartDate.getTime() > 0
-      ) {
-        if (next.time_of_day_start) {
-          starts = `ab ${next.time_of_day_start.substr(0, 5)}`;
-        } else {
-          starts = `ab ${nextStartDate.toLocaleTimeString(["de"], {
-            hour: "2-digit",
-            hour12: false,
-            minute: "2-digit",
-          })}`;
-        }
-      } else {
-        starts = `ab ${nextStartDate.toLocaleDateString(["de-DE"], {
-          day: "numeric",
-          month: "short",
-        })}`;
-      }
+    .filter(isNotificationNotOutOfDate)
+    .map((notification) => {
+      // For information:
+      // A notification here is a FeatureCollection representing a publication of a situation,
+      // containing properties about the situation and a list of features representing  affecetdLines and affectedStops of this publication.
+      // AffectedStops are not currently represented in the map.
+      // AffectedLines are represented as linestrings in the map(the display of line is currently disabled) and, if is_icon_ref=true, as an icon .
+      // The representation of the icon depends of the disruption_type property of the publication.
 
-      let iconRefPoint;
-      const iconRef = n.features.find((f) => {
-        return f.properties.is_icon_ref;
-      });
-      if (iconRef) {
-        const iconRefFeature = format.readFeature(iconRef, {
-          dataProjection: "EPSG:4326",
-          featureProjection: "EPSG:3857",
-        }) as Feature;
-        const center = getCenter(iconRefFeature.getGeometry().getExtent());
-        iconRefPoint = iconRefFeature.getGeometry().getClosestPoint(center);
-      }
+      const isPublished = isNotificationPublished(notification, now);
+      const isActive = isNotificationActive(notification, now);
+      const starts = getStartsString(notification, now);
 
-      const properties = {
-        ...n.properties,
-        iconRefPoint,
+      const commonProperties = {
+        ...notification.properties,
         isActive,
         isPublished,
         starts,
       };
 
-      const features = n.features.map((f) => {
+      // We append all the common properties to all the features.
+      const features = notification.features.map((f) => {
         return {
           ...f,
-          properties: { ...f.properties, ...properties },
+          properties: { ...commonProperties, ...f.properties },
         };
       });
 
-      if (iconRefPoint) {
-        features.push({
-          geometry: {
-            coordinates: toLonLat(iconRefPoint),
-            type: "Point",
-          },
-          id: Math.random() + "",
-          properties: {
-            ...properties,
-            disruption_type: "whatever",
+      // We search for is_icon_ref=true features (lines) and create a point feature for each of them.
+      const iconRefFeatures = notification.features
+        .filter((f) => {
+          return f.properties.is_icon_ref || f.geometry.type === "Point";
+        })
+        .map((affectedLine) => {
+          const affectedLineFeature = format.readFeature(affectedLine, {
+            dataProjection: "EPSG:4326",
+            featureProjection: "EPSG:3857",
+          }) as Feature;
+          const center = getCenter(
+            affectedLineFeature.getGeometry().getExtent(),
+          );
+          const iconRefPoint = affectedLineFeature
+            .getGeometry()
+            .getClosestPoint(center);
+
+          const iconRefFeatureProperties = {
+            ...commonProperties,
+            ...affectedLine.properties,
             isIconRefPoint: true,
-          },
-          type: "Feature",
+          };
+          if (!iconRefFeatureProperties.disruption_type) {
+            iconRefFeatureProperties.disruption_type = "OTHER";
+          }
+          // Set Banner image
+          if (iconRefFeatureProperties.disruption_type) {
+            iconRefFeatureProperties.disruption_type_banner =
+              iconRefFeatureProperties.disruption_type + "_BANNER";
+          }
+
+          if (iconRefPoint) {
+            const iconRefFeature = {
+              geometry: {
+                coordinates: toLonLat(iconRefPoint),
+                type: "Point",
+              },
+              id: Math.random() + "",
+              properties: iconRefFeatureProperties,
+              type: "Feature",
+            };
+            return iconRefFeature;
+          }
+        })
+        .filter((f) => {
+          return !!f;
         });
-      }
 
       return {
-        ...n,
-        features,
-        properties,
+        ...notification,
+        features: [...features, ...iconRefFeatures],
+        properties: commonProperties,
       };
     });
 };
@@ -188,6 +233,7 @@ const addNotificationsLayers = (
   sourceId: string,
   sourceData: FeatureCollection,
   beforeLayerId: string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   graph: number,
 ) => {
   if (!mapboxLayer) {
@@ -217,26 +263,26 @@ const addNotificationsLayers = (
       //   source: "notifications",
       //   type: "line",
       // },
-      {
-        filter: [
-          "all",
-          ["==", ["get", "isActive"], true],
-          ["==", ["get", "graph"], graph],
-          ["==", ["get", "disruption_type"], "DISRUPTION"],
-        ],
-        id: "notificationsActive",
-        layout: { visibility: "visible" },
-        metadata: {
-          "general.filter": "notifications",
-        },
-        paint: {
-          "line-color": "rgba(255,0,0,1)",
-          "line-dasharray": [2, 2],
-          "line-width": 5,
-        },
-        source: "notifications",
-        type: "line",
-      },
+      // {
+      //   filter: [
+      //     "all",
+      //     ["==", ["get", "isActive"], true],
+      //     ["==", ["get", "graph"], graph],
+      //     ["==", ["get", "disruption_type"], "DISRUPTION"],
+      //   ],
+      //   id: "notificationsActive",
+      //   layout: { visibility: "visible" },
+      //   metadata: {
+      //     "general.filter": "notifications",
+      //   },
+      //   paint: {
+      //     "line-color": "rgba(255,0,0,0.5)",
+      //     "line-dasharray": [2, 2],
+      //     "line-width": 5,
+      //   },
+      //   source: "notifications",
+      //   type: "line",
+      // },
       // {
       //   filter: [
       //     "all",
@@ -256,61 +302,78 @@ const addNotificationsLayers = (
       //   source: "notifications",
       //   type: "line",
       // },
-      {
-        filter: [
-          "all",
-          ["==", ["get", "isActive"], true],
-          ["==", ["get", "disruption_type"], "DEVIATION"],
-        ],
-        id: "notificationsActiveDeviation",
-        layout: { visibility: "visible" },
-        paint: {
-          "line-color": "#000000",
-          "line-dasharray": [2, 2],
-          "line-opacity": 0.5,
-          "line-width": 5,
-        },
-        source: "notifications",
-        type: "line",
-      },
-      {
-        filter: [
-          "all",
-          ["==", ["get", "isIconRefPoint"], true],
-          // ["==", ["get", "isActive"], true],
-        ],
-        id: "notificationsIconRefPointActive",
-        layout: { visibility: "visible" },
-        metadata: {
-          "general.filter": "notifications",
-        },
-        paint: {
-          "circle-color": "#ff0000",
-          "circle-radius": 10,
-        },
-        source: "notifications",
-        type: "circle",
-      },
+      // {
+      //   filter: [
+      //     "all",
+      //     ["==", ["get", "isActive"], true],
+      //     ["==", ["get", "disruption_type"], "DEVIATION"],
+      //   ],
+      //   id: "notificationsActiveDeviation",
+      //   layout: { visibility: "visible" },
+      //   paint: {
+      //     "line-color": "#000000",
+      //     "line-dasharray": [2, 2],
+      //     "line-opacity": 0.5,
+      //     "line-width": 5,
+      //   },
+      //   source: "notifications",
+      //   type: "line",
+      // },
+      // {
+      //   filter: [
+      //     "all",
+      //     ["==", ["get", "isIconRefPoint"], true],
+      //     // ["==", ["get", "isActive"], true],
+      //   ],
+      //   id: "notificationsIconRefPointActive",
+      //   layout: { visibility: "visible" },
+      //   metadata: {
+      //     "general.filter": "notifications",
+      //   },
+      //   paint: {
+      //     "circle-color": "#ff0000",
+      //     "circle-radius": 10,
+      //   },
+      //   source: "notifications",
+      //   type: "circle",
+      // },
 
+      // Display an icon
       {
         filter: [
           "all",
           ["==", ["get", "isIconRefPoint"], true],
+          ["==", ["get", "isPublished"], true],
           ["==", ["get", "isActive"], true],
         ],
         id: "notificationsIconRefPointActive",
         layout: {
-          "icon-image": "warning",
-          "icon-size": 0.15,
+          "icon-allow-overlap": true,
+          // "icon-image": "warning"
+          "icon-image": [
+            "coalesce",
+            // ["image", "warning"],
+            ["image", ["get", "disruption_type"]],
+            // If no image with the name above exists, show the
+            // "rocket" image instead.
+            ["image", "warning"],
+          ],
+          "icon-size": 0.6,
+
+          // "icon-size": ["interpolate", ["linear"], ["zoom"], 11, 0, 11, 0.6],
           visibility: "visible",
         },
+
         metadata: {
           "general.filter": "notifications",
         },
+        minzoom: 11,
         paint: {},
         source: "notifications",
         type: "symbol",
       },
+
+      // Display a banner with the start date
       {
         filter: [
           "all",
@@ -320,8 +383,18 @@ const addNotificationsLayers = (
         ],
         id: "notificationsIconRefPointNonActive",
         layout: {
-          "icon-image": "warningbanner",
+          "icon-allow-overlap": true,
+          // "icon-image": "warningBanner",
+          "icon-image": [
+            "coalesce",
+            // ["image", "warning"],
+            ["image", ["get", "disruption_type_banner"]],
+            // If no image with the name above exists, show the
+            // "rocket" image instead.
+            ["image", "warningBanner"],
+          ],
           "icon-size": 0.15,
+          // "icon-size": ["interpolate", ["linear"], ["zoom"], 11, 0, 11, 0.15],
           "text-field": ["get", "starts"],
           "text-offset": [1.5, 0],
           "text-size": 8,
@@ -330,6 +403,7 @@ const addNotificationsLayers = (
         metadata: {
           "general.filter": "notifications",
         },
+        minzoom: 11,
         paint: {},
         source: "notifications",
         type: "symbol",