@geops/rvf-mobility-web-component 0.1.128 → 0.1.129

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -1,292 +0,0 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
-
-import RouteIcon from "../../RouteIcon";
-import ShadowOverflow from "../../ShadowOverflow";
-import useMapContext from "../../utils/hooks/useMapContext";
-
-import type { RealtimeLine } from "mobility-toolbox-js/types";
-import type { Feature } from "ol";
-import type { PreactDOMAttributes } from "preact";
-
-let cacheLineInfosById = null;
-let cacheStopInfosById = null;
-
-interface LineInfo {
-  color: string;
-  external_id: string;
-  id: string;
-  long_name: string;
-  mot: string;
-  operator_name: string;
-  runs: number;
-  short_name: string;
-  text_color: string;
-}
-
-interface StopInfo {
-  external_id: string;
-  importance: number;
-  long_name: string;
-  short_name: string;
-  visibility_level: number;
-}
-
-const LNP_SOURCE_ID = "network_plans";
-const LNP_MD_LINES = "geops.lnp.lines";
-const LNP_MD_STOPS = "geops.lnp.stops";
-const RUNS_PROP = "runs";
-const ORIGINAL_LINE_ID_PROP = "original_line_id";
-
-function LinesNetworkPlanDetails({
-  className,
-  features,
-  ...props
-}: { className?: string; features: Feature[] } & PreactDOMAttributes) {
-  const { baseLayer } = useMapContext();
-  const [lineInfos, setLineInfos] = useState<LineInfo[]>(null);
-  const [stopInfos, setStopInfos] = useState<StopInfo[]>(null);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [stopInfosOpenId, setStopInfosOpenId] = useState<string>(null);
-
-  const isRunsDisplay = useMemo(() => {
-    return new URLSearchParams(window.location.search).get("runs") === "true";
-  }, []);
-
-  useEffect(() => {
-    const source = baseLayer?.mapLibreMap?.getSource(LNP_SOURCE_ID);
-    const abortController = new AbortController();
-    const fetchInfos = async (url) => {
-      if (!cacheLineInfosById) {
-        const response = await fetch(url, { signal: abortController.signal });
-        const data = await response.json();
-        cacheLineInfosById = data[LNP_MD_LINES];
-        cacheStopInfosById = data[LNP_MD_STOPS];
-      }
-      setLineInfos(cacheLineInfosById);
-      setStopInfos(cacheStopInfosById);
-    };
-    if (source?.url) {
-      void fetchInfos(source?.url);
-    }
-    return () => {
-      abortController?.abort();
-    };
-  }, [baseLayer?.mapLibreMap]);
-
-  const lineInfosByOperator: Record<string, LineInfo[]> = useMemo(() => {
-    const byOperators = {};
-
-    [
-      ...new Set(
-        features.map((f) => {
-          return f.get(ORIGINAL_LINE_ID_PROP);
-        }),
-      ),
-    ]
-      .filter((id) => {
-        return !!id && !!lineInfos?.[id];
-      })
-      .forEach((id) => {
-        const { operator_name: operatorName } = lineInfos[id];
-        if (!byOperators[operatorName]) {
-          byOperators[operatorName] = [];
-          byOperators[operatorName].runs = 0;
-        }
-        lineInfos[id].id = id;
-
-        const runs = features
-          .filter((f) => {
-            return f.get(ORIGINAL_LINE_ID_PROP) === id;
-          })
-          .reduce((acc, featuree) => {
-            return acc + featuree.get(RUNS_PROP);
-          }, 0);
-        lineInfos[id].id = id;
-        lineInfos[id].runs = runs;
-        byOperators[operatorName].runs += runs;
-        byOperators[operatorName].push(lineInfos[id]);
-      });
-
-    return byOperators;
-  }, [features, lineInfos]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const stopInfoIdsByLineId: Record<string, string[]> = useMemo(() => {
-    const byLineId = {};
-    features.forEach((f) => {
-      const lineId = f.get(ORIGINAL_LINE_ID_PROP);
-      if (lineId && !byLineId[lineId] && f.get("stop_ids")) {
-        try {
-          byLineId[lineId] = JSON.parse(f.get("stop_ids"));
-        } catch (e) {
-          console.log(e);
-        }
-      }
-    });
-
-    return byLineId;
-  }, [features]);
-
-  if (!features?.length || !lineInfos) {
-    return null;
-  }
-
-  return (
-    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
-      <div className="space-y-4">
-        {Object.entries(lineInfosByOperator)
-          .sort(([operatorNameA], [operatorNameB]) => {
-            return lineInfosByOperator[operatorNameA].runs <
-              lineInfosByOperator[operatorNameB].runs
-              ? 1
-              : -1;
-          })
-          .map(([operatorName, linesInfos]) => {
-            return (
-              <div className={"flex flex-col gap-2"} key={operatorName}>
-                <div>{operatorName}</div>
-                <div className="flex flex-wrap gap-2">
-                  {linesInfos
-                    .sort((a, b) => {
-                      return a.runs < b.runs ? 1 : -1;
-                    })
-                    .map((lineInfo) => {
-                      const {
-                        color: backgroundColor,
-                        // color,
-                        // external_id,
-                        long_name,
-                        mot,
-                        runs,
-                        short_name: shortName,
-                        text_color: textColor,
-                      } = lineInfo;
-                      let longName = long_name;
-
-                      let stops = null;
-                      //stopInfoIdsByLineId?.[id] || null;
-                      if (!stops?.length) {
-                        stops = null;
-                      }
-
-                      if (!longName && stops) {
-                        const names = stops.map((stopId) => {
-                          return stopInfos[stopId].short_name;
-                        });
-
-                        longName = [
-                          ...new Set([names[0], names[names.length - 1]]),
-                        ].join(" - ");
-                      }
-
-                      // Build a line object
-                      const line: { type: string } & RealtimeLine = {
-                        color: null,
-                        id: null,
-                        name: shortName,
-                        stroke: null,
-                        text_color: null,
-                        type: mot,
-                      };
-
-                      if (textColor) {
-                        line.text_color = textColor.startsWith("#")
-                          ? textColor
-                          : `#${textColor}`;
-                      }
-
-                      if (backgroundColor) {
-                        line.color = backgroundColor.startsWith("#")
-                          ? backgroundColor
-                          : `#${backgroundColor}`;
-                      }
-
-                      return (
-                        <div
-                          className={longName ? "w-full" : ""}
-                          key={shortName}
-                        >
-                          <div
-                            className={"flex justify-between gap-2"}
-                            // onClick={() => {
-                            //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
-                            // }}
-                          >
-                            <div>
-                              <RouteIcon line={line}></RouteIcon>
-                            </div>
-                            {!!longName && (
-                              <div
-                                className={
-                                  "flex-1 text-left *:before:content-['_–'] *:first:font-semibold *:first:before:!content-[_p] *:last:font-semibold *:last:before:!content-[_p]"
-                                }
-                              >
-                                {longName.split("-").map((name) => {
-                                  return <div key={name}>{name}</div>;
-                                })}
-                              </div>
-                            )}
-                            {isRunsDisplay && (
-                              <div className={"text-xs"}>{runs}</div>
-                            )}
-
-                            {/* We deactivate the list of stopsfor now */}
-                            {/* {!!stops && (
-                              <button className={"shrink-0"}>
-                                {stopInfosOpenId === id ? (
-                                  <ArrowUp />
-                                ) : (
-                                  <ArrowDown />
-                                )}
-                              </button>
-                            )} */}
-                          </div>
-                          {/* {!!stops && (
-                            <div
-                              className={`${stopInfosOpenId === id ? "" : "hidden"}`}
-                            >
-                              {stops?.map((stopId, index, arr) => {
-                                const stop = stopInfos[stopId];
-                                return (
-                                  <div
-                                    className={"flex items-center gap-2"}
-                                    key={stopId}
-                                  >
-                                    <RouteStopContext.Provider
-                                      value={{
-                                        index,
-                                        status: {
-                                          isFirst: !index,
-                                          isLast: index === arr.length - 1,
-                                          isLeft: false,
-                                          isPassed: false,
-                                          progress: !index ? 50 : 0,
-                                        },
-                                        stop,
-                                      }}
-                                    >
-                                      <RouteStopProgress
-                                        className="relative flex size-8 shrink-0 items-center justify-center"
-                                        lineColor={line.color}
-                                      />
-                                      <div>{stop.short_name}</div>
-                                    </RouteStopContext.Provider>
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          )} */}
-                        </div>
-                      );
-                    })}
-                </div>
-              </div>
-            );
-          })}
-      </div>
-    </ShadowOverflow>
-  );
-}
-
-export default LinesNetworkPlanDetails;

package/src/RvfFeatureDetails/RvfLineNetworkDetails/index.js

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

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -1,36 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-import ShadowOverflow from "../../ShadowOverflow";
-import SituationDetails from "../../SituationDetails";
-import useMapContext from "../../utils/hooks/useMapContext";
-import useMocoSituation from "../../utils/hooks/useMocoSituation";
-
-import type { Feature } from "ol";
-
-function NotificationDetails({
-  className,
-  ...props
-}: {
-  className?: string;
-  containerClassName?: string;
-  feature: Feature;
-  headerClassName?: string;
-  iconClassName?: string;
-  reasonClassName?: string;
-  timeIntervalClassName?: string;
-  toggleable?: boolean;
-}) {
-  const { notificationId, notificationSupportedLanguages } = useMapContext();
-  const situationParsed = useMocoSituation(notificationId);
-
-  return (
-    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
-      <SituationDetails
-        fallbackLangs={notificationSupportedLanguages}
-        situation={situationParsed}
-      />
-    </ShadowOverflow>
-  );
-}
-
-export default NotificationDetails;

package/src/RvfFeatureDetails/RvfNotificationDetails/index.ts

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

package/src/RvfFeatureDetails/RvfSellingPointDetails/RvfSellingPointDetails.tsx

@@ -1,50 +0,0 @@
-import Automat from "../../icons/Automat";
-import InPerson from "../../icons/InPerson";
-import Video from "../../icons/Video";
-import ShadowOverflow from "../../ShadowOverflow";
-
-import type { Feature } from "ol";
-
-const ICON_BY_OPERATED_BY = {
-  Automat: <Automat />,
-  Persönlich: <InPerson />,
-  Videozentrum: <Video />,
-};
-
-function RvfSellingPointDetails({ feature }: { feature: Feature }) {
-  if (!feature) {
-    return null;
-  }
-  const {
-    city,
-    name,
-    operated_by: operatedBy,
-    street,
-    telephone_info: phone,
-    zip_code: zip,
-  } = feature.getProperties();
-  return (
-    <ShadowOverflow className="px-4 text-base">
-      <div className="flex flex-col gap-4">
-        <div className="flex gap-2">
-          <span className={"min-w-[26px]"}>
-            {ICON_BY_OPERATED_BY[operatedBy]}
-          </span>
-          <span>{name}</span>
-        </div>
-        <div className="flex flex-col">
-          {phone && <div>{phone}</div>}
-          {street && <div>{street}</div>}
-          {(zip || city) && (
-            <div className="flex gap-2">
-              <span>{zip}</span>
-              <span>{city}</span>
-            </div>
-          )}
-        </div>
-      </div>
-    </ShadowOverflow>
-  );
-}
-
-export default RvfSellingPointDetails;

package/src/RvfFeatureDetails/RvfSellingPointDetails/index.js

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

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/FloatingVehiclesDetails.tsx

@@ -1,74 +0,0 @@
-import Link from "../../../ui/Link";
-import { PROVIDER_BY_FEED_ID } from "../../../utils/constants";
-import getLinkByDevice from "../../../utils/getLinkByDevice";
-
-import type { Feature } from "ol";
-
-export interface FloatingVehiclesDetailsProps {
-  features: Feature[];
-}
-
-function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
-  const renderedDetails = features.map((feature, idx) => {
-    let vehicleNumber;
-    const { feed_id: feedId, rental_uris_android: androidLink } =
-      feature.getProperties();
-    if (/yoio/.test(feedId)) {
-      vehicleNumber = androidLink.split("/").pop();
-    } else if (/zeus/.test(feedId)) {
-      const url = new URL(feature.get("rental_uris_web"));
-      vehicleNumber = new URLSearchParams(url.search).get("vehicle");
-    } else if (/nextbike/.test(feedId)) {
-      const url = new URL(androidLink);
-      vehicleNumber = new URLSearchParams(url.search).get("id");
-    }
-
-    const scooterLink = getLinkByDevice(feature);
-    const availableDistanceString = feature
-      .get("current_range_meters")
-      ?.toLocaleString()
-      ?.replace(".", "'")
-      .replace(",", "'");
-
-    const distance = availableDistanceString
-      ? ` (${availableDistanceString} m)`
-      : null;
-
-    if (!vehicleNumber || !scooterLink) {
-      return null;
-    }
-    return (
-      <li key={idx}>
-        <div className={"flex items-center gap-2"}>
-          <span>
-            {`${vehicleNumber}`}
-            {distance}
-          </span>
-          <Link href={scooterLink}>{` jetzt buchen`}</Link>
-        </div>
-      </li>
-    );
-  });
-
-  const feedId = features?.[0].get("feed_id");
-  const link = getLinkByDevice(features?.[0]);
-
-  return (
-    <div className="flex flex-1 flex-col gap-2">
-      <div className="flex flex-1 flex-col gap-2">
-        <div>{features.length} Fahrzeuge</div>
-        <div className="flex flex-1 flex-col">
-          <div className="text-grey">Fahrzeug mieten</div>
-          <ul className="list-disc pl-4">{renderedDetails}</ul>
-        </div>
-      </div>
-      {feedId && link && (
-        <div>
-          <Link href={link}>Über {PROVIDER_BY_FEED_ID[feedId]}</Link>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default FloatingVehiclesDetails;

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/FloatingVehiclesDetails/index.tsx

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

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -1,134 +0,0 @@
-import { GeoJSON } from "ol/format";
-import { memo } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
-import { Fragment } from "preact/jsx-runtime";
-import { twMerge } from "tailwind-merge";
-
-import ShadowOverflow from "../../ShadowOverflow";
-import { PROVIDER_LOGOS_BY_FEED_ID } from "../../utils/constants";
-import useMapContext from "../../utils/hooks/useMapContext";
-import { fetchSharingStation } from "../../utils/sharingGraphqlUtils";
-
-import FloatingVehiclesDetails from "./FloatingVehiclesDetails";
-import StationDetails from "./StationDetails";
-
-import type { GeoJSONSource } from "maplibre-gl";
-import type { Feature } from "ol";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-const geojson = new GeoJSON();
-
-export type RvfSharedMobilityDetailsProps = {
-  className?: string;
-  feature: Feature;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RvfSharedMobilityDetails({
-  className,
-  feature,
-  ...props
-}: RvfSharedMobilityDetailsProps) {
-  const { baseLayer } = useMapContext();
-  const [features, setFeatures] = useState([]);
-  const isStationDetails = !!feature.get("station_id");
-  const isFloatingVehicle = !!feature.get("vehicle_id");
-  const isCluster = !!feature.get("cluster_id");
-
-  // Get station infos from MobiDataBW graphql API
-  useEffect(() => {
-    if (isStationDetails) {
-      // Sharing station
-      const sharingStationId = feature?.get("station_id");
-      const feedId = feature?.get("feed_id");
-      if (sharingStationId) {
-        fetchSharingStation(sharingStationId)
-          .then((sharingStationInfo) => {
-            feature.setProperties(sharingStationInfo);
-            feature.set("provider_logo", PROVIDER_LOGOS_BY_FEED_ID[feedId]);
-          })
-          .catch((error) => {
-            console.warn("Error fetching sharing station info:", error);
-          });
-      }
-    }
-  }, [feature, isStationDetails]);
-
-  useEffect(() => {
-    if (isCluster) {
-      const clusterId = feature.get("cluster_id");
-      if (clusterId) {
-        // Append leaves infos about the cluster
-        const vtFeat = feature.get("vectorTileFeature");
-        const sourceId = vtFeat.layer.source;
-        baseLayer.mapLibreMap
-          .getSource<GeoJSONSource>(sourceId)
-          ?.getClusterLeaves(clusterId, 1000, 0)
-          .then((leaves) => {
-            const featuresLeaves = leaves.map((l) => {
-              return geojson.readFeature(l);
-            });
-            setFeatures(featuresLeaves || []);
-          })
-          .catch(() => {
-            // eslint-disable-next-line no-console
-            console.warn(
-              `Impossible to get cluster ${clusterId} leaves from source ${sourceId}`,
-            );
-          });
-      }
-    } else {
-      setFeatures(feature ? [feature] : []);
-    }
-  }, [feature, isFloatingVehicle, isCluster, baseLayer?.mapLibreMap]);
-
-  const featuresByFeedId: Record<string, Feature[]> = useMemo(() => {
-    const featuresByFeedIdd = {};
-    if (isStationDetails) {
-      return null;
-    }
-    (features || []).forEach((featuree) => {
-      const feedId = featuree.get("feed_id");
-      if (featuresByFeedIdd[feedId]) {
-        featuresByFeedIdd[feedId].push(featuree);
-      } else {
-        featuresByFeedIdd[feedId] = [featuree];
-      }
-    });
-    return featuresByFeedIdd;
-  }, [features, isStationDetails]);
-
-  return (
-    <ShadowOverflow {...props} className={twMerge("px-4 text-base", className)}>
-      <div className={"space-y-4"}>
-        {isStationDetails && (
-          <>
-            <img
-              alt="logo"
-              className="max-w-24"
-              src={PROVIDER_LOGOS_BY_FEED_ID[features[0]?.get("feed_id")]}
-            />
-            {features.length && isStationDetails && (
-              <StationDetails feature={features[0]} />
-            )}
-          </>
-        )}
-        {(isFloatingVehicle || isCluster) &&
-          featuresByFeedId &&
-          Object.entries(featuresByFeedId).map(([key, feats]) => {
-            return (
-              <Fragment key={key}>
-                <img
-                  alt="logo"
-                  className="max-w-24"
-                  src={PROVIDER_LOGOS_BY_FEED_ID[feats[0]?.get("feed_id")]}
-                />
-                <FloatingVehiclesDetails features={feats} />
-              </Fragment>
-            );
-          })}
-      </div>
-    </ShadowOverflow>
-  );
-}
-
-export default memo(RvfSharedMobilityDetails);

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/StationDetails.tsx

@@ -1,84 +0,0 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-import Link from "../../../ui/Link";
-import getLinkByDevice from "../../../utils/getLinkByDevice";
-import { fetchSharingStation } from "../../../utils/sharingGraphqlUtils";
-
-import type { Feature } from "ol";
-export interface StationDetailsProps {
-  feature: Feature;
-}
-
-function StationDetails({ feature }: StationDetailsProps) {
-  const [data, setData] = useState(null);
-  const link = useMemo(() => {
-    return getLinkByDevice(feature);
-  }, [feature]);
-
-  useEffect(() => {
-    const stationId = feature.get("station_id");
-    if (stationId) {
-      const fetchData = async () => {
-        const station = await fetchSharingStation(feature.get("station_id"));
-        setData(station);
-      };
-      void fetchData();
-    }
-  }, [feature]);
-
-  const hasVehicles = feature.get("num_vehicles_available") > 0;
-
-  return (
-    // <div className="flex flex-col gap-2">
-    //   {feature.get("num_vehicles_available")} Fahrzeuge
-    //   {link && (
-    //     <a
-    //       className={"my-10 flex items-center justify-center"}
-    //       href={link}
-    //       rel="noreferrer"
-    //       target="_blank"
-    //     >
-    //       <Button>Jetzt buchen</Button>
-    //     </a>
-    //   )}
-    // </div>
-    <div className="flex flex-1 flex-col gap-2">
-      <div className="flex flex-1 flex-col gap-2">
-        <div>{feature.get("num_vehicles_available") || 0} Fahrzeuge</div>
-        {hasVehicles && data?.vehicleTypesAvailable?.length && (
-          <div className="flex flex-1 flex-col">
-            <div className="text-grey">Fahrzeug mieten</div>
-            <ul className="list-disc pl-4">
-              {data?.vehicleTypesAvailable?.map(
-                ({ count, vehicleType: { id, name, vehicleImage } }) => {
-                  return (
-                    <li key={id}>
-                      <div className={"flex items-center gap-2"}>
-                        <span>{`${count} x ${name.translation[0].value}`}</span>
-
-                        {vehicleImage && (
-                          <img
-                            alt="vehicle"
-                            className={"w-12"}
-                            src={vehicleImage}
-                          />
-                        )}
-                      </div>
-                    </li>
-                  );
-                },
-              )}
-            </ul>
-          </div>
-        )}
-      </div>
-      {data?.vehicleTypesAvailable?.length > 0 && link && (
-        <div>
-          <Link href={link}>Jetzt buchen</Link>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default StationDetails;

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/StationDetails/index.tsx

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

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/index.tsx

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