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

package/src/RvfLayerTree/RvfLayerTree.tsx

@@ -1,40 +0,0 @@
-import { memo } from "preact/compat";
-import { useEffect, useReducer } from "preact/hooks";
-
-import {
-  LayersTreeContext,
-  LayersTreeDispatchContext,
-} from "./layersTreeContext";
-import layersTreeReducer from "./layersTreeReducer";
-import TreeItem from "./TreeItem/TreeItem";
-
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import type { TreeItemProps } from "./TreeItem/TreeItem";
-
-export type RvfLayerTreeProps = {
-  layers: TreeItemProps[];
-} & JSX.HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function RvfLayerTree({ layers, ...props }: RvfLayerTreeProps) {
-  const [tree, dispatch] = useReducer(layersTreeReducer, layers);
-
-  useEffect(() => {
-    dispatch({ payload: layers, type: "INIT" });
-  }, [layers]);
-
-  return (
-    <LayersTreeContext.Provider value={tree}>
-      <LayersTreeDispatchContext.Provider value={dispatch}>
-        <div {...props}>
-          {layers.map((item) => {
-            return <TreeItem className="w-full" key={item.id} {...item} />;
-          })}
-        </div>
-      </LayersTreeDispatchContext.Provider>
-    </LayersTreeContext.Provider>
-  );
-}
-
-export default memo(RvfLayerTree);

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -1,145 +0,0 @@
-import { useContext, useEffect, useId, useState } from "preact/compat";
-
-import ArrowDown from "../../icons/ArrowDown";
-import ArrowUp from "../../icons/ArrowUp";
-import minusGrey from "../../icons/Minus/minus-grey.svg";
-import RvfCheckbox from "../../RvfCheckbox";
-import RvfRadioButton from "../../RvfRadioButton";
-import { LayersTreeDispatchContext } from "../layersTreeContext";
-
-import type BaseLayer from "ol/layer/Base";
-import type { JSX, PreactDOMAttributes } from "preact";
-import type { SVGProps } from "preact/compat";
-
-export enum SelectionType {
-  CHECKBOX = "checkbox",
-  RADIO = "radio",
-}
-
-export type TreeItemProps = {
-  childItems: TreeItemProps[];
-  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
-  id: string;
-  isCollapsedOnControlClick?: boolean;
-  isControlChecked?: boolean;
-  layer?: BaseLayer;
-  onIconClick?: () => void;
-  selectionType: SelectionType;
-  title: string;
-} & JSX.HTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes;
-
-function TreeItem({
-  childItems,
-  isCollapsedOnControlClick,
-  isControlChecked,
-  layer,
-  selectionType,
-  title,
-}: TreeItemProps) {
-  const [isContainerVisible, setIsContainerVisible] = useState(true);
-  const dispatch = useContext(LayersTreeDispatchContext);
-  const inputId = useId();
-  const buttonId = useId();
-
-  useEffect(() => {
-    if (isCollapsedOnControlClick) {
-      setIsContainerVisible(isControlChecked);
-    }
-  }, [isControlChecked, isCollapsedOnControlClick, layer]);
-
-  const handleItemClick = () => {
-    setIsContainerVisible(!isContainerVisible);
-
-    if (isCollapsedOnControlClick && !isContainerVisible) {
-      dispatch({
-        payload: {
-          ...this.props,
-          isControlChecked: true,
-        },
-        type: "SELECT_ITEM",
-      });
-    }
-  };
-
-  const handleSelectionChange = (event) => {
-    dispatch({
-      payload: {
-        ...this.props,
-        isControlChecked: event.target.checked,
-      },
-      type: "SELECT_ITEM",
-    });
-  };
-
-  const renderedLayers = childItems
-    .filter(({ title: titlee }) => {
-      return !!titlee;
-    })
-    .map((item, idx) => {
-      return <TreeItem key={idx} {...item} />;
-    });
-
-  if (!title) {
-    return null;
-  }
-
-  const isMiddleState = () => {
-    if (childItems.length > 0) {
-      const checkedItems = childItems.filter((item) => {
-        return item.isControlChecked;
-      });
-      if (checkedItems.length === childItems.length) {
-        return false;
-      }
-
-      return childItems.some((item) => {
-        return item.isControlChecked;
-      });
-    }
-
-    return false;
-  };
-
-  return (
-    <div>
-      <div className="flex items-center gap-2 border-b py-2 pr-1">
-        {selectionType === SelectionType.RADIO ? (
-          <RvfRadioButton
-            checked={isControlChecked}
-            id={inputId}
-            onChange={handleSelectionChange}
-          />
-        ) : (
-          <RvfCheckbox
-            checked={isControlChecked}
-            checkedIconUrl={isMiddleState() ? minusGrey : null}
-            className={isMiddleState() ? "bg-[length:18px]" : ""}
-            id={inputId}
-            onChange={handleSelectionChange}
-          />
-        )}
-        <label
-          className={`flex-1 cursor-pointer`}
-          htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
-        >
-          {title}
-        </label>
-        {renderedLayers.length > 0 && (
-          <button
-            className={`flex cursor-pointer items-center gap-2`}
-            id={buttonId}
-            onClick={handleItemClick}
-          >
-            {isContainerVisible ? <ArrowUp /> : <ArrowDown />}
-          </button>
-        )}
-      </div>
-      {isContainerVisible && renderedLayers.length > 0 && (
-        <div className="pl-6">{renderedLayers}</div>
-      )}
-    </div>
-  );
-}
-
-export default TreeItem;

