agviewermap-react
Version:
A tool designed to visualize geospatial data on a map, integrating custom layers fetched from a REST API, and displaying relevant time-series data. This project is built using React, with `react-map-gl` for map integration.
131 lines (130 loc) • 6.24 kB
JavaScript
import { d as D, t as E, j as e, S as F, a as H, I as z, M as U, T as k, b as S, c as V } from "./index-DctakHpv.js";
import { useState as m, useRef as q, useCallback as o, useMemo as v, useEffect as G } from "react";
import { A as J, T as K } from "./arrow-up-right-BZLz9WXb.js";
const O = ({ plot: a, onPlotClick: u, onDeletePlot: h, plots: g, intl: c }) => /* @__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(U, { 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(k, { text: c.formatMessage({ id: "app.agviewer_map.focus_plot", defaultMessage: "Focus on the plot" }), children: /* @__PURE__ */ e.jsx(
S,
{
variant: "icon",
className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
onClick: () => u(a),
"data-plot-id": a.id,
children: /* @__PURE__ */ e.jsx(J, { className: "w-4 h-4" })
}
) }),
/* @__PURE__ */ e.jsx(k, { text: c.formatMessage({ id: "app.agviewer_map.delete_plot", defaultMessage: "Delete plot" }), children: /* @__PURE__ */ e.jsx(
S,
{
variant: "icon",
className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
onClick: () => h(a),
"data-plot-id": a.id,
children: /* @__PURE__ */ e.jsx(K, { className: "w-4 h-4 text-red-500" })
}
) }),
/* @__PURE__ */ e.jsx(
V,
{
plot: g.find((l) => l.id === a.id)
}
)
] })
] }) }) });
function Z({
plots: a,
loading: u,
handleDeletePlot: h,
handleFlyToPlot: g,
onClose: c,
intl: l
}) {
const [p, _] = m(""), [f, P] = m(""), [C, N] = m(!1), [n, y] = m(20), [d, b] = m(!1), T = q(null), w = o(
D((s) => {
P(s), N(!1);
}, 300),
[]
), I = o((s) => {
const r = s.target.value;
_(r), N(!0), w(r);
}, [w]), j = v(() => !a || a.length === 0 ? [] : a.map((s) => E(s)), [a]), t = v(() => {
if (!f) return j;
const s = f.toLowerCase();
return j.filter(
(r) => {
var i, x;
return (x = (i = r == null ? void 0 : r.name) == null ? void 0 : i.toLowerCase()) == null ? void 0 : x.includes(s);
}
);
}, [j, f]), L = v(() => t.slice(0, n), [t, n]);
G(() => {
y(20);
}, [f]);
const M = o(() => {
d || n >= t.length || (b(!0), setTimeout(() => {
y((s) => Math.min(s + 20, t.length)), b(!1);
}, 300));
}, [d, n, t.length]), A = o((s) => {
const { scrollTop: r, scrollHeight: i, clientHeight: x } = s.target;
r + x >= i - 100 && !d && n < t.length && M();
}, [M, d, n, t.length]), R = o((s) => {
var r, i;
c(), g((i = (r = s == null ? void 0 : s.options) == null ? void 0 : r.geometry) == null ? void 0 : i.coordinates);
}, [g, c]), B = o((s) => {
h(s);
}, [h]);
return u ? /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center h-40", children: /* @__PURE__ */ e.jsx(F, {}) }) : /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
/* @__PURE__ */ e.jsxs("div", { className: "relative mb-4", children: [
/* @__PURE__ */ e.jsx(H, { className: "w-4 h-4 text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" }),
/* @__PURE__ */ e.jsx(
z,
{
className: "pl-9 w-full text-sm h-9",
placeholder: l.formatMessage({ id: "app.agviewer_map.search_plots", defaultMessage: "Search Plots" }),
value: p,
onChange: I
}
),
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: T,
className: "overflow-y-auto h-[350px]",
onScroll: A,
children: t.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: p ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
l.formatMessage({ id: "app.agviewer_map.no_plot_found", defaultMessage: "No Plots Found for keyword:" }),
/* @__PURE__ */ e.jsx("span", { className: "font-medium ml-1", children: p })
] }) : l.formatMessage({ id: "app.agviewer_map.no_plots", defaultMessage: "No Plots Available" }) }) }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
L.map((s) => /* @__PURE__ */ e.jsx(
O,
{
plot: s,
onPlotClick: R,
onDeletePlot: B,
plots: a,
intl: l
},
s.id
)),
d && /* @__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 >= t.length && t.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: l.formatMessage({
id: "app.agviewer_map.all_results_loaded",
defaultMessage: "All results loaded"
}) }) })
] })
}
)
] });
}
export {
Z as default
};