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.
127 lines (126 loc) • 6.03 kB
JavaScript
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-DctakHpv.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-BZLz9WXb.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
};