@geops/rvf-mobility-web-component 0.1.85 → 0.1.88

package/src/StopsSearch/StopsSearch.tsx

@@ -36,6 +36,7 @@ export type StopsSearchProps = {
   field?: string;
   inputClassName?: string;
   inputContainerClassName?: string;
+  lang?: string;
   limit?: number;
   mots?: string;
   onselect?: (arg: StopsFeature) => void;
@@ -70,6 +71,7 @@ function StopsSearch({
   field,
   inputClassName,
   inputContainerClassName,
+  lang,
   limit,
   mots,
   onselect,
@@ -97,6 +99,7 @@ function StopsSearch({
         countrycode,
         event,
         field,
+        lang,
         limit,
         mots,
         onselect,
@@ -119,6 +122,7 @@ function StopsSearch({
     prefagencies,
     reflocation,
     url,
+    lang,
   ]);
 
   const api: StopsAPI = useMemo(() => {
@@ -211,7 +215,7 @@ function StopsSearch({
 
   useEffect(() => {
     setResults(undefined);
-
+    console.log("StopsSearch selectedStation", selectedStation);
     if (selectedStation) {
       setQuery(getQueryForSelectedStation(selectedStation));
     }
@@ -320,6 +324,7 @@ function StopsSearch({
                     <button
                       className="flex w-full items-center gap-3 text-left"
                       onClick={() => {
+                        console.log("StopsSearch selected station", station);
                         setSelectedStation(station);
                       }}
                     >

package/src/icons/Warning/exported_features_20251029101203.kml

@@ -14,4 +14,7 @@
 - add a tool to select an area by bbox -> 1d
 - add a tool to select an area by "Frei Skizze" -> 1d
 - use the area drawn to recalculate the "KM von" and "KM bis" of all Linien -> 3h
-- 
+- add a button in the popup to send information to the window.opener (both window must have the same origin) -> 3h
+
+
+https://trenord-mobility-web-component.vercel.app/?permalink=true&notification=false&search=false&realtime=false&geolocation=false&queryablelayers=notifications&details=false&toolbar=false&lnp=true&layers=stations,notifications,linesnetworkplan&fullscreen=true

package/src/ui/Input/Input.tsx

@@ -1,17 +1,24 @@
+import { forwardRef } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
 import type { InputHTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type InputProps = { className?: string } & InputHTMLAttributes &
+export type InputProps = {
+  className?: string;
+  focusOnFirstRender?: boolean;
+} & InputHTMLAttributes &
   PreactDOMAttributes;
 
-function Input({ className, ...props }: InputProps) {
-  return (
-    <input
-      {...props}
-      className={twMerge("p-2 text-sm read-only:text-gray-400", className)}
-    />
-  );
-}
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        {...props}
+        className={twMerge("p-2 text-sm read-only:text-gray-400", className)}
+      />
+    );
+  },
+);
 
 export default Input;

package/src/ui/InputSearch/InputSearch.tsx

@@ -54,7 +54,7 @@ function InputSearch({
     <>
       <div
         className={twMerge(
-          "flex h-16 items-center gap-4 rounded-md bg-white p-4 pt-3.5 shadow",
+          "flex h-12 items-center gap-1 rounded-md bg-white p-3 shadow",
           className,
           withResultsClassName,
         )}
@@ -70,7 +70,7 @@ function InputSearch({
         </div>
         <div
           className={twMerge(
-            "@container/inputsearch flex grow items-center gap-2 border-b-2 border-solid",
+            "@container/inputsearch relative flex grow items-center gap-2 border-b-2 border-solid",
             inputContainerClassName,
           )}
         >
@@ -79,6 +79,7 @@ function InputSearch({
             className={twMerge(
               "h-8 w-1 grow overflow-hidden text-ellipsis placeholder:text-zinc-400",
               inputClassName,
+              inputProps?.value ? "pr-4" : "",
             )}
             type="text"
             {...(inputProps || {})}
@@ -86,7 +87,7 @@ function InputSearch({
           {!!inputProps.value && (
             <IconButton
               className={twMerge(
-                "flex size-4 items-center rounded-none border-none bg-transparent p-0 shadow-none",
+                "absolute right-0 flex h-full w-6 items-center rounded-none border-none bg-transparent p-0 px-1 shadow-none",
                 cancelButtonClassName,
               )}
               title={t("search_input_cancel")}

package/src/utils/hooks/useFit.tsx

@@ -5,10 +5,7 @@ import { useEffect, useRef } from "preact/hooks";
 
 import useFitOnFeatures from "./useFitOnFeatures";
 
-import type {
-  RealtimeRouteIdentifierMatch,
-  RealtimeTrainDetail,
-} from "mobility-toolbox-js/types";
+import type { RealtimeRouteIdentifierMatch } from "mobility-toolbox-js/types";
 import type { GeoJSONFeature } from "ol/format/GeoJSON";
 
 import type { LnpLineInfo, LnpStopInfo } from "./useLnp";
@@ -20,7 +17,6 @@ export type FitObject =
   | LnpLineInfo
   | LnpStopInfo
   | RealtimeRouteIdentifierMatch
-  | RealtimeTrainDetail
   | StopsFeature;
 
 function useFit() {
@@ -36,17 +32,9 @@ function useFit() {
         fitOnFeatures.current([obj as GeoJSONFeature], willOverlayOpen);
         return;
       }
-      let extent =
-        (obj as LnpLineInfo)?.extent || (obj as RealtimeTrainDetail)?.bounds;
-
-      if ((obj as RealtimeRouteIdentifierMatch)?.trains?.length) {
-        extent = (obj as RealtimeRouteIdentifierMatch).trains[0].bounds as [
-          number,
-          number,
-          number,
-          number,
-        ];
-      }
+      const extent =
+        (obj as LnpLineInfo)?.extent ||
+        (obj as RealtimeRouteIdentifierMatch)?.bounds;
 
       if (extent) {
         const feature = new Feature(fromExtent(extent));

package/src/utils/hooks/useI18n.tsx

@@ -1,9 +1,10 @@
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-import type { Rosetta } from "rosetta";
-
-export type I18NContextType = Rosetta<Record<string, string>>;
+export interface I18NContextType {
+  locale(lang?: string): string;
+  t: (id: string, templateValues?: Record<string, string>) => string;
+}
 
 export const I18nContext = createContext<I18NContextType>({
   t: (id: string, templateValues?: Record<string, string>) => {

package/src/utils/hooks/useMocoSituation.tsx

@@ -9,7 +9,7 @@ import type {
 } from "mobility-toolbox-js/types";
 
 function useMocoSituation(situationId?: string, params?: MocoExportParameters) {
-  const { lang, notificationsLayer } = useMapContext();
+  const { lang, notificationsLayer, previewNotifications } = useMapContext();
   const [situation, setSituation] = useState<SituationType>();
 
   const api: MocoAPI | undefined = useMemo(() => {
@@ -17,6 +17,14 @@ function useMocoSituation(situationId?: string, params?: MocoExportParameters) {
   }, [notificationsLayer]);
 
   useEffect(() => {
+    const previewSituation = previewNotifications?.find((item) => {
+      return item.id === situationId;
+    });
+    if (previewSituation) {
+      setSituation(previewSituation);
+      return;
+    }
+
     const abortController = new AbortController();
     api
       ?.exportById(situationId, {
@@ -46,7 +54,7 @@ function useMocoSituation(situationId?: string, params?: MocoExportParameters) {
     return () => {
       abortController.abort();
     };
-  }, [api, situationId, params, lang]);
+  }, [api, situationId, params, lang, previewNotifications]);
 
   return situation;
 }

package/src/utils/hooks/useRealtimeTrainsByRouteIdentifier.tsx

@@ -1,15 +1,16 @@
 import { RealtimeRestAPI } from "mobility-toolbox-js/ol";
-import { type RealtimeTrainDetail } from "mobility-toolbox-js/types";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
 import useMapContext from "./useMapContext";
 
+import type { RealtimeRouteIdentifierMatch } from "mobility-toolbox-js/types";
+
 function useRealtimeTrainByRouteIdentifier(
   routeIdentifier: string,
-): RealtimeTrainDetail {
+): RealtimeRouteIdentifierMatch | undefined {
   const { apikey, hasRealtime, realtimeresturl, realtimetenant, tenant } =
     useMapContext();
-  const [train, setTrain] = useState<RealtimeTrainDetail>();
+  const [train, setTrain] = useState<RealtimeRouteIdentifierMatch>();
 
   const tenantMemo = useMemo(() => {
     return realtimetenant || tenant;
@@ -43,7 +44,7 @@ function useRealtimeTrainByRouteIdentifier(
       )
       .then((res) => {
         if (res.matches.length > 0) {
-          setTrain(res.matches[0].trains[0]);
+          setTrain(res.matches[0]);
         } else {
           setTrain(undefined);
         }

package/src/utils/translations.ts

@@ -35,7 +35,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Meldungen",
     [LAYERS_NAMES.pois]: "POIs",
     [LAYERS_NAMES.realtime]: "Echtzeit",
-    [LAYERS_NAMES.sharedMobility]: "Shared Mobility",
+    [LAYERS_NAMES.sharedMobility]: "Shared-Angebote",
     [LAYERS_NAMES.stations]: "Stationen",
     [LAYERS_NAMES.tarifzonen]: "Tarifzonen",
     [LAYERS_NAMES.verkaufsstellen]: "Verkaufsstellen",
@@ -62,7 +62,7 @@ const translations: Translations = {
     share_email_send: "E-Mail senden",
     share_image_save: "Bild speichern",
     share_menu_title: "Teilen",
-    stops_search_placeholder: "Haltestellen suchen",
+    stops_search_placeholder: "Haltestelle suchen",
     zoomin: "Hineinzoomen",
     zoomout: "Herauszoomen",
   },
@@ -97,7 +97,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Notifications",
     [LAYERS_NAMES.pois]: "POIs",
     [LAYERS_NAMES.realtime]: "Realtime",
-    [LAYERS_NAMES.sharedMobility]: "Shared Mobility",
+    [LAYERS_NAMES.sharedMobility]: "Mobility offers",
     [LAYERS_NAMES.stations]: "Stations",
     [LAYERS_NAMES.tarifzonen]: "Tariff Zones",
     [LAYERS_NAMES.verkaufsstellen]: "Sales Outlets",
@@ -155,7 +155,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Notifications",
     [LAYERS_NAMES.pois]: "POIs",
     [LAYERS_NAMES.realtime]: "Temps réel",
-    [LAYERS_NAMES.sharedMobility]: "Mobilité partagée",
+    [LAYERS_NAMES.sharedMobility]: "Offres de mobilité",
     [LAYERS_NAMES.stations]: "Stations",
     [LAYERS_NAMES.tarifzonen]: "Zones tarifaires",
     [LAYERS_NAMES.verkaufsstellen]: "Points de vente",
@@ -213,7 +213,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Notifiche",
     [LAYERS_NAMES.pois]: "POI",
     [LAYERS_NAMES.realtime]: "In tempo reale",
-    [LAYERS_NAMES.sharedMobility]: "Mobilità condivisa",
+    [LAYERS_NAMES.sharedMobility]: "Offerte Mobility",
     [LAYERS_NAMES.stations]: "Stazioni",
     [LAYERS_NAMES.tarifzonen]: "Zone tariffarie",
     [LAYERS_NAMES.verkaufsstellen]: "Punti vendita",

package/src/utils/i18n.ts

@@ -1,7 +0,0 @@
-import rosetta from "rosetta";
-
-import translations from "./translations";
-
-const i18n = rosetta(translations);
-
-export default i18n;