@geops/rvf-mobility-web-component 0.1.56 → 0.1.57

package/src/LayerTree/layersTreeReducer.ts

@@ -0,0 +1,158 @@
+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/{RvfLayerTreeButton/RvfLayerTreeButton.tsx → LayerTreeButton/LayerTreeButton.tsx}

@@ -3,15 +3,15 @@ import { useCallback } from "preact/hooks";
 
 import Stack from "../icons/Stack";
 import IconButton from "../ui/IconButton";
-import useRvfContext from "../utils/hooks/useRvfContext";
+import useMapContext from "../utils/hooks/useMapContext";
 
 import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type RvfLayerTreeButtonProps = HTMLAttributes<HTMLButtonElement> &
+export type LayerTreeButtonProps = HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
-function RvfLayerTreeButton({ ...props }: RvfLayerTreeButtonProps) {
-  const { isLayerTreeOpen, setIsLayerTreeOpen } = useRvfContext();
+function LayerTreeButton({ ...props }: LayerTreeButtonProps) {
+  const { isLayerTreeOpen, setIsLayerTreeOpen } = useMapContext();
 
   const onClick = useCallback(() => {
     setIsLayerTreeOpen(!isLayerTreeOpen);
@@ -24,4 +24,4 @@ function RvfLayerTreeButton({ ...props }: RvfLayerTreeButtonProps) {
   );
 }
 
-export default memo(RvfLayerTreeButton);
+export default memo(LayerTreeButton);

package/src/LayerTreeButton/index.tsx

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

package/src/{RvfTopics/RvfTopics.tsx → LayerTreeMenu/LayerTreeMenu.tsx}

@@ -1,18 +1,21 @@
+import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
 import { getUid } from "ol";
 import { unByKey } from "ol/Observable";
 import { memo, useEffect, useMemo, useState } from "preact/compat";
 
-import RvfLayerTree from "../RvfLayerTree";
-import { SelectionType } from "../RvfLayerTree/TreeItem/TreeItem";
-import getLayersAsFlatArray from "../utils/getLayersAsFlatArray";
+import LayerTree from "../LayerTree";
+import { SelectionType } from "../LayerTree/TreeItem";
+import { LAYERS_TITLES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 
 import type { Group } from "ol/layer";
 import type BaseLayer from "ol/layer/Base";
-import type { JSX, PreactDOMAttributes } from "preact";
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
 
-export interface RvfLayerTreeConfig {
-  childItems: RvfLayerTreeConfig[];
+import type { LayerTreeProps } from "../LayerTree/LayerTree";
+
+export interface LayerTreeConfig {
+  childItems: LayerTreeConfig[];
   id: string;
   isControlChecked: boolean;
   layer: BaseLayer;
@@ -21,13 +24,14 @@ export interface RvfLayerTreeConfig {
   title: string;
 }
 
-export type RvfTopicsProps = {} & JSX.HTMLAttributes<HTMLDivElement> &
+export type LayerTreeMenuProps = HTMLAttributes<HTMLDivElement> &
+  Partial<LayerTreeProps> &
   PreactDOMAttributes;
 
 const getConfigForLayer = (
   layer: BaseLayer,
   revision: number,
-): RvfLayerTreeConfig => {
+): LayerTreeConfig => {
   return {
     childItems:
       (layer as Group)
@@ -41,15 +45,15 @@ const getConfigForLayer = (
     layer,
     revision,
     selectionType: SelectionType.CHECKBOX,
-    title: layer.get("title"),
+    title: layer.get("title") || LAYERS_TITLES[layer.get("name")],
   };
 };
 
-function RvfTopics(props: RvfTopicsProps) {
+function LayerTreeMenu(props: LayerTreeMenuProps) {
   const { map } = useMapContext();
   const [revision, setRevision] = useState(0);
 
-  const layers: RvfLayerTreeConfig[] = useMemo(() => {
+  const layers: LayerTreeConfig[] = useMemo(() => {
     const config =
       map
         ?.getLayers()
@@ -95,7 +99,7 @@ function RvfTopics(props: RvfTopicsProps) {
     };
   }, [map]);
 
-  return <RvfLayerTree layers={layers} {...props} />;
+  return <LayerTree layers={layers} {...props} />;
 }
 
-export default memo(RvfTopics);
+export default memo(LayerTreeMenu);

package/src/LayerTreeMenu/index.tsx

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

package/src/LayoutState/LayoutState.tsx

@@ -0,0 +1,277 @@
+import { useEffect } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+/**
+ * This component is responsible for updating the layout state in the context.
+ */
+function LayoutState() {
+  const {
+    details,
+    embed,
+    geolocation,
+    hasDetails,
+    hasLayerTree,
+    hasPrint,
+    hasRealtime,
+    hasShare,
+    isExportMenuOpen,
+    isLayerTreeOpen,
+    isSearchOpen,
+    isShareMenuOpen,
+    layertree,
+    lnp,
+    notification,
+    permalink,
+    previewNotifications,
+    print,
+    realtime,
+    search,
+    selectedFeature,
+    setFeaturesInfos,
+    setHasDetails,
+    setHasGeolocation,
+    setHasLayerTree,
+    setHasLnp,
+    setHasNotification,
+    setHasPermalink,
+    setHasPrint,
+    setHasRealtime,
+    setHasSearch,
+    setHasShare,
+    setHasStations,
+    setHasToolbar,
+    setIsEmbed,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsOverlayOpen,
+    setIsSearchOpen,
+    setIsShareMenuOpen,
+    setStationId,
+    setTrainId,
+    share,
+    stationId,
+    tenant,
+    toolbar,
+    trainId,
+  } = useMapContext();
+
+  useEffect(() => {
+    setHasStations(!!tenant);
+  }, [setHasStations, tenant]);
+
+  useEffect(() => {
+    setHasRealtime(realtime === "true");
+  }, [realtime, setHasRealtime]);
+
+  useEffect(() => {
+    setHasNotification(notification === "true" || !!previewNotifications);
+  }, [notification, previewNotifications, setHasNotification]);
+
+  useEffect(() => {
+    setHasGeolocation(geolocation === "true");
+  }, [geolocation, setHasGeolocation]);
+
+  useEffect(() => {
+    setHasPermalink(permalink === "true");
+  }, [permalink, setHasPermalink]);
+
+  useEffect(() => {
+    setHasSearch(search === "true");
+  }, [search, setHasSearch]);
+
+  useEffect(() => {
+    setIsEmbed(embed === "true");
+  }, [embed, setIsEmbed]);
+
+  useEffect(() => {
+    setHasLnp(lnp === "true");
+  }, [lnp, setHasLnp]);
+
+  useEffect(() => {
+    setHasShare(share === "true");
+  }, [share, setHasShare]);
+
+  useEffect(() => {
+    setHasPrint(print === "true");
+  }, [print, setHasPrint]);
+
+  useEffect(() => {
+    setHasDetails(details === "true");
+  }, [details, setHasDetails]);
+
+  useEffect(() => {
+    setHasToolbar(toolbar === "true");
+  }, [toolbar, setHasToolbar]);
+
+  useEffect(() => {
+    setHasLayerTree(layertree === "true");
+  }, [layertree, setHasLayerTree]);
+
+  useEffect(() => {
+    if (isSearchOpen) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setIsShareMenuOpen(false);
+      setStationId(null);
+      setTrainId(null);
+      setFeaturesInfos(null);
+    }
+  }, [
+    isSearchOpen,
+    setFeaturesInfos,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsShareMenuOpen,
+    setStationId,
+    setTrainId,
+  ]);
+
+  useEffect(() => {
+    if (isShareMenuOpen) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setIsSearchOpen(false);
+      setStationId(null);
+      setTrainId(null);
+      setFeaturesInfos(null);
+    }
+  }, [
+    isShareMenuOpen,
+    setFeaturesInfos,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsSearchOpen,
+    setStationId,
+    setTrainId,
+  ]);
+
+  useEffect(() => {
+    if (isLayerTreeOpen) {
+      setIsExportMenuOpen(false);
+      setIsLayerTreeOpen(isLayerTreeOpen);
+      setIsSearchOpen(false);
+      setFeaturesInfos(null);
+      setTrainId(null);
+      setStationId(null);
+      setIsShareMenuOpen(false);
+    }
+  }, [
+    isLayerTreeOpen,
+    setFeaturesInfos,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsSearchOpen,
+    setIsShareMenuOpen,
+    setStationId,
+    setTrainId,
+  ]);
+
+  useEffect(() => {
+    if (isExportMenuOpen) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(isExportMenuOpen);
+      setIsSearchOpen(false);
+      setFeaturesInfos(null);
+      setTrainId(null);
+      setIsShareMenuOpen(false);
+      setStationId(null);
+    }
+  }, [
+    isExportMenuOpen,
+    setFeaturesInfos,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsSearchOpen,
+    setIsShareMenuOpen,
+    setStationId,
+    setTrainId,
+  ]);
+
+  useEffect(() => {
+    if (selectedFeature) {
+      setIsLayerTreeOpen(false);
+      setIsSearchOpen(false);
+      setIsExportMenuOpen(false);
+      setIsShareMenuOpen(false);
+      setTrainId(selectedFeature?.get("train_id") || null);
+      setStationId(selectedFeature?.get("uid") || null);
+    } else if (!selectedFeature) {
+      setTrainId(null);
+      setStationId(null);
+    }
+  }, [
+    selectedFeature,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsSearchOpen,
+    setIsShareMenuOpen,
+    setStationId,
+    setTrainId,
+  ]);
+
+  useEffect(() => {
+    if (stationId) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setIsSearchOpen(false);
+      setTrainId(null);
+      setIsShareMenuOpen(false);
+    }
+  }, [
+    setFeaturesInfos,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsSearchOpen,
+    setIsShareMenuOpen,
+    setTrainId,
+    stationId,
+  ]);
+
+  useEffect(() => {
+    if (trainId) {
+      setIsLayerTreeOpen(false);
+      setIsExportMenuOpen(false);
+      setIsSearchOpen(false);
+      setStationId(null);
+      setIsShareMenuOpen(false);
+    }
+  }, [
+    setFeaturesInfos,
+    setIsExportMenuOpen,
+    setIsLayerTreeOpen,
+    setIsSearchOpen,
+    setIsShareMenuOpen,
+    setStationId,
+    trainId,
+  ]);
+
+  useEffect(() => {
+    setIsOverlayOpen(
+      (hasDetails && !!selectedFeature) ||
+        (hasPrint && isExportMenuOpen) ||
+        (hasLayerTree && isLayerTreeOpen) ||
+        (hasShare && isShareMenuOpen) ||
+        (hasRealtime && !!trainId) ||
+        (tenant && !!stationId),
+    );
+  }, [
+    hasDetails,
+    selectedFeature,
+    hasPrint,
+    isExportMenuOpen,
+    hasLayerTree,
+    isLayerTreeOpen,
+    hasShare,
+    isShareMenuOpen,
+    hasRealtime,
+    trainId,
+    tenant,
+    stationId,
+    setIsOverlayOpen,
+  ]);
+
+  return null;
+}
+
+export default LayoutState;

package/src/LayoutState/index.tsx

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