@geops/rvf-mobility-web-component 0.1.45 → 0.1.47-beta.0

package/src/RvfFeatureDetails/RvfNotificationDetails/RvfNotificationDetails.tsx

@@ -1,9 +1,12 @@
-import { Feature } from "ol";
-
 // import RvfLink from "../../RvfLink";
 // import { icons } from "../../utils/addSourceAndLayers";
+import Button from "../../ui/Button";
+import { LAYER_NAME_NOTIFICATION } from "../../utils/constants";
 import getBgColor from "../../utils/getBgColor";
 import useI18n from "../../utils/hooks/useI18n";
+import useLayerConfig from "../../utils/hooks/useLayerConfig";
+
+import type { Feature } from "ol";
 
 const toShortDate = (date, showTime) => {
   const time = date.toLocaleTimeString(["de"], {
@@ -29,11 +32,15 @@ fetch("https://tralis-tracker-api.geops.io/api/lines/rvf/")
   })
   .then((data) => {
     rvfLines = data;
+  })
+  .catch((err) => {
+    // eslint-disable-next-line no-console
+    console.error("Failed to fetch RVF lines", err);
   });
 const getLine = (name) => {
   if (rvfLines) {
-    const line = rvfLines.find((line) => {
-      return line.name === name;
+    const line = rvfLines.find((linee) => {
+      return linee.name === name;
     });
     if (line) {
       return line;
@@ -46,12 +53,16 @@ const getLine = (name) => {
 // html = converter.makeHtml(text);
 function RvfNotificationDetails({ feature }: { feature: Feature }) {
   const { t } = useI18n();
+  const layerConfig = useLayerConfig(LAYER_NAME_NOTIFICATION);
 
   const {
     affected_products: affectedProducts,
     affected_time_intervals: timeIntervals,
     consequence_de: consequence,
     description_de: descriptionDe,
+    // title,
+    disruption_type: disruptionType,
+    publications,
     // disruption_type: disruptionType,
     // duration_text_de: durationText,
     // links,
@@ -59,7 +70,6 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
     reason_de: reason,
     recommendation_de: recommendation,
     summary_de: summary,
-    // title,
   } = feature.getProperties();
 
   // "title_de": "",
@@ -118,117 +128,149 @@ function RvfNotificationDetails({ feature }: { feature: Feature }) {
   } catch (e) {
     console.error(e);
   }
-  return (
-    // <div className={"flex gap-2 text-sm"}>
-    //   <div className="min-w-8 shrink-0 grow-0">
-    //     <img
-    //       alt={disruptionType}
-    //       className={"w-8"}
-    //       src={icons[disruptionType]}
-    //     ></img>
-    //   </div>
-    <div className={"flex flex-col gap-2 text-sm"}>
-      {/* <div className="text-base font-bold">{title}</div> */}
-      {!!products?.length && (
-        <div className="flex flex-wrap  gap-2">
-          {products?.map(({ name }) => {
-            const line = getLine(name);
+
+  // moco export v1
+  if (disruptionType) {
+    return (
+      // <div className={"flex gap-2 text-sm"}>
+      //   <div className="min-w-8 shrink-0 grow-0">
+      //     <img
+      //       alt={disruptionType}
+      //       className={"w-8"}
+      //       src={icons[disruptionType]}
+      //     ></img>
+      //   </div>
+      <div className={"flex flex-col gap-2 text-sm"}>
+        {/* <div className="text-base font-bold">{title}</div> */}
+        {!!products?.length && (
+          <div className="flex flex-wrap gap-2">
+            {products?.map(({ name }) => {
+              const line = getLine(name);
+              return (
+                <>
+                  <div
+                    className={
+                      "bg-red w-fit rounded-md px-[12px] py-[9px] leading-none font-bold text-white"
+                    }
+                    key={name}
+                    style={{
+                      backgroundColor: getBgColor(line.mot, line),
+                    }}
+                  >
+                    {name}
+                  </div>
+                </>
+              );
+            })}
+          </div>
+        )}
+        <div className="text-base font-bold">
+          {!!start && !end && `ab${toShortDate(new Date(start), true)}`}
+          {!start && !!end && `bis${toShortDate(new Date(end), true)}`}
+          {!!start &&
+            !!end &&
+            `${toShortDate(new Date(start), true)} - ${toShortDate(new Date(end), true)}`}
+        </div>
+        <div className={"flex flex-col gap-2"}>
+          <p className={"text-base"}>{summary}</p>
+          <p className={"text-base"}>{descriptionDe}</p>
+
+          {[
+            {
+              content: recommendation,
+              label: "recommendation",
+            },
+            {
+              content: reason,
+              label: "reason",
+            },
+            {
+              content: consequence,
+              label: "consequence",
+            },
+          ].map((item) => {
+            if (!item.content) {
+              return null;
+            }
             return (
-              <>
-                <div
-                  className={
-                    "w-fit rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
-                  }
-                  key={name}
-                  style={{
-                    backgroundColor: getBgColor(line.mot, line),
-                  }}
-                >
-                  {name}
-                </div>
-              </>
+              <div key={item.content}>
+                {!!item.label && <p className="font-bold">{t(item.label)}:</p>}
+                <p>{item.content}</p>
+              </div>
             );
           })}
         </div>
-      )}
-      <div className="text-base font-bold">
-        {!!start && !end && "ab" + toShortDate(new Date(start), true)}
-        {!start && !!end && "bis" + toShortDate(new Date(end), true)}
-        {!!start &&
-          !!end &&
-          `${toShortDate(new Date(start), true)} - ${toShortDate(new Date(end), true)}`}
       </div>
-      <div className={"flex flex-col gap-2"}>
-        <p className={"text-base"}>{summary}</p>
-        <p className={"text-base"}>{descriptionDe}</p>
+      // </div>
+      // <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_de: label, uri }) => {
+      //     return (
+      //       <RvfLink href={uri} key={uri}>
+      //         {label}
+      //       </RvfLink>
+      //     );
+      //   })}
+      // {!!products?.length && (
+      //   <>
+      //     <div className={"font-bold"}>Betroffene 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>
+    );
+  }
 
-        {[
-          {
-            content: recommendation,
-            label: "recommendation",
-          },
-          {
-            content: reason,
-            label: "reason",
-          },
-          {
-            content: consequence,
-            label: "consequence",
-          },
-        ].map((item) => {
-          if (!item.content) {
-            return null;
-          }
-          return (
-            <div key={item.content}>
-              {!!item.label && <p className="font-bold">{t(item.label)}:</p>}
-              <p>{item.content}</p>
-            </div>
-          );
-        })}
-      </div>
+  // moco export v2
+  // const textuatlContent = {};
+  try {
+    const publicationsObj = JSON.parse(publications);
+    console.log(publicationsObj);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error("Failed to parse publications", e);
+  }
+  return (
+    <div className="text-base">
+      <p> Keine Details verfügbar</p>
+
+      {layerConfig.link && (
+        <div className={"flex"}>
+          <Button
+            className={"text-base"}
+            href={layerConfig.link.href.replace("{{id}}", feature.get("id"))}
+            target="_blank"
+            theme="primary"
+          >
+            {layerConfig.link.text || "Mehr erfahren"}
+          </Button>
+        </div>
+      )}
     </div>
-    // </div>
-    // <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_de: label, uri }) => {
-    //     return (
-    //       <RvfLink href={uri} key={uri}>
-    //         {label}
-    //       </RvfLink>
-    //     );
-    //   })}
-    // {!!products?.length && (
-    //   <>
-    //     <div className={"font-bold"}>Betroffene 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>
   );
 }
 

package/src/RvfFeatureDetails/RvfSellingPointDetails/RvfSellingPointDetails.tsx

@@ -1,9 +1,9 @@
-import { Feature } from "ol";
-
 import Automat from "../../icons/Automat";
 import InPerson from "../../icons/InPerson";
 import Video from "../../icons/Video";
 
+import type { Feature } from "ol";
+
 const ICON_BY_OPERATED_BY = {
   Automat: <Automat />,
   Persönlich: <InPerson />,

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

@@ -1,9 +1,9 @@
-import { Feature } from "ol";
-
 import RvfLink from "../../../RvfLink";
 import { PROVIDER_BY_FEED_ID } from "../../../utils/constants";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
 
+import type { Feature } from "ol";
+
 export interface FloatingVehiclesDetailsProps {
   features: Feature[];
 }
@@ -53,7 +53,7 @@ function FloatingVehiclesDetails({ features }: FloatingVehiclesDetailsProps) {
 
   return (
     <div className="flex flex-1 flex-col gap-2">
-      <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>

package/src/RvfFeatureDetails/RvfSharedMobilityDetail/RvfSharedMobilityDetails.tsx

@@ -1,11 +1,13 @@
-import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";
 
 import { PROVIDER_LOGOS_BY_FEED_ID } from "../../utils/constants";
+
 import FloatingVehiclesDetails from "./FloatingVehiclesDetails";
 import StationDetails from "./StationDetails";
 
+import type { Feature } from "ol";
+
 export interface RvfSharedMobilityDetailsProps {
   selectedFeature: Feature;
 }
@@ -27,19 +29,19 @@ function RvfSharedMobilityDetails({
   }, [selectedFeature, isFloatingVehicle, isCluster]);
 
   const featuresByFeedId: Record<string, Feature[]> = useMemo(() => {
-    const featuresByFeedId = {};
+    const featuresByFeedIdd = {};
     if (isStationDetails) {
       return null;
     }
     features.forEach((feature) => {
       const feedId = feature.get("feed_id");
-      if (featuresByFeedId[feedId]) {
-        featuresByFeedId[feedId].push(feature);
+      if (featuresByFeedIdd[feedId]) {
+        featuresByFeedIdd[feedId].push(feature);
       } else {
-        featuresByFeedId[feedId] = [feature];
+        featuresByFeedIdd[feedId] = [feature];
       }
     });
-    return featuresByFeedId;
+    return featuresByFeedIdd;
   }, [features, isStationDetails]);
 
   return (

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

@@ -1,9 +1,10 @@
-import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import RvfLink from "../../../RvfLink";
 import getLinkByDevice from "../../../utils/getLinkByDevice";
 import { fetchSharingStation } from "../../../utils/sharingGraphqlUtils";
+
+import type { Feature } from "ol";
 export interface StationDetailsProps {
   feature: Feature;
 }
@@ -21,7 +22,7 @@ function StationDetails({ feature }: StationDetailsProps) {
         const station = await fetchSharingStation(feature.get("station_id"));
         setData(station);
       };
-      fetchData();
+      void fetchData();
     }
   }, [feature]);
 
@@ -37,12 +38,12 @@ function StationDetails({ feature }: StationDetailsProps) {
     //       rel="noreferrer"
     //       target="_blank"
     //     >
-    //       <RvfButton>Jetzt buchen</RvfButton>
+    //       <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 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">

package/src/RvfFeatureDetailsTitle/RvfFeatureDetailsTitle.tsx

@@ -0,0 +1,81 @@
+import { icons } from "../utils/addSourceAndLayers";
+import {
+  RVF_LAYERS_NAMES,
+  RVF_LAYERS_TITLES,
+  TITLE_BY_CATEGORY,
+  TITLE_BY_FEED_ID,
+} from "../utils/constants";
+import useLayerConfig from "../utils/hooks/useLayerConfig";
+
+import type { Feature } from "ol";
+
+const defaultTitle = "Informations";
+
+function RvfFeatureDetailsTitle({ feature }: { feature: Feature }) {
+  const features = feature.get("features");
+  const selectedFeature = features?.[0] || feature;
+  const {
+    category,
+    condition_group: conditionGroup,
+    disruption_type: disruptionType,
+    feed_id: feedId,
+    line_id: lineId,
+    tickets,
+  } = selectedFeature.getProperties();
+  const layerConfigLinienNetz = useLayerConfig(RVF_LAYERS_NAMES.liniennetz);
+  const layerConfigMeldungen = useLayerConfig(RVF_LAYERS_NAMES.meldungen);
+
+  // moco export v1
+  if (disruptionType) {
+    return (
+      <div className={"flex items-center gap-2 text-sm"}>
+        <div className="min-w-8 shrink-0 grow-0">
+          <img
+            alt={disruptionType}
+            className={"w-8"}
+            src={icons[disruptionType] || icons.warning}
+          ></img>
+        </div>
+        <div className={"flex flex-col gap-2 text-base font-bold"}>
+          {layerConfigMeldungen.title}
+        </div>
+      </div>
+    );
+  }
+
+  // moco export v2
+  if (conditionGroup) {
+    return (
+      <div className={"flex items-center gap-2 text-sm"}>
+        {icons[conditionGroup] && (
+          <div className="min-w-8 shrink-0 grow-0">
+            <img
+              alt={conditionGroup}
+              className={"w-8"}
+              src={icons[conditionGroup] || icons.warning}
+            ></img>
+          </div>
+        )}
+        <div className={"flex flex-col gap-2 text-base font-bold"}>
+          {layerConfigMeldungen.title}
+        </div>
+      </div>
+    );
+  }
+  if (category) {
+    return TITLE_BY_CATEGORY[category] || defaultTitle;
+  }
+  if (feedId) {
+    return TITLE_BY_FEED_ID[feedId] || defaultTitle;
+  }
+
+  if (lineId) {
+    return layerConfigLinienNetz.title;
+  }
+  if (tickets) {
+    return RVF_LAYERS_TITLES.verkaufsstellen;
+  }
+  return defaultTitle;
+}
+
+export default RvfFeatureDetailsTitle;

package/src/RvfFeatureDetailsTitle/index.tsx

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

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -1,9 +1,9 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import ArrowDown from "../icons/ArrowDown";
 import ArrowUp from "../icons/ArrowUp";
 import useMapContext from "../utils/hooks/useMapContext";
 
+import type { JSX, PreactDOMAttributes } from "preact";
+
 export type RvfFloatingMenuProps = {
   isOpen: boolean;
   onClick: () => void;
@@ -23,8 +23,8 @@ function RvfFloatingMenu({
   }
 
   return (
-    <div className="pointer-events-none absolute bottom-8 left-2 top-2 z-10 flex flex-col overflow-hidden rounded-lg">
-      <div className="pointer-events-auto max-h-full w-48 rounded-lg border border-grey bg-white shadow-lg @lg/main:w-52">
+    <div className="pointer-events-none absolute top-2 bottom-8 left-2 z-10 flex flex-col overflow-hidden rounded-lg">
+      <div className="border-grey pointer-events-auto max-h-full w-48 rounded-lg border bg-white shadow-lg @lg/main:w-52">
         <button
           className="flex w-full items-center justify-between px-2 py-1.5 font-bold"
           onClick={onClick}

package/src/RvfGeolocationButton/GeolocationButton.tsx

@@ -0,0 +1,98 @@
+import { Feature, Geolocation } from "ol";
+import { Point } from "ol/geom";
+import VectorLayer from "ol/layer/Vector";
+import { unByKey } from "ol/Observable";
+import { fromLonLat } from "ol/proj";
+import VectorSource from "ol/source/Vector";
+import { Icon, Style } from "ol/style";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import GeolocationIcon from "../icons/Geolocation";
+import locationSvg from "../icons/Geolocation/location.svg";
+import IconButton from "../ui/IconButton";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { JSX, PreactDOMAttributes } from "preact";
+
+const point = new Point([0, 0]);
+const feature = new Feature(point);
+const layer = new VectorLayer({
+  source: new VectorSource({ features: [feature] }),
+  style: new Style({
+    image: new Icon({
+      anchor: [0.5, 1],
+      src: locationSvg,
+    }),
+  }),
+});
+
+export type GeolocationButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+const TRACKING_ZOOM = 16;
+
+function GeolocationButton({ ...props }: GeolocationButtonProps) {
+  const mapContext = useMapContext();
+  const { isTracking, map, setIsTracking } = mapContext;
+
+  const geolocation = useMemo(() => {
+    return new Geolocation();
+  }, []);
+
+  useEffect(() => {
+    let keys = [];
+    if (!map || !geolocation) {
+      return;
+    }
+    keys = [
+      // First time we zoom and center on the position
+      geolocation.once("change:position", (evt) => {
+        const position = evt.target.getPosition();
+        if (evt.target.getPosition()) {
+          const coord = fromLonLat(position, "EPSG:3857");
+          map.getView().setZoom(TRACKING_ZOOM);
+          map.getView().setCenter(coord);
+          point.setCoordinates(coord);
+        }
+      }),
+      // then we only center the map.
+      geolocation.on("change:position", (evt) => {
+        const position = evt.target.getPosition();
+        if (evt.target.getPosition()) {
+          const coord = fromLonLat(position, "EPSG:3857");
+          map.getView().setCenter(coord);
+          point.setCoordinates(coord);
+        }
+      }),
+    ];
+
+    return () => {
+      unByKey(keys);
+    };
+  }, [map, geolocation]);
+
+  useEffect(() => {
+    geolocation.setTracking(isTracking);
+    if (isTracking) {
+      layer.setMap(map);
+    }
+    return () => {
+      layer.setMap(null);
+    };
+  }, [map, geolocation, isTracking]);
+
+  return (
+    <IconButton
+      onClick={() => {
+        setIsTracking(!isTracking);
+      }}
+      selected={isTracking}
+      {...props}
+    >
+      <GeolocationIcon className={isTracking ? "animate-pulse" : ""} />
+    </IconButton>
+  );
+}
+
+export default memo(GeolocationButton);

package/src/RvfGeolocationButton/index.tsx

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