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.
161 lines (160 loc) • 7.8 kB
JavaScript
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-BZQ0dA4C.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-DC1CEZ_9.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
};