@geops/rvf-mobility-web-component 0.1.43 → 0.1.45

package/src/NotificationLayer/notificationUtils.ts

@@ -1,437 +0,0 @@
-import { FeatureCollection } from "geojson";
-import { Feature } from "ol";
-import { getCenter } from "ol/extent";
-import GeoJSON from "ol/format/GeoJSON";
-import { toLonLat } from "ol/proj";
-
-import addSourceAndLayers from "../utils/addSourceAndLayers";
-
-const format = new GeoJSON();
-
-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
- * @param {Date} now The date to compare with the affected_time_intervals
- * @returns {Array.<Object>}
- */
-const getNotificationsWithStatus = (notifications, now) => {
-  return notifications
-    .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.
-
-      const isPublished = isNotificationPublished(notification, now);
-      const isActive = isNotificationActive(notification, now);
-      const starts = getStartsString(notification, now);
-
-      const commonProperties = {
-        ...notification.properties,
-        isActive,
-        isPublished,
-        starts,
-      };
-
-      // We append all the common properties to all the features.
-      const features = notification.features.map((f) => {
-        return {
-          ...f,
-          properties: { ...commonProperties, ...f.properties },
-        };
-      });
-
-      // 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,
-          };
-          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 {
-        ...notification,
-        features: [...features, ...iconRefFeatures],
-        properties: commonProperties,
-      };
-    });
-};
-
-export const getCurrentGraph = (mapping: object, zoom: number) => {
-  const breakPoints = Object.keys(mapping).map((k) => {
-    return parseFloat(k);
-  });
-  const closest = breakPoints.reverse().find((bp) => {
-    return bp <= Math.floor(zoom) - 1;
-  }); // - 1 due to ol zoom !== mapbox zoom
-  return mapping[closest || Math.min(...breakPoints)];
-};
-
-// export const getDisruptionActiveStyleLayers = (
-//   id = "notificationActive",
-//   graph,
-// ) => {
-//   return [
-//     {
-//       filter: [
-//         "all",
-//         ["==", ["get", "isActive"], true],
-//         ["==", ["get", "graph"], graph],
-//         ["==", ["get", "disruption_type"], "DISRUPTION"],
-//       ],
-//       id: id,
-//       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",
-//     },
-//   ];
-// };
-
-/**
- * This function add layers in the mapbox style to show notifications lines.
- */
-const addNotificationsLayers = (
-  mapboxLayer: object,
-  sourceId: string,
-  sourceData: FeatureCollection,
-  beforeLayerId: string,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  graph: number,
-) => {
-  if (!mapboxLayer) {
-    return;
-  }
-
-  addSourceAndLayers(
-    mapboxLayer,
-    sourceId,
-    sourceData,
-    [
-      // {
-      //   filter: [
-      //     "all",
-      //     ["==", ["get", "isPreview"], true],
-      //     ["==", ["get", "disruption_type"], "DISRUPTION"],
-      //   ],
-      //   id: "notificationsPreviewDisruption",
-      //   layout: { visibility: "visible" },
-      //   metadata: {
-      //     "general.filter": "notifications",
-      //   },
-      //   paint: {
-      //     "line-color": "rgba(255,255,0,0.2)",
-      //     "line-width": 10,
-      //   },
-      //   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",
-      //     ["==", ["get", "isPreview"], true],
-      //     // ["==", ["get", "graph"], graph],
-      //     ["==", ["get", "disruption_type"], "DEVIATION"],
-      //   ],
-      //   id: "notificationsPreviewDeviation",
-      //   layout: { visibility: "visible" },
-      //   metadata: {
-      //     "general.filter": "notifications",
-      //   },
-      //   paint: {
-      //     "line-color": "rgba(255,255,0,0.2)",
-      //     "line-width": 10,
-      //   },
-      //   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",
-      // },
-
-      // Display an icon
-      {
-        filter: [
-          "all",
-          ["==", ["get", "isIconRefPoint"], true],
-          ["==", ["get", "isPublished"], true],
-          ["==", ["get", "isActive"], true],
-        ],
-        id: "notificationsIconRefPointActive",
-        layout: {
-          "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",
-          ["==", ["get", "isIconRefPoint"], true],
-          ["==", ["get", "isActive"], false],
-          ["==", ["get", "isPublished"], true],
-        ],
-        id: "notificationsIconRefPointNonActive",
-        layout: {
-          "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,
-          visibility: "visible",
-        },
-        metadata: {
-          "general.filter": "notifications",
-        },
-        minzoom: 11,
-        paint: {},
-        source: "notifications",
-        type: "symbol",
-      },
-    ],
-    beforeLayerId,
-  );
-};
-
-const parsePreviewNotification = (mocoPreviewObject: {
-  graphs: object;
-  id: number;
-}) => {
-  let properties = {};
-  const features = Object.keys(mocoPreviewObject.graphs).map((graph) => {
-    const feature = mocoPreviewObject.graphs[graph].features[0];
-    properties = mocoPreviewObject.graphs[graph].properties;
-    return { ...feature, properties: { ...feature.properties, graph } };
-  });
-  return {
-    features,
-    properties,
-    type: "FeatureCollection",
-  };
-};
-
-export {
-  addNotificationsLayers,
-  getNotificationsWithStatus,
-  parsePreviewNotification,
-};

