@geops/rvf-mobility-web-component 0.1.60 → 0.1.62

package/src/SituationDetails/SituationDetails.tsx

@@ -0,0 +1,324 @@
+import {
+  type AffectedTimeIntervalType,
+  type PublicationType,
+  type SituationType,
+  type TextualContentType,
+} from "mobility-toolbox-js/types";
+import { memo } from "preact/compat";
+import { useState } from "preact/hooks";
+import { twMerge } from "tailwind-merge";
+
+import ArrowDown from "../icons/ArrowDown";
+import ArrowUp from "../icons/ArrowUp";
+import Warning from "../icons/Warning";
+import Link from "../ui/Link";
+import useI18n from "../utils/hooks/useI18n";
+
+import type { MultilingualTextualContentType } from "mobility-toolbox-js/types";
+
+const toShortDate = (
+  date: Date,
+  showTime?: boolean,
+  showYear?: boolean,
+  useShortMonth = true,
+) => {
+  const time = date.toLocaleTimeString(["de"], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  const dateString = date.toLocaleDateString(["de"], {
+    day: "2-digit",
+    month: useShortMonth ? "short" : "long",
+    // weekday: "short",
+    year: showYear ? "numeric" : undefined,
+  });
+
+  return `${dateString}${showTime && !!time ? ` ${time}` : ""}`.replace(
+    ",",
+    "",
+  );
+};
+
+function SituationDetails({
+  canToggle = false,
+  headerClassName,
+  iconClassName,
+  publicationClassName,
+  reasonClassName,
+  situation,
+  timeIntervalClassName,
+  useShortMonth = true,
+}: {
+  canToggle?: boolean;
+  headerClassName?: string;
+  iconClassName?: string;
+  publicationClassName?: string;
+  reasonClassName?: string;
+  situation?: Partial<SituationType>;
+  timeIntervalClassName?: string;
+  useShortMonth?: boolean;
+}) {
+  const { locale, t } = useI18n();
+  const [isOpen, setIsOpen] = useState(!canToggle);
+
+  if (!situation) {
+    return null;
+  }
+
+  // moco export v2
+  let textualContentMultilingual: Partial<MultilingualTextualContentType> = {};
+  let textualContent: Partial<TextualContentType> = {};
+  let timeIntervalsToDisplay = [];
+  let publicationsToDisplay: PublicationType[] = [];
+  let reasonsToDisplay: string[] = [];
+
+  const publicationsArr: PublicationType[] = situation?.publications || [];
+
+  // Find the current publication(s) at the current date
+  publicationsToDisplay =
+    publicationsArr?.filter(({ publicationWindows }) => {
+      return publicationWindows.find(({ endTime, startTime }) => {
+        const now = new Date();
+        const startT = new Date(startTime);
+        const endT = new Date(endTime);
+        return startT <= now && now <= endT;
+      });
+    }) || [];
+
+  // Display the current and next affected time intervals not the one in the past
+  timeIntervalsToDisplay =
+    (situation?.affectedTimeIntervals || []).filter(
+      ({ endTime, startTime }) => {
+        const now = new Date();
+        const startT = new Date(startTime);
+        const endT = new Date(endTime);
+        return (startT <= now && now <= endT) || now < startT;
+      },
+    ) || [];
+
+  // Display the reasons
+  reasonsToDisplay = (situation?.reasons || []).map(({ name }) => {
+    return name;
+  });
+
+  return (
+    <>
+      {publicationsToDisplay?.map(
+        ({
+          id,
+          publicationLines,
+          publicationStops,
+          textualContentLarge,
+          textualContentMedium,
+          textualContentSmall,
+        }) => {
+          // Get the textual content in German
+          textualContentMultilingual =
+            textualContentLarge || textualContentMedium || textualContentSmall;
+
+          textualContent = textualContentMultilingual?.[locale()];
+
+          // Fallback to default language if there is not title in the current language
+          if (!textualContent?.summary) {
+            textualContent = textualContentMultilingual?.de;
+          }
+
+          const pubLines =
+            publicationLines?.flatMap((publication) => {
+              return (
+                publication.lines?.map(({ name }) => {
+                  return name;
+                }) || []
+              );
+            }) || [];
+
+          const stations = publicationStops.map((publication) => {
+            return publication?.name || "";
+          });
+
+          return (
+            <div
+              className={twMerge("text-base", publicationClassName)}
+              key={id}
+            >
+              <div className={twMerge("text-xs uppercase", reasonClassName)}>
+                {reasonsToDisplay}
+              </div>
+              <h3
+                className={twMerge(
+                  "space-x-2 text-xl font-bold text-balance",
+                  headerClassName,
+                )}
+              >
+                <span className={"line-height-[1.3] inline-block align-middle"}>
+                  <Warning className={twMerge(iconClassName)} />
+                </span>
+                <span
+                  className={"*:inline"}
+                  dangerouslySetInnerHTML={{
+                    __html: textualContent?.summary,
+                  }}
+                ></span>
+              </h3>
+              <hr className="my-1" />
+
+              {timeIntervalsToDisplay?.map(
+                (
+                  {
+                    dailyEndTime,
+                    dailyStartTime,
+                    endTime,
+                    startTime,
+                  }: AffectedTimeIntervalType,
+                  index,
+                ) => {
+                  const hasDailyTime = dailyEndTime && dailyStartTime;
+                  // const isStartCurrentYear =
+                  //   new Date().getFullYear() ===
+                  //   new Date(startTime).getFullYear();
+                  // const isEndCurrentYear =
+                  //   new Date().getFullYear() ===
+                  //   new Date(endTime).getFullYear();
+                  const isEndInfinite = endTime.includes("2500");
+
+                  const from = toShortDate(
+                    new Date(startTime),
+                    false,
+                    true,
+                    useShortMonth,
+                  );
+                  const to = !isEndInfinite
+                    ? toShortDate(new Date(endTime), false, true, useShortMonth)
+                    : undefined;
+
+                  return (
+                    <button
+                      className={twMerge(
+                        "flex w-full items-center",
+                        canToggle && "cursor-pointer",
+                      )}
+                      key={startTime}
+                      onClick={() => {
+                        setIsOpen(!isOpen);
+                      }}
+                      tabIndex={canToggle ? 0 : -1}
+                    >
+                      <div
+                        className={twMerge(
+                          "flex-1 text-left text-sm font-bold text-balance",
+                          timeIntervalClassName,
+                        )}
+                        key={startTime}
+                      >
+                        <span>
+                          {from && to ? `${from} - ${to}` : null}
+                          {from && !to ? t("from", { from }) : null}
+                        </span>
+                        {hasDailyTime && (
+                          <span>{` (${t("daily_from_to", {
+                            from: dailyStartTime,
+                            to: dailyEndTime,
+                          })})`}</span>
+                        )}
+                      </div>
+                      {canToggle && index == 0 && (
+                        <>
+                          {isOpen ? (
+                            <ArrowUp className="text-red" />
+                          ) : (
+                            <ArrowDown className="text-red" />
+                          )}
+                        </>
+                      )}
+                    </button>
+                  );
+                },
+              )}
+              <div className={isOpen ? "my-4 flex flex-col gap-4" : "hidden"}>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html:
+                      textualContent?.description || t("no_details_available"),
+                  }}
+                />
+                {!!textualContentMultilingual?.images?.length && (
+                  <div className="flex flex-wrap gap-2">
+                    {textualContentMultilingual.images.map(
+                      ({ image: { absoluteUrl, label } }) => {
+                        return (
+                          <img
+                            alt={label}
+                            key={absoluteUrl + label}
+                            src={absoluteUrl}
+                            title={label}
+                          />
+                        );
+                      },
+                    )}
+                  </div>
+                )}
+                {!!textualContentMultilingual?.infoLinks?.length && (
+                  <div>
+                    {textualContentMultilingual.infoLinks.map(
+                      ({ label, uri }) => {
+                        const title = label[locale()] || label.de || uri;
+                        return (
+                          <Link href={uri} key={uri} title={title}>
+                            {title}
+                          </Link>
+                        );
+                      },
+                    )}
+                  </div>
+                )}
+
+                {!!pubLines?.length && (
+                  <div>
+                    <div className={"font-bold"}>{t("affected_lines")}:</div>
+                    <div className={"flex flex-wrap gap-1 text-sm"}>
+                      {pubLines?.map((name) => {
+                        return (
+                          <div
+                            className={
+                              "bg-red rounded-md px-2 py-1 font-bold text-white"
+                            }
+                            key={name}
+                          >
+                            {name}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {!!stations?.length && (
+                  <div>
+                    <div className={"font-bold"}>{t("affected_stops")}:</div>
+                    <div className={"flex flex-wrap gap-1 text-sm"}>
+                      {stations.map((name) => {
+                        return (
+                          <div
+                            className={
+                              "bg-red rounded-md px-2 py-1 font-bold text-white"
+                            }
+                            key={name}
+                          >
+                            {name}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+              {canToggle && <hr className="my-1" />}
+            </div>
+          );
+        },
+      )}
+    </>
+  );
+}
+
+export default memo(SituationDetails);

package/src/SituationDetails/index.ts

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

package/src/index.tsx

@@ -2,9 +2,13 @@ import register from "preact-custom-element";
 
 import MobilityMap from "./MobilityMap";
 import MobilityMapAttributes from "./MobilityMap/MobilityMapAttributes";
+import MobilityNotifications, {
+  MobilityNotificationsAttributes,
+} from "./MobilityNotifications";
 import MobilitySearch, { MobilitySearchAttributes } from "./MobilitySearch";
 
 import type { MobilityMapAttributeName } from "./MobilityMap/MobilityMapAttributes";
+import type { MobilityNotificationsAttributeName } from "./MobilityNotifications/MobilityNotificationsAttributes";
 import type { MobilitySearchAttributeName } from "./MobilitySearch/MobilitySearchAttributes";
 
 register(
@@ -26,3 +30,15 @@ register(
     shadow: true,
   },
 );
+
+register(
+  MobilityNotifications,
+  "geops-mobility-notifications",
+  Object.keys(
+    MobilityNotificationsAttributes,
+  ) as MobilityNotificationsAttributeName[],
+  {
+    mode: "open",
+    shadow: true,
+  },
+);

package/src/indexDoc.ts

@@ -1,13 +1,35 @@
 // This file contains what we need to build the documentation in the index.html file
 
 import MobilityMapAttributes from "./MobilityMap/MobilityMapAttributes";
+import MobilityMapEvents from "./MobilityMap/MobilityMapEvents";
+import MobilityNotificationsAttributes from "./MobilityNotifications/MobilityNotificationsAttributes";
 import MobilitySearchAttributes from "./MobilitySearch/MobilitySearchAttributes";
+import MobilitySearchEvents from "./MobilitySearch/MobilitySearchEvents";
+
+declare global {
+  interface Window {
+    MobilityMapAttributes?: typeof MobilityMapAttributes;
+    MobilityMapEvents?: typeof MobilityMapEvents;
+    MobilityNotificationsAttributes?: typeof MobilityNotificationsAttributes;
+    MobilitySearchAttributes?: typeof MobilitySearchAttributes;
+    MobilitySearchEvents?: typeof MobilitySearchEvents;
+  }
+}
 
 if (typeof window !== "undefined") {
-  // @ts-expect-error it's wanted
   window.MobilityMapAttributes = MobilityMapAttributes;
-  // @ts-expect-error it's wanted
+  window.MobilityMapEvents = MobilityMapEvents;
+
   window.MobilitySearchAttributes = MobilitySearchAttributes;
+  window.MobilitySearchEvents = MobilitySearchEvents;
+
+  window.MobilityNotificationsAttributes = MobilityNotificationsAttributes;
 }
 
-export default { MobilityMapAttributes, MobilitySearchAttributes };
+export default {
+  MobilityMapAttributes,
+  MobilityMapEvents,
+  MobilityNotificationsAttributes,
+  MobilitySearchAttributes,
+  MobilitySearchEvents,
+};

package/src/ui/Checkbox/Checkbox.tsx

@@ -5,12 +5,12 @@ import ok from "../../icons/Ok/ok-grey.svg";
 
 import type { InputHTMLAttributes } from "preact";
 
-export type RvfCheckboxProps = {
+export type CheckboxProps = {
   checkedIconUrl?: string;
   className?: string;
 } & InputHTMLAttributes;
 
-function Checkbox({ className, ...props }: RvfCheckboxProps) {
+function Checkbox({ className, ...props }: CheckboxProps) {
   const checkedIconUrl = props.checkedIconUrl || ok;
   return (
     <input

package/src/ui/Link/Link.tsx

@@ -0,0 +1,49 @@
+import { memo, useMemo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import ArrowUpRight from "../../icons/ArrowUpRight";
+
+import type { AnchorHTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type LinkProps = {
+  className?: string;
+  theme?: "primary" | "secondary";
+} & AnchorHTMLAttributes<HTMLAnchorElement> &
+  PreactDOMAttributes;
+
+const baseClasses =
+  "my-1 flex items-center leading-[1.1] underline text-[14px] @sm/main:text-[16px] @md/main:text-[18px] items-center justify-left font-semibold";
+
+export const themes = {
+  primary: {
+    classes:
+      "bg-red text-white disabled:bg-lightgrey  hover:bg-darkred hover:border-darkred  active:bg-lightred active:border-lightred ",
+    selectedClasses: "bg-darkred border-darkred",
+  },
+  secondary: {
+    classes: "bg-white text-black hover:text-red active:text-lightred",
+    selectedClasses: "text-red",
+  },
+};
+
+function Link({
+  children,
+  className,
+  theme = "secondary",
+  ...props
+}: LinkProps) {
+  const classes = useMemo(() => {
+    return twMerge(
+      `${baseClasses} ${themes[theme].classes}  ${className || ""}`,
+    );
+  }, [className, theme]);
+
+  return (
+    <a className={classes} rel="noreferrer" target="_blank" {...props}>
+      {children}
+      <ArrowUpRight />
+    </a>
+  );
+}
+
+export default memo(Link);

package/src/ui/Link/index.tsx

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

package/src/ui/Select/Select.tsx

@@ -2,12 +2,12 @@ import ArrowDown from "../../icons/ArrowDown";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type RvfSelectProps = {
+export type SelectProps = {
   className?: string;
 } & HTMLAttributes<HTMLSelectElement> &
   PreactDOMAttributes;
 
-function Select({ children, className, onChange }: RvfSelectProps) {
+function Select({ children, className, onChange }: SelectProps) {
   return (
     <div className="text-grey relative flex items-center">
       <select

package/src/utils/constants.ts

@@ -15,6 +15,7 @@ export const LAYER_NAME_REALTIME = "echtzeit";
 export const LAYER_NAME_STATIONS = "haltestellen";
 export const LAYER_NAME_NOTIFICATIONS = "meldungen";
 export const LAYER_NAME_LINESNETWORKPLAN = "liniennetz";
+export const LAYER_NAME_MAPSET = "mapset";
 
 export const RVF_EXTENT_4326 = [7.5, 47.7, 8.45, 48.4];
 
@@ -42,6 +43,7 @@ export const LAYERS_NAMES = {
   carOthers: "autoandere",
   eroller: "e-roller",
   linesnetworkplan: LAYER_NAME_LINESNETWORKPLAN,
+  mapset: LAYER_NAME_MAPSET,
   mitfahrpunkte: "mitfahrpunkte",
   notifications: LAYER_NAME_NOTIFICATIONS,
   pois: "pois",
@@ -57,6 +59,7 @@ export const DEFAULT_VISIBLE_LAYERS = Object.values(LAYERS_NAMES);
 export const DEFAULT_QUERYABLE_LAYERS = Object.values(LAYERS_NAMES).filter(
   (name) => {
     return ![
+      LAYERS_NAMES.mapset,
       LAYERS_NAMES.mitfahrpunkte,
       LAYERS_NAMES.pois,
       LAYERS_NAMES.stations,
@@ -65,6 +68,19 @@ export const DEFAULT_QUERYABLE_LAYERS = Object.values(LAYERS_NAMES).filter(
   },
 );
 
+// Order of the first level
+export const LAYER_TREE_ORDER = [
+  LAYER_NAME_NOTIFICATIONS,
+  LAYER_NAME_REALTIME,
+  LAYER_NAME_STATIONS,
+  LAYER_NAME_LINESNETWORKPLAN,
+  LAYERS_NAMES.tarifzonen,
+  LAYERS_NAMES.verkaufsstellen,
+  LAYERS_NAMES.pois,
+  LAYERS_NAMES.sharedMobility,
+  LAYER_NAME_MAPSET,
+];
+
 export const LAYERS_WITH_LINK = Object.values(LAYERS_NAMES).filter((name) => {
   return (
     name !== LAYERS_NAMES.tarifzonen &&
@@ -195,3 +211,24 @@ export const LINE_COLOR_BY_NAME = {
   "4": "#EA5297",
   "5": "#008BC5",
 };
+
+export const EXPORT_PREFIX = "rvf";
+
+// Lines network plans
+
+// The property used as identifier for a line, this id is used as key in the geops.lnp.lines metadata of the network plan source.
+// See https://maps.test.geops.io/data/network_plans_trenord.json style for an example.
+export const LNP_LINE_ID_PROP = "original_line_id";
+
+// LNP data source id in the style
+export const LNP_SOURCE_ID = "network_plans";
+
+// Metadata key in the lnp data source
+export const LNP_MD_LINES = "geops.lnp.lines";
+export const LNP_MD_STOPS = "geops.lnp.stops";
+
+// LNP style metadata filter to use to show/hide highlight
+export const LNP_GEOPS_FILTER_HIGHLIGHT = "highlightnetzplan";
+
+// LNP style layer id where the dynamic filtering will apply
+export const LNP_LAYER_ID_HIGHLIGHT = "netzplan_highlight_trip";

package/src/utils/exportPdf.ts

@@ -4,6 +4,8 @@ import { Map } from "ol";
 import { getBottomRight, getTopLeft } from "ol/extent";
 import View from "ol/View";
 
+import { EXPORT_PREFIX } from "./constants";
+
 import type { jsPDFOptions } from "jspdf";
 import type { Coordinate } from "ol/coordinate";
 import type { Extent } from "ol/extent";
@@ -654,7 +656,7 @@ async function exportPdf(
       doc.addImage(canvas, "JPEG", 0, 0, sizePt[0], sizePt[1]);
 
       // Download the pdf
-      doc.save(`rvf-${new Date().toISOString().slice(0, 10)}.pdf`);
+      doc.save(`${EXPORT_PREFIX}-${new Date().toISOString().slice(0, 10)}.pdf`);
     } catch (error) {
       console.error(error);
       return false;

package/src/utils/highlightLinesNetworkPlan.ts

@@ -0,0 +1,25 @@
+import { LNP_LAYER_ID_HIGHLIGHT, LNP_LINE_ID_PROP } from "./constants";
+
+import type { MaplibreLayer } from "mobility-toolbox-js/ol";
+
+function highlightLinesNetworkPlan(
+  ids: number[] | string[] = [0],
+  baseLayer: MaplibreLayer,
+) {
+  try {
+    const styleLayer = baseLayer?.mapLibreMap?.getLayer(LNP_LAYER_ID_HIGHLIGHT);
+    if (styleLayer) {
+      baseLayer?.mapLibreMap?.setFilter(styleLayer.id, [
+        "match",
+        ["get", LNP_LINE_ID_PROP],
+        ids,
+        true,
+        false,
+      ]);
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error("Error setting filter for highlight layer", e);
+  }
+}
+export default highlightLinesNetworkPlan;

package/src/utils/hooks/useI18n.tsx

@@ -1,12 +1,14 @@
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-export interface I18NContextType {
-  t: (id: string, templateValues?: Record<string, string>) => string;
-}
+import type { Rosetta } from "rosetta";
+
+import type { Translations } from "../translations";
+
+export type I18NContextType = Rosetta<Translations>;
 
 export const I18nContext = createContext({
-  t: (id, templateValues) => {
+  t: (id: string, templateValues?: Record<string, string>) => {
     return `${id} ${JSON.stringify(templateValues)}`;
   },
 } as I18NContextType);

package/src/utils/hooks/useInitialPermalink.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "preact/hooks";
+import { useMemo, useRef } from "preact/hooks";
 
 import type { MobilityMapProps } from "../../MobilityMap/MobilityMap";
 
@@ -9,6 +9,8 @@ import type { MobilityMapProps } from "../../MobilityMap/MobilityMap";
 const useInitialPermalink = (
   permalinktemplate: string,
 ): null | Partial<MobilityMapProps> => {
+  const prevProps = useRef<Partial<MobilityMapProps>>(null);
+
   const props = useMemo(() => {
     if (!permalinktemplate) {
       return null;
@@ -70,7 +72,12 @@ const useInitialPermalink = (
     return null;
   }, [permalinktemplate]);
 
-  return props;
+  // We want to apply the value from the url only once
+  if (!prevProps.current && props) {
+    prevProps.current = props;
+    return props;
+  }
+  return {};
 };
 
 export default useInitialPermalink;