agviewermap-react 0.1.16 → 0.1.18

package/dist/LazyModalContent-KYg-4Dun.js

@@ -0,0 +1,126 @@
+import { d as B, t as H, j as e, S as z, a as P, I as U, M as V, T as S, b as _, E as q } from "./index-BermKuD8.js";
+import { useState as d, useRef as G, useCallback as i, useMemo as j, useEffect as J } from "react";
+import { A as K, T as O } from "./arrow-up-right-DzFwaANr.js";
+const Q = ({ marker: a, onMarkerClick: u, onDeleteMarker: m, markersData: h, intl: o }) => /* @__PURE__ */ e.jsx("div", { className: "marker-item rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 p-2 mb-2", children: /* @__PURE__ */ e.jsx("div", { className: "marker-item-info", children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center gap-2", children: [
+  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+    /* @__PURE__ */ e.jsx(V, { className: "h-4 w-4 text-primary flex-shrink-0" }),
+    /* @__PURE__ */ e.jsx("h5", { className: "text-sm font-medium text-gray-800 dark:text-gray-200 break-words leading-tight", children: a == null ? void 0 : a.title })
+  ] }),
+  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+    /* @__PURE__ */ e.jsx(S, { text: o.formatMessage({ id: "app.agviewer_map.focus_marker", defaultMessage: "Focus on the marker" }), children: /* @__PURE__ */ e.jsx(
+      _,
+      {
+        variant: "icon",
+        className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
+        onClick: (r) => u(r, a),
+        "data-marker-id": a.id,
+        children: /* @__PURE__ */ e.jsx(K, { className: "w-4 h-4" })
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(S, { text: o.formatMessage({ id: "app.agviewer_map.delete_marker", defaultMessage: "Delete Marker" }), children: /* @__PURE__ */ e.jsx(
+      _,
+      {
+        variant: "icon",
+        className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
+        onClick: (r) => m(r, a),
+        "data-marker-id": a.id,
+        children: /* @__PURE__ */ e.jsx(O, { className: "w-4 h-4 text-red-500" })
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(
+      q,
+      {
+        marker: h.find((r) => r.id === a.id)
+      }
+    )
+  ] })
+] }) }) });
+function $({
+  markersData: a,
+  loading: u,
+  handleDeleteMarker: m,
+  onMarkerClick: h,
+  onClose: o,
+  intl: r
+}) {
+  const [v, k] = d(""), [g, T] = d(""), [C, N] = d(!1), [n, y] = d(20), [c, M] = d(!1), I = G(null), b = i(
+    B((s) => {
+      T(s), N(!1);
+    }, 300),
+    []
+  ), L = i((s) => {
+    const t = s.target.value;
+    k(t), N(!0), b(t);
+  }, [b]), p = j(() => !a || a.length === 0 ? [] : a.map((s) => H(s)), [a]), l = j(() => {
+    if (!g) return p;
+    const s = g.toLowerCase();
+    return p.filter(
+      (t) => {
+        var f, x;
+        return (x = (f = t == null ? void 0 : t.title) == null ? void 0 : f.toLowerCase()) == null ? void 0 : x.includes(s);
+      }
+    );
+  }, [p, g]), E = j(() => l.slice(0, n), [l, n]);
+  J(() => {
+    y(20);
+  }, [g]);
+  const w = i(() => {
+    c || n >= l.length || (M(!0), setTimeout(() => {
+      y((s) => Math.min(s + 20, l.length)), M(!1);
+    }, 300));
+  }, [c, n, l.length]), F = i((s) => {
+    const { scrollTop: t, scrollHeight: f, clientHeight: x } = s.target;
+    t + x >= f - 100 && !c && n < l.length && w();
+  }, [w, c, n, l.length]), R = i((s, t) => {
+    h(s, t), o();
+  }, [h, o]), A = i((s, t) => {
+    m(s, t);
+  }, [m]);
+  return u ? /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center h-40", children: /* @__PURE__ */ e.jsx(z, {}) }) : /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "relative mb-4", children: [
+      /* @__PURE__ */ e.jsx(P, { className: "w-4 h-4 text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" }),
+      /* @__PURE__ */ e.jsx(
+        U,
+        {
+          className: "pl-9 w-full text-sm h-9",
+          placeholder: r.formatMessage({ id: "app.agviewer_map.search_station", defaultMessage: "Search Station" }),
+          value: v,
+          onChange: L
+        }
+      ),
+      C && /* @__PURE__ */ e.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ e.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }) })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        ref: I,
+        className: "overflow-y-auto h-[350px]",
+        onScroll: F,
+        children: l.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center h-20 p-4", children: /* @__PURE__ */ e.jsx("h5", { className: "text-sm text-gray-500 dark:text-gray-400", children: v ? r.formatMessage({ id: "app.agviewer_map.no_station_found", defaultMessage: "No Station Found" }) : r.formatMessage({ id: "app.agviewer_map.no_station_found", defaultMessage: "No Station Found" }) }) }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          E.map((s) => /* @__PURE__ */ e.jsx(
+            Q,
+            {
+              marker: s,
+              onMarkerClick: R,
+              onDeleteMarker: A,
+              markersData: a,
+              intl: r
+            },
+            s.id
+          )),
+          c && /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center py-4", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }),
+            /* @__PURE__ */ e.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Loading more..." })
+          ] }) }),
+          n >= l.length && l.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center py-4", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: r.formatMessage({
+            id: "app.agviewer_map.all_results_loaded",
+            defaultMessage: "All results loaded"
+          }) }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  $ as default
+};