package/src/utils/createFreeFloatMobilityLayer.ts

@@ -1,152 +0,0 @@
-import { Feature, getUid } from "ol";
-import { GeoJSON } from "ol/format";
-import { Point } from "ol/geom";
-import VectorLayer, { Options } from "ol/layer/Vector";
-import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
-import { Cluster, Vector } from "ol/source";
-import { Circle, Fill, Stroke, Style, Text } from "ol/style";
-
-import { LAYER_PROP_IS_EXPORTING } from "./constants";
-import { iconStyleByFormFactor } from "./createMobiDataBwWfsLayer";
-
-export const getCircleStyle = (color: string) => {
-  return new Style({
-    image: new Circle({
-      declutterMode: "declutter",
-      displacement: [-12, 12],
-      fill: new Fill({
-        color: "white",
-      }),
-      radius: 9,
-      stroke: new Stroke({
-        color: color,
-        width: 1,
-      }),
-    }),
-    text: new Text({
-      declutterMode: "declutter",
-      fill: new Fill({
-        color: color,
-      }),
-      font: "bolder 10px arial",
-      offsetX: -12,
-      offsetY: -11,
-    }),
-  });
-};
-
-function createFreeFloatMobilityLayer(
-  name: string,
-  color: string,
-  formFactor: string,
-  layerOptions: Options = {
-    minZoom: 17.99,
-  },
-): VectorLayer<Vector<Feature<Point>>> {
-  // Exemple how to get a specific form factor
-  //api.mobidata-bw.de/geoserver/MobiData-BW/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=MobiData-BW%3Asharing_vehicles&CQL_FILTER=form_factor%20%3D%20%27scooter%27&maxFeatures=20000&outputFormat=csv
-  const source = new Vector({
-    format: new GeoJSON(),
-    loader: function (extent, resolution, projection, success, failure) {
-      const url =
-        "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
-        name +
-        "/ows" +
-        "?service=WFS&" +
-        "version=1.1.0&request=GetFeature&typename=" +
-        "MobiData-BW:" +
-        name +
-        "&" +
-        "outputFormat=application/json" +
-        "bbox=" +
-        extent.join(",") +
-        ",EPSG:3857";
-      const xhr = new XMLHttpRequest();
-      xhr.open("GET", url);
-      const onError = function () {
-        source.removeLoadedExtent(extent);
-        failure();
-      };
-      xhr.onerror = onError;
-      xhr.onload = function () {
-        if (xhr.status == 200) {
-          const features = source
-            .getFormat()
-            .readFeatures(xhr.responseText, {
-              dataProjection: "EPSG:4326",
-              featureProjection: "EPSG:3857",
-            })
-            ?.filter((feature) => {
-              if (formFactor) {
-                return feature.get("form_factor") === formFactor;
-              }
-              return true;
-            });
-
-          features?.forEach((feature) => {
-            // The WFS returns everytime a different id for the same vehicle, so we set the vehicle_id as id.
-            // and remove the previous feature with the same id.
-            const vehicleId = feature.get("vehicle_id");
-            if (vehicleId) {
-              feature.setId(vehicleId);
-              const featuresToRemove = source.getFeatures().filter((feat) => {
-                return feat.getId() === feature.getId();
-              });
-              source.removeFeatures(featuresToRemove);
-            }
-          });
-          source.addFeatures(features);
-          success(features);
-        } else {
-          onError();
-        }
-      };
-      xhr.send();
-    },
-    strategy: bboxStrategy,
-  });
-
-  const style = getCircleStyle(color);
-
-  const clusterSource = new Cluster({
-    distance: 40,
-    source: source,
-  });
-
-  const styleFunction = (feature) => {
-    if (layer.get(LAYER_PROP_IS_EXPORTING)) {
-      return null;
-    }
-    const circleStyle = style.clone();
-
-    const featuresCount = feature.get("features").length;
-    circleStyle.getText().setText(featuresCount);
-
-    const formFactor =
-      feature.get("features")?.[0].get?.("form_factor") || "scooter";
-
-    const styles = [iconStyleByFormFactor[formFactor], circleStyle];
-
-    styles.forEach((style) => {
-      style.setZIndex(parseInt(getUid(feature), 10));
-    });
-
-    return styles;
-  };
-
-  const layer = new VectorLayer({
-    // @ts-expect-error - custom properties
-    isQueryable: true,
-    source: clusterSource,
-    style: styleFunction,
-    ...layerOptions,
-  });
-
-  clusterSource.on("addfeature", function (event) {
-    event.feature?.setStyle(styleFunction);
-  });
-
-  return layer;
-}
-
-export default createFreeFloatMobilityLayer;