package/src/RvfLayerTree/TreeItem/index.tsx

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

package/src/RvfLayerTree/index.tsx

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

package/src/RvfLayerTree/layersTreeContext.ts

@@ -1,4 +0,0 @@
-import { createContext } from "preact";
-
-export const LayersTreeContext = createContext(null);
-export const LayersTreeDispatchContext = createContext(null);

package/src/RvfLayerTree/layersTreeReducer.ts

@@ -1,158 +0,0 @@
-import { SelectionType } from "./TreeItem/TreeItem";
-
-const ROOT = {
-  childItems: [],
-  parent: null,
-};
-
-const mapNode = (childItems, parent) => {
-  for (const child of childItems) {
-    child.parent = parent;
-
-    if (child.childItems.length) {
-      mapNode(child.childItems, child);
-    }
-  }
-};
-
-const initTree = (tree) => {
-  const initializedTree = { ...ROOT };
-  initializedTree.childItems = tree;
-  mapNode(initializedTree.childItems, initializedTree);
-
-  return initializedTree;
-};
-
-const findNodeInTree = (node, nodeToFind) => {
-  if (node.id === nodeToFind.id) {
-    return node;
-  }
-
-  if (node.childItems.length) {
-    for (const child of node.childItems) {
-      const res = findNodeInTree(child, nodeToFind);
-      if (res) {
-        return res;
-      }
-    }
-  }
-};
-
-const updateCheckedControlStatus = (currentItem, newItem, isParentUpdate) => {
-  if (newItem.isControlChecked) {
-    if (newItem.selectionType === SelectionType.CHECKBOX) {
-      currentItem.isControlChecked = newItem.isControlChecked;
-      currentItem.layer.setVisible(currentItem.isControlChecked);
-    } else {
-      for (const child of currentItem.parent.childItems) {
-        child.isControlChecked = child.id === currentItem.id;
-
-        if (!child.isControlChecked) {
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          updateRadioChildNodes(child);
-        }
-      }
-    }
-  } else {
-    if (newItem.selectionType === SelectionType.CHECKBOX) {
-      currentItem.isControlChecked = newItem.isControlChecked;
-      currentItem.layer.setVisible(currentItem.isControlChecked);
-    }
-  }
-
-  // check all children
-  if (currentItem.childItems.length && !isParentUpdate) {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    updateChildNodes(currentItem);
-  }
-
-  // check all parents
-  // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  updateParentNodes(currentItem);
-};
-
-const setNewControlCheckedStatus = (tree, newItem) => {
-  const currentItem = findNodeInTree(tree, newItem);
-
-  if (currentItem) {
-    updateCheckedControlStatus(currentItem, newItem, false);
-  }
-
-  return { ...tree };
-};
-
-const updateChildNodes = (node) => {
-  if (node.childItems[0].selectionType === SelectionType.RADIO) {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    updateRadioChildNodes(node);
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    updateCheckboxChildNodes(node);
-  }
-};
-
-const updateRadioChildNodes = (parent) => {
-  if (parent.isControlChecked) {
-    for (let i = 0; i < parent.childItems.length; i++) {
-      parent.childItems[i].isControlChecked = i === 0;
-    }
-  } else {
-    for (const child of parent.childItems) {
-      child.isControlChecked = false;
-    }
-  }
-
-  if (parent.childItems.length) {
-    if (parent.childItems[0].childItems.length) {
-      updateChildNodes(parent.childItems[0]);
-    }
-  }
-};
-
-const updateCheckboxChildNodes = (parent) => {
-  for (const child of parent.childItems) {
-    child.isControlChecked = parent.isControlChecked;
-    child.layer.setVisible(child.isControlChecked);
-
-    if (child.childItems.length) {
-      updateChildNodes(child);
-    }
-  }
-};
-
-const updateParentNodes = (node) => {
-  if (node.parent) {
-    if (node.parent.selectionType === SelectionType.CHECKBOX) {
-      const newItem = {
-        ...node.parent,
-        isControlChecked: node.parent.childItems.some((child) => {
-          return child.isControlChecked;
-        }),
-      };
-      updateCheckedControlStatus(node.parent, newItem, true);
-    } else {
-      if (node?.parent?.parent) {
-        const newItem = {
-          ...node.parent,
-          isControlChecked: node.parent.childItems.some((child) => {
-            return child.isControlChecked;
-          }),
-        };
-        updateCheckedControlStatus(node.parent, newItem, true);
-      }
-    }
-  }
-};
-
-function layersTreeReducer(state = ROOT, action) {
-  switch (action.type) {
-    case "INIT":
-      return initTree(action.payload);
-    case "SELECT_ITEM":
-      return setNewControlCheckedStatus(state, action.payload);
-    default:
-      return state;
-  }
-}
-
-export default layersTreeReducer;

