fix(geoportal): simplified info panel, preserve basemap zoom, DXF export, intravilan outline
- Feature panel: simplified (NR_CAD/NR_CF/SIRUTA/Suprafata/Proprietari), aligned top-right under basemap switcher, click empty space to close - Basemap switch: preserves zoom+center via viewStateRef + moveend listener - DXF export: use -s_srs + -t_srs (not -a_srs + -t_srs which ogr2ogr rejects) - Intravilan: double line (black outer + orange inner), z13+, no fill - Parcel labels: cadastral_ref shown at z16+ - UAT z12: original geometry (no simplification) - Removed MapLibre popup (only side panel) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AI Assistant
@@ -1,250 +1,109 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
X,
|
||||
MapPin,
|
||||
User,
|
||||
Ruler,
|
||||
Building2,
|
||||
FileText,
|
||||
Loader2,
|
||||
TreePine,
|
||||
} from "lucide-react";
|
||||
import { X, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import type { ClickedFeature, FeatureDetail, FeatureEnrichmentData } from "../types";
|
||||
|
||||
type FeatureInfoPanelProps = {
|
||||
feature: ClickedFeature | null;
|
||||
onClose: () => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function FeatureInfoPanel({
|
||||
feature,
|
||||
onClose,
|
||||
className,
|
||||
}: FeatureInfoPanelProps) {
|
||||
export function FeatureInfoPanel({ feature, onClose }: FeatureInfoPanelProps) {
|
||||
const [detail, setDetail] = useState<FeatureDetail | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!feature) {
|
||||
setDetail(null);
|
||||
return;
|
||||
}
|
||||
if (!feature) { setDetail(null); return; }
|
||||
|
||||
// Try to load enrichment from API using the object_id from vector tile props
|
||||
const objectId = feature.properties.object_id ?? feature.properties.objectId;
|
||||
const siruta = feature.properties.siruta;
|
||||
if (!objectId || !siruta) {
|
||||
setDetail(null);
|
||||
return;
|
||||
}
|
||||
if (!objectId || !siruta) { setDetail(null); return; }
|
||||
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
fetch(`/api/geoportal/feature?objectId=${objectId}&siruta=${siruta}&sourceLayer=${feature.sourceLayer}`)
|
||||
.then((r) => {
|
||||
if (!r.ok) throw new Error(`${r.status}`);
|
||||
return r.json();
|
||||
})
|
||||
.then((data: { feature: FeatureDetail }) => {
|
||||
if (!cancelled) setDetail(data.feature);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) setError(err instanceof Error ? err.message : "Eroare la incarcarea detaliilor");
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
.then((r) => r.ok ? r.json() : Promise.reject())
|
||||
.then((data: { feature: FeatureDetail }) => { if (!cancelled) setDetail(data.feature); })
|
||||
.catch(() => { if (!cancelled) setDetail(null); })
|
||||
.finally(() => { if (!cancelled) setLoading(false); });
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
return () => { cancelled = true; };
|
||||
}, [feature]);
|
||||
|
||||
if (!feature) return null;
|
||||
|
||||
const enrichment = detail?.enrichment;
|
||||
const e = detail?.enrichment as FeatureEnrichmentData | null | undefined;
|
||||
const isUat = feature.sourceLayer?.includes("uat");
|
||||
const cadRef = e?.NR_CAD ?? feature.properties.cadastral_ref ?? "";
|
||||
const title = isUat
|
||||
? String(feature.properties.name ?? "UAT")
|
||||
: cadRef ? `Parcela ${cadRef}` : `#${feature.properties.object_id ?? "?"}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg w-80 max-h-[calc(100vh-16rem)] overflow-auto",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg w-72 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b sticky top-0 bg-background/95 backdrop-blur-sm z-10">
|
||||
<h3 className="text-sm font-semibold truncate flex-1">
|
||||
{enrichment?.NR_CAD
|
||||
? `Parcela ${enrichment.NR_CAD}`
|
||||
: feature.sourceLayer === "gis_uats"
|
||||
? `UAT ${feature.properties.name ?? ""}`
|
||||
: `Obiect #${feature.properties.object_id ?? feature.properties.objectId ?? "?"}`}
|
||||
</h3>
|
||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0 ml-2" onClick={onClose}>
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b">
|
||||
<h3 className="text-sm font-semibold truncate">{title}</h3>
|
||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0 shrink-0 ml-2" onClick={onClose}>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-3 space-y-3">
|
||||
<div className="px-3 py-2 text-xs space-y-1">
|
||||
{loading && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground py-4 justify-center">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Se incarca...
|
||||
<div className="flex items-center gap-2 text-muted-foreground py-2 justify-center">
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" /> Se incarca...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-destructive">Nu s-au putut incarca detaliile ({error})</p>
|
||||
{!loading && isUat && (
|
||||
<>
|
||||
<Row label="UAT" value={feature.properties.name} />
|
||||
<Row label="SIRUTA" value={feature.properties.siruta} />
|
||||
<Row label="Judet" value={feature.properties.county} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Basic props from vector tile */}
|
||||
{!loading && !enrichment && (
|
||||
<PropsTable properties={feature.properties} />
|
||||
{!loading && !isUat && (
|
||||
<>
|
||||
<Row label="UAT" value={feature.properties.siruta} />
|
||||
<Row label="SIRUTA" value={feature.properties.siruta} />
|
||||
<Row label="Nr. cadastral" value={e?.NR_CAD ?? cadRef} />
|
||||
<Row label="Nr. CF" value={e?.NR_CF} />
|
||||
<Row label="Suprafata" value={formatArea(e?.SUPRAFATA_2D ?? feature.properties.area_value)} />
|
||||
{e?.PROPRIETARI && e.PROPRIETARI !== "-" && (
|
||||
<Row label="Proprietari" value={e.PROPRIETARI} />
|
||||
)}
|
||||
{e?.INTRAVILAN && e.INTRAVILAN !== "-" && (
|
||||
<Row label="Intravilan" value={e.INTRAVILAN} />
|
||||
)}
|
||||
{e?.CATEGORIE_FOLOSINTA && e.CATEGORIE_FOLOSINTA !== "-" && (
|
||||
<Row label="Categorie" value={e.CATEGORIE_FOLOSINTA} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Enrichment data */}
|
||||
{enrichment && <EnrichmentView data={enrichment} />}
|
||||
|
||||
{/* Coordinates */}
|
||||
<div className="text-xs text-muted-foreground pt-1 border-t">
|
||||
<MapPin className="h-3 w-3 inline mr-1" />
|
||||
{feature.coordinates[1].toFixed(5)}, {feature.coordinates[0].toFixed(5)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Enrichment view */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function EnrichmentView({ data }: { data: FeatureEnrichmentData }) {
|
||||
return (
|
||||
<div className="space-y-2.5">
|
||||
{/* Cadastral info */}
|
||||
<Section icon={FileText} label="Cadastru">
|
||||
<Row label="Nr. cadastral" value={data.NR_CAD} />
|
||||
<Row label="Nr. CF" value={data.NR_CF} />
|
||||
{data.NR_CF_VECHI && data.NR_CF_VECHI !== "-" && (
|
||||
<Row label="CF vechi" value={data.NR_CF_VECHI} />
|
||||
)}
|
||||
{data.NR_TOPO && data.NR_TOPO !== "-" && (
|
||||
<Row label="Nr. topo" value={data.NR_TOPO} />
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{/* Owners */}
|
||||
{data.PROPRIETARI && data.PROPRIETARI !== "-" && (
|
||||
<Section icon={User} label="Proprietari">
|
||||
<p className="text-xs leading-relaxed">{data.PROPRIETARI}</p>
|
||||
{data.PROPRIETARI_VECHI && data.PROPRIETARI_VECHI !== "-" && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Anterior: {data.PROPRIETARI_VECHI}
|
||||
</p>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* Area */}
|
||||
<Section icon={Ruler} label="Suprafata">
|
||||
<Row label="Masurata" value={formatArea(data.SUPRAFATA_2D)} />
|
||||
<Row label="Rotunjita" value={formatArea(data.SUPRAFATA_R)} />
|
||||
</Section>
|
||||
|
||||
{/* Land use */}
|
||||
<Section icon={TreePine} label="Folosinta">
|
||||
<Row label="Categorie" value={data.CATEGORIE_FOLOSINTA} />
|
||||
<Row
|
||||
label="Intravilan"
|
||||
value={
|
||||
<Badge variant={data.INTRAVILAN === "DA" ? "default" : "secondary"} className="text-xs h-5">
|
||||
{data.INTRAVILAN || "-"}
|
||||
</Badge>
|
||||
}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
{/* Building */}
|
||||
{data.HAS_BUILDING === 1 && (
|
||||
<Section icon={Building2} label="Constructie">
|
||||
<Row label="Autorizata" value={data.BUILD_LEGAL ? "Da" : "Nu"} />
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* Address */}
|
||||
{data.ADRESA && data.ADRESA !== "-" && (
|
||||
<Section icon={MapPin} label="Adresa">
|
||||
<p className="text-xs">{data.ADRESA}</p>
|
||||
</Section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Helpers */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function Section({
|
||||
icon: Icon,
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
icon: typeof FileText;
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<Icon className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-5 space-y-0.5">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
function Row({ label, value }: { label: string; value: unknown }) {
|
||||
if (!value || value === "-" || value === "") return null;
|
||||
return (
|
||||
<div className="flex justify-between text-xs gap-2">
|
||||
<div className="flex justify-between gap-2">
|
||||
<span className="text-muted-foreground shrink-0">{label}</span>
|
||||
<span className="text-right font-medium truncate">{typeof value === "string" ? value : value}</span>
|
||||
<span className="text-right font-medium truncate">{String(value)}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PropsTable({ properties }: { properties: Record<string, unknown> }) {
|
||||
const entries = Object.entries(properties).filter(
|
||||
([, v]) => v != null && v !== ""
|
||||
);
|
||||
if (entries.length === 0) return <p className="text-xs text-muted-foreground">Fara atribute</p>;
|
||||
return (
|
||||
<div className="space-y-0.5">
|
||||
{entries.map(([key, value]) => (
|
||||
<Row key={key} label={key.replace(/_/g, " ")} value={String(value)} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatArea(v: number | string): string {
|
||||
if (v === "" || v == null) return "-";
|
||||
const n = typeof v === "string" ? parseFloat(v) : v;
|
||||
function formatArea(v: unknown): string {
|
||||
if (!v || v === "") return "";
|
||||
const n = typeof v === "number" ? v : parseFloat(String(v));
|
||||
if (isNaN(n)) return String(v);
|
||||
return `${n.toLocaleString("ro-RO")} mp`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user