package/dist/LazyPlotModalContent-DQuJrz3C.js

@@ -0,0 +1,160 @@
+import { u as P, c as R, e as H, P as O, j as e, f as U, B as z, T as w, g as G, C as V, h as q, i as T, d as J, t as K, S as Q, a as W, I as X, M as Y, b as I } from "./index-BermKuD8.js";
+import { useState as u, useContext as Z, useRef as $, useCallback as h, useMemo as b, useEffect as ee } from "react";
+import { A as se, T as ae } from "./arrow-up-right-DzFwaANr.js";
+const te = ({ plot: a }) => {
+  const [f, l] = u(!1);
+  P((o) => o.toDrawMode), P((o) => o.toNormalMode);
+  const r = R(), { isOpen: d, currentStep: i } = H(), { handlePlotUpdate: x, handleEditPlot: j, setClickedPlot: c } = Z(O), M = (o) => {
+    l(!1), c(null), j(a);
+  }, y = (o) => (T(r.formatMessage({ id: "app.agviewer_map.saving_changes", defaultMessage: "Saving changes" })), x(o).then(() => {
+    c(null), T.success(r.formatMessage({ id: "app.agviewer_map.changes_saved_successfully", defaultMessage: "Changes saved successfully" }));
+  }));
+  return /* @__PURE__ */ e.jsx(
+    U,
+    {
+      trigger: /* @__PURE__ */ e.jsx(z, { variant: "outline", size: "icon", children: /* @__PURE__ */ e.jsx(w, { text: r.formatMessage({ id: "app.agviewer_map.edit_plot", defaultMessage: "Edit plot" }), children: /* @__PURE__ */ e.jsx(G, { className: "w-5 h-5 action-icon" }) }) }),
+      title: r.formatMessage({ id: "app.agviewer_map.edit_plot", defaultMessage: "Edit plot" }),
+      open: f,
+      setOpen: l,
+      headerClassName: "m-4",
+      onClose: () => l(!1),
+      preventBackdropClose: d && i === 3,
+      children: /* @__PURE__ */ e.jsx(V, { children: /* @__PURE__ */ e.jsx(
+        q,
+        {
+          plot: a,
+          onSubmit: y,
+          onCancel: () => l(!1),
+          onGeometryChange: M,
+          submitButtonText: r.formatMessage({ id: "app.agviewer_map.save_changes", defaultMessage: "Save Changes" })
+        }
+      ) })
+    }
+  );
+}, re = ({ plot: a, onPlotClick: f, onDeletePlot: l, plots: r, intl: d }) => /* @__PURE__ */ e.jsx("div", { className: "marker-item rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 p-2 mb-2", children: /* @__PURE__ */ e.jsx("div", { className: "marker-item-info", children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center gap-2", children: [
+  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+    /* @__PURE__ */ e.jsx(Y, { className: "h-4 w-4 text-primary flex-shrink-0" }),
+    /* @__PURE__ */ e.jsx("h5", { className: "text-sm font-medium text-gray-800 dark:text-gray-200 break-words leading-tight", children: a == null ? void 0 : a.name })
+  ] }),
+  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+    /* @__PURE__ */ e.jsx(w, { text: d.formatMessage({ id: "app.agviewer_map.focus_plot", defaultMessage: "Focus on the plot" }), children: /* @__PURE__ */ e.jsx(
+      I,
+      {
+        variant: "icon",
+        className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
+        onClick: () => f(a),
+        "data-plot-id": a.id,
+        children: /* @__PURE__ */ e.jsx(se, { className: "w-4 h-4" })
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(w, { text: d.formatMessage({ id: "app.agviewer_map.delete_plot", defaultMessage: "Delete plot" }), children: /* @__PURE__ */ e.jsx(
+      I,
+      {
+        variant: "icon",
+        className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
+        onClick: () => l(a),
+        "data-plot-id": a.id,
+        children: /* @__PURE__ */ e.jsx(ae, { className: "w-4 h-4 text-red-500" })
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(
+      te,
+      {
+        plot: r.find((i) => i.id === a.id)
+      }
+    )
+  ] })
+] }) }) });
+function de({
+  plots: a,
+  loading: f,
+  handleDeletePlot: l,
+  handleFlyToPlot: r,
+  onClose: d,
+  intl: i
+}) {
+  const [x, j] = u(""), [c, M] = u(""), [y, o] = u(!1), [m, _] = u(20), [p, C] = u(!1), B = $(null), k = h(
+    J((s) => {
+      M(s), o(!1);
+    }, 300),
+    []
+  ), E = h((s) => {
+    const t = s.target.value;
+    j(t), o(!0), k(t);
+  }, [k]), N = b(() => !a || a.length === 0 ? [] : a.map((s) => K(s)), [a]), n = b(() => {
+    if (!c) return N;
+    const s = c.toLowerCase();
+    return N.filter(
+      (t) => {
+        var g, v;
+        return (v = (g = t == null ? void 0 : t.name) == null ? void 0 : g.toLowerCase()) == null ? void 0 : v.includes(s);
+      }
+    );
+  }, [N, c]), L = b(() => n.slice(0, m), [n, m]);
+  ee(() => {
+    _(20);
+  }, [c]);
+  const S = h(() => {
+    p || m >= n.length || (C(!0), setTimeout(() => {
+      _((s) => Math.min(s + 20, n.length)), C(!1);
+    }, 300));
+  }, [p, m, n.length]), A = h((s) => {
+    const { scrollTop: t, scrollHeight: g, clientHeight: v } = s.target;
+    t + v >= g - 100 && !p && m < n.length && S();
+  }, [S, p, m, n.length]), D = h((s) => {
+    var t, g;
+    d(), r((g = (t = s == null ? void 0 : s.options) == null ? void 0 : t.geometry) == null ? void 0 : g.coordinates);
+  }, [r, d]), F = h((s) => {
+    l(s);
+  }, [l]);
+  return f ? /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center h-40", children: /* @__PURE__ */ e.jsx(Q, {}) }) : /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "relative mb-4", children: [
+      /* @__PURE__ */ e.jsx(W, { className: "w-4 h-4 text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" }),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          className: "pl-9 w-full text-sm h-9",
+          placeholder: i.formatMessage({ id: "app.agviewer_map.search_plots", defaultMessage: "Search Plots" }),
+          value: x,
+          onChange: E
+        }
+      ),
+      y && /* @__PURE__ */ e.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ e.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }) })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        ref: B,
+        className: "overflow-y-auto h-[350px]",
+        onScroll: A,
+        children: n.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center h-20 p-4", children: /* @__PURE__ */ e.jsx("h5", { className: "text-sm text-gray-500 dark:text-gray-400", children: x ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          i.formatMessage({ id: "app.agviewer_map.no_plot_found", defaultMessage: "No Plots Found for keyword:" }),
+          /* @__PURE__ */ e.jsx("span", { className: "font-medium ml-1", children: x })
+        ] }) : i.formatMessage({ id: "app.agviewer_map.no_plots", defaultMessage: "No Plots Available" }) }) }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          L.map((s) => /* @__PURE__ */ e.jsx(
+            re,
+            {
+              plot: s,
+              onPlotClick: D,
+              onDeletePlot: F,
+              plots: a,
+              intl: i
+            },
+            s.id
+          )),
+          p && /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center py-4", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }),
+            /* @__PURE__ */ e.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Loading more..." })
+          ] }) }),
+          m >= n.length && n.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center py-4", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: i.formatMessage({
+            id: "app.agviewer_map.all_results_loaded",
+            defaultMessage: "All results loaded"
+          }) }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  de as default
+};