package/src/RvfOverlayContent/RvfOverlayContent.tsx

@@ -1,128 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-import RouteSchedule from "../RouteSchedule";
-import RvfExportMenu from "../RvfExportMenu";
-import RvfFeatureDetails from "../RvfFeatureDetails";
-import RvfFeatureDetailsFooter from "../RvfFeatureDetailsFooter";
-import RvfFeatureDetailsTitle from "../RvfFeatureDetailsTitle/RvfFeatureDetailsTitle";
-import RvfOverlayHeader from "../RvfOverlayHeader";
-import RvfShare from "../RvfShare";
-import RvfTopics from "../RvfTopics";
-import Search from "../Search";
-import Station from "../Station";
-import { LAYERS_TITLES } from "../utils/constants";
-import useMapContext from "../utils/hooks/useMapContext";
-import useRvfContext from "../utils/hooks/useRvfContext";
-
-const contentClassName = `relative h-full overflow-x-hidden overflow-y-auto text-base`;
-
-function RvfOverlayContent({
-  hasDetails,
-  hasLayerTree,
-  hasPrint,
-  hasRealtime,
-  hasSearch,
-  hasShare,
-}: {
-  hasDetails: boolean;
-  hasLayerTree: boolean;
-  hasPrint: boolean;
-  hasRealtime: boolean;
-  hasSearch: boolean;
-  hasShare: boolean;
-}) {
-  const {
-    isExportMenuOpen,
-    isLayerTreeOpen,
-    isSearchOpen,
-    isShareMenuOpen,
-    selectedFeature,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsShareMenuOpen,
-    setSelectedFeature,
-  } = useRvfContext();
-  const { setStationId, setTrainId, stationId, tenant, trainId } =
-    useMapContext();
-  return (
-    <>
-      {hasRealtime && trainId && (
-        <>
-          <RvfOverlayHeader
-            onClose={() => {
-              setTrainId(null);
-            }}
-            title={LAYERS_TITLES.echtzeit}
-          ></RvfOverlayHeader>
-          <RouteSchedule className={contentClassName} />
-        </>
-      )}
-      {tenant && stationId && (
-        <>
-          <RvfOverlayHeader
-            onClose={() => {
-              setStationId(null);
-            }}
-            title="Station"
-          ></RvfOverlayHeader>
-          <Station className={twMerge(contentClassName, "flex flex-col p-2")} />
-        </>
-      )}
-      {hasDetails && selectedFeature && (
-        <>
-          <RvfOverlayHeader
-            onClose={() => {
-              setSelectedFeature(null);
-            }}
-            title={<RvfFeatureDetailsTitle feature={selectedFeature} />}
-          ></RvfOverlayHeader>
-          <RvfFeatureDetails
-            className={twMerge(contentClassName, "relative")}
-          />
-          <RvfFeatureDetailsFooter className={"flex flex-row p-4 pt-2"} />
-        </>
-      )}
-      {hasPrint && isExportMenuOpen && (
-        <>
-          <RvfOverlayHeader
-            onClose={() => {
-              setIsExportMenuOpen(false);
-            }}
-            title="Drucken"
-          ></RvfOverlayHeader>
-          <RvfExportMenu
-            className={twMerge(contentClassName, "flex flex-col gap-4 p-4")}
-          />
-        </>
-      )}
-      {hasLayerTree && isLayerTreeOpen && (
-        <>
-          <RvfOverlayHeader
-            onClose={() => {
-              setIsLayerTreeOpen(false);
-            }}
-            title="Layers"
-          ></RvfOverlayHeader>
-          <RvfTopics className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-2 text-base" />
-        </>
-      )}
-      {hasShare && isShareMenuOpen && (
-        <>
-          <RvfOverlayHeader
-            onClose={() => {
-              setIsShareMenuOpen(false);
-            }}
-            title="Share"
-          ></RvfOverlayHeader>
-          <RvfShare className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-4 text-base" />
-        </>
-      )}
-      {hasSearch && isSearchOpen && (
-        <>
-          <Search className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-2 text-base" />
-        </>
-      )}
-    </>
-  );
-}
-export default RvfOverlayContent;

package/src/utils/hooks/useUpdatePermalink.tsx

@@ -1,76 +0,0 @@
-import debounce from "lodash.debounce";
-import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
-import { unByKey } from "ol/Observable";
-import { useEffect } from "preact/hooks";
-
-import { LAYER_PROP_IS_EXPORTING } from "../constants";
-import getPermalinkParameters from "../getPermalinkParameters";
-import MobilityEvent from "../MobilityEvent";
-
-import type { Map } from "ol";
-import type { EventsKey } from "ol/events";
-import type { MutableRef } from "preact/hooks";
-
-const updatePermalink = (
-  map: Map,
-  eventNodeRef: MutableRef<HTMLDivElement>,
-) => {
-  // No update when exporting
-  if (map.get(LAYER_PROP_IS_EXPORTING)) {
-    return;
-  }
-  const currentUrlParams = new URLSearchParams(window.location.search);
-  const urlParams = getPermalinkParameters(map, currentUrlParams);
-  urlParams.set("permalink", "true");
-  window.history.replaceState(null, null, `?${urlParams.toString()}`);
-  eventNodeRef?.current?.dispatchEvent(
-    new MobilityEvent<string>("mwc:permalink", window.location.href),
-  );
-};
-
-const updatePermalinkDebounced = debounce(updatePermalink, 1000);
-
-/**
- * This hook only update parameters in the url, it does not apply the url parameters.
- */
-const useUpdatePermalink = (
-  map: Map,
-  permalink: boolean,
-  eventNodeRef: MutableRef<HTMLDivElement>,
-) => {
-  useEffect(() => {
-    let moveEndKey: EventsKey;
-    let loadEndKey: EventsKey;
-    let changeVisibleKeys: EventsKey[];
-
-    if (map && permalink) {
-      updatePermalinkDebounced(map);
-
-      // Update x,y,z in URL on moveend
-      moveEndKey = map?.on("moveend", (evt) => {
-        updatePermalinkDebounced(evt.map, eventNodeRef);
-      });
-
-      // Update layers in URL on change:visible event
-      loadEndKey = map.once("loadend", (evt) => {
-        updatePermalinkDebounced(evt.map, eventNodeRef);
-        changeVisibleKeys = getLayersAsFlatArray(
-          evt.map.getLayers().getArray(),
-        ).map((layer) => {
-          return layer.on("change:visible", () => {
-            updatePermalinkDebounced(evt.map, eventNodeRef);
-          });
-        });
-      });
-    }
-
-    return () => {
-      unByKey(moveEndKey);
-      unByKey(loadEndKey);
-      unByKey(changeVisibleKeys);
-    };
-  }, [map, permalink, eventNodeRef]);
-  return null;
-};
-
-export default useUpdatePermalink;