@vidro/map-handler 1.3.14 → 2.0.0

package/examples/react-next/components/AuthComponent.js

@@ -1,88 +0,0 @@
-import { useAuth } from "@/contexts/auth";
-import { useState } from "react";
-
-const AuthComponent = () => {
-  const { apiUrl, setApiUrl, login, logged, logout } = useAuth();
-  const [user, setUser] = useState(
-    process.env.NEXT_PUBLIC_USER ? process.env.NEXT_PUBLIC_USER : ""
-  );
-  const [pwd, setPwd] = useState(
-    process.env.NEXT_PUBLIC_PWD ? process.env.NEXT_PUBLIC_PWD : ""
-  );
-  const [selectedMap, setSelectedMap] = useState("-1");
-
-  // Handler for API URL input changes
-  const handleApiUrlChange = (event) => {
-    setApiUrl(event.target.value);
-  };
-
-  return (
-    <div>
-      {logged && (
-        <div className="bg-gray-200 p-2  text-left">
-          <div className="text-xs">
-            Logged as <b>{user}</b>
-          </div>
-          <div className="text-xs">
-            API: <b>{apiUrl}</b>
-          </div>
-          <button
-            onClick={(e) => {
-              logout();
-            }}
-            className="border border-gray-300 bg-black text-white rounded-md p-2 mt-1 text-xs"
-          >
-            Logout
-          </button>
-        </div>
-      )}
-      {!logged && (
-        <div>
-          <div className="mb-4 flex gap-1">
-            <label className="w-32">API URL</label>
-            <input
-              type="text"
-              value={apiUrl}
-              onChange={handleApiUrlChange}
-              placeholder="Enter API URL..."
-              className="border border-gray-300 rounded-md p-2 w-full"
-            />
-          </div>
-          <div className="mb-4 flex gap-1">
-            <label className="w-32">User</label>
-            <input
-              type="text"
-              value={user}
-              onChange={(e) => setUser(e.target.value)}
-              placeholder="User"
-              disabled={logged}
-              className="border border-gray-300 rounded-md p-2 w-full"
-            />
-          </div>
-          <div className="mb-4 flex gap-1">
-            <label className="w-32">Password</label>
-            <input
-              type="password"
-              value={pwd}
-              onChange={(e) => setPwd(e.target.value)}
-              disabled={logged}
-              placeholder="User"
-              className="border border-gray-300 rounded-md p-2 w-full"
-            />
-          </div>
-
-          <button
-            onClick={(e) => {
-              login(user, pwd);
-            }}
-            className="border border-gray-300 bg-black text-white rounded-md p-2"
-          >
-            Login
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AuthComponent;

package/examples/react-next/components/MapButtons.js

@@ -1,108 +0,0 @@
-import ZoomToScaleButton from "@/atoms/ZoomToScaleButton";
-import { useAuth } from "@/contexts/auth";
-import { useMaps } from "@/contexts/maps";
-import { useMessages } from "@/contexts/messages";
-
-const MapButtons = () => {
-  const { logged } = useAuth();
-  const { map, mapReady, clickedCoordinates } = useMaps();
-  const {
-    ZoomIn,
-    ZoomOut,
-    zoomToExtent,
-    drawPoint,
-    Clear,
-    Highlight,
-    centerMap,
-  } = useMessages();
-  if (!logged) return null;
-  return (
-    <>
-      {!mapReady && <div>Waiting map...</div>}
-      {mapReady && (
-        <div className="flex gap-1 text-xs">
-          <button
-            onClick={(e) => {
-              console.log("Zoom +");
-              ZoomIn();
-            }}
-            disabled={!map}
-            className="border border-gray-300 bg-black text-white rounded-md p-2"
-          >
-            Zoom +
-          </button>
-          <button
-            onClick={(e) => {
-              console.log("Zoom -");
-              ZoomOut();
-            }}
-            className="border border-gray-300 bg-black text-white rounded-md p-2"
-          >
-            Zoom -
-          </button>
-          <button
-            onClick={(e) => {
-              console.log("Zoom to extent");
-              zoomToExtent();
-            }}
-            className="border border-gray-300 bg-black text-white rounded-md p-2"
-          >
-            Zoom to extent
-          </button>
-          <button
-            onClick={(e) => {
-              console.log("Draw point");
-              drawPoint({});
-            }}
-            className="border border-gray-300 bg-black text-white rounded-md p-2"
-          >
-            Add point
-          </button>
-          <button
-            onClick={(e) => {
-              console.log("Clear");
-              Clear();
-            }}
-            className="border border-gray-300 bg-black text-white rounded-md p-2"
-          >
-            Clear
-          </button>
-          <button
-            onClick={(e) => {
-              console.log("Highlight clickedCoordinates", clickedCoordinates);
-              Highlight(
-                {
-                  feature_type: "HIGHLIGHT",
-                  geom: `POINT(${clickedCoordinates[0]} ${clickedCoordinates[1]})`,
-                },
-                2,
-                {
-                  duration: 1500,
-                  repeat: true,
-                },
-                0,
-                null
-              );
-            }}
-            disabled={!clickedCoordinates}
-            className="border border-gray-300 bg-black text-white rounded-md p-2"
-          >
-            Highlight clicked coordinates
-          </button>
-          <button
-            onClick={(e) => {
-              console.log("Highlight clickedCoordinates", clickedCoordinates);
-              centerMap(clickedCoordinates);
-            }}
-            disabled={!clickedCoordinates}
-            className="border border-gray-300 bg-black text-white rounded-md p-2"
-          >
-            Center map to clicked coordinates
-          </button>
-          <ZoomToScaleButton />
-        </div>
-      )}
-    </>
-  );
-};
-export default MapButtons;

package/examples/react-next/components/MapFilters.js

@@ -1,120 +0,0 @@
-import { useAuth } from "@/contexts/auth";
-import { useMaps } from "@/contexts/maps";
-import { useMessages } from "@/contexts/messages";
-import { useEffect, useState } from "react";
-
-const MapFilters = () => {
-  const {
-    configuredFilters,
-    mapId,
-    filters,
-    activeFilters,
-
-    activeLayer,
-    mapLayers,
-  } = useMaps();
-  const { Filters } = useMessages();
-  const { logged } = useAuth();
-  const [currentFilter, setCurrentFilter] = useState("");
-  const [filterValue, setFilterValue] = useState("");
-  useEffect(() => {
-    if (!configuredFilters) return;
-    console.log("MapFilters configuredFilters", configuredFilters);
-  }, [configuredFilters]);
-
-  useEffect(() => {
-    if (!activeFilters) return;
-    console.log("MapFilters activeFilters", activeFilters);
-  }, [activeFilters]);
-
-  useEffect(() => {
-    if (!filters) return;
-    console.log("MapFilters filters", filters);
-  }, [filters]);
-
-  const applyFilter = () => {
-    if (!activeLayer) {
-      console.log("No active layer");
-      return;
-    }
-    console.log("Apply filter", {
-      currentFilter,
-      filterValue,
-      activeLayer,
-    });
-    //find layer info
-    const lay = mapLayers.find((l) => l.qgis_name === activeLayer);
-    console.log("Layer info", lay);
-    //format filter for mapComponent digest
-    const filter = [
-      {
-        layer_id: lay.id,
-        layer_name: lay.qgis_name,
-        filters: [
-          [
-            {
-              name: currentFilter,
-              condition: "=", //default condition - you can get condition from configuredFilters
-              value: filterValue,
-              value2: null,
-              layer_id: lay.id,
-              mapId: mapId,
-            },
-          ],
-        ],
-      },
-    ];
-    Filters(filter);
-    console.log("Filter", filter);
-  };
-
-  if (!logged) return null;
-  if (!mapId) return null;
-  return (
-    <>
-      <div>
-        {configuredFilters && configuredFilters.length === 0 && (
-          <div>No filters available</div>
-        )}
-
-        <div className="m-2 flex gap-2">
-          <label className="block text-sm font-medium text-gray-700 pt-2">
-            Filters
-          </label>
-          {configuredFilters && configuredFilters.length > 0 && (
-            <select
-              className="border border-gray-300 rounded-md p-2 w-60"
-              onChange={(e) => setCurrentFilter(e.target.value)}
-              value={currentFilter}
-            >
-              <option value="-1">Select filter...</option>
-              {configuredFilters.map((ele) => (
-                <option key={ele.id} value={ele.name}>
-                  {ele.name}
-                </option>
-              ))}
-            </select>
-          )}
-          <input
-            type="text"
-            value={filterValue}
-            onChange={(e) => setFilterValue(e.target.value)}
-            className="border border-gray-300 rounded-md p-2 w-60"
-          />
-          <button
-            onClick={(e) => {
-              console.log("Apply filter");
-              applyFilter();
-            }}
-            disabled={filterValue === "" || currentFilter === "-1"}
-            className="border border-gray-300 bg-black text-white rounded-md p-2 mt-1 text-xs"
-          >
-            Apply filter
-          </button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default MapFilters;

package/examples/react-next/components/MapIframe.js

@@ -1,25 +0,0 @@
-import { useMaps } from "@/contexts/maps";
-import { useMessages } from "@/contexts/messages";
-import { useEffect } from "react";
-
-const MapIframe = () => {
-  const { map, sessionToken } = useMaps();
-  const { start } = useMessages();
-
-  useEffect(() => {
-    if (!sessionToken) return;
-    start(sessionToken); //starts communicator
-  }, [sessionToken]);
-
-  if (!map && !sessionToken) return null;
-  return (
-    <iframe
-      id="map-frame"
-      name="map-frame"
-      src={map}
-      allow="geolocation"
-      className="h-screen w-full"
-    ></iframe>
-  );
-};
-export default MapIframe;

package/examples/react-next/components/MapInfo.js

@@ -1,36 +0,0 @@
-import { useMaps } from "@/contexts/maps";
-import useMapEvents from "@/hooks/useMapEvents";
-const MapInfo = () => {
-  useMapEvents();
-  const {
-    zoomLevel,
-    mapScale,
-    clickedCoordinates,
-    map,
-    displayedLayers,
-    mapResolution,
-  } = useMaps();
-  if (!map) return null;
-  return (
-    <div className="absolute bg-white/60 right-0 p-5">
-      <div className="flex flex-col gap-1 text-xs">
-        <div>Zoom level: {zoomLevel}</div>
-        <div>Map scale: {mapScale}</div>
-        <div>Map resolution: {mapResolution}</div>
-        <div>Clicked coordinates: {clickedCoordinates}</div>
-      </div>
-      <div className="bg-black/20 p-5 text-left mt-2">
-        <span>Displayed Layers:</span>
-
-        {displayedLayers && displayedLayers.length > 0 && (
-          <div className="mt-1 flex flex-col gap-1 text-xs">
-            {displayedLayers.map((layer) => (
-              <div key={`lay_${layer}`}> - {layer}</div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-export default MapInfo;

package/examples/react-next/components/MapLayers.js

@@ -1,60 +0,0 @@
-import { useAuth } from "@/contexts/auth";
-import { useMaps } from "@/contexts/maps";
-import { useMessages } from "@/contexts/messages";
-import { useEffect, useState } from "react";
-
-const MapLayers = () => {
-  const { GetMapInfo, mapId, mapLayers, setActiveLayer } = useMaps();
-  const { ToggleLayer } = useMessages();
-  const { logged } = useAuth();
-  const [selectedLayer, setSelectedLayer] = useState("-1");
-
-  useEffect(() => {
-    if (!mapId) return;
-    GetMapInfo(mapId);
-  }, [mapId]);
-
-  if (!logged) return null;
-  if (!mapId) return null;
-  return (
-    <>
-      <div>
-        {mapLayers && mapLayers.length === 0 && <div>No layers available</div>}
-
-        <div className="m-2 flex gap-2">
-          <label className="block text-sm font-medium text-gray-700 pt-2">
-            Layers
-          </label>
-          {mapLayers && mapLayers.length > 0 && (
-            <select
-              className="border border-gray-300 rounded-md p-2 w-60"
-              onChange={(e) => setSelectedLayer(e.target.value)}
-              value={selectedLayer}
-            >
-              <option value="-1">Select layer...</option>
-              {mapLayers.map((ele) => (
-                <option key={ele.id} value={ele.qgis_name}>
-                  {ele.qgis_name} - {ele.alias}
-                </option>
-              ))}
-            </select>
-          )}
-
-          <button
-            onClick={(e) => {
-              console.log("Toggle layer", selectedLayer);
-              setActiveLayer(selectedLayer);
-              ToggleLayer(selectedLayer);
-            }}
-            disabled={selectedLayer === "-1"}
-            className="border border-gray-300 bg-black text-white rounded-md p-2 mt-1 text-xs"
-          >
-            Toggle layer
-          </button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default MapLayers;

package/examples/react-next/components/MapList.js

@@ -1,51 +0,0 @@
-import { useAuth } from "@/contexts/auth";
-import { useMaps } from "@/contexts/maps";
-import { useEffect, useState } from "react";
-import { getMapId as getMapIdCookie } from "@/shared/cookies";
-const MapList = () => {
-  const { GetMap } = useMaps();
-  const { projects, logged } = useAuth();
-  const [selectedMap, setSelectedMap] = useState("-1");
-  useEffect(() => {
-    if (!logged) return;
-    if (!getMapIdCookie()) {
-      return;
-    }
-
-    setSelectedMap(getMapIdCookie());
-  }, [logged]);
-  if (!logged) return null;
-  return (
-    <div>
-      <div className="m-2 flex gap-2">
-        <label className="block text-sm font-medium text-gray-700 pt-2">
-          Maps
-        </label>
-        <select
-          className="border border-gray-300 rounded-md p-2  w-32"
-          onChange={(e) => setSelectedMap(e.target.value)}
-          value={selectedMap}
-        >
-          <option value="-1">Select a map</option>
-          {projects.map((projectId) => (
-            <option key={projectId} value={projectId}>
-              {projectId}
-            </option>
-          ))}
-        </select>
-
-        <button
-          onClick={(e) => {
-            GetMap(selectedMap);
-          }}
-          disabled={selectedMap === "-1"}
-          className="border border-gray-300 bg-black text-white rounded-md p-2 mt-1 text-xs"
-        >
-          Load map
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default MapList;

package/examples/react-next/components/MapPrint.js

@@ -1,50 +0,0 @@
-import { useMessages } from "@/contexts/messages";
-import { usePrint } from "@/contexts/print";
-import PrintLayoutSelector from "@/atoms/PrintLayoutSelector";
-import PrintPaperSizeSelector from "@/atoms/PrintPaperSizeSelector";
-import ZoomToScaleButton from "@/atoms/ZoomToScaleButton";
-import PrintScaleSelector from "@/atoms/PrintScaleSelector";
-import { useMaps } from "@/contexts/maps";
-const MapPrint = ({ map }) => {
-  const { cancelPrint, print } = useMessages();
-  const { mapScale } = useMaps();
-  const { startPrint, printEnabled } = usePrint();
-  return (
-    <div className="absolute bg-white/60 left-0 py-1 px-5 m-5 text-left border border-gray-300 rounded-md">
-      <button
-        onClick={(e) => {
-          console.log("Print");
-          if (!mapScale || mapScale === "-1") {
-            alert("Choose scale first");
-            return;
-          }
-          if (printEnabled) {
-            print();
-          } else {
-            startPrint();
-          }
-        }}
-        className="border border-gray-300 bg-black text-white rounded-md p-2 my-1 text-xs"
-      >
-        Print
-      </button>
-      {printEnabled && (
-        <button
-          onClick={(e) => {
-            console.log("Print");
-            cancelPrint();
-          }}
-          className="border border-gray-300 bg-black text-white rounded-md p-2 my-1 text-xs"
-        >
-          Cancel print
-        </button>
-      )}
-      <div className="text-xs text-left">
-        <PrintPaperSizeSelector />
-        <PrintLayoutSelector />
-        <PrintScaleSelector />
-      </div>
-    </div>
-  );
-};
-export default MapPrint;

package/examples/react-next/contexts/auth.js

@@ -1,147 +0,0 @@
-"use client";
-import { createContext, useContext, useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import {
-  getToken,
-  setToken as setTokenCookie,
-  removeToken as removeTokenCookie,
-  setMapList as setMapListCookie,
-  getMapList as getMapListCookie,
-  removeMapList as removeMapListCookie,
-} from "@/shared/cookies";
-const AuthContext = createContext({});
-
-export const AuthProvider = ({ children }) => {
-  const [apiUrl, setApiUrl] = useState(
-    process.env.NEXT_PUBLIC_APIURL ? process.env.NEXT_PUBLIC_APIURL : ""
-  );
-  const [logged, setLogged] = useState(null);
-  const [token, setToken] = useState(null);
-  const [userId, setUserId] = useState(null);
-  const [projects, setProjects] = useState([]);
-  const router = useRouter();
-
-  const resetAuthState = () => {
-    setLogged(false);
-    setToken(null);
-    setUserId(null);
-    setProjects([]);
-    removeTokenCookie();
-    removeMapListCookie();
-  };
-
-  useEffect(() => {
-    (async () => {
-      if (!getToken()) {
-        console.log("No token found");
-
-        return;
-      }
-      console.log("token cookie found, authenticating...");
-      try {
-        const response = await fetch(`${apiUrl}me`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${getToken()}`,
-          },
-        });
-        const data = await response.json();
-        if (!response.ok) {
-          resetAuthState();
-          return;
-        }
-        setToken(getToken());
-        setUserId(data.message.id);
-        setLogged(true);
-        const listMaps = getMapListCookie();
-        if (listMaps) {
-          setProjects(JSON.parse(listMaps));
-        }
-
-        console.log("authenticated through cookie", data);
-      } catch (error) {
-        console.error("Login error:", error);
-        return { error: true, message: "An unexpected error occurred" };
-      }
-    })();
-  }, []);
-  const login = async (email, password) => {
-    try {
-      const response = await fetch(`${apiUrl}letsgo`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ user: email, pwd: password }),
-      });
-
-      const data = await response.json();
-      console.log("login", data);
-
-      if (!response.ok) {
-        return { error: true, message: data.message || "Login failed" };
-      }
-
-      setToken(data.message.token);
-      setUserId(data.message.id);
-      setLogged(true);
-      setProjects(data.message.maps);
-      setTokenCookie(data.message.token);
-      setMapListCookie(JSON.stringify(data.message.maps));
-    } catch (error) {
-      console.error("Login error:", error);
-      return { error: true, message: "An unexpected error occurred" };
-    }
-
-    return { error: false };
-  };
-
-  const logout = async () => {
-    console.log("logout", token);
-    try {
-      const response = await fetch(`${apiUrl}logout`, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      const data = await response.json();
-      console.log("logout", data);
-
-      if (!response.ok) {
-        return { error: true, message: data.message || "Logout failed" };
-      }
-
-      // Reset auth state and remove token cookie
-      resetAuthState();
-      router.push("/");
-
-      return { error: false };
-    } catch (error) {
-      console.error("Logout error:", error);
-      return { error: true, message: "An unexpected error occurred" };
-    }
-  };
-
-  return (
-    <AuthContext.Provider
-      value={{
-        logged,
-        token,
-        login,
-        logout,
-        userId,
-        projects,
-        apiUrl,
-        setApiUrl,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
-};
-
-export const useAuth = () => useContext(AuthContext);