refactor(parcel-sync): split 4800-line module into 9 files + Harta tab + enrichment views
Split parcel-sync-module.tsx (4800 lines) into modular files: - Orchestrator (452 lines): shared state (session, UAT, sync) + tab routing - Types + helpers, ConnectionPill, 6 tab components (search, layers, export, database, cf, map) New ParcelSync Harta tab: - UAT-scoped map: zoom to extent, filter parcels/buildings by siruta - Data-driven styling via gis_terenuri_status enrichment overlay (green=no enrichment, dark green=enriched, blue outline=building, red=no legal docs) - Reuses Geoportal components (MapViewer, SelectionToolbar, FeatureInfoPanel, BasemapSwitcher) - Export DXF/GPKG for selection, legend New PostGIS views (gis_terenuri_status, gis_cladiri_status): - has_enrichment, has_building, build_legal columns from enrichment JSON - Auto-created via /api/geoportal/setup-enrichment-views - Does not modify existing Geoportal views New API: /api/geoportal/uat-bounds (WGS84 bbox from PostGIS geometry) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AI Assistant
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* GET /api/geoportal/setup-enrichment-views — check if views exist
|
||||
* POST /api/geoportal/setup-enrichment-views — create enrichment status views
|
||||
*
|
||||
* Creates gis_terenuri_status and gis_cladiri_status views that include
|
||||
* enrichment metadata (has_enrichment, has_building, build_legal).
|
||||
* Martin serves these as vector tile sources, MapLibre uses them for
|
||||
* data-driven styling in the ParcelSync Harta tab.
|
||||
*
|
||||
* IMPORTANT: Does NOT modify existing gis_terenuri/gis_cladiri views
|
||||
* used by the Geoportal module.
|
||||
*/
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/core/storage/prisma";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const VIEWS = [
|
||||
{
|
||||
name: "gis_terenuri_status",
|
||||
sql: `CREATE OR REPLACE VIEW gis_terenuri_status AS
|
||||
SELECT
|
||||
f.id,
|
||||
f."layerId" AS layer_id,
|
||||
f.siruta,
|
||||
f."objectId" AS object_id,
|
||||
f."cadastralRef" AS cadastral_ref,
|
||||
f."areaValue" AS area_value,
|
||||
f."isActive" AS is_active,
|
||||
CASE WHEN f.enrichment IS NOT NULL AND f."enrichedAt" IS NOT NULL THEN 1 ELSE 0 END AS has_enrichment,
|
||||
COALESCE((f.enrichment->>'HAS_BUILDING')::int, 0) AS has_building,
|
||||
COALESCE((f.enrichment->>'BUILD_LEGAL')::int, 0) AS build_legal,
|
||||
f.geom
|
||||
FROM "GisFeature" f
|
||||
WHERE f.geom IS NOT NULL
|
||||
AND (f."layerId" LIKE 'TERENURI%' OR f."layerId" LIKE 'CADGEN_LAND%')`,
|
||||
},
|
||||
{
|
||||
name: "gis_cladiri_status",
|
||||
sql: `CREATE OR REPLACE VIEW gis_cladiri_status AS
|
||||
SELECT
|
||||
f.id,
|
||||
f."layerId" AS layer_id,
|
||||
f.siruta,
|
||||
f."objectId" AS object_id,
|
||||
f."cadastralRef" AS cadastral_ref,
|
||||
f."areaValue" AS area_value,
|
||||
f."isActive" AS is_active,
|
||||
f.geom
|
||||
FROM "GisFeature" f
|
||||
WHERE f.geom IS NOT NULL
|
||||
AND (f."layerId" LIKE 'CLADIRI%' OR f."layerId" LIKE 'CADGEN_BUILDING%')`,
|
||||
},
|
||||
];
|
||||
|
||||
/** GET — check if enrichment views exist */
|
||||
export async function GET() {
|
||||
try {
|
||||
const existing = await prisma.$queryRaw`
|
||||
SELECT viewname FROM pg_views
|
||||
WHERE schemaname = 'public' AND (viewname = 'gis_terenuri_status' OR viewname = 'gis_cladiri_status')
|
||||
` as Array<{ viewname: string }>;
|
||||
|
||||
const existingNames = new Set(existing.map((r) => r.viewname));
|
||||
const missing = VIEWS.filter((v) => !existingNames.has(v.name)).map((v) => v.name);
|
||||
|
||||
return NextResponse.json({ ready: missing.length === 0, missing });
|
||||
} catch (error) {
|
||||
const msg = error instanceof Error ? error.message : "Eroare";
|
||||
return NextResponse.json({ ready: false, missing: VIEWS.map((v) => v.name), error: msg });
|
||||
}
|
||||
}
|
||||
|
||||
/** POST — create enrichment views (idempotent) */
|
||||
export async function POST() {
|
||||
const results: string[] = [];
|
||||
try {
|
||||
for (const v of VIEWS) {
|
||||
await prisma.$executeRawUnsafe(v.sql);
|
||||
results.push(`${v.name} OK`);
|
||||
}
|
||||
return NextResponse.json({ status: "ok", results });
|
||||
} catch (error) {
|
||||
const msg = error instanceof Error ? error.message : "Eroare";
|
||||
return NextResponse.json({ status: "error", results, error: msg }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* GET /api/geoportal/uat-bounds?siruta=57582
|
||||
*
|
||||
* Returns WGS84 bounding box for a UAT from PostGIS geometry.
|
||||
* Used by ParcelSync Harta tab to zoom to selected UAT.
|
||||
*/
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/core/storage/prisma";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const siruta = req.nextUrl.searchParams.get("siruta");
|
||||
if (!siruta) {
|
||||
return NextResponse.json({ error: "siruta required" }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
const rows = await prisma.$queryRaw`
|
||||
SELECT
|
||||
ST_XMin(ST_Transform(geom, 4326)) AS min_lng,
|
||||
ST_YMin(ST_Transform(geom, 4326)) AS min_lat,
|
||||
ST_XMax(ST_Transform(geom, 4326)) AS max_lng,
|
||||
ST_YMax(ST_Transform(geom, 4326)) AS max_lat
|
||||
FROM "GisUat"
|
||||
WHERE siruta = ${siruta} AND geom IS NOT NULL
|
||||
LIMIT 1
|
||||
` as Array<{
|
||||
min_lng: number;
|
||||
min_lat: number;
|
||||
max_lng: number;
|
||||
max_lat: number;
|
||||
}>;
|
||||
|
||||
const first = rows[0];
|
||||
if (!first) {
|
||||
return NextResponse.json({ error: "UAT not found or no geometry" }, { status: 404 });
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
siruta,
|
||||
bounds: [
|
||||
[first.min_lng, first.min_lat],
|
||||
[first.max_lng, first.max_lat],
|
||||
],
|
||||
});
|
||||
} catch (error) {
|
||||
const msg = error instanceof Error ? error.message : "Eroare";
|
||||
return NextResponse.json({ error: msg }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Loader2,
|
||||
LogOut,
|
||||
Wifi,
|
||||
WifiOff,
|
||||
AlertTriangle,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/shared/components/ui/dropdown-menu";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import type { SessionStatus } from "./parcel-sync-types";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Connection Status Pill */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export function ConnectionPill({
|
||||
session,
|
||||
connecting,
|
||||
connectionError,
|
||||
onDisconnect,
|
||||
}: {
|
||||
session: SessionStatus;
|
||||
connecting: boolean;
|
||||
connectionError: string;
|
||||
onDisconnect: () => void;
|
||||
}) {
|
||||
const elapsed = session.connectedAt
|
||||
? Math.floor(
|
||||
(Date.now() - new Date(session.connectedAt).getTime()) / 60_000,
|
||||
)
|
||||
: 0;
|
||||
const elapsedLabel =
|
||||
elapsed < 1
|
||||
? "acum"
|
||||
: elapsed < 60
|
||||
? `${elapsed} min`
|
||||
: `${Math.floor(elapsed / 60)}h ${elapsed % 60}m`;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition-all",
|
||||
"hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
session.connected
|
||||
? "border-emerald-200 bg-emerald-50/80 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400"
|
||||
: session.eterraMaintenance
|
||||
? "border-amber-200 bg-amber-50/80 text-amber-600 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-400"
|
||||
: connectionError
|
||||
? "border-rose-200 bg-rose-50/80 text-rose-600 dark:border-rose-800 dark:bg-rose-950/40 dark:text-rose-400"
|
||||
: "border-muted-foreground/20 bg-muted/50 text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{connecting ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : session.connected ? (
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
|
||||
</span>
|
||||
) : session.eterraMaintenance ? (
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
) : connectionError ? (
|
||||
<WifiOff className="h-3 w-3" />
|
||||
) : (
|
||||
<Wifi className="h-3 w-3 opacity-50" />
|
||||
)}
|
||||
<span className="hidden sm:inline">
|
||||
{connecting
|
||||
? "Se conecteaz\u0103\u2026"
|
||||
: session.connected
|
||||
? "eTerra"
|
||||
: session.eterraMaintenance
|
||||
? "Mentenan\u021b\u0103"
|
||||
: connectionError
|
||||
? "Eroare"
|
||||
: "Deconectat"}
|
||||
</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent align="end" className="w-72 p-0">
|
||||
{/* Status header */}
|
||||
<div
|
||||
className={cn(
|
||||
"px-3 py-2.5 border-b",
|
||||
session.connected
|
||||
? "bg-emerald-50/50 dark:bg-emerald-950/20"
|
||||
: "bg-muted/30",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<DropdownMenuLabel className="p-0 text-xs font-semibold">
|
||||
Conexiune eTerra
|
||||
</DropdownMenuLabel>
|
||||
{session.connected && (
|
||||
<span className="text-[10px] text-emerald-600 dark:text-emerald-400 font-mono">
|
||||
{elapsedLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{session.connected && session.username && (
|
||||
<p className="text-[11px] text-muted-foreground mt-0.5 truncate">
|
||||
{session.username}
|
||||
</p>
|
||||
)}
|
||||
{connectionError && (
|
||||
<p className="text-[11px] text-rose-500 mt-0.5">
|
||||
{connectionError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Maintenance banner */}
|
||||
{!session.connected && session.eterraMaintenance && (
|
||||
<div className="px-3 py-3 text-xs border-b bg-amber-50/50 dark:bg-amber-950/20">
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertTriangle className="h-3.5 w-3.5 text-amber-500 mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium text-amber-700 dark:text-amber-400">
|
||||
eTerra este \u00een mentenan\u021b\u0103
|
||||
</p>
|
||||
<p className="mt-1 text-[11px] text-amber-600/80 dark:text-amber-400/70">
|
||||
Platforma ANCPI nu este disponibil\u0103 momentan. Conectarea va fi
|
||||
reactivat\u0103 automat c\u00e2nd serviciul revine online.
|
||||
</p>
|
||||
{session.eterraHealthMessage && (
|
||||
<p className="mt-1 text-[10px] opacity-60 font-mono">
|
||||
{session.eterraHealthMessage}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info when not connected (and not in maintenance) */}
|
||||
{!session.connected &&
|
||||
!connectionError &&
|
||||
!session.eterraMaintenance && (
|
||||
<div className="px-3 py-3 text-xs text-muted-foreground">
|
||||
<p>Conexiunea se face automat c\u00e2nd \u00eencepi s\u0103 scrii un UAT.</p>
|
||||
<p className="mt-1 text-[11px] opacity-70">
|
||||
Creden\u021bialele sunt preluate din configurarea serverului.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error detail (only when NOT maintenance) */}
|
||||
{!session.connected &&
|
||||
connectionError &&
|
||||
!session.eterraMaintenance && (
|
||||
<div className="px-3 py-3 text-xs text-muted-foreground">
|
||||
<p>
|
||||
Conexiunea automat\u0103 a e\u0219uat. Verific\u0103 creden\u021bialele din
|
||||
variabilele de mediu (ETERRA_USERNAME / ETERRA_PASSWORD).
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Connected — active jobs info + disconnect */}
|
||||
{session.connected && (
|
||||
<>
|
||||
{session.activeJobCount > 0 && (
|
||||
<div className="px-3 py-2 border-b bg-amber-50/50 dark:bg-amber-950/20">
|
||||
<p className="text-[11px] text-amber-700 dark:text-amber-400">
|
||||
<span className="font-semibold">
|
||||
{session.activeJobCount} job
|
||||
{session.activeJobCount > 1 ? "-uri" : ""} activ
|
||||
{session.activeJobCount > 1 ? "e" : ""}
|
||||
</span>
|
||||
{session.activeJobPhase && (
|
||||
<span className="opacity-70">
|
||||
{" "}
|
||||
\u2014 {session.activeJobPhase}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<DropdownMenuSeparator className="m-0" />
|
||||
<div className="p-1.5">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
|
||||
onClick={onDisconnect}
|
||||
>
|
||||
<LogOut className="h-3 w-3" />
|
||||
Deconectare
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,124 @@
|
||||
import type { ParcelDetail } from "@/app/api/eterra/search/route";
|
||||
import type { OwnerSearchResult } from "@/app/api/eterra/search-owner/route";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Types */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export type UatEntry = {
|
||||
siruta: string;
|
||||
name: string;
|
||||
county?: string;
|
||||
workspacePk?: number;
|
||||
localFeatures?: number;
|
||||
};
|
||||
|
||||
export type SessionStatus = {
|
||||
connected: boolean;
|
||||
username?: string;
|
||||
connectedAt?: string;
|
||||
activeJobCount: number;
|
||||
activeJobPhase?: string;
|
||||
/** eTerra platform health */
|
||||
eterraAvailable?: boolean;
|
||||
/** True when eTerra is in maintenance */
|
||||
eterraMaintenance?: boolean;
|
||||
/** Human-readable health message */
|
||||
eterraHealthMessage?: string;
|
||||
};
|
||||
|
||||
export type ExportProgress = {
|
||||
jobId: string;
|
||||
downloaded: number;
|
||||
total?: number;
|
||||
status: "running" | "done" | "error" | "unknown";
|
||||
phase?: string;
|
||||
message?: string;
|
||||
note?: string;
|
||||
phaseCurrent?: number;
|
||||
phaseTotal?: number;
|
||||
};
|
||||
|
||||
export type SyncRunInfo = {
|
||||
id: string;
|
||||
layerId: string;
|
||||
status: string;
|
||||
totalRemote: number;
|
||||
totalLocal: number;
|
||||
newFeatures: number;
|
||||
removedFeatures: number;
|
||||
startedAt: string;
|
||||
completedAt?: string;
|
||||
};
|
||||
|
||||
export type DbUatSummary = {
|
||||
siruta: string;
|
||||
uatName: string;
|
||||
county: string | null;
|
||||
layers: {
|
||||
layerId: string;
|
||||
count: number;
|
||||
enrichedCount: number;
|
||||
noGeomCount: number;
|
||||
lastSynced: string | null;
|
||||
}[];
|
||||
totalFeatures: number;
|
||||
totalEnriched: number;
|
||||
totalNoGeom: number;
|
||||
};
|
||||
|
||||
export type DbSummary = {
|
||||
uats: DbUatSummary[];
|
||||
totalFeatures: number;
|
||||
totalUats: number;
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Helpers */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export const normalizeText = (text: string) =>
|
||||
text
|
||||
.normalize("NFD")
|
||||
.replace(/[\u0300-\u036f]/g, "")
|
||||
.toLowerCase()
|
||||
.trim();
|
||||
|
||||
export function formatDate(iso?: string | null) {
|
||||
if (!iso) return "\u2014";
|
||||
return new Date(iso).toLocaleDateString("ro-RO", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
export function formatArea(val?: number | null) {
|
||||
if (val == null) return "\u2014";
|
||||
return val.toLocaleString("ro-RO", { maximumFractionDigits: 2 }) + " mp";
|
||||
}
|
||||
|
||||
/** Format ISO date as DD.MM.YYYY (no time) */
|
||||
export function formatShortDate(iso?: string | null) {
|
||||
if (!iso) return "\u2014";
|
||||
const d = new Date(iso);
|
||||
const dd = String(d.getDate()).padStart(2, "0");
|
||||
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
||||
return `${dd}.${mm}.${d.getFullYear()}`;
|
||||
}
|
||||
|
||||
export function relativeTime(date: Date | null) {
|
||||
if (!date) return "niciodat\u0103";
|
||||
const mins = Math.floor((Date.now() - date.getTime()) / 60_000);
|
||||
if (mins < 1) return "acum";
|
||||
if (mins < 60) return `acum ${mins} min`;
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return `acum ${hours}h`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `acum ${days}z`;
|
||||
}
|
||||
|
||||
/* Re-export for convenience */
|
||||
export type { ParcelDetail, OwnerSearchResult };
|
||||
@@ -0,0 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { EpayTab } from "../epay-tab";
|
||||
|
||||
export function CfTab() {
|
||||
return <EpayTab />;
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Loader2,
|
||||
Database,
|
||||
RefreshCw,
|
||||
Sparkles,
|
||||
BarChart3,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { Card, CardContent } from "@/shared/components/ui/card";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import type { DbSummary } from "../parcel-sync-types";
|
||||
import { relativeTime } from "../parcel-sync-types";
|
||||
import {
|
||||
LAYER_CATEGORY_LABELS,
|
||||
type LayerCategory,
|
||||
findLayerById,
|
||||
} from "../../services/eterra-layers";
|
||||
import { UatDashboard } from "../uat-dashboard";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Props */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
type DatabaseTabProps = {
|
||||
siruta: string;
|
||||
sirutaValid: boolean;
|
||||
dbSummary: DbSummary | null;
|
||||
dbSummaryLoading: boolean;
|
||||
onRefresh: () => void;
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Component */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export function DatabaseTab({
|
||||
siruta,
|
||||
sirutaValid,
|
||||
dbSummary,
|
||||
dbSummaryLoading,
|
||||
onRefresh,
|
||||
}: DatabaseTabProps) {
|
||||
const [dashboardSiruta, setDashboardSiruta] = useState<string | null>(null);
|
||||
|
||||
/* ── Loading state ──────────────────────────────────────────────── */
|
||||
if (dbSummaryLoading && !dbSummary) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 mx-auto mb-3 animate-spin opacity-40" />
|
||||
<p>Se \u00eencarc\u0103 datele din baza de date\u2026</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Empty state ────────────────────────────────────────────────── */
|
||||
if (!dbSummary || dbSummary.totalFeatures === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center text-muted-foreground">
|
||||
<Database className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p className="font-medium">Nicio dat\u0103 \u00een baza de date</p>
|
||||
<p className="text-xs mt-1">
|
||||
Folose\u0219te tab-ul Export pentru a sincroniza date din eTerra.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Populated state ────────────────────────────────────────────── */
|
||||
return (
|
||||
<>
|
||||
{/* Header row */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">
|
||||
{dbSummary.totalFeatures.toLocaleString("ro-RO")} entit\u0103\u021bi
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
din {dbSummary.totalUats} UAT-uri
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
disabled={dbSummaryLoading}
|
||||
onClick={onRefresh}
|
||||
>
|
||||
{dbSummaryLoading ? (
|
||||
<Loader2 className="h-3 w-3 mr-1 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
Re\u00eencarc\u0103
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* UAT cards */}
|
||||
{dbSummary.uats.map((uat) => {
|
||||
const catCounts: Record<string, number> = {};
|
||||
let enrichedTotal = 0;
|
||||
let noGeomTotal = 0;
|
||||
let oldestSync: Date | null = null;
|
||||
for (const layer of uat.layers) {
|
||||
const cat =
|
||||
findLayerById(layer.layerId)?.category ?? "administrativ";
|
||||
catCounts[cat] = (catCounts[cat] ?? 0) + layer.count;
|
||||
enrichedTotal += layer.enrichedCount;
|
||||
noGeomTotal += layer.noGeomCount ?? 0;
|
||||
if (layer.lastSynced) {
|
||||
const d = new Date(layer.lastSynced);
|
||||
if (!oldestSync || d < oldestSync) oldestSync = d;
|
||||
}
|
||||
}
|
||||
const isCurrentUat = sirutaValid && uat.siruta === siruta;
|
||||
|
||||
return (
|
||||
<div key={uat.siruta} className="space-y-3">
|
||||
<Card
|
||||
className={cn(
|
||||
"transition-colors",
|
||||
isCurrentUat && "ring-1 ring-emerald-400/50",
|
||||
)}
|
||||
>
|
||||
<CardContent className="py-3 px-4 space-y-2">
|
||||
{/* UAT header row */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-semibold">
|
||||
{uat.uatName}
|
||||
</span>
|
||||
{uat.county && (
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
({uat.county})
|
||||
</span>
|
||||
)}
|
||||
<span className="text-[10px] font-mono text-muted-foreground">
|
||||
#{uat.siruta}
|
||||
</span>
|
||||
{isCurrentUat && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[9px] h-4 text-emerald-600 border-emerald-300 dark:text-emerald-400 dark:border-emerald-700"
|
||||
>
|
||||
selectat
|
||||
</Badge>
|
||||
)}
|
||||
<span className="ml-auto flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 px-2 text-[10px] gap-1 text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 hover:bg-indigo-50 dark:hover:bg-indigo-950"
|
||||
onClick={() =>
|
||||
setDashboardSiruta(
|
||||
dashboardSiruta === uat.siruta
|
||||
? null
|
||||
: uat.siruta,
|
||||
)
|
||||
}
|
||||
>
|
||||
<BarChart3 className="h-3 w-3" />
|
||||
Dashboard
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{oldestSync ? relativeTime(oldestSync) : "\u2014"}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Category counts in a single compact row */}
|
||||
<div className="flex items-center gap-2 flex-wrap text-xs">
|
||||
{(
|
||||
Object.entries(LAYER_CATEGORY_LABELS) as [
|
||||
LayerCategory,
|
||||
string,
|
||||
][]
|
||||
).map(([cat, label]) => {
|
||||
const count = catCounts[cat] ?? 0;
|
||||
if (count === 0) return null;
|
||||
return (
|
||||
<span
|
||||
key={cat}
|
||||
className="inline-flex items-center gap-1"
|
||||
>
|
||||
<span className="text-muted-foreground">
|
||||
{label}:
|
||||
</span>
|
||||
<span className="font-medium tabular-nums">
|
||||
{count.toLocaleString("ro-RO")}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{enrichedTotal > 0 && (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Sparkles className="h-3 w-3 text-teal-600 dark:text-teal-400" />
|
||||
<span className="text-muted-foreground">
|
||||
Magic:
|
||||
</span>
|
||||
<span className="font-medium tabular-nums text-teal-700 dark:text-teal-400">
|
||||
{enrichedTotal.toLocaleString("ro-RO")}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
{noGeomTotal > 0 && (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="text-muted-foreground">
|
||||
F\u0103r\u0103 geom:
|
||||
</span>
|
||||
<span className="font-medium tabular-nums text-amber-600 dark:text-amber-400">
|
||||
{noGeomTotal.toLocaleString("ro-RO")}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Layer detail pills */}
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
{uat.layers
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.map((layer) => {
|
||||
const meta = findLayerById(layer.layerId);
|
||||
const label =
|
||||
meta?.label ?? layer.layerId.replace(/_/g, " ");
|
||||
const isEnriched = layer.enrichedCount > 0;
|
||||
return (
|
||||
<span
|
||||
key={layer.layerId}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px]",
|
||||
isEnriched
|
||||
? "border-teal-200 bg-teal-50/50 dark:border-teal-800 dark:bg-teal-950/30"
|
||||
: "border-muted bg-muted/30",
|
||||
)}
|
||||
title={`${label}: ${layer.count} entit\u0103\u021bi${isEnriched ? `, ${layer.enrichedCount} \u00eembog\u0103\u021bite` : ""}${layer.lastSynced ? `, sync: ${new Date(layer.lastSynced).toLocaleDateString("ro-RO")}` : ""}`}
|
||||
>
|
||||
<span className="truncate max-w-[120px]">
|
||||
{label}
|
||||
</span>
|
||||
<span className="font-medium tabular-nums">
|
||||
{layer.count.toLocaleString("ro-RO")}
|
||||
</span>
|
||||
{isEnriched && (
|
||||
<Sparkles className="h-2.5 w-2.5 text-teal-600 dark:text-teal-400" />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Dashboard panel (expanded below card) */}
|
||||
{dashboardSiruta === uat.siruta && (
|
||||
<UatDashboard
|
||||
siruta={uat.siruta}
|
||||
uatName={uat.uatName}
|
||||
onClose={() => setDashboardSiruta(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,987 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import {
|
||||
Search,
|
||||
Layers,
|
||||
Loader2,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Download,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
RefreshCw,
|
||||
Database,
|
||||
HardDrive,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { Card, CardContent } from "@/shared/components/ui/card";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/shared/components/ui/tooltip";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import {
|
||||
LAYER_CATALOG,
|
||||
LAYER_CATEGORY_LABELS,
|
||||
type LayerCategory,
|
||||
type LayerCatalogItem,
|
||||
} from "../../services/eterra-layers";
|
||||
import type {
|
||||
SessionStatus,
|
||||
SyncRunInfo,
|
||||
ExportProgress,
|
||||
} from "../parcel-sync-types";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Props */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
type LayersTabProps = {
|
||||
siruta: string;
|
||||
sirutaValid: boolean;
|
||||
session: SessionStatus;
|
||||
syncLocalCounts: Record<string, number>;
|
||||
syncRuns: SyncRunInfo[];
|
||||
syncingSiruta: string;
|
||||
onSyncRefresh: () => void;
|
||||
exporting: boolean;
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Component */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export function LayersTab({
|
||||
siruta,
|
||||
sirutaValid,
|
||||
session,
|
||||
syncLocalCounts,
|
||||
syncRuns,
|
||||
syncingSiruta,
|
||||
onSyncRefresh,
|
||||
exporting,
|
||||
}: LayersTabProps) {
|
||||
/* ── Local state ──────────────────────────────────────────────── */
|
||||
const [expandedCategories, setExpandedCategories] = useState<
|
||||
Record<string, boolean>
|
||||
>({});
|
||||
const [downloadingLayer, setDownloadingLayer] = useState<string | null>(null);
|
||||
const [layerCounts, setLayerCounts] = useState<
|
||||
Record<string, { count: number; error?: string }>
|
||||
>({});
|
||||
const [countingLayers, setCountingLayers] = useState(false);
|
||||
const [layerCountSiruta, setLayerCountSiruta] = useState("");
|
||||
const [layerHistory, setLayerHistory] = useState<
|
||||
{
|
||||
layerId: string;
|
||||
label: string;
|
||||
count: number;
|
||||
time: string;
|
||||
siruta: string;
|
||||
}[]
|
||||
>([]);
|
||||
const [syncingLayer, setSyncingLayer] = useState<string | null>(null);
|
||||
const [syncProgress, setSyncProgress] = useState("");
|
||||
const [syncQueue, setSyncQueue] = useState<string[]>([]);
|
||||
const syncQueueRef = useRef<string[]>([]);
|
||||
const [exportingLocal, setExportingLocal] = useState(false);
|
||||
const [postgisRunning, setPostgisRunning] = useState(false);
|
||||
const [postgisResult, setPostgisResult] = useState<{
|
||||
success: boolean;
|
||||
message?: string;
|
||||
details?: Record<string, unknown>;
|
||||
error?: string;
|
||||
} | null>(null);
|
||||
const [exportProgress, setExportProgress] = useState<ExportProgress | null>(
|
||||
null,
|
||||
);
|
||||
const [phaseTrail, setPhaseTrail] = useState<string[]>([]);
|
||||
|
||||
const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
/* ── Derived ──────────────────────────────────────────────────── */
|
||||
|
||||
const layersByCategory = useMemo(() => {
|
||||
const grouped: Record<string, LayerCatalogItem[]> = {};
|
||||
for (const layer of LAYER_CATALOG) {
|
||||
if (!grouped[layer.category]) grouped[layer.category] = [];
|
||||
grouped[layer.category]!.push(layer);
|
||||
}
|
||||
return grouped;
|
||||
}, []);
|
||||
|
||||
const progressPct =
|
||||
exportProgress?.total && exportProgress.total > 0
|
||||
? Math.round((exportProgress.downloaded / exportProgress.total) * 100)
|
||||
: 0;
|
||||
|
||||
/* ── Layer history: load from localStorage on mount ───────────── */
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem("parcel-sync:layer-history");
|
||||
if (raw) {
|
||||
const parsed = JSON.parse(raw) as typeof layerHistory;
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
const todayEntries = parsed.filter(
|
||||
(e) => e.time.slice(0, 10) === today,
|
||||
);
|
||||
setLayerHistory(todayEntries);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
/* ── Cleanup polling on unmount ───────────────────────────────── */
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (pollingRef.current) clearInterval(pollingRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
/* ── startPolling ─────────────────────────────────────────────── */
|
||||
|
||||
const startPolling = useCallback((jid: string) => {
|
||||
if (pollingRef.current) clearInterval(pollingRef.current);
|
||||
pollingRef.current = setInterval(async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/eterra/progress?jobId=${encodeURIComponent(jid)}`,
|
||||
);
|
||||
const data = (await res.json()) as ExportProgress;
|
||||
setExportProgress(data);
|
||||
if (data.phase) {
|
||||
setPhaseTrail((prev) => {
|
||||
if (prev[prev.length - 1] === data.phase) return prev;
|
||||
return [...prev, data.phase!];
|
||||
});
|
||||
}
|
||||
if (data.status === "done" || data.status === "error") {
|
||||
if (pollingRef.current) {
|
||||
clearInterval(pollingRef.current);
|
||||
pollingRef.current = null;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
/* ignore polling errors */
|
||||
}
|
||||
}, 1000);
|
||||
}, []);
|
||||
|
||||
/* ── fetchLayerCounts ─────────────────────────────────────────── */
|
||||
|
||||
const fetchLayerCounts = useCallback(async () => {
|
||||
if (!siruta || countingLayers) return;
|
||||
setCountingLayers(true);
|
||||
try {
|
||||
const res = await fetch("/api/eterra/layers/summary", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ siruta }),
|
||||
});
|
||||
const data = (await res.json()) as {
|
||||
counts?: Record<string, { count: number; error?: string }>;
|
||||
error?: string;
|
||||
};
|
||||
if (data.counts) {
|
||||
setLayerCounts(data.counts);
|
||||
setLayerCountSiruta(siruta);
|
||||
|
||||
// Save non-zero counts to history
|
||||
const now = new Date().toISOString();
|
||||
const today = now.slice(0, 10);
|
||||
const newEntries: typeof layerHistory = [];
|
||||
for (const [layerId, info] of Object.entries(data.counts)) {
|
||||
if (info.count > 0) {
|
||||
const layer = LAYER_CATALOG.find((l) => l.id === layerId);
|
||||
newEntries.push({
|
||||
layerId,
|
||||
label: layer?.label ?? layerId,
|
||||
count: info.count,
|
||||
time: now,
|
||||
siruta,
|
||||
});
|
||||
}
|
||||
}
|
||||
setLayerHistory((prev) => {
|
||||
// Keep today's entries only, add new batch
|
||||
const kept = prev.filter(
|
||||
(e) => e.time.slice(0, 10) === today && e.siruta !== siruta,
|
||||
);
|
||||
const merged = [...kept, ...newEntries];
|
||||
try {
|
||||
localStorage.setItem(
|
||||
"parcel-sync:layer-history",
|
||||
JSON.stringify(merged),
|
||||
);
|
||||
} catch {
|
||||
// quota
|
||||
}
|
||||
return merged;
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
setCountingLayers(false);
|
||||
}, [siruta, countingLayers]);
|
||||
|
||||
/* ── handleSyncLayer ──────────────────────────────────────────── */
|
||||
|
||||
const handleSyncLayer = useCallback(
|
||||
async (layerId: string) => {
|
||||
if (!siruta || syncingLayer) return;
|
||||
setSyncingLayer(layerId);
|
||||
setSyncProgress("Sincronizare pornit\u0103\u2026");
|
||||
try {
|
||||
const res = await fetch("/api/eterra/sync", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
siruta,
|
||||
layerId,
|
||||
jobId: crypto.randomUUID(),
|
||||
}),
|
||||
});
|
||||
const data = (await res.json()) as {
|
||||
status?: string;
|
||||
newFeatures?: number;
|
||||
removedFeatures?: number;
|
||||
totalLocal?: number;
|
||||
error?: string;
|
||||
};
|
||||
if (data.error) {
|
||||
setSyncProgress(`Eroare: ${data.error}`);
|
||||
} else {
|
||||
setSyncProgress(
|
||||
`Finalizat \u2014 ${data.newFeatures ?? 0} noi, ${data.removedFeatures ?? 0} \u0219terse, ${data.totalLocal ?? 0} total local`,
|
||||
);
|
||||
// Refresh sync status
|
||||
onSyncRefresh();
|
||||
}
|
||||
} catch {
|
||||
setSyncProgress("Eroare re\u021bea");
|
||||
}
|
||||
// Clear progress after 8s
|
||||
setTimeout(() => {
|
||||
setSyncingLayer(null);
|
||||
setSyncProgress("");
|
||||
}, 8_000);
|
||||
},
|
||||
[siruta, syncingLayer, onSyncRefresh],
|
||||
);
|
||||
|
||||
/* ── handleExportLocal ────────────────────────────────────────── */
|
||||
|
||||
const handleExportLocal = useCallback(
|
||||
async (layerIds?: string[]) => {
|
||||
if (!siruta || exportingLocal) return;
|
||||
setExportingLocal(true);
|
||||
try {
|
||||
const res = await fetch("/api/eterra/export-local", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
siruta,
|
||||
...(layerIds ? { layerIds } : { allLayers: true }),
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = (await res.json().catch(() => ({}))) as {
|
||||
error?: string;
|
||||
};
|
||||
throw new Error(err.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
const blob = await res.blob();
|
||||
const cd = res.headers.get("Content-Disposition") ?? "";
|
||||
const match = /filename="?([^"]+)"?/.exec(cd);
|
||||
const filename =
|
||||
match?.[1] ??
|
||||
`eterra_local_${siruta}.${layerIds?.length === 1 ? "gpkg" : "zip"}`;
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
const msg = error instanceof Error ? error.message : "Eroare export";
|
||||
setSyncProgress(msg);
|
||||
setTimeout(() => setSyncProgress(""), 5_000);
|
||||
}
|
||||
setExportingLocal(false);
|
||||
},
|
||||
[siruta, exportingLocal],
|
||||
);
|
||||
|
||||
/* ── handleSyncMultiple ───────────────────────────────────────── */
|
||||
|
||||
const handleSyncMultiple = useCallback(
|
||||
async (layerIds: string[]) => {
|
||||
if (!siruta || syncingLayer || syncQueue.length > 0) return;
|
||||
syncQueueRef.current = [...layerIds];
|
||||
setSyncQueue([...layerIds]);
|
||||
|
||||
for (const layerId of layerIds) {
|
||||
setSyncingLayer(layerId);
|
||||
setSyncProgress(
|
||||
`Sincronizare ${LAYER_CATALOG.find((l) => l.id === layerId)?.label ?? layerId}\u2026`,
|
||||
);
|
||||
try {
|
||||
const res = await fetch("/api/eterra/sync", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
siruta,
|
||||
layerId,
|
||||
jobId: crypto.randomUUID(),
|
||||
}),
|
||||
});
|
||||
const data = (await res.json()) as {
|
||||
error?: string;
|
||||
newFeatures?: number;
|
||||
removedFeatures?: number;
|
||||
totalLocal?: number;
|
||||
};
|
||||
if (data.error) {
|
||||
setSyncProgress(`Eroare: ${data.error}`);
|
||||
}
|
||||
} catch {
|
||||
setSyncProgress("Eroare re\u021bea");
|
||||
}
|
||||
// Remove from queue
|
||||
syncQueueRef.current = syncQueueRef.current.filter(
|
||||
(id) => id !== layerId,
|
||||
);
|
||||
setSyncQueue([...syncQueueRef.current]);
|
||||
}
|
||||
// Done — refresh status
|
||||
onSyncRefresh();
|
||||
setSyncingLayer(null);
|
||||
setSyncProgress("");
|
||||
setSyncQueue([]);
|
||||
syncQueueRef.current = [];
|
||||
},
|
||||
[siruta, syncingLayer, syncQueue.length, onSyncRefresh],
|
||||
);
|
||||
|
||||
/* ── handleSetupPostgis ───────────────────────────────────────── */
|
||||
|
||||
const handleSetupPostgis = useCallback(async () => {
|
||||
if (postgisRunning) return;
|
||||
setPostgisRunning(true);
|
||||
setPostgisResult(null);
|
||||
try {
|
||||
const res = await fetch("/api/eterra/setup-postgis", { method: "POST" });
|
||||
const json = await res.json();
|
||||
setPostgisResult(json as typeof postgisResult);
|
||||
} catch (error) {
|
||||
const msg = error instanceof Error ? error.message : "Eroare setup";
|
||||
setPostgisResult({ success: false, error: msg });
|
||||
}
|
||||
setPostgisRunning(false);
|
||||
}, [postgisRunning, postgisResult]);
|
||||
|
||||
/* ── handleExportLayer ────────────────────────────────────────── */
|
||||
|
||||
const handleExportLayer = useCallback(
|
||||
async (layerId: string) => {
|
||||
if (!siruta || downloadingLayer) return;
|
||||
setDownloadingLayer(layerId);
|
||||
const jobId = crypto.randomUUID();
|
||||
setExportProgress(null);
|
||||
setPhaseTrail([]);
|
||||
|
||||
startPolling(jobId);
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/eterra/export-layer-gpkg", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
siruta,
|
||||
layerId,
|
||||
jobId,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = (await res.json().catch(() => ({}))) as {
|
||||
error?: string;
|
||||
};
|
||||
throw new Error(err.error ?? `HTTP ${res.status}`);
|
||||
}
|
||||
|
||||
const blob = await res.blob();
|
||||
const cd = res.headers.get("Content-Disposition") ?? "";
|
||||
const match = /filename="?([^"]+)"?/.exec(cd);
|
||||
const filename =
|
||||
match?.[1] ?? `eterra_uat_${siruta}_${layerId}.gpkg`;
|
||||
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
// Mark progress as done after successful download
|
||||
setExportProgress((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
status: "done",
|
||||
phase: "Finalizat",
|
||||
downloaded: prev.total ?? 100,
|
||||
total: prev.total ?? 100,
|
||||
message: `Desc\u0103rcare complet\u0103 \u2014 ${filename}`,
|
||||
note: undefined,
|
||||
}
|
||||
: null,
|
||||
);
|
||||
} catch (error) {
|
||||
const msg = error instanceof Error ? error.message : "Eroare export";
|
||||
setExportProgress((prev) =>
|
||||
prev
|
||||
? { ...prev, status: "error", message: msg }
|
||||
: {
|
||||
jobId,
|
||||
downloaded: 0,
|
||||
status: "error",
|
||||
message: msg,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
if (pollingRef.current) {
|
||||
clearInterval(pollingRef.current);
|
||||
pollingRef.current = null;
|
||||
}
|
||||
setDownloadingLayer(null);
|
||||
// Refresh sync status — layer was synced to DB
|
||||
onSyncRefresh();
|
||||
},
|
||||
[siruta, downloadingLayer, startPolling, onSyncRefresh],
|
||||
);
|
||||
|
||||
/* ── Suppress unused warnings for sync multiple (used externally) */
|
||||
void handleSyncMultiple;
|
||||
void phaseTrail;
|
||||
void syncQueue;
|
||||
|
||||
/* ── JSX ──────────────────────────────────────────────────────── */
|
||||
|
||||
if (!sirutaValid || !session.connected) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center text-muted-foreground">
|
||||
<Layers className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p>
|
||||
{!session.connected
|
||||
? "Conecteaz\u0103-te la eTerra \u0219i selecteaz\u0103 un UAT."
|
||||
: "Selecteaz\u0103 un UAT pentru a vedea catalogul de layere."}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Action bar */}
|
||||
<div className="flex items-center justify-between gap-2 flex-wrap">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{layerCountSiruta === siruta &&
|
||||
Object.keys(layerCounts).length > 0
|
||||
? `Num\u0103r features pentru SIRUTA ${siruta}`
|
||||
: "Apas\u0103 pentru a num\u0103ra features-urile din fiecare layer."}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Export from local DB */}
|
||||
{syncingSiruta === siruta &&
|
||||
Object.values(syncLocalCounts).some((c) => c > 0) && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={exportingLocal}
|
||||
onClick={() => void handleExportLocal()}
|
||||
className="border-violet-300 text-violet-700 dark:border-violet-700 dark:text-violet-300"
|
||||
>
|
||||
{exportingLocal ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" />
|
||||
) : (
|
||||
<HardDrive className="h-3.5 w-3.5 mr-1.5" />
|
||||
)}
|
||||
Export local
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={countingLayers}
|
||||
onClick={() => void fetchLayerCounts()}
|
||||
>
|
||||
{countingLayers ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" />
|
||||
) : (
|
||||
<Search className="h-3.5 w-3.5 mr-1.5" />
|
||||
)}
|
||||
{countingLayers ? "Se num\u0103r\u0103\u2026" : "Num\u0103r\u0103"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sync progress message */}
|
||||
{syncProgress && (
|
||||
<div className="flex items-center gap-2 rounded-lg border px-3 py-2 text-xs">
|
||||
{syncingLayer ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin text-blue-500 shrink-0" />
|
||||
) : (
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
|
||||
)}
|
||||
<span>{syncProgress}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(Object.keys(LAYER_CATEGORY_LABELS) as LayerCategory[]).map((cat) => {
|
||||
const layers = layersByCategory[cat];
|
||||
if (!layers?.length) return null;
|
||||
const isExpanded = expandedCategories[cat] ?? false;
|
||||
|
||||
// Sum counts for category badge
|
||||
const catTotal =
|
||||
layerCountSiruta === siruta
|
||||
? layers.reduce(
|
||||
(sum, l) => sum + (layerCounts[l.id]?.count ?? 0),
|
||||
0,
|
||||
)
|
||||
: null;
|
||||
|
||||
// Sum local counts for category
|
||||
const catLocal =
|
||||
syncingSiruta === siruta
|
||||
? layers.reduce(
|
||||
(sum, l) => sum + (syncLocalCounts[l.id] ?? 0),
|
||||
0,
|
||||
)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Card key={cat}>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-muted/50 transition-colors rounded-t-xl"
|
||||
onClick={() =>
|
||||
setExpandedCategories((prev) => ({
|
||||
...prev,
|
||||
[cat]: !prev[cat],
|
||||
}))
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-semibold">
|
||||
{LAYER_CATEGORY_LABELS[cat]}
|
||||
</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="font-normal text-[11px]"
|
||||
>
|
||||
{layers.length}
|
||||
</Badge>
|
||||
{catTotal != null && catTotal > 0 && (
|
||||
<Badge className="font-mono text-[10px] bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 border-0">
|
||||
{catTotal.toLocaleString("ro-RO")} remote
|
||||
</Badge>
|
||||
)}
|
||||
{catLocal != null && catLocal > 0 && (
|
||||
<Badge className="font-mono text-[10px] bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300 border-0">
|
||||
{catLocal.toLocaleString("ro-RO")} local
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<CardContent className="pt-0 pb-3 space-y-1.5">
|
||||
{layers.map((layer) => {
|
||||
const isDownloading = downloadingLayer === layer.id;
|
||||
const isSyncing = syncingLayer === layer.id;
|
||||
const lc =
|
||||
layerCountSiruta === siruta
|
||||
? layerCounts[layer.id]
|
||||
: undefined;
|
||||
const localCount =
|
||||
syncingSiruta === siruta
|
||||
? (syncLocalCounts[layer.id] ?? 0)
|
||||
: 0;
|
||||
|
||||
// Find last sync run for this layer
|
||||
const lastRun = syncRuns.find(
|
||||
(r) =>
|
||||
r.layerId === layer.id && r.status === "done",
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={layer.id}
|
||||
className={cn(
|
||||
"rounded-lg border px-3 py-2.5 transition-colors",
|
||||
isDownloading || isSyncing
|
||||
? "border-blue-300 bg-blue-50/50 dark:border-blue-700 dark:bg-blue-950/20"
|
||||
: "hover:bg-muted/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{layer.label}
|
||||
</p>
|
||||
{lc != null && !lc.error && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
"font-mono text-[10px] shrink-0",
|
||||
lc.count === 0
|
||||
? "opacity-40"
|
||||
: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300",
|
||||
)}
|
||||
>
|
||||
{lc.count.toLocaleString("ro-RO")}
|
||||
</Badge>
|
||||
)}
|
||||
{lc?.error && (
|
||||
<span className="text-[10px] text-rose-500">
|
||||
eroare
|
||||
</span>
|
||||
)}
|
||||
{localCount > 0 && (
|
||||
<Badge className="font-mono text-[10px] bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300 border-0 shrink-0">
|
||||
<Database className="h-2.5 w-2.5 mr-0.5" />
|
||||
{localCount.toLocaleString("ro-RO")}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-[11px] text-muted-foreground font-mono">
|
||||
{layer.id}
|
||||
</p>
|
||||
{lastRun && (
|
||||
<span className="text-[10px] text-muted-foreground/70">
|
||||
sync{" "}
|
||||
{new Date(
|
||||
lastRun.completedAt ??
|
||||
lastRun.startedAt,
|
||||
).toLocaleDateString("ro-RO", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
{/* Sync to DB */}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={
|
||||
!!syncingLayer ||
|
||||
!!downloadingLayer ||
|
||||
exporting
|
||||
}
|
||||
onClick={() =>
|
||||
void handleSyncLayer(layer.id)
|
||||
}
|
||||
className="border-violet-200 dark:border-violet-800"
|
||||
title="Sincronizeaz\u0103 \u00een baza de date"
|
||||
>
|
||||
{isSyncing ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
)}
|
||||
<span className="ml-1.5 hidden sm:inline">
|
||||
Sync
|
||||
</span>
|
||||
</Button>
|
||||
{/* GPKG (sync-first: syncs to DB if needed, then exports from DB) */}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={!!downloadingLayer || exporting}
|
||||
onClick={() =>
|
||||
void handleExportLayer(layer.id)
|
||||
}
|
||||
title={
|
||||
localCount > 0
|
||||
? "Descarc\u0103 GPKG (din cache dac\u0103 e proasp\u0103t)"
|
||||
: "Sincronizeaz\u0103 + descarc\u0103 GPKG"
|
||||
}
|
||||
>
|
||||
{isDownloading ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
<span className="ml-1.5 hidden sm:inline">
|
||||
GPKG
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Drumul de azi — today's layer count history */}
|
||||
{layerHistory.length > 0 && (
|
||||
<Card>
|
||||
<div className="px-4 py-3 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4 text-amber-500" />
|
||||
<span className="text-sm font-semibold">Drumul de azi</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="font-normal text-[11px]"
|
||||
>
|
||||
{layerHistory.length}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="pt-3 pb-3">
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{/* Group by siruta */}
|
||||
{(() => {
|
||||
const grouped = new Map<string, typeof layerHistory>();
|
||||
for (const e of layerHistory) {
|
||||
if (!grouped.has(e.siruta)) grouped.set(e.siruta, []);
|
||||
grouped.get(e.siruta)!.push(e);
|
||||
}
|
||||
return Array.from(grouped.entries()).map(
|
||||
([sir, entries]) => (
|
||||
<div key={sir} className="space-y-1">
|
||||
<p className="text-[11px] font-semibold text-muted-foreground">
|
||||
SIRUTA {sir}{" "}
|
||||
<span className="font-normal opacity-70">
|
||||
\u2014{" "}
|
||||
{new Date(entries[0]!.time).toLocaleTimeString(
|
||||
"ro-RO",
|
||||
{ hour: "2-digit", minute: "2-digit" },
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-1">
|
||||
{entries
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.map((e) => (
|
||||
<div
|
||||
key={e.layerId}
|
||||
className="flex items-center justify-between gap-1 rounded border px-2 py-1 text-[11px]"
|
||||
>
|
||||
<span className="truncate">{e.label}</span>
|
||||
<span className="font-mono font-semibold text-emerald-600 dark:text-emerald-400 shrink-0">
|
||||
{e.count.toLocaleString("ro-RO")}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* PostGIS / QGIS setup */}
|
||||
<Card>
|
||||
<div className="px-4 py-3 border-b">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="h-4 w-4 text-violet-500" />
|
||||
<span className="text-sm font-semibold">
|
||||
Conectare QGIS
|
||||
</span>
|
||||
</div>
|
||||
{!postgisResult?.success && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={postgisRunning}
|
||||
onClick={() => void handleSetupPostgis()}
|
||||
className="border-violet-300 text-violet-700 dark:border-violet-700 dark:text-violet-300"
|
||||
>
|
||||
{postgisRunning ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" />
|
||||
) : (
|
||||
<Database className="h-3.5 w-3.5 mr-1.5" />
|
||||
)}
|
||||
{postgisRunning
|
||||
? "Se activeaza\u2026"
|
||||
: "Activeaza compatibilitate QGIS"}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-xs">
|
||||
<p className="font-medium">
|
||||
Operatie sigura, reversibila
|
||||
</p>
|
||||
<p className="text-xs mt-1">
|
||||
Creeaza coloane native PostGIS + view-uri read-only
|
||||
pentru QGIS. Nu modifica datele existente. Ruleaza o
|
||||
singura data (~30s).
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="py-3 space-y-3">
|
||||
{postgisResult ? (
|
||||
postgisResult.success ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
|
||||
<span className="text-sm font-medium text-emerald-700 dark:text-emerald-400">
|
||||
QGIS compatibil \u2014 gata de conectare
|
||||
</span>
|
||||
</div>
|
||||
<div className="rounded bg-muted/50 p-3 text-xs space-y-2">
|
||||
<p className="font-medium text-sm">
|
||||
Cum te conectezi din QGIS:
|
||||
</p>
|
||||
<ol className="list-decimal list-inside space-y-1 text-muted-foreground">
|
||||
<li>
|
||||
QGIS \u2192 Layer \u2192 Add Layer \u2192 Add PostGIS Layers
|
||||
</li>
|
||||
<li>New connection:</li>
|
||||
</ol>
|
||||
<div className="font-mono bg-background rounded px-2 py-1.5 space-y-0.5">
|
||||
<p>
|
||||
Host: <strong>10.10.10.166</strong>
|
||||
</p>
|
||||
<p>
|
||||
Port: <strong>5432</strong>
|
||||
</p>
|
||||
<p>
|
||||
Database: <strong>architools_db</strong>
|
||||
</p>
|
||||
<p>
|
||||
Username: <strong>architools_user</strong>
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
View-uri disponibile (read-only):
|
||||
</p>
|
||||
<div className="font-mono text-muted-foreground">
|
||||
gis_terenuri, gis_cladiri, gis_documentatii,
|
||||
gis_administrativ
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
SRID: 3844 (Stereo70)
|
||||
</p>
|
||||
{postgisResult.details && (
|
||||
<p className="text-muted-foreground">
|
||||
{String(
|
||||
(
|
||||
postgisResult.details as {
|
||||
totalFeaturesWithGeom?: number;
|
||||
}
|
||||
).totalFeaturesWithGeom ?? 0,
|
||||
)}{" "}
|
||||
features cu geometrie nativa
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-start gap-2">
|
||||
<XCircle className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
|
||||
<div className="text-sm">
|
||||
<p className="font-medium text-red-700 dark:text-red-400">
|
||||
PostGIS nu este instalat pe server
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Contacteaza administratorul pentru instalare:
|
||||
</p>
|
||||
<code className="text-xs block mt-1 bg-muted rounded px-2 py-1">
|
||||
apt install postgresql-16-postgis-3
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="text-xs text-muted-foreground space-y-2">
|
||||
<p>
|
||||
Permite conectarea din QGIS direct la baza de date pentru
|
||||
vizualizare si analiza spatiala a parcelelor, cladirilor
|
||||
si limitelor UAT.
|
||||
</p>
|
||||
<p>
|
||||
Apasa butonul pentru a activa \u2014 creeaza view-uri read-only
|
||||
(nu modifica datele, nu afecteaza performanta aplicatiei).
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Progress bar for layer download */}
|
||||
{downloadingLayer && exportProgress && (
|
||||
<Card className="border-blue-200 dark:border-blue-800">
|
||||
<CardContent className="pt-4 space-y-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<Loader2 className="h-5 w-5 text-blue-600 animate-spin shrink-0" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium">
|
||||
{exportProgress.phase}
|
||||
{exportProgress.phaseCurrent != null &&
|
||||
exportProgress.phaseTotal
|
||||
? ` \u2014 ${exportProgress.phaseCurrent} / ${exportProgress.phaseTotal}`
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-sm font-mono font-semibold tabular-nums">
|
||||
{progressPct}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full rounded-full bg-blue-200/50 dark:bg-blue-800/30">
|
||||
<div
|
||||
className="h-2 rounded-full bg-blue-600 transition-all duration-300"
|
||||
style={{ width: `${Math.max(2, progressPct)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,396 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Map as MapIcon, Loader2 } from "lucide-react";
|
||||
import { Card, CardContent } from "@/shared/components/ui/card";
|
||||
import { BasemapSwitcher } from "@/modules/geoportal/components/basemap-switcher";
|
||||
import {
|
||||
SelectionToolbar,
|
||||
type SelectionMode,
|
||||
} from "@/modules/geoportal/components/selection-toolbar";
|
||||
import { FeatureInfoPanel } from "@/modules/geoportal/components/feature-info-panel";
|
||||
import type { MapViewerHandle } from "@/modules/geoportal/components/map-viewer";
|
||||
import type {
|
||||
BasemapId,
|
||||
ClickedFeature,
|
||||
LayerVisibility,
|
||||
SelectedFeature,
|
||||
} from "@/modules/geoportal/types";
|
||||
|
||||
/* MapLibre uses WebGL — must disable SSR */
|
||||
const MapViewer = dynamic(
|
||||
() =>
|
||||
import("@/modules/geoportal/components/map-viewer").then((m) => ({
|
||||
default: m.MapViewer,
|
||||
})),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="flex items-center justify-center h-64 bg-muted/30 rounded-lg">
|
||||
<p className="text-sm text-muted-foreground">Se incarca harta...</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
);
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Layer IDs — must match map-viewer.tsx LAYER_IDS */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
const BASE_LAYERS = [
|
||||
"l-terenuri-fill",
|
||||
"l-terenuri-line",
|
||||
"l-terenuri-label",
|
||||
"l-cladiri-fill",
|
||||
"l-cladiri-line",
|
||||
];
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Props */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
type MapTabProps = {
|
||||
siruta: string;
|
||||
sirutaValid: boolean;
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Helpers — typed map operations */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
type MapLike = {
|
||||
getLayer(id: string): unknown;
|
||||
getSource(id: string): unknown;
|
||||
addSource(id: string, source: Record<string, unknown>): void;
|
||||
addLayer(layer: Record<string, unknown>, before?: string): void;
|
||||
setFilter(id: string, filter: unknown[] | null): void;
|
||||
setLayoutProperty(id: string, prop: string, value: unknown): void;
|
||||
fitBounds(bounds: [number, number, number, number], opts?: Record<string, unknown>): void;
|
||||
isStyleLoaded(): boolean;
|
||||
};
|
||||
|
||||
function asMap(handle: MapViewerHandle | null): MapLike | null {
|
||||
const m = handle?.getMap();
|
||||
return m ? (m as unknown as MapLike) : null;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Component */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export function MapTab({ siruta, sirutaValid }: MapTabProps) {
|
||||
const mapHandleRef = useRef<MapViewerHandle>(null);
|
||||
const [basemap, setBasemap] = useState<BasemapId>("liberty");
|
||||
const [clickedFeature, setClickedFeature] =
|
||||
useState<ClickedFeature | null>(null);
|
||||
const [selectionMode, setSelectionMode] = useState<SelectionMode>("off");
|
||||
const [selectedFeatures, setSelectedFeatures] = useState<SelectedFeature[]>(
|
||||
[],
|
||||
);
|
||||
const [boundsLoading, setBoundsLoading] = useState(false);
|
||||
const [flyTarget, setFlyTarget] = useState<
|
||||
{ center: [number, number]; zoom?: number } | undefined
|
||||
>();
|
||||
const [mapReady, setMapReady] = useState(false);
|
||||
const [viewsReady, setViewsReady] = useState<boolean | null>(null);
|
||||
const appliedSirutaRef = useRef("");
|
||||
|
||||
/* Layer visibility: show terenuri + cladiri, hide admin */
|
||||
const [layerVisibility] = useState<LayerVisibility>({
|
||||
terenuri: true,
|
||||
cladiri: true,
|
||||
administrativ: false,
|
||||
});
|
||||
|
||||
/* ── Check if enrichment views exist, create if not ────────── */
|
||||
useEffect(() => {
|
||||
fetch("/api/geoportal/setup-enrichment-views")
|
||||
.then((r) => r.json())
|
||||
.then((data: { ready?: boolean }) => {
|
||||
if (data.ready) {
|
||||
setViewsReady(true);
|
||||
} else {
|
||||
// Auto-create views
|
||||
fetch("/api/geoportal/setup-enrichment-views", { method: "POST" })
|
||||
.then((r) => r.json())
|
||||
.then((res: { status?: string }) => {
|
||||
setViewsReady(res.status === "ok");
|
||||
})
|
||||
.catch(() => setViewsReady(false));
|
||||
}
|
||||
})
|
||||
.catch(() => setViewsReady(false));
|
||||
}, []);
|
||||
|
||||
/* ── Detect when map is ready ──────────────────────────────── */
|
||||
useEffect(() => {
|
||||
if (!sirutaValid) return;
|
||||
const check = setInterval(() => {
|
||||
const map = asMap(mapHandleRef.current);
|
||||
if (map && map.isStyleLoaded()) {
|
||||
setMapReady(true);
|
||||
clearInterval(check);
|
||||
}
|
||||
}, 200);
|
||||
return () => clearInterval(check);
|
||||
}, [sirutaValid]);
|
||||
|
||||
/* ── Apply siruta filter on base map layers ────────────────── */
|
||||
useEffect(() => {
|
||||
if (!mapReady || !sirutaValid || !siruta) return;
|
||||
if (appliedSirutaRef.current === siruta) return;
|
||||
|
||||
const map = asMap(mapHandleRef.current);
|
||||
if (!map) return;
|
||||
|
||||
appliedSirutaRef.current = siruta;
|
||||
const filter = ["==", ["get", "siruta"], siruta];
|
||||
|
||||
for (const layerId of BASE_LAYERS) {
|
||||
try {
|
||||
if (!map.getLayer(layerId)) continue;
|
||||
map.setFilter(layerId, filter);
|
||||
} catch {
|
||||
/* layer may not exist */
|
||||
}
|
||||
}
|
||||
}, [mapReady, siruta, sirutaValid]);
|
||||
|
||||
/* ── Add enrichment overlay source + layers ────────────────── */
|
||||
useEffect(() => {
|
||||
if (!mapReady || !viewsReady || !sirutaValid || !siruta) return;
|
||||
|
||||
const map = asMap(mapHandleRef.current);
|
||||
if (!map) return;
|
||||
|
||||
const martinBase = typeof window !== "undefined"
|
||||
? `${window.location.origin}/tiles`
|
||||
: "/tiles";
|
||||
|
||||
// Add gis_terenuri_status source (only once)
|
||||
if (!map.getSource("gis_terenuri_status")) {
|
||||
map.addSource("gis_terenuri_status", {
|
||||
type: "vector",
|
||||
tiles: [`${martinBase}/gis_terenuri_status/{z}/{x}/{y}`],
|
||||
minzoom: 10,
|
||||
maxzoom: 18,
|
||||
});
|
||||
|
||||
// Data-driven fill: color by enrichment status
|
||||
map.addLayer(
|
||||
{
|
||||
id: "l-ps-terenuri-fill",
|
||||
type: "fill",
|
||||
source: "gis_terenuri_status",
|
||||
"source-layer": "gis_terenuri_status",
|
||||
minzoom: 13,
|
||||
filter: ["==", ["get", "siruta"], siruta],
|
||||
paint: {
|
||||
"fill-color": [
|
||||
"case",
|
||||
// Enriched parcels: darker green
|
||||
["==", ["get", "has_enrichment"], 1],
|
||||
"#15803d",
|
||||
// No enrichment: lighter green
|
||||
"#86efac",
|
||||
],
|
||||
"fill-opacity": 0.25,
|
||||
},
|
||||
},
|
||||
"l-terenuri-line", // insert before line layer
|
||||
);
|
||||
|
||||
// Data-driven outline
|
||||
map.addLayer(
|
||||
{
|
||||
id: "l-ps-terenuri-line",
|
||||
type: "line",
|
||||
source: "gis_terenuri_status",
|
||||
"source-layer": "gis_terenuri_status",
|
||||
minzoom: 13,
|
||||
filter: ["==", ["get", "siruta"], siruta],
|
||||
paint: {
|
||||
"line-color": [
|
||||
"case",
|
||||
// Has building without legal docs: red
|
||||
[
|
||||
"all",
|
||||
["==", ["get", "has_building"], 1],
|
||||
["==", ["get", "build_legal"], 0],
|
||||
],
|
||||
"#ef4444",
|
||||
// Has building with legal: blue
|
||||
["==", ["get", "has_building"], 1],
|
||||
"#3b82f6",
|
||||
// Default: green
|
||||
"#15803d",
|
||||
],
|
||||
"line-width": [
|
||||
"case",
|
||||
["==", ["get", "has_building"], 1],
|
||||
1.8,
|
||||
0.8,
|
||||
],
|
||||
},
|
||||
},
|
||||
"l-cladiri-fill",
|
||||
);
|
||||
} else {
|
||||
// Source already exists — just update filters for new siruta
|
||||
const sirutaFilter = ["==", ["get", "siruta"], siruta];
|
||||
try {
|
||||
if (map.getLayer("l-ps-terenuri-fill"))
|
||||
map.setFilter("l-ps-terenuri-fill", sirutaFilter);
|
||||
if (map.getLayer("l-ps-terenuri-line"))
|
||||
map.setFilter("l-ps-terenuri-line", sirutaFilter);
|
||||
} catch {
|
||||
/* noop */
|
||||
}
|
||||
}
|
||||
|
||||
// Hide the base terenuri-fill (we replaced it with enrichment-aware version)
|
||||
try {
|
||||
if (map.getLayer("l-terenuri-fill"))
|
||||
map.setLayoutProperty("l-terenuri-fill", "visibility", "none");
|
||||
} catch {
|
||||
/* noop */
|
||||
}
|
||||
}, [mapReady, viewsReady, siruta, sirutaValid]);
|
||||
|
||||
/* ── Fetch UAT bounds and zoom ─────────────────────────────── */
|
||||
const prevBoundsSirutaRef = useRef("");
|
||||
useEffect(() => {
|
||||
if (!sirutaValid || !siruta) return;
|
||||
if (prevBoundsSirutaRef.current === siruta) return;
|
||||
prevBoundsSirutaRef.current = siruta;
|
||||
|
||||
setBoundsLoading(true);
|
||||
fetch(`/api/geoportal/uat-bounds?siruta=${siruta}`)
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.then(
|
||||
(data: {
|
||||
bounds?: [[number, number], [number, number]];
|
||||
} | null) => {
|
||||
if (data?.bounds) {
|
||||
const [[minLng, minLat], [maxLng, maxLat]] = data.bounds;
|
||||
const centerLng = (minLng + maxLng) / 2;
|
||||
const centerLat = (minLat + maxLat) / 2;
|
||||
setFlyTarget({ center: [centerLng, centerLat], zoom: 13 });
|
||||
|
||||
// Fit bounds if map is already ready
|
||||
const map = asMap(mapHandleRef.current);
|
||||
if (map) {
|
||||
map.fitBounds([minLng, minLat, maxLng, maxLat], {
|
||||
padding: 40,
|
||||
duration: 1500,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
.catch(() => {})
|
||||
.finally(() => setBoundsLoading(false));
|
||||
}, [siruta, sirutaValid]);
|
||||
|
||||
/* ── Feature click handler ─────────────────────────────────── */
|
||||
const handleFeatureClick = useCallback(
|
||||
(feature: ClickedFeature | null) => {
|
||||
if (!feature || !feature.properties) {
|
||||
setClickedFeature(null);
|
||||
return;
|
||||
}
|
||||
setClickedFeature(feature);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
/* ── Selection mode handler ────────────────────────────────── */
|
||||
const handleSelectionModeChange = useCallback((mode: SelectionMode) => {
|
||||
if (mode === "off") {
|
||||
mapHandleRef.current?.clearSelection();
|
||||
setSelectedFeatures([]);
|
||||
}
|
||||
setSelectionMode(mode);
|
||||
}, []);
|
||||
|
||||
/* ── Render ─────────────────────────────────────────────────── */
|
||||
|
||||
if (!sirutaValid) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center text-muted-foreground">
|
||||
<MapIcon className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p>Selecteaz\u0103 un UAT din lista de mai sus</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative h-[600px] rounded-lg border overflow-hidden">
|
||||
{boundsLoading && (
|
||||
<div className="absolute top-3 left-1/2 -translate-x-1/2 z-20 flex items-center gap-2 rounded-full bg-background/90 border px-3 py-1.5 text-xs shadow-sm">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
Se \u00eencarc\u0103 zona UAT...
|
||||
</div>
|
||||
)}
|
||||
|
||||
<MapViewer
|
||||
ref={mapHandleRef}
|
||||
className="h-full w-full"
|
||||
basemap={basemap}
|
||||
selectionType={selectionMode}
|
||||
onFeatureClick={handleFeatureClick}
|
||||
onSelectionChange={setSelectedFeatures}
|
||||
layerVisibility={layerVisibility}
|
||||
center={flyTarget?.center}
|
||||
zoom={flyTarget?.zoom}
|
||||
/>
|
||||
|
||||
{/* Top-right: basemap switcher + feature panel */}
|
||||
<div className="absolute top-3 right-3 z-10 flex flex-col items-end gap-2">
|
||||
<BasemapSwitcher value={basemap} onChange={setBasemap} />
|
||||
{clickedFeature && selectionMode === "off" && (
|
||||
<FeatureInfoPanel
|
||||
feature={clickedFeature}
|
||||
onClose={() => setClickedFeature(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom-left: selection toolbar */}
|
||||
<div className="absolute bottom-8 left-3 z-10">
|
||||
<SelectionToolbar
|
||||
selectedFeatures={selectedFeatures}
|
||||
selectionMode={selectionMode}
|
||||
onSelectionModeChange={handleSelectionModeChange}
|
||||
onClearSelection={() => {
|
||||
mapHandleRef.current?.clearSelection();
|
||||
setSelectedFeatures([]);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bottom-right: legend */}
|
||||
<div className="absolute bottom-3 right-3 z-10 rounded-lg bg-background/90 border p-2 text-[10px] space-y-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="inline-block h-3 w-3 rounded-sm border" style={{ backgroundColor: "rgba(134,239,172,0.25)", borderColor: "#15803d" }} />
|
||||
F\u0103r\u0103 enrichment
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="inline-block h-3 w-3 rounded-sm border" style={{ backgroundColor: "rgba(21,128,61,0.25)", borderColor: "#15803d" }} />
|
||||
Cu enrichment
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="inline-block h-3 w-3 rounded-sm" style={{ border: "2px solid #3b82f6" }} />
|
||||
Cu cl\u0103dire
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="inline-block h-3 w-3 rounded-sm" style={{ border: "2px solid #ef4444" }} />
|
||||
Cl\u0103dire f\u0103r\u0103 acte
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user