452 lines
19 KiB
TypeScript
452 lines
19 KiB
TypeScript
// components/details/CO2GalvoDetail.tsx
|
|
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useSearchParams, useRouter } from "next/navigation";
|
|
import SettingsSubmit from "@/components/forms/SettingsSubmit";
|
|
|
|
type Rec = {
|
|
submission_id: string | number;
|
|
setting_title?: string | null;
|
|
setting_notes?: string | null;
|
|
|
|
photo?: { id?: string } | string | null;
|
|
screen?: { id?: string } | string | null;
|
|
|
|
// ids & readable fields
|
|
mat?: { id?: string | number; name?: string | null } | null;
|
|
mat_coat?: { id?: string | number; name?: string | null } | null;
|
|
mat_color?: { id?: string | number; name?: string | null } | null;
|
|
mat_opacity?: { id?: string | number; opacity?: string | number | null } | null;
|
|
mat_thickness?: number | null;
|
|
|
|
source?: { submission_id?: string | number; make?: string | null; model?: string | null; nm?: string | null } | null;
|
|
lens?: { id?: string | number; field_size?: string | number | null; focal_length?: string | number | null } | null;
|
|
focus?: number | null;
|
|
|
|
laser_soft?: { id?: string | number; name?: string | null } | string | number | null;
|
|
repeat_all?: number | null;
|
|
|
|
fill_settings?: any[] | null;
|
|
line_settings?: any[] | null;
|
|
raster_settings?: any[] | null;
|
|
|
|
owner?: { id?: string | number; username?: string | null } | string | number | null;
|
|
uploader?: string | null;
|
|
|
|
last_modified_date?: string | null;
|
|
};
|
|
|
|
async function readJson(res: Response) {
|
|
const text = await res.text();
|
|
try { return text ? JSON.parse(text) : null; } catch { throw new Error(`Unexpected response (HTTP ${res.status})`); }
|
|
}
|
|
|
|
function ownerLabel(o: Rec["owner"]) {
|
|
if (!o) return "—";
|
|
if (typeof o === "string" || typeof o === "number") return String(o);
|
|
return o.username || String(o.id ?? "—");
|
|
}
|
|
|
|
// Prefer public assets if available (avoids auth cookie issues in <img>)
|
|
const API_BASE = (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
|
|
function fileUrl(id?: string) {
|
|
if (!id) return "";
|
|
return API_BASE ? `${API_BASE}/assets/${id}` : `/api/dx/assets/${id}`;
|
|
}
|
|
|
|
function ZoomableSquareImage(props: { src: string; alt: string; onOpen: () => void }) {
|
|
const { src, alt, onOpen } = props;
|
|
return (
|
|
<div className="border rounded overflow-hidden" style={{ aspectRatio: "1 / 1" }}>
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className="w-full h-full object-cover cursor-zoom-in"
|
|
loading="lazy"
|
|
onClick={onOpen}
|
|
onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function CO2GalvoDetail({
|
|
id,
|
|
mode,
|
|
onSaved,
|
|
onBack,
|
|
showOwnerEdit = true,
|
|
}: {
|
|
id: string | number;
|
|
mode?: "view" | "edit";
|
|
onSaved?: (submission_id: string | number) => void;
|
|
onBack?: () => void;
|
|
showOwnerEdit?: boolean;
|
|
}) {
|
|
const sp = useSearchParams();
|
|
const router = useRouter();
|
|
const editParam = sp.get("edit") === "1";
|
|
const editMode = mode ? mode === "edit" : editParam;
|
|
|
|
const [rec, setRec] = useState<Rec | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [err, setErr] = useState<string | null>(null);
|
|
|
|
// Current user id to gate the Edit button
|
|
const [meId, setMeId] = useState<string | null>(null);
|
|
useEffect(() => {
|
|
let dead = false;
|
|
(async () => {
|
|
try {
|
|
const r = await fetch(`/api/dx/users/me?fields=id`, { cache: "no-store", credentials: "include" });
|
|
if (!r.ok) return;
|
|
const j = await readJson(r);
|
|
const id = j?.data?.id ?? j?.id ?? null;
|
|
if (!dead) setMeId(id ? String(id) : null);
|
|
} catch { /* ignore */ }
|
|
})();
|
|
return () => { dead = true; };
|
|
}, []);
|
|
|
|
// lightbox
|
|
const [viewerSrc, setViewerSrc] = useState<string | null>(null);
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setViewerSrc(null); };
|
|
if (viewerSrc) window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [viewerSrc]);
|
|
|
|
// load record (with human-readable fields, +laser_soft.name)
|
|
useEffect(() => {
|
|
if (!id) return;
|
|
let dead = false;
|
|
|
|
(async () => {
|
|
try {
|
|
setLoading(true);
|
|
setErr(null);
|
|
|
|
const fields = [
|
|
"submission_id",
|
|
"setting_title",
|
|
"setting_notes",
|
|
"photo.id",
|
|
"screen.id",
|
|
|
|
"mat.id",
|
|
"mat.name",
|
|
"mat_coat.id",
|
|
"mat_coat.name",
|
|
"mat_color.id",
|
|
"mat_color.name",
|
|
"mat_opacity.id",
|
|
"mat_opacity.opacity",
|
|
"mat_thickness",
|
|
|
|
"source.submission_id",
|
|
"source.make",
|
|
"source.model",
|
|
"source.nm",
|
|
|
|
"lens.id",
|
|
"lens.field_size",
|
|
"lens.focal_length",
|
|
|
|
"focus",
|
|
"laser_soft.id",
|
|
"laser_soft.name",
|
|
"repeat_all",
|
|
|
|
"fill_settings",
|
|
"line_settings",
|
|
"raster_settings",
|
|
|
|
"owner.id",
|
|
"owner.username",
|
|
"uploader",
|
|
"last_modified_date",
|
|
].join(",");
|
|
|
|
const url = `/api/dx/items/settings_co2gal?fields=${encodeURIComponent(fields)}&filter[submission_id][_eq]=${encodeURIComponent(
|
|
String(id)
|
|
)}&limit=1`;
|
|
|
|
const r = await fetch(url, { cache: "no-store", credentials: "include" });
|
|
if (!r.ok) {
|
|
const j = await readJson(r).catch(() => null);
|
|
throw new Error(j?.errors?.[0]?.message || `HTTP ${r.status}`);
|
|
}
|
|
const j = await readJson(r);
|
|
const row: Rec | null = Array.isArray(j?.data) ? j.data[0] || null : null;
|
|
if (!row) throw new Error("Setting not found.");
|
|
if (!dead) setRec(row);
|
|
} catch (e: any) {
|
|
if (!dead) setErr(e?.message || String(e));
|
|
} finally {
|
|
if (!dead) setLoading(false);
|
|
}
|
|
})();
|
|
|
|
return () => { dead = true; };
|
|
}, [id]);
|
|
|
|
const initialValues = useMemo(() => {
|
|
if (!rec) return null;
|
|
const toId = (v: any) => (v == null ? null : (typeof v === "object" ? (v.id ?? v.submission_id ?? null) : v));
|
|
|
|
const photoId = typeof rec.photo === "string" || typeof rec.photo === "number" ? String(rec.photo) : rec.photo?.id ?? null;
|
|
const screenId = typeof rec.screen === "string" || typeof rec.screen === "number" ? String(rec.screen) : rec.screen?.id ?? null;
|
|
|
|
const matId = toId(rec.mat);
|
|
const coatId = toId(rec.mat_coat);
|
|
const colorId = toId(rec.mat_color);
|
|
const opacityId = toId(rec.mat_opacity);
|
|
const lensId = toId(rec.lens);
|
|
const sourceId = rec.source && typeof rec.source === "object" ? rec.source.submission_id ?? null : (rec.source as any) ?? null;
|
|
|
|
return {
|
|
setting_title: rec.setting_title ?? "",
|
|
setting_notes: rec.setting_notes ?? "",
|
|
|
|
photo: photoId,
|
|
screen: screenId,
|
|
|
|
mat: matId ? String(matId) : null,
|
|
mat_coat: coatId ? String(coatId) : null,
|
|
mat_color: colorId ? String(colorId) : null,
|
|
mat_opacity: opacityId ? String(opacityId) : null,
|
|
mat_thickness: rec.mat_thickness ?? null,
|
|
|
|
source: sourceId != null ? String(sourceId) : null,
|
|
lens: lensId != null ? String(lensId) : null,
|
|
focus: rec.focus ?? null,
|
|
|
|
laser_soft: (typeof rec.laser_soft === "object" ? rec.laser_soft?.id : (rec.laser_soft as any)) ?? null,
|
|
repeat_all: rec.repeat_all ?? null,
|
|
|
|
fill_settings: rec.fill_settings ?? [],
|
|
line_settings: rec.line_settings ?? [],
|
|
raster_settings: rec.raster_settings ?? [],
|
|
};
|
|
}, [rec]);
|
|
|
|
function clearEditParam() {
|
|
const params = new URLSearchParams(sp.toString());
|
|
params.delete("edit");
|
|
router.replace(`?${params.toString()}`);
|
|
}
|
|
|
|
if (loading) return <p className="p-6">Loading setting…</p>;
|
|
if (err) return (
|
|
<div className="p-6">
|
|
<div className="rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">{err}</div>
|
|
</div>
|
|
);
|
|
if (!rec) return <p className="p-6">Setting not found.</p>;
|
|
|
|
// ── EDIT MODE ───────────────────────────────────────────────
|
|
if (editMode && initialValues) {
|
|
return (
|
|
<main className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-xl lg:text-2xl font-semibold">Edit CO₂ Galvo Setting</h1>
|
|
<button className="px-2 py-1 border rounded" onClick={() => (onBack ? onBack() : clearEditParam())}>Cancel</button>
|
|
</div>
|
|
<SettingsSubmit
|
|
mode="edit"
|
|
initialTarget="settings_co2gal"
|
|
submissionId={rec.submission_id}
|
|
initialValues={initialValues}
|
|
/>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
// ── VIEW MODE (readable) ───────────────────────────────────
|
|
const ownerDisplay = ownerLabel(rec.owner);
|
|
const ownerId = typeof rec.owner === "object" ? (rec.owner?.id != null ? String(rec.owner.id) : null) : (rec.owner != null ? String(rec.owner) : null);
|
|
const isMine = meId && ownerId ? meId === ownerId : false;
|
|
|
|
const photoId = typeof rec.photo === "object" ? rec.photo?.id : (rec.photo as any);
|
|
const screenId = typeof rec.screen === "object" ? rec.screen?.id : (rec.screen as any);
|
|
|
|
const photoSrc = photoId ? fileUrl(String(photoId)) : "";
|
|
const screenSrc = screenId ? fileUrl(String(screenId)) : "";
|
|
|
|
const softName = typeof rec.laser_soft === "object" ? (rec.laser_soft?.name ?? "—") : "—";
|
|
|
|
function openEdit() {
|
|
const q = new URLSearchParams(sp.toString());
|
|
q.set("edit", "1");
|
|
router.replace(`?${q.toString()}`, { scroll: false });
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<header className="space-y-1">
|
|
<h1 className="text-2xl font-bold break-words">{rec.setting_title || "Untitled"}</h1>
|
|
<div className="text-sm text-muted-foreground">Last modified: {rec.last_modified_date || "—"}</div>
|
|
</header>
|
|
|
|
<section className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<div className="text-sm">
|
|
<div><span className="font-medium">Owner:</span> {ownerDisplay}</div>
|
|
<div><span className="font-medium">Uploader:</span> {rec.uploader || "—"}</div>
|
|
<div><span className="font-medium">Material:</span> {rec.mat?.name || "—"}</div>
|
|
<div><span className="font-medium">Coating:</span> {rec.mat_coat?.name || "—"}</div>
|
|
<div><span className="font-medium">Color:</span> {rec.mat_color?.name || "—"}</div>
|
|
<div><span className="font-medium">Opacity:</span> {rec.mat_opacity?.opacity ?? "—"}</div>
|
|
<div><span className="font-medium">Thickness (mm):</span> {rec.mat_thickness ?? "—"}</div>
|
|
<div><span className="font-medium">Laser Source:</span> {[rec.source?.make, rec.source?.model].filter(Boolean).join(" ") || "—"}{rec.source?.nm ? ` (${rec.source.nm})` : ""}</div>
|
|
<div><span className="font-medium">Scan Lens:</span> {rec.lens?.field_size || "—"}{rec.lens?.focal_length ? ` / ${rec.lens.focal_length} mm` : ""}</div>
|
|
<div><span className="font-medium">Focus (mm):</span> {rec.focus ?? "—"}</div>
|
|
<div><span className="font-medium">Software:</span> {softName}</div>
|
|
<div><span className="font-medium">Repeat All:</span> {rec.repeat_all ?? "—"}</div>
|
|
</div>
|
|
|
|
{rec.setting_notes ? (
|
|
<div>
|
|
<div className="text-sm font-medium mb-1">Notes</div>
|
|
<p className="text-sm whitespace-pre-wrap">{rec.setting_notes}</p>
|
|
</div>
|
|
) : null}
|
|
|
|
{showOwnerEdit && isMine && (
|
|
<div className="pt-2">
|
|
<button onClick={openEdit} className="px-2 py-1 border rounded text-sm">Edit</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{photoSrc ? (
|
|
<figure className="space-y-1">
|
|
<ZoomableSquareImage src={photoSrc} alt="Result" onOpen={() => setViewerSrc(photoSrc)} />
|
|
<figcaption className="text-xs text-muted-foreground">Result</figcaption>
|
|
</figure>
|
|
) : null}
|
|
{screenSrc ? (
|
|
<figure className="space-y-1">
|
|
<ZoomableSquareImage src={screenSrc} alt="Settings Screenshot" onOpen={() => setViewerSrc(screenSrc)} />
|
|
<figcaption className="text-xs text-muted-foreground">Settings Screenshot</figcaption>
|
|
</figure>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
|
|
{(rec.fill_settings?.length ?? 0) > 0 && (
|
|
<section className="space-y-2">
|
|
<h2 className="text-lg font-semibold">Fill Settings</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="border-b">
|
|
<tr>
|
|
<th className="px-2 py-1 text-left">Name</th>
|
|
<th className="px-2 py-1 text-left">Type</th>
|
|
<th className="px-2 py-1 text-left">Power (%)</th>
|
|
<th className="px-2 py-1 text-left">Speed (mm/s)</th>
|
|
<th className="px-2 py-1 text-left">Interval</th>
|
|
<th className="px-2 py-1 text-left">Angle</th>
|
|
<th className="px-2 py-1 text-left">Pass</th>
|
|
<th className="px-2 py-1 text-left">Freq (kHz)</th>
|
|
<th className="px-2 py-1 text-left">Pulse (ns)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{rec.fill_settings!.map((r: any, i: number) => (
|
|
<tr key={i}>
|
|
<td className="px-2 py-1">{r.name || "—"}</td>
|
|
<td className="px-2 py-1">{r.type || "—"}</td>
|
|
<td className="px-2 py-1">{r.power ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.speed ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.interval ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.angle ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.pass ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.frequency ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.pulse ?? "—"}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{(rec.line_settings?.length ?? 0) > 0 && (
|
|
<section className="space-y-2">
|
|
<h2 className="text-lg font-semibold">Line Settings</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="border-b">
|
|
<tr>
|
|
<th className="px-2 py-1 text-left">Name</th>
|
|
<th className="px-2 py-1 text-left">Power</th>
|
|
<th className="px-2 py-1 text-left">Speed</th>
|
|
<th className="px-2 py-1 text-left">Freq</th>
|
|
<th className="px-2 py-1 text-left">Pulse</th>
|
|
<th className="px-2 py-1 text-left">Pass</th>
|
|
<th className="px-2 py-1 text-left">Air</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{rec.line_settings!.map((r: any, i: number) => (
|
|
<tr key={i}>
|
|
<td className="px-2 py-1">{r.name || "—"}</td>
|
|
<td className="px-2 py-1">{r.power ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.speed ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.frequency ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.pulse ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.pass ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.air ? "Yes" : "No"}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{(rec.raster_settings?.length ?? 0) > 0 && (
|
|
<section className="space-y-2">
|
|
<h2 className="text-lg font-semibold">Raster Settings</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead className="border-b">
|
|
<tr>
|
|
<th className="px-2 py-1 text-left">Name</th>
|
|
<th className="px-2 py-1 text-left">Type</th>
|
|
<th className="px-2 py-1 text-left">Dither</th>
|
|
<th className="px-2 py-1 text-left">Power</th>
|
|
<th className="px-2 py-1 text-left">Speed</th>
|
|
<th className="px-2 py-1 text-left">Interval</th>
|
|
<th className="px-2 py-1 text-left">Pass</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{rec.raster_settings!.map((r: any, i: number) => (
|
|
<tr key={i}>
|
|
<td className="px-2 py-1">{r.name || "—"}</td>
|
|
<td className="px-2 py-1">{r.type || "—"}</td>
|
|
<td className="px-2 py-1">{r.dither || "—"}</td>
|
|
<td className="px-2 py-1">{r.power ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.speed ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.interval ?? "—"}</td>
|
|
<td className="px-2 py-1">{r.pass ?? "—"}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{viewerSrc && (
|
|
<div className="fixed inset-0 z-50 bg-black/80 p-4 flex items-center justify-center" onClick={() => setViewerSrc(null)}>
|
|
<img src={viewerSrc} alt="" className="max-w-full max-h-full cursor-zoom-out" onClick={(e) => e.stopPropagation()} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|