@geops/rvf-mobility-web-component 0.1.10 → 0.1.12

package/src/RvfExportMenu/RvfExportMenu.tsx

@@ -0,0 +1,103 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, useId, useState } from "preact/compat";
+
+import Cancel from "../icons/Cancel";
+import RvfButton from "../RvfButton";
+import RvfCheckbox from "../RvfCheckbox";
+import RvfIconButton from "../RvfIconButton";
+import RvfSelect from "../RvfSelect";
+import exportPdf from "../utils/exportPdf";
+import useMapContext from "../utils/hooks/useMapContext";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+const formats = ["A4", "A1", "A3", "A0"];
+
+function RvfExportMenu({ ...props }: RvfExportMenuButtonProps) {
+  const { setIsExportMenuOpen } = useRvfContext();
+  const { map } = useMapContext();
+  const [useMaxExtent, setUseMaxExtent] = useState(false);
+  const [format, setFormat] = useState<string>(formats[0]);
+  const checkboxId = useId();
+  const selectId = useId();
+  const [isExporting, setIsExporting] = useState(false);
+  const [isExportingError, setIsExportingError] = useState(false);
+  return (
+    <div {...props}>
+      <div className={"flex h-full flex-col gap-2 p-2"}>
+        {/* <!-- Header --> */}
+        <div className={"flex flex-row items-center justify-between gap-2"}>
+          <h1>Export </h1>
+          <RvfIconButton
+            onClick={() => {
+              setIsExportMenuOpen(false);
+            }}
+          >
+            <Cancel />
+          </RvfIconButton>
+        </div>
+        {/* <!-- Content --> */}
+        <div className="flex flex-1 flex-col gap-2">
+          <div className={"flex items-center gap-2"}>
+            {/* <input
+              checked={useMaxExtent}
+              id={checkboxId}
+              onChange={() => {
+                setUseMaxExtent(!useMaxExtent);
+              }}
+              type="checkbox"
+            /> */}
+            <RvfCheckbox
+              checked={useMaxExtent}
+              id={checkboxId}
+              onChange={() => {
+                return setUseMaxExtent(!useMaxExtent);
+              }}
+            />
+            <label htmlFor={checkboxId}>Ganze Region exportieren</label>
+          </div>
+          <div className={"flex items-center gap-2"}>
+            <label htmlFor={selectId}>Format:</label>
+            <RvfSelect
+              className={"w-24"}
+              id={selectId}
+              onChange={(evt) => {
+                setFormat((evt.target as HTMLSelectElement).value);
+              }}
+            >
+              {formats.map((format) => {
+                return <option key={format}>{format}</option>;
+              })}
+            </RvfSelect>
+          </div>
+        </div>
+        {/* <!-- Footer --> */}
+        <div>
+          <RvfButton
+            disabled={isExporting}
+            onClick={async () => {
+              setIsExportingError(false);
+              setIsExporting(true);
+              const result = await exportPdf(map, { format }, { useMaxExtent });
+              setTimeout(() => {
+                setIsExporting(false);
+                setIsExportingError(!result);
+              }, 1000);
+            }}
+          >
+            {isExporting
+              ? "Exporting..."
+              : isExportingError
+                ? "Error"
+                : "Download"}
+          </RvfButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default memo(RvfExportMenu);

package/src/RvfExportMenu/index.tsx

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

package/src/RvfExportMenuButton/RvfExportMenuButton.tsx

@@ -0,0 +1,27 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
+import Download from "../icons/Download";
+import RvfIconButton from "../RvfIconButton";
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfExportMenuButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function RvfExportMenuButton({ ...props }: RvfExportMenuButtonProps) {
+  const { isExportMenuOpen, setIsExportMenuOpen } = useRvfContext();
+
+  const onClick = useCallback(() => {
+    setIsExportMenuOpen(!isExportMenuOpen);
+  }, [isExportMenuOpen, setIsExportMenuOpen]);
+
+  return (
+    <RvfIconButton {...props} onClick={onClick} selected={isExportMenuOpen}>
+      <Download />
+    </RvfIconButton>
+  );
+}
+
+export default memo(RvfExportMenuButton);

package/src/RvfExportMenuButton/index.tsx

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

package/src/RvfFeatureDetails/RvfFeatureDetails.tsx

@@ -0,0 +1,29 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo } from "preact/compat";
+
+import useRvfContext from "../utils/hooks/useRvfContext";
+
+export type RvfFeatureDetailsProps = JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfFeatureDetails(props: RvfFeatureDetailsProps) {
+  const { selectedFeature } = useRvfContext();
+
+  return (
+    <div {...props}>
+      {Object.entries(selectedFeature.getProperties()).map(([key, value]) => {
+        return (
+          <div className="flex gap-2" key={key}>
+            <span>
+              <b>{key}:</b>
+            </span>
+            <div>{value}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default memo(RvfFeatureDetails);

package/src/RvfFeatureDetails/index.tsx

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

package/src/RvfFloatingMenu/RvfFloatingMenu.tsx

@@ -0,0 +1,44 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import ArrowDown from "../icons/ArrowDown";
+import ArrowUp from "../icons/ArrowUp";
+import useMapContext from "../utils/hooks/useMapContext";
+
+export type RvfFloatingMenuProps = {
+  isOpen: boolean;
+  onClick: () => void;
+} & JSX.HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+function RvfFloatingMenu({
+  children,
+  isOpen,
+  onClick,
+  title,
+}: RvfFloatingMenuProps) {
+  const { map } = useMapContext();
+
+  if (!map) {
+    return null;
+  }
+
+  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 rounded-lg border bg-white shadow-lg medium:w-largeMenu large:w-mediumMenu">
+        <button
+          className="flex w-full items-center justify-between px-2 py-1.5 "
+          onClick={onClick}
+        >
+          {title} {isOpen ? <ArrowDown /> : <ArrowUp />}
+        </button>
+        {!isOpen && (
+          <div className="flex h-[calc(100%-39px)] w-full flex-1 overflow-y-auto">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RvfFloatingMenu;

package/src/RvfFloatingMenu/index.tsx

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

package/src/RvfIconButton/RvfIconButton.tsx

@@ -0,0 +1,35 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import { memo, SVGProps, useMemo } from "preact/compat";
+
+import { RvfButtonProps, themes } from "../RvfButton/RvfButton";
+
+export type RvfIconButtonProps = {
+  Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
+} & JSX.ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes &
+  RvfButtonProps;
+
+const baseClasses =
+  "flex h-8 w-8 md:h-9 md:w-9 lg:w-10 lg:h-10 p-1.75 max-w-button max-h-button items-center justify-center rounded-full border";
+
+function RvfIconButton({
+  children,
+  className,
+  Icon,
+  selected = false,
+  theme = "secondary",
+  ...props
+}: RvfIconButtonProps) {
+  const classes = useMemo(() => {
+    return `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`;
+  }, [className, selected, theme]);
+
+  return (
+    <button className={classes} {...props}>
+      {children || <Icon height={"100%"} width={"100%"} />}
+    </button>
+  );
+}
+
+export default memo(RvfIconButton);

package/src/RvfIconButton/index.tsx

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

package/src/RvfLayerTree/RvfLayerTree.tsx

@@ -0,0 +1,41 @@
+import { JSX, PreactDOMAttributes } from "preact";
+import { memo } from "preact/compat";
+import { useEffect, useReducer } from "preact/hooks";
+
+import {
+  LayersTreeContext,
+  LayersTreeDispatchContext,
+} from "./layersTreeContext";
+import layersTreeReducer from "./layersTreeReducer";
+import TreeItem, { 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]);
+
+  const renderedLayers = layers.map((item, idx) => {
+    return (
+      <div className="w-full" key={idx}>
+        <TreeItem className="w-full" {...item} />
+      </div>
+    );
+  });
+
+  return (
+    <LayersTreeContext.Provider value={tree}>
+      <LayersTreeDispatchContext.Provider value={dispatch}>
+        <div {...props}>{renderedLayers}</div>
+      </LayersTreeDispatchContext.Provider>
+    </LayersTreeContext.Provider>
+  );
+}
+
+export default memo(RvfLayerTree);

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -0,0 +1,120 @@
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import BaseLayer from "ol/layer/Base";
+import {
+  SVGProps,
+  useContext,
+  useEffect,
+  useId,
+  useState,
+} from "preact/compat";
+
+import ArrowDown from "../../icons/ArrowDown";
+import ArrowUp from "../../icons/ArrowUp";
+import RvfCheckbox from "../../RvfCheckbox";
+import RvfRadioButton from "../../RvfRadioButton";
+import { LayersTreeDispatchContext } from "../layersTreeContext";
+
+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.map((item, idx) => {
+    return <TreeItem key={idx} {...item} />;
+  });
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 border-b py-2">
+        {selectionType === SelectionType.RADIO ? (
+          <RvfRadioButton
+            checked={isControlChecked}
+            id={inputId}
+            onChange={handleSelectionChange}
+          />
+        ) : (
+          <RvfCheckbox
+            checked={isControlChecked}
+            id={inputId}
+            onChange={handleSelectionChange}
+          />
+        )}
+        <label
+          className={`cursor-pointer`}
+          htmlFor={childItems.length > 0 ? buttonId : inputId}
+        >
+          {title}
+        </label>
+        {childItems.length > 0 && (
+          <button
+            className={`flex cursor-pointer items-center gap-2 font-normal`}
+            id={buttonId}
+            onClick={handleItemClick}
+          >
+            {isContainerVisible ? <ArrowUp /> : <ArrowDown />}
+          </button>
+        )}
+      </div>
+      {isContainerVisible && <div className="pl-6">{renderedLayers}</div>}
+    </div>
+  );
+}
+
+export default TreeItem;

package/src/RvfLayerTree/TreeItem/index.tsx

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

package/src/RvfLayerTree/index.tsx

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

package/src/RvfLayerTree/layersTreeContext.ts

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

package/src/RvfLayerTree/layersTreeReducer.ts

@@ -0,0 +1,152 @@
+import { SelectionType } from "./TreeItem/TreeItem";
+
+const ROOT = {
+  childItems: [],
+  parent: null,
+};
+
+const initTree = (tree) => {
+  const initializedTree = { ...ROOT };
+  initializedTree.childItems = tree;
+  mapNode(initializedTree.childItems, initializedTree);
+
+  return initializedTree;
+};
+
+const mapNode = (childItems, parent) => {
+  for (const child of childItems) {
+    child.parent = parent;
+
+    if (child.childItems.length) {
+      mapNode(child.childItems, child);
+    }
+  }
+};
+
+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 setNewControlCheckedStatus = (tree, newItem) => {
+  const currentItem = findNodeInTree(tree, newItem);
+
+  if (currentItem) {
+    updateCheckedControlStatus(currentItem, newItem, false);
+  }
+
+  return { ...tree };
+};
+
+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) {
+          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) {
+    updateChildNodes(currentItem);
+  }
+
+  // check all parents
+  updateParentNodes(currentItem);
+};
+
+const updateChildNodes = (node) => {
+  if (node.childItems[0].selectionType === SelectionType.RADIO) {
+    updateRadioChildNodes(node);
+  } else {
+    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;
+
+    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/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -0,0 +1,42 @@
+import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
+import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+import { memo } from "preact/compat";
+import { useEffect, useMemo } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
+  const { baseLayer, map } = useMapContext();
+
+  const layer = useMemo(() => {
+    if (!baseLayer) {
+      return null;
+    }
+    return new MaplibreStyleLayer({
+      layersFilter: ({ metadata, source }) => {
+        return (
+          metadata?.["rvf.filter"] === "netowrk_plans" ||
+          source === "network_plans"
+        );
+      },
+      maplibreLayer: baseLayer,
+      minZoom: 10,
+      ...(props || {}),
+    });
+  }, [baseLayer, props]);
+
+  useEffect(() => {
+    if (!map || !layer) {
+      return;
+    }
+
+    map.addLayer(layer);
+    return () => {
+      map.removeLayer(layer);
+    };
+  }, [map, layer]);
+
+  return null; // <RegisterForSelectFeaturesOnClick />;
+}
+
+export default memo(RvfLineNetworkPlanLayer);

package/src/RvfLineNetworkPlanLayer/index.tsx

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