Dodo
572 lines
18 KiB
TypeScript
572 lines
18 KiB
TypeScript
"use client";
|
|
/* eslint-disable @typescript-eslint/no-explicit-any, react-hooks/set-state-in-effect */
|
|
|
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
import { toast } from "sonner";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
import type { UserMarker } from "@/components/leaflet-map";
|
|
import { TimedUndoAction } from "@/components/time-undo-action";
|
|
import {
|
|
EV_TYPES,
|
|
EV_STATUSES,
|
|
GAS_BRANDS,
|
|
REPAIR_SPECIALITIES,
|
|
GAS_TYPES_BY_BRAND,
|
|
} from "@/components/gas-station/station-placement-dialog";
|
|
|
|
/* ─── Helpers ───────────────────────────────────── */
|
|
|
|
function Field({ label, children, className }: { label: string; children: React.ReactNode; className?: string }) {
|
|
return (
|
|
<div className={cn("flex flex-col gap-1.5", className)}>
|
|
<span className="text-[11px] font-semibold text-foreground/60 uppercase tracking-wider">
|
|
{label}
|
|
</span>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChipSelector({
|
|
options,
|
|
value,
|
|
onChange,
|
|
}: {
|
|
options: { value: string; label: string; color: string }[];
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{options.map((opt) => {
|
|
const isSelected = value === opt.value;
|
|
return (
|
|
<button
|
|
key={opt.value}
|
|
type="button"
|
|
onClick={() => onChange(opt.value)}
|
|
className={cn(
|
|
"h-8 rounded-lg border px-3 text-[11px] font-semibold transition-all cursor-pointer",
|
|
isSelected
|
|
? "border-transparent text-white shadow-sm animate-in fade-in zoom-in-95 duration-150"
|
|
: "border-border text-foreground/70 hover:bg-muted"
|
|
)}
|
|
style={isSelected ? { backgroundColor: opt.color } : undefined}
|
|
>
|
|
{opt.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MultiChipSelector({
|
|
options,
|
|
values,
|
|
onChange,
|
|
color,
|
|
}: {
|
|
options: string[];
|
|
values: string[];
|
|
onChange: (v: string[]) => void;
|
|
color: string;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{options.map((opt) => {
|
|
const isSelected = values.includes(opt);
|
|
return (
|
|
<button
|
|
key={opt}
|
|
type="button"
|
|
onClick={() => {
|
|
if (isSelected) {
|
|
onChange(values.filter((v) => v !== opt));
|
|
} else {
|
|
onChange([...values, opt]);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-8 rounded-lg border px-3 text-[11px] font-semibold transition-all cursor-pointer",
|
|
isSelected
|
|
? "border-transparent text-white shadow-sm"
|
|
: "border-border text-foreground/70 hover:bg-muted"
|
|
)}
|
|
style={isSelected ? { backgroundColor: color } : undefined}
|
|
>
|
|
{opt}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ─── Edit Dialog ───────────────────────────────── */
|
|
|
|
interface StationEditDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
marker: UserMarker | null;
|
|
onUpdated: (updated: UserMarker) => void;
|
|
onDeleted: (deleted: UserMarker) => void;
|
|
}
|
|
|
|
export function StationEditDialog({
|
|
open,
|
|
onOpenChange,
|
|
marker,
|
|
onUpdated,
|
|
onDeleted,
|
|
}: StationEditDialogProps) {
|
|
const [category, setCategory] = useState("gas-pump");
|
|
const [name, setName] = useState("");
|
|
|
|
// Form fields for EV Charger
|
|
const [evType, setEvType] = useState("DC Fast");
|
|
const [evStatus, setEvStatus] = useState("Active");
|
|
|
|
// Form fields for Gas Station
|
|
const [gasBrand, setGasBrand] = useState("Pertamina");
|
|
const [gasHours, setGasHours] = useState("24 Jam");
|
|
const [selectedGasTypes, setSelectedGasTypes] = useState<string[]>([]);
|
|
|
|
// Form fields for Repair Shop
|
|
const [repairSpeciality, setRepairSpeciality] = useState("Umum");
|
|
const [repairStatus, setRepairStatus] = useState("Buka 08:00 - 17:00");
|
|
|
|
// Timed Delete State
|
|
const DELETE_SECONDS = 5;
|
|
const TOAST_ID = "station-delete";
|
|
const [deleteActive, setDeleteActive] = useState(false);
|
|
const [deleteCountdown, setDeleteCountdown] = useState(DELETE_SECONDS);
|
|
const pendingDeleteMarker = useRef<UserMarker | null>(null);
|
|
|
|
// Fetching and saving state
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL ?? "http://localhost:4000";
|
|
|
|
// Synchronize when marker opens and load latest from DB
|
|
useEffect(() => {
|
|
if (!open || !marker) return;
|
|
|
|
setDeleteActive(false);
|
|
setDeleteCountdown(DELETE_SECONDS);
|
|
pendingDeleteMarker.current = null;
|
|
toast.dismiss(TOAST_ID);
|
|
setError(null);
|
|
|
|
const dbId = marker.id.split("-").slice(1).join("-");
|
|
const token = localStorage.getItem("auth_token");
|
|
const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
|
|
|
|
setIsLoading(true);
|
|
|
|
fetch(`${BACKEND_URL}/gas-station/markers/${dbId}`, { headers })
|
|
.then((r) => {
|
|
if (!r.ok) throw new Error("Gagal memuat data dari server");
|
|
return r.json();
|
|
})
|
|
.then((row) => {
|
|
setCategory(row.marker_category);
|
|
setName(row.name);
|
|
if (row.marker_category === "charging-station") {
|
|
setEvType(row.sub_type ?? "DC Fast");
|
|
setEvStatus(row.status ?? "Active");
|
|
} else if (row.marker_category === "gas-pump") {
|
|
setGasBrand(row.brand ?? "Pertamina");
|
|
setGasHours(row.operating_hours ?? "24 Jam");
|
|
setSelectedGasTypes(row.gas_types ?? GAS_TYPES_BY_BRAND[row.brand ?? "Pertamina"] ?? []);
|
|
} else if (row.marker_category === "wrench") {
|
|
setRepairSpeciality(row.sub_type ?? "Umum");
|
|
setRepairStatus(row.status ?? "Buka 08:00 - 17:00");
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
setError("Gagal memuat data terbaru, menggunakan data lokal.");
|
|
// Fallback
|
|
setCategory(marker.type);
|
|
setName(marker.name);
|
|
const meta = marker.meta;
|
|
if (marker.type === "charging-station") {
|
|
setEvType(meta?.poi_type ?? "DC Fast");
|
|
setEvStatus(meta?.notes?.replace("Status: ", "") ?? "Active");
|
|
} else if (marker.type === "gas-pump") {
|
|
setGasBrand(meta?.poi_type ?? "Pertamina");
|
|
setGasHours(meta?.notes?.replace("Jam: ", "") ?? "24 Jam");
|
|
setSelectedGasTypes(meta?.gas_types ?? GAS_TYPES_BY_BRAND[meta?.poi_type ?? "Pertamina"] ?? []);
|
|
} else if (marker.type === "wrench") {
|
|
setRepairSpeciality(meta?.poi_type ?? "Umum");
|
|
setRepairStatus(meta?.notes ?? "Buka 08:00 - 17:00");
|
|
}
|
|
})
|
|
.finally(() => setIsLoading(false));
|
|
}, [open, marker]);
|
|
|
|
async function handleDelete() {
|
|
const target = pendingDeleteMarker.current;
|
|
if (!target) return;
|
|
|
|
const dbId = target.id.split("-").slice(1).join("-");
|
|
const token = localStorage.getItem("auth_token");
|
|
const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
|
|
|
|
setIsDeleting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const res = await fetch(`${BACKEND_URL}/gas-station/markers/${dbId}`, {
|
|
method: "DELETE",
|
|
headers,
|
|
});
|
|
|
|
if (!res.ok && res.status !== 204) {
|
|
throw new Error("Gagal menghapus lokasi dari server");
|
|
}
|
|
|
|
pendingDeleteMarker.current = null;
|
|
onDeleted(target);
|
|
onOpenChange(false);
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : "Terjadi kesalahan saat menghapus");
|
|
toast.error(err instanceof Error ? err.message : "Gagal menghapus lokasi");
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
}
|
|
|
|
// Countdown tick
|
|
useEffect(() => {
|
|
if (!deleteActive) return;
|
|
const id = setInterval(() => setDeleteCountdown((p) => Math.max(0, p - 1)), 1000);
|
|
return () => clearInterval(id);
|
|
}, [deleteActive]);
|
|
|
|
// Fire delete when countdown hits 0
|
|
useEffect(() => {
|
|
if (!deleteActive || deleteCountdown > 0) return;
|
|
setDeleteActive(false);
|
|
setDeleteCountdown(DELETE_SECONDS);
|
|
toast.dismiss(TOAST_ID);
|
|
handleDelete();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [deleteActive, deleteCountdown]);
|
|
|
|
// Toast showing countdown
|
|
useEffect(() => {
|
|
if (!deleteActive || !pendingDeleteMarker.current) {
|
|
toast.dismiss(TOAST_ID);
|
|
return;
|
|
}
|
|
const mName = pendingDeleteMarker.current.name;
|
|
const pct = (deleteCountdown / DELETE_SECONDS) * 100;
|
|
toast.custom(
|
|
() => (
|
|
<div className="relative flex items-center gap-3 w-72 rounded-xl border border-border bg-popover px-4 py-3 shadow-lg overflow-hidden font-sans">
|
|
<div
|
|
className="absolute bottom-0 left-0 h-[3px] bg-red-500 transition-[width] duration-1000 ease-linear"
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-semibold text-foreground truncate">Menghapus lokasi</p>
|
|
<p className="text-xs text-muted-foreground truncate">"{mName}" — dalam {deleteCountdown} detik</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setDeleteActive(false);
|
|
setDeleteCountdown(DELETE_SECONDS);
|
|
pendingDeleteMarker.current = null;
|
|
toast.dismiss(TOAST_ID);
|
|
}}
|
|
className="shrink-0 h-7 rounded-full border border-border bg-background px-3 text-xs font-medium hover:bg-muted transition-colors cursor-pointer"
|
|
>
|
|
Batalkan
|
|
</button>
|
|
</div>
|
|
),
|
|
{ id: TOAST_ID, duration: Infinity, position: "bottom-left" },
|
|
);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [deleteActive, deleteCountdown]);
|
|
|
|
function toggleDelete() {
|
|
setDeleteActive((prev) => {
|
|
if (!prev) {
|
|
pendingDeleteMarker.current = marker;
|
|
setDeleteCountdown(DELETE_SECONDS);
|
|
} else {
|
|
pendingDeleteMarker.current = null;
|
|
toast.dismiss(TOAST_ID);
|
|
}
|
|
return !prev;
|
|
});
|
|
}
|
|
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!marker) return;
|
|
|
|
setIsSubmitting(true);
|
|
setError(null);
|
|
|
|
let finalPoiType = "";
|
|
let finalNotes = "";
|
|
|
|
const brand = category === "gas-pump" ? gasBrand : null;
|
|
const sub_type = category === "charging-station" ? evType : (category === "wrench" ? repairSpeciality : null);
|
|
const gas_types = category === "gas-pump" ? selectedGasTypes : null;
|
|
const operating_hours = category === "gas-pump" ? gasHours : null;
|
|
const status = category === "charging-station" ? evStatus : (category === "wrench" ? repairStatus : null);
|
|
|
|
if (category === "charging-station") {
|
|
finalPoiType = evType;
|
|
finalNotes = `Status: ${evStatus}`;
|
|
} else if (category === "gas-pump") {
|
|
finalPoiType = gasBrand;
|
|
finalNotes = `Jam: ${gasHours}`;
|
|
} else if (category === "wrench") {
|
|
finalPoiType = repairSpeciality;
|
|
finalNotes = repairStatus;
|
|
}
|
|
|
|
try {
|
|
const dbId = marker.id.split("-").slice(1).join("-");
|
|
const token = localStorage.getItem("auth_token");
|
|
const headers = {
|
|
"Content-Type": "application/json",
|
|
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
|
};
|
|
|
|
const res = await fetch(`${BACKEND_URL}/gas-station/markers/${dbId}`, {
|
|
method: "PUT",
|
|
headers,
|
|
body: JSON.stringify({
|
|
name: name.trim() || marker.name,
|
|
marker_category: category,
|
|
brand,
|
|
sub_type,
|
|
gas_types,
|
|
operating_hours,
|
|
status,
|
|
notes: null,
|
|
}),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
throw new Error(data.error ?? "Gagal menyimpan perubahan");
|
|
}
|
|
|
|
const saved = await res.json();
|
|
|
|
const updated: UserMarker = {
|
|
...marker,
|
|
type: category,
|
|
name: saved.name,
|
|
meta: {
|
|
...marker.meta,
|
|
poi_type: finalPoiType,
|
|
notes: finalNotes,
|
|
gas_types: category === "gas-pump" ? selectedGasTypes : undefined,
|
|
},
|
|
};
|
|
|
|
onUpdated(updated);
|
|
onOpenChange(false);
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : "Terjadi kesalahan");
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
}
|
|
|
|
const categoryLabels: Record<string, string> = {
|
|
"charging-station": "Edit EV Charger",
|
|
"gas-pump": "Edit Gas Station",
|
|
wrench: "Edit Bengkel",
|
|
};
|
|
|
|
const titleLabel = categoryLabels[category] || "Edit Lokasi";
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(v) => { if (!v) onOpenChange(false); }}>
|
|
<DialogContent showCloseButton={false} className="sm:max-w-lg w-full max-h-[90vh] overflow-y-auto rounded-2xl p-0 gap-0">
|
|
<form onSubmit={handleSubmit} className="flex flex-col">
|
|
{/* Header */}
|
|
<DialogHeader className="px-6 pt-6 pb-4 border-b">
|
|
<DialogTitle className="text-center text-base font-semibold">{titleLabel}</DialogTitle>
|
|
<p className="text-center text-xs text-muted-foreground font-mono tabular-nums mt-1">
|
|
{marker ? `${marker.lat.toFixed(5)}, ${marker.lng.toFixed(5)}` : ""}
|
|
</p>
|
|
</DialogHeader>
|
|
|
|
{/* Body */}
|
|
<div className="px-6 py-5 flex flex-col gap-5">
|
|
{isLoading ? (
|
|
<p className="text-sm text-muted-foreground text-center py-4">Memuat data…</p>
|
|
) : (
|
|
<>
|
|
{/* Category Selector */}
|
|
<Field label="Kategori Lokasi">
|
|
<select
|
|
value={category}
|
|
onChange={(e) => setCategory(e.target.value)}
|
|
className="w-full h-10 rounded-lg border border-border bg-muted/50 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring cursor-pointer"
|
|
>
|
|
<option value="charging-station">EV Charger</option>
|
|
<option value="gas-pump">Gas Station</option>
|
|
<option value="wrench">Repair Shop (Bengkel)</option>
|
|
</select>
|
|
</Field>
|
|
|
|
{/* Location Name */}
|
|
<Field label="Nama Lokasi">
|
|
<Input
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
required
|
|
className="bg-muted/50 border border-border focus-visible:border-ring"
|
|
/>
|
|
</Field>
|
|
|
|
{/* Dynamic Fields: EV Charger */}
|
|
{category === "charging-station" && (
|
|
<>
|
|
<Field label="Tipe Charging">
|
|
<ChipSelector options={EV_TYPES} value={evType} onChange={setEvType} />
|
|
</Field>
|
|
<Field label="Status Operasional">
|
|
<ChipSelector options={EV_STATUSES} value={evStatus} onChange={setEvStatus} />
|
|
</Field>
|
|
</>
|
|
)}
|
|
|
|
{/* Dynamic Fields: Gas Station */}
|
|
{category === "gas-pump" && (
|
|
<>
|
|
<Field label="Brand SPBU">
|
|
<ChipSelector
|
|
options={GAS_BRANDS}
|
|
value={gasBrand}
|
|
onChange={(brand) => {
|
|
setGasBrand(brand);
|
|
setSelectedGasTypes(GAS_TYPES_BY_BRAND[brand] ?? []);
|
|
}}
|
|
/>
|
|
</Field>
|
|
<Field label="Tipe Bahan Bakar">
|
|
<MultiChipSelector
|
|
options={GAS_TYPES_BY_BRAND[gasBrand] ?? []}
|
|
values={selectedGasTypes}
|
|
onChange={setSelectedGasTypes}
|
|
color={GAS_BRANDS.find((b) => b.value === gasBrand)?.color ?? "#ff3b1f"}
|
|
/>
|
|
</Field>
|
|
<Field label="Jam Operasional">
|
|
<Input
|
|
value={gasHours}
|
|
onChange={(e) => setGasHours(e.target.value)}
|
|
required
|
|
className="bg-muted/50 border border-border focus-visible:border-ring"
|
|
/>
|
|
<div className="flex gap-1.5 mt-1">
|
|
{["24 Jam", "06:00 - 22:00", "07:00 - 21:00"].map((h) => (
|
|
<button
|
|
key={h}
|
|
type="button"
|
|
onClick={() => setGasHours(h)}
|
|
className="text-[10px] bg-muted hover:bg-muted-foreground/20 text-muted-foreground px-2 py-0.5 rounded transition-colors cursor-pointer"
|
|
>
|
|
{h}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Field>
|
|
</>
|
|
)}
|
|
|
|
{/* Dynamic Fields: Repair Shop */}
|
|
{category === "wrench" && (
|
|
<>
|
|
<Field label="Spesialisasi">
|
|
<ChipSelector options={REPAIR_SPECIALITIES} value={repairSpeciality} onChange={setRepairSpeciality} />
|
|
</Field>
|
|
<Field label="Status / Jam Buka">
|
|
<Input
|
|
value={repairStatus}
|
|
onChange={(e) => setRepairStatus(e.target.value)}
|
|
required
|
|
className="bg-muted/50 border border-border focus-visible:border-ring"
|
|
/>
|
|
<div className="flex gap-1.5 mt-1">
|
|
{["Buka 24 Jam", "Buka 08:00 - 17:00", "Tutup"].map((s) => (
|
|
<button
|
|
key={s}
|
|
type="button"
|
|
onClick={() => setRepairStatus(s)}
|
|
className="text-[10px] bg-muted hover:bg-muted-foreground/20 text-muted-foreground px-2 py-0.5 rounded transition-colors cursor-pointer"
|
|
>
|
|
{s}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Field>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{error && (
|
|
<p className="text-xs text-destructive mt-2">{error}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between gap-2 px-6 py-4 border-t">
|
|
<TimedUndoAction
|
|
compact
|
|
deleteLabel="Hapus Lokasi"
|
|
undoLabel="Batal"
|
|
isDeleting={deleteActive}
|
|
countDown={deleteCountdown}
|
|
onToggle={toggleDelete}
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => onOpenChange(false)}
|
|
disabled={isSubmitting || isDeleting}
|
|
className="h-9 rounded-full border border-border px-5 text-sm font-medium transition-colors hover:bg-muted disabled:opacity-50 cursor-pointer"
|
|
>
|
|
Batal
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting || isLoading || isDeleting || !name.trim()}
|
|
className="h-9 rounded-full bg-primary text-primary-foreground px-5 text-sm font-medium transition-colors hover:bg-primary/90 disabled:opacity-40 cursor-pointer"
|
|
>
|
|
{isSubmitting ? "Menyimpan…" : "Simpan"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|