Dodo
97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { SearchIcon } from "@/components/ui/phosphor-icons";
|
|
import { LAND_MARKER_LABELS, LAND_MARKER_COLORS } from "@/lib/map-data";
|
|
import type { UserMarker } from "@/components/leaflet-map";
|
|
import { calcLineLength, calcPolygonArea } from "@/components/land/shape-placement-dialog";
|
|
|
|
interface LandDirectoryProps {
|
|
searchQuery: string;
|
|
setSearchQuery: (query: string) => void;
|
|
filteredItems: UserMarker[];
|
|
selectedItemId: string | null;
|
|
visibilityFilters: Record<string, boolean>;
|
|
onSelectItem: (item: UserMarker) => void;
|
|
}
|
|
|
|
function itemBadge(item: UserMarker): string {
|
|
const coordinates = item.meta?.coordinates ?? [];
|
|
if (item.type === "polygon" && coordinates.length > 0) {
|
|
return `${(calcPolygonArea(coordinates) / 10000).toFixed(2)} Ha`;
|
|
}
|
|
if (item.type === "line" && coordinates.length > 0) {
|
|
const length = calcLineLength(coordinates);
|
|
return length >= 1000 ? `${(length / 1000).toFixed(2)} km` : `${length.toFixed(1)} m`;
|
|
}
|
|
if (item.type === "circle") {
|
|
const radius = item.meta?.radius ?? 0;
|
|
return `${radius.toFixed(1)} m`;
|
|
}
|
|
return LAND_MARKER_LABELS[item.type] ?? item.type;
|
|
}
|
|
|
|
export function LandDirectory({
|
|
searchQuery,
|
|
setSearchQuery,
|
|
filteredItems,
|
|
selectedItemId,
|
|
visibilityFilters,
|
|
onSelectItem,
|
|
}: LandDirectoryProps) {
|
|
return (
|
|
<Card className="bg-background rounded-none border-none shadow-none ring-0 h-full flex flex-col">
|
|
<CardHeader className="py-4">
|
|
<CardTitle className="text-base font-semibold">GIS Layer Directory</CardTitle>
|
|
<CardDescription>Select a marker or shape to review survey metadata and inspector details.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="pb-6 flex-1">
|
|
<div className="relative mb-4">
|
|
<SearchIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search by name or type..."
|
|
className="pl-9 bg-background h-10"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
{filteredItems.length > 0 ? (
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
{filteredItems.map((item) => {
|
|
const isSelected = selectedItemId === item.id;
|
|
const isVisible = visibilityFilters[item.type] !== false;
|
|
const color = LAND_MARKER_COLORS[item.type] ?? "#6b7280";
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
onClick={() => onSelectItem(item)}
|
|
className={`p-3 border rounded-lg cursor-pointer flex justify-between items-center gap-2 transition-all ${
|
|
isSelected
|
|
? "border-primary bg-primary/5 text-primary font-semibold"
|
|
: "border-border/60 hover:bg-muted"
|
|
} ${!isVisible ? "opacity-45" : ""}`}
|
|
>
|
|
<span className="text-xs text-foreground font-medium truncate">{item.name}</span>
|
|
<span
|
|
className="text-[9px] border px-2 py-0.5 rounded font-bold shrink-0"
|
|
style={{
|
|
color,
|
|
borderColor: `${color}33`,
|
|
backgroundColor: `${color}11`
|
|
}}
|
|
>
|
|
{itemBadge(item)}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<p className="text-center text-xs text-muted-foreground py-12">
|
|
Belum ada penanda atau bentuk yang ditambahkan. Buka peta untuk mulai menambahkan.
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|