@geops/rvf-mobility-web-component 0.1.59 → 0.1.61

package/src/MobilityMap/MobilityMap.tsx

@@ -1,34 +1,23 @@
 import { memo } from "preact/compat";
-import { useMemo, useRef, useState } from "preact/hooks";
-import { twMerge } from "tailwind-merge";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import BaseLayer from "../BaseLayer";
-import Copyright from "../Copyright";
-import EmbedNavigation from "../EmbedNavigation";
-import ExportMenuButton from "../ExportMenuButton";
 import FeaturesInfosListener from "../FeaturesInfosListener";
-import GeolocationButton from "../GeolocationButton";
-import LayerTreeButton from "../LayerTreeButton";
 import LayoutState from "../LayoutState";
 import LinesNetworkPlanLayer from "../LinesNetworkPlanLayer";
-import Map from "../Map";
 import MapDispatchEvents from "../MapDispatchEvents";
+import MapLayout from "../MapLayout";
 import NotificationsLayer from "../NotificationsLayer";
-import Overlay from "../Overlay";
-import OverlayContent from "../OverlayContent";
 import Permalink from "../Permalink";
 import RealtimeLayer from "../RealtimeLayer";
-import ScaleLine from "../ScaleLine";
-import Search from "../Search";
-import SearchButton from "../SearchButton";
-import ShareMenuButton from "../ShareMenuButton";
 import SingleClickListener from "../SingleClickListener";
 import StationsLayer from "../StationsLayer";
 import { I18nContext } from "../utils/hooks/useI18n";
+import useInitialLayersVisiblity from "../utils/hooks/useInitialLayersVisiblity";
+import useInitialPermalink from "../utils/hooks/useInitialPermalink";
 import { MapContext } from "../utils/hooks/useMapContext";
 import i18n from "../utils/i18n";
 import WindowMessageListener from "../WindowMessageListener";
-import ZoomButtons from "../ZoomButtons";
 
 import MobilityMapAttributes from "./MobilityMapAttributes";
 
@@ -60,10 +49,6 @@ export type MobilityMapProps = Record<
   null | string | undefined
 >;
 
-const scrollableHandlerProps = {
-  style: { width: "calc(100% - 60px)" },
-};
-
 function MobilityMap(props: MobilityMapProps) {
   const eventNodeRef = useRef<HTMLDivElement>();
   const [baseLayer, setBaseLayer] = useState<MaplibreLayer>();
@@ -111,6 +96,11 @@ function MobilityMap(props: MobilityMapProps) {
   const [previewNotifications, setPreviewNotifications] =
     useState<SituationType[]>();
 
+  const { lang, layers } = props;
+
+  // Apply initial visibility of layers
+  useInitialLayersVisiblity(map, layers);
+
   // Object representing all the web-component attributes and the map context values.
   const mapContextValue = useMemo(() => {
     return {
@@ -130,6 +120,7 @@ function MobilityMap(props: MobilityMapProps) {
       hasRealtime,
       hasSearch,
       hasShare,
+      hasStations,
       hasToolbar,
       isEmbed,
       isExportMenuOpen,
@@ -195,6 +186,7 @@ function MobilityMap(props: MobilityMapProps) {
     featuresInfos,
     featuresInfosHovered,
     hasDetails,
+    hasStations,
     hasGeolocation,
     hasLayerTree,
     hasLnp,
@@ -228,6 +220,10 @@ function MobilityMap(props: MobilityMapProps) {
     trainId,
   ]);
 
+  useEffect(() => {
+    i18n.locale(lang);
+  }, [lang]);
+
   return (
     <I18nContext.Provider value={i18n}>
       {/* There is a bug in tailwindcss@4 , variables are not imported in the shadow dom
@@ -304,124 +300,7 @@ function MobilityMap(props: MobilityMapProps) {
           className="@container/main relative size-full border font-sans"
           ref={eventNodeRef}
         >
-          <div className="relative flex size-full flex-col @lg/main:flex-row-reverse">
-            <Map className="relative flex-1 overflow-visible">
-              <EmbedNavigation />
-
-              <div className="absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2 text-[10px]">
-                <ScaleLine className="bg-slate-50/70" />
-                <Copyright className="bg-slate-50/70" />
-              </div>
-
-              <div className="absolute right-2 bottom-10 z-10 flex flex-col justify-between gap-2">
-                <ZoomButtons />
-              </div>
-
-              {hasGeolocation && (
-                <div className="absolute top-2 right-2 z-10 flex flex-col gap-2">
-                  <GeolocationButton />
-                </div>
-              )}
-
-              {!hasToolbar && hasSearch && (
-                <div className="absolute top-2 right-12 left-2 z-10 flex max-h-[90%] max-w-96 min-w-64 flex-col">
-                  <Search />
-                </div>
-              )}
-            </Map>
-
-            <div className="pointer-events-none absolute top-2 bottom-2 left-2 z-10 flex flex-col gap-2 *:pointer-events-auto">
-              <div
-                className={
-                  "relative z-10 w-fit rounded-2xl bg-black/10 p-0 backdrop-blur-sm"
-                }
-              >
-                {hasToolbar && (
-                  <div
-                    className={twMerge(
-                      "border-grey relative z-10 flex gap-[1px] overflow-hidden rounded-2xl border",
-                      "*:size-[46px] *:rounded-none *:border-none",
-                      "*:first:!rounded-l-2xl",
-                      "*:last:!rounded-r-2xl",
-                      isSearchOpen
-                        ? "@sm:rounded-r-none @sm:border-r-0 @sm:*:last:!rounded-r-none @sm:*:last:border-r-0"
-                        : "",
-                    )}
-                  >
-                    {hasPrint && <ExportMenuButton title={"Drucken"} />}
-                    {hasShare && <ShareMenuButton title={"Share"} />}
-                    {hasLayerTree && <LayerTreeButton title={"Layers"} />}
-                    {hasSearch && <SearchButton title={"Suche"} />}
-                  </div>
-                )}
-
-                {hasToolbar && hasSearch && (
-                  <div
-                    className={twMerge(
-                      "absolute top-14 left-0 z-5 h-[48px] w-0 p-0 opacity-0 transition-all @sm:top-0 @sm:left-[calc(100%-47px)]",
-                      isSearchOpen ? "w-64 opacity-100" : "",
-                    )}
-                  >
-                    <Search
-                      className={
-                        "border-grey @container m-0 h-[40px] gap-4 rounded-2xl border p-2 px-4 text-base @sm/main:h-[48px] @sm/main:rounded-l-none @sm/main:rounded-r-2xl"
-                      }
-                      // inputClassName="h-6 text-base"
-                      inputContainerClassName="border-none"
-                      resultClassName="text-base  **:hover:cursor-pointer p-2"
-                      resultsContainerClassName="@container rounded-b-2xl max-h-[200px] overflow-y-auto border border-t-0 "
-                      withResultsClassName="text-base !rounded-b-none"
-                    />
-                  </div>
-                )}
-              </div>
-
-              {/* Desktop (>= lg) */}
-              {isOverlayOpen && (
-                <div
-                  className={twMerge(
-                    "flex w-0 flex-1 flex-col overflow-hidden rounded-2xl @lg:min-w-64",
-                  )}
-                  style={{ containerType: "normal" }}
-                >
-                  <Overlay
-                    className={
-                      "border-grey @container/overlay pointer-events-auto relative hidden flex-col overflow-hidden rounded-2xl border bg-white text-base shadow-lg @lg:flex"
-                    }
-                    ScrollableHandlerProps={scrollableHandlerProps}
-                  >
-                    <OverlayContent
-                      hasDetails={hasDetails}
-                      hasLayerTree={hasLayerTree}
-                      hasPrint={hasPrint}
-                      hasRealtime={hasRealtime}
-                      hasSearch={false}
-                      hasShare={hasShare}
-                    />
-                  </Overlay>
-                </div>
-              )}
-            </div>
-
-            {/* Mobile (< lg) */}
-            {isOverlayOpen && (
-              <Overlay
-                className={
-                  "absolute bottom-0 z-20 flex max-h-[70%] min-h-[75px] w-full flex-col border-t bg-white @lg:hidden"
-                }
-                ScrollableHandlerProps={scrollableHandlerProps}
-              >
-                <OverlayContent
-                  hasDetails={hasDetails}
-                  hasLayerTree={hasLayerTree}
-                  hasPrint={hasPrint}
-                  hasRealtime={hasRealtime}
-                  hasSearch={false}
-                  hasShare={hasShare}
-                />
-              </Overlay>
-            )}
-          </div>
+          <MapLayout />
         </div>
       </MapContext.Provider>
     </I18nContext.Provider>
@@ -429,13 +308,20 @@ function MobilityMap(props: MobilityMapProps) {
 }
 
 // We creates a wrapper to inject the default props values from MobilityMapAttributes.
-const defaultProps = {};
+const defaultProps: Partial<MobilityMapProps> = {};
 Object.entries(MobilityMapAttributes).forEach(([key]) => {
   defaultProps[key] = MobilityMapAttributes[key].defaultValue || null;
 });
 
 function MobilityMapWithDefaultProps(props: MobilityMapProps) {
-  return <MobilityMap {...defaultProps} {...props} />;
+  // Apply initial value from permalink, only x,y,z
+  const { permalinktemplate } = props;
+  const { permalinktemplate: defaultPermalinkTemplate } = defaultProps;
+  const propsFromPermalink = useInitialPermalink(
+    permalinktemplate || defaultPermalinkTemplate,
+  );
+
+  return <MobilityMap {...defaultProps} {...propsFromPermalink} {...props} />;
 }
 
 export default memo(MobilityMapWithDefaultProps);

package/src/MobilityMap/MobilityMapAttributes.ts

@@ -29,6 +29,7 @@ export type MobilityMapAttributeName =
   | "embed"
   | "extent"
   | "geolocation"
+  | "lang"
   | "layers"
   | "layersconfig"
   | "layertree"
@@ -45,6 +46,7 @@ export type MobilityMapAttributeName =
   | "notificationtenant"
   | "notificationurl"
   | "permalink"
+  | "permalinktemplate"
   | "print"
   | "queryablelayers"
   | "realtime"
@@ -99,6 +101,11 @@ const attrs: MobilityMapAttributes = {
     description: "Toggle the display of the geolocation button or not.",
     type: "boolean",
   },
+  lang: {
+    defaultValue: "de",
+    description: null,
+    // "The language to use for the map. Supported languages are : de, en, fr, it.",
+  },
   layers: {
     defaultValue: null,
     description: `A comma separated list of layers's name to make visible on load, others are hidden. If empty, all layers will be hidden except the baselayer.<br/>Layers available are ${Object.values(LAYERS_NAMES).join(", ")}.`,
@@ -141,7 +148,7 @@ where:
   },
   mainlink: {
     description:
-      "A link displayed on bottom left of the map.  The link can be template, for example  you can use {{x}} {{y}} {{z}} to insert the current position of the map in the url.<br/>Ex: http://mywebsite/mypage#{{x}}/{{y}}/{{z}}.",
+      "A link displayed on bottom left of the map.  The link can be a template, for example  you can use {{x}} {{y}} {{z}} to insert the current position of the map in the url.<br/>Ex: http://mywebsite/mypage#map/{{x}}/{{y}}/{{z}}.",
   },
   mainlinktitle: {
     description: "A title for the mainlink, used as tooltip.",
@@ -184,10 +191,15 @@ where:
   },
   permalink: {
     defaultValue: "false",
-    description:
-      "Update some url parameters x,y,z,layers to the current window location. These parameters are used to store the current state of the map. They will be used on page load to configure the web-component.",
+    description: null, //"Update some url parameters x,y,z,layers to the current window location. These parameters are used to store the current state of the map. They will be used on page load to configure the web-component.",
     type: "boolean",
   },
+  permalinktemplate: {
+    defaultValue: "#map/{{x}}/{{y}}/{{z}}",
+    description: `A template string to read the current browser url. Hash (starting with #) and URL search parameters (starting with ?) are supported.<br/>
+     The template supports {{x}}, {{y}}, {{z}} variables.<br/> 
+     Ex: "?x={{x}}&y={{y}}&z={{z}}" or "#map/{{x}}/{{y}}/{{z}}" .`,
+  },
   print: {
     defaultValue: "true",
     description: "Show/hide the print button in the toolbar.",

package/src/NotificationDetails/NotificationDetails.tsx

@@ -361,6 +361,7 @@ function NotificationDetails({
                     <Warning />
                   </span>
                   <span
+                    className={"*:inline"}
                     dangerouslySetInnerHTML={{
                       __html: textualContent?.summary,
                     }}
@@ -390,12 +391,26 @@ function NotificationDetails({
                         key={startTime}
                       >
                         <span>
-                          {`von ${toShortDate(new Date(startTime), !hasDailyTime, !isStartCurrentYear)}`}
-                          {!isEndInfinite &&
-                            ` bis ${toShortDate(new Date(endTime), !hasDailyTime, !isEndCurrentYear)}`}
+                          {t("from_to", {
+                            from: toShortDate(
+                              new Date(startTime),
+                              !hasDailyTime,
+                              !isStartCurrentYear,
+                            ),
+                            to: !isEndInfinite
+                              ? toShortDate(
+                                  new Date(endTime),
+                                  !hasDailyTime,
+                                  !isEndCurrentYear,
+                                )
+                              : undefined,
+                          })}
                         </span>
                         {hasDailyTime && (
-                          <span>{` (täglich von ${dailyStartTime} bis ${dailyEndTime})`}</span>
+                          <span>{` (${t("daily_from_to", {
+                            from: dailyStartTime,
+                            to: dailyEndTime,
+                          })})`}</span>
                         )}
                       </div>
                     );
@@ -405,13 +420,13 @@ function NotificationDetails({
                   className="mt-4"
                   dangerouslySetInnerHTML={{
                     __html:
-                      textualContent?.description || "Keine Details verfügbar",
+                      textualContent?.description || t("no_details_available"),
                   }}
                 />
                 {!!pubLines?.length && (
                   <div>
                     <br />
-                    <div className={"font-bold"}>Betroffene Lines:</div>
+                    <div className={"font-bold"}>{t("affected_lines")}:</div>
                     <div className={"flex flex-wrap gap-1 text-sm"}>
                       {pubLines?.map((name) => {
                         return (
@@ -430,7 +445,7 @@ function NotificationDetails({
                 )}
                 <div>
                   <br />
-                  <div className={"font-bold"}>Betroffene Haltestellen:</div>
+                  <div className={"font-bold"}>{t("affected_stops")}:</div>
                   <div className={"flex flex-wrap gap-1 text-sm"}>
                     {stations?.length ? (
                       stations.map((name) => {
@@ -451,7 +466,7 @@ function NotificationDetails({
                           "rounded-md bg-black px-2 py-1 font-bold text-white"
                         }
                       >
-                        Alle Bahnhöfe auf dieser Strecke
+                        {t("all_line_stops")}
                       </div>
                     )}
                   </div>

package/src/OverlayContent/OverlayContent.tsx

@@ -6,6 +6,7 @@ import OverlayDetails from "../OverlayDetails";
 import OverlayHeader from "../OverlayHeader";
 import Search from "../Search";
 import ShareMenu from "../ShareMenu";
+import useI18n from "../utils/hooks/useI18n";
 import useMapContext from "../utils/hooks/useMapContext";
 
 const contentClassName = `relative h-full overflow-x-hidden overflow-y-auto text-base bg-white`;
@@ -34,6 +35,7 @@ function OverlayContent({
     setIsLayerTreeOpen,
     setIsShareMenuOpen,
   } = useMapContext();
+  const { t } = useI18n();
 
   return (
     <>
@@ -44,7 +46,7 @@ function OverlayContent({
             onClose={() => {
               setIsExportMenuOpen(false);
             }}
-            title={"Print"}
+            title={t("print_menu_title")}
           ></OverlayHeader>
           <ExportMenu
             className={twMerge(contentClassName, "flex flex-col gap-4 p-4")}
@@ -57,7 +59,7 @@ function OverlayContent({
             onClose={() => {
               setIsLayerTreeOpen(false);
             }}
-            title={"Layers"}
+            title={t("layertree_menu_title")}
           ></OverlayHeader>
           <LayerTreeMenu
             className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-2 text-base *:not-last:border-b"
@@ -71,7 +73,7 @@ function OverlayContent({
             onClose={() => {
               setIsShareMenuOpen(false);
             }}
-            title="Share"
+            title={t("share_menu_title")}
           ></OverlayHeader>
           <ShareMenu className="h-full overflow-x-hidden overflow-y-auto p-4 text-base" />
         </>

package/src/OverlayDetails/OverlayDetails.tsx

@@ -11,8 +11,17 @@ import useMapContext from "../utils/hooks/useMapContext";
  * in the Overlay component.
  */
 function OverlayDetails() {
-  const { featuresInfos, selectedFeature, setSelectedFeature } =
-    useMapContext();
+  const {
+    featuresInfos,
+    realtimeLayer,
+    selectedFeature,
+    setSelectedFeature,
+    setStationId,
+    setTrainId,
+    stationId,
+    stationsLayer,
+    trainId,
+  } = useMapContext();
 
   const featuresInfo = useMemo(() => {
     return featuresInfos?.find((featureInfo) => {
@@ -20,27 +29,36 @@ function OverlayDetails() {
     });
   }, [featuresInfos, selectedFeature]);
 
-  if (!selectedFeature) {
-    return null;
-  }
+  const layer = useMemo(() => {
+    if (featuresInfo?.layer) {
+      return featuresInfo.layer;
+    }
+    if (trainId) {
+      return realtimeLayer;
+    }
+    if (stationId) {
+      return stationsLayer;
+    }
+    return undefined;
+  }, [featuresInfo?.layer, realtimeLayer, stationId, stationsLayer, trainId]);
+
   return (
     <>
       <OverlayDetailsHeader
         feature={selectedFeature}
-        layer={featuresInfo?.layer}
+        layer={layer}
         onClose={() => {
           setSelectedFeature(null);
+          setTrainId(null);
+          setStationId(null);
         }}
       />
       <FeatureDetails
         feature={selectedFeature}
         featuresInfo={featuresInfo}
-        layer={featuresInfo?.layer}
-      />
-      <OverlayDetailsFooter
-        feature={selectedFeature}
-        layer={featuresInfo?.layer}
+        layer={layer}
       />
+      <OverlayDetailsFooter feature={selectedFeature} layer={layer} />
     </>
   );
 }

package/src/OverlayDetailsHeader/OverlayDetailsHeader.tsx

@@ -1,7 +1,8 @@
-import { memo, useMemo } from "preact/compat";
+import { memo } from "preact/compat";
 
 import OverlayHeader from "../OverlayHeader";
-import { LAYERS_NAMES, LAYERS_TITLES } from "../utils/constants";
+import useI18n from "../utils/hooks/useI18n";
+import useLayerConfig from "../utils/hooks/useLayerConfig";
 
 import type { Feature } from "ol";
 import type BaseLayer from "ol/layer/Base";
@@ -19,17 +20,13 @@ function OverlayDetailsHeader({
   layer,
   ...props
 }: OverlayDetailsHeaderProps) {
-  const title = useMemo(() => {
-    let ttle = layer?.get("title");
-    if (!ttle) {
-      const key = Object.keys(LAYERS_TITLES).find((titleKey) => {
-        return LAYERS_NAMES[titleKey] === layer?.get("name");
-      });
-      ttle = LAYERS_TITLES[key];
-    }
-    return ttle || layer?.get("name") || "Details";
-  }, [layer]);
-
-  return <OverlayHeader title={title} {...props}></OverlayHeader>;
+  const { t } = useI18n();
+  const layerConfig = useLayerConfig(layer?.get("name"));
+  return (
+    <OverlayHeader
+      title={t(layerConfig?.title || "")}
+      {...props}
+    ></OverlayHeader>
+  );
 }
 export default memo(OverlayDetailsHeader);

package/src/Permalink/Permalink.tsx

@@ -4,8 +4,8 @@ import { unByKey } from "ol/Observable";
 import { memo } from "preact/compat";
 import { useCallback, useEffect } from "preact/hooks";
 
+import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
 import getPermalinkParameters from "../utils/getPermalinkParameters";
-// import { LAYER_PROP_IS_EXPORTING } from "../constants";
 // import getLayersAsFlatArray from "../getLayersAsFlatArray";
 import useMapContext from "../utils/hooks/useMapContext";
 
@@ -23,9 +23,9 @@ const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
   const updatePermalink = useCallback(
     (currentMap: Map) => {
       // No update when exporting
-      // if (map.get(LAYER_PROP_IS_EXPORTING)) {
-      //   return;
-      // }
+      if (map.get(LAYER_PROP_IS_EXPORTING)) {
+        return;
+      }
       const currentUrlParams = new URLSearchParams(window.location.search);
       const urlParams = getPermalinkParameters(currentMap, currentUrlParams);
       urlParams.set("permalink", "true");
@@ -34,7 +34,7 @@ const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
         window.history.replaceState(null, null, `?${urlParams.toString()}`);
       }
     },
-    [replaceState, setPermalinkUrlSearchParams],
+    [map, replaceState, setPermalinkUrlSearchParams],
   );
 
   useEffect(() => {

package/src/PermalinkInput/PermalinkInput.tsx

@@ -1,4 +1,7 @@
+import { memo } from "preact/compat";
+
 import InputCopy from "../ui/InputCopy";
+import useI18n from "../utils/hooks/useI18n";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
@@ -15,14 +18,13 @@ function PermalinkInput({
   inputProps = emptyProps,
   ...props
 }: PermalinkInputProps) {
+  const { t } = useI18n();
   return (
     <div {...props}>
       <InputCopy value={window?.location.href} {...inputProps} />
-      <p className="py-2">
-        Sie können auch den Link aus der Adresszeile des Browsers kopieren.
-      </p>
+      <p className="py-2">{t("permalink_input_hint")}</p>
     </div>
   );
 }
 
-export default PermalinkInput;
+export default memo(PermalinkInput);

package/src/RealtimeLayer/RealtimeLayer.tsx

@@ -184,15 +184,16 @@ function RealtimeLayer(props: Partial<RealtimeLayerOptions>) {
     };
   }, [isFollowing, map, layer, stopSequence, setIsTracking]);
 
-  useEffect(() => {
-    if (trainId) {
-      // No animation, it's nicer for the user.
-      const center = layer?.trajectories?.[trainId]?.properties?.coordinate;
-      if (center) {
-        map.getView().setCenter(center);
-      }
-    }
-  }, [map, trainId, layer]);
+  // DO NOT CENTER ON THE TRAIN
+  // useEffect(() => {
+  //   if (trainId) {
+  //     // No animation, it's nicer for the user.
+  //     const center = layer?.trajectories?.[trainId]?.properties?.coordinate;
+  //     if (center) {
+  //       map.getView().setCenter(center);
+  //     }
+  //   }
+  // }, [map, trainId, layer]);
 
   // Ask the station using the stationId to the Realtime API.
   useEffect(() => {

package/src/RouteScheduleFooter/RouteScheduleFooter.tsx

@@ -25,7 +25,7 @@ function RouteScheduleFooter() {
 
   return (
     <>
-      <div className="m-4 mb-0 flex flex-wrap text-sm text-gray-500">
+      <div className="m-4 mb-0 flex flex-wrap text-xs text-gray-500">
         {stopSequence.operator &&
           defaultRenderLink(stopSequence.operator, stopSequence.operatorUrl)}
         {stopSequence.operator && stopSequence.publisher && <span> - </span>}