portal(settings): embed authed SettingsSubmit form in Add tab; switcher remembers last data tab
This commit is contained in:
parent
e2d5042e60
commit
e6c37d0b14
6 changed files with 1595 additions and 823 deletions
|
|
@ -7,177 +7,403 @@ import Markdown from "react-markdown";
|
|||
|
||||
export default function CO2GalvoSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [setting, setSetting] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// claim UI state
|
||||
const [claimBusy, setClaimBusy] = useState(false);
|
||||
const [claimMsg, setClaimMsg] = useState<string | null>(null);
|
||||
const [claimErr, setClaimErr] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gal/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,screen.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,mat_thickness,source.make,source.model,lens.field_size,lens.focal_length,lens_conf.name,lens_apt.name,lens_exp.name,focus,laser_soft.name,repeat_all,fill_settings,line_settings,raster_settings`
|
||||
)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to load");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => setSetting(data.data))
|
||||
.catch(() => setSetting(null))
|
||||
.finally(() => setLoading(false));
|
||||
if (!id) return;
|
||||
|
||||
const url =
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gal/${id}` +
|
||||
`?fields=` +
|
||||
[
|
||||
"submission_id",
|
||||
"setting_title",
|
||||
"uploader",
|
||||
"owner.id",
|
||||
"owner.first_name",
|
||||
"owner.last_name",
|
||||
"owner.email",
|
||||
"setting_notes",
|
||||
"photo.filename_disk",
|
||||
"photo.title",
|
||||
"screen.filename_disk",
|
||||
"screen.title",
|
||||
"mat.name",
|
||||
"mat_coat.name",
|
||||
"mat_color.name",
|
||||
"mat_opacity.opacity",
|
||||
"mat_thickness",
|
||||
"source.make",
|
||||
"source.model",
|
||||
"lens.field_size",
|
||||
"lens.focal_length",
|
||||
"lens_conf.name",
|
||||
"lens_apt.name",
|
||||
"lens_exp.name",
|
||||
"focus",
|
||||
"laser_soft.name",
|
||||
"repeat_all",
|
||||
"fill_settings",
|
||||
"line_settings",
|
||||
"raster_settings",
|
||||
].join(",");
|
||||
|
||||
fetch(url, { cache: "no-store" })
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to load");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => setSetting(data.data))
|
||||
.catch(() => setSetting(null))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const formatBoolean = (val) => val ? "Enabled" : val === false ? "Disabled" : "—";
|
||||
|
||||
const renderRepeaterCard = (title, fields, items) => {
|
||||
const filtered = (items || []).filter(item => Object.values(item).some(v => v !== null && v !== ""));
|
||||
if (filtered.length === 0) return null;
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<h2 className="text-2xl font-semibold mb-2">{title}</h2>
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
{filtered.map((item, i) => (
|
||||
<div key={i} className="border border-border rounded-lg p-4 bg-card">
|
||||
{fields.map(({ key, label, condition }) => {
|
||||
const value = item[key];
|
||||
if (condition && !condition(item)) return null;
|
||||
return <p key={key} className="text-sm"><strong>{label}:</strong> {typeof value === "boolean" ? formatBoolean(value) : value || "—"}</p>;
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const openSearchInNewTab = (value) => {
|
||||
const url = new URL("/co2-galvo-settings", window.location.origin);
|
||||
url.searchParams.set("query", value);
|
||||
const anchor = document.createElement("a");
|
||||
anchor.href = url.toString();
|
||||
anchor.target = "_blank";
|
||||
anchor.rel = "noopener noreferrer";
|
||||
anchor.click();
|
||||
};
|
||||
|
||||
if (loading) return <p className="p-6">Loading setting...</p>;
|
||||
if (!setting) return <p className="p-6">Setting not found.</p>;
|
||||
|
||||
const ownerName = (row: any) => {
|
||||
const o = row?.owner;
|
||||
if (!o) return null;
|
||||
const name = [o.first_name, o.last_name].filter(Boolean).join(" ").trim();
|
||||
return name || o.email || null;
|
||||
};
|
||||
|
||||
const formatBoolean = (val: any) =>
|
||||
val ? "Enabled" : val === false ? "Disabled" : "—";
|
||||
|
||||
const renderRepeaterCard = (title: string, fields: any[], items: any[]) => {
|
||||
const filtered = (items || []).filter((item) =>
|
||||
Object.values(item).some((v) => v !== null && v !== "")
|
||||
);
|
||||
if (filtered.length === 0) return null;
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<h2 className="text-2xl font-semibold mb-2">{title}</h2>
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
{filtered.map((item, i) => (
|
||||
<div key={i} className="border border-border rounded-lg p-4 bg-card">
|
||||
{fields.map(({ key, label, condition }: any) => {
|
||||
const value = item[key];
|
||||
if (condition && !condition(item)) return null;
|
||||
return (
|
||||
<p key={key} className="text-sm">
|
||||
<strong>{label}:</strong>{" "}
|
||||
{typeof value === "boolean"
|
||||
? formatBoolean(value)
|
||||
: value || "—"}
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const openSearchInNewTab = (value: string) => {
|
||||
if (!value || typeof window === "undefined") return;
|
||||
const url = new URL("/co2-galvo-settings", window.location.origin);
|
||||
url.searchParams.set("query", value);
|
||||
const a = document.createElement("a");
|
||||
a.href = url.toString();
|
||||
a.target = "_blank";
|
||||
a.rel = "noopener noreferrer";
|
||||
a.click();
|
||||
};
|
||||
|
||||
const onClaim = async () => {
|
||||
setClaimBusy(true);
|
||||
setClaimErr(null);
|
||||
setClaimMsg(null);
|
||||
try {
|
||||
const r = await fetch("/api/claims", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
target_collection: "settings_co2gal",
|
||||
target_id: id,
|
||||
}),
|
||||
cache: "no-store",
|
||||
});
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
throw new Error(
|
||||
data?.error || data?.errors?.[0]?.message || "Failed to submit claim"
|
||||
);
|
||||
}
|
||||
setClaimMsg("Claim request submitted for review.");
|
||||
} catch (e: any) {
|
||||
setClaimErr(e?.message || "Failed to submit claim");
|
||||
} finally {
|
||||
setClaimBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const owner = ownerName(setting);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div className="card bg-card p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
|
||||
<p className="text-muted-foreground mb-4">Uploaded by: {setting.uploader || "—"}</p>
|
||||
</div>
|
||||
<a
|
||||
href="/co2-galvo-settings"
|
||||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
|
||||
>
|
||||
← Back to CO₂ Galvo Settings
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
{/* Title / Meta / Ownership */}
|
||||
<div className="card bg-card p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
|
||||
|
||||
<div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.photo?.filename_disk && (
|
||||
<a href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`} target="_blank" rel="noopener noreferrer">
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
||||
alt="Laser preview"
|
||||
width={250}
|
||||
height={250}
|
||||
className="rounded object-contain max-w-[250px] max-h-[250px]"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Material</h2>
|
||||
<p><strong>Material:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat?.name)}>{setting.mat?.name || "—"}</span></p>
|
||||
<p><strong>Coating:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat_coat?.name)}>{setting.mat_coat?.name || "—"}</span></p>
|
||||
<p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
|
||||
<p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
|
||||
<p><strong>Thickness:</strong> {setting.mat_thickness ? `${setting.mat_thickness} mm` : "Not Applicable"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm text-muted-foreground mb-3">
|
||||
<p>
|
||||
<strong>Owner:</strong>{" "}
|
||||
{owner ? <span>{owner}</span> : <span>—</span>}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Uploader:</strong> {setting.uploader || "—"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Setup</h2>
|
||||
<p><strong>Software:</strong> {setting.laser_soft?.name || "—"}</p>
|
||||
<p><strong>Repeat All (global):</strong> {setting.repeat_all ?? "—"}</p>
|
||||
<p className="mt-4"><strong>Focus:</strong> {setting.focus ?? "—"} mm</p>
|
||||
<small>-Values Focus Closer | +Values Focus Further</small>
|
||||
</div>
|
||||
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Laser</h2>
|
||||
<p><strong>Source Make:</strong> {setting.source?.make || "—"}</p>
|
||||
<p><strong>Source Model:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.source?.model)}>{setting.source?.model || "—"}</span></p>
|
||||
<p><strong>Lens:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.lens?.field_size)}>{setting.lens?.field_size || "—"}</span> mm | {setting.lens?.focal_length || "—"} mm</p>
|
||||
<p><strong>Lens Config:</strong> {setting.lens_conf?.name || "—"}</p>
|
||||
<p><strong>Aperture Type:</strong> {setting.lens_apt?.name || "—"}</p>
|
||||
<p><strong>Expansion Type:</strong> {setting.lens_exp?.name || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{setting.setting_notes && (
|
||||
<div className="prose dark:prose-invert mt-6">
|
||||
<h2>Notes</h2>
|
||||
<Markdown>{setting.setting_notes}</Markdown>
|
||||
</div>
|
||||
{!owner && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onClaim}
|
||||
disabled={claimBusy}
|
||||
className="px-3 py-1.5 rounded bg-accent text-background text-sm disabled:opacity-60"
|
||||
>
|
||||
{claimBusy ? "Submitting…" : "Claim this setting"}
|
||||
</button>
|
||||
{claimMsg && (
|
||||
<span className="text-green-500 text-sm">{claimMsg}</span>
|
||||
)}
|
||||
{claimErr && (
|
||||
<span className="text-red-500 text-sm">{claimErr}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<hr className="my-6 border-muted" />
|
||||
<a
|
||||
href="/co2-galvo-settings"
|
||||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
|
||||
>
|
||||
← Back to CO₂ Galvo Settings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{renderRepeaterCard("Fill Settings", [
|
||||
{/* Result Photo + Material */}
|
||||
<div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.photo?.filename_disk && (
|
||||
<a
|
||||
href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
||||
alt={setting.photo?.title || "Laser preview"}
|
||||
width={250}
|
||||
height={250}
|
||||
className="rounded object-contain max-w-[250px] max-h-[250px]"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Material</h2>
|
||||
<p>
|
||||
<strong>Material:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.mat?.name)}
|
||||
>
|
||||
{setting.mat?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Coating:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.mat_coat?.name)}
|
||||
>
|
||||
{setting.mat_coat?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Color:</strong> {setting.mat_color?.name || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Thickness:</strong>{" "}
|
||||
{setting.mat_thickness ? `${setting.mat_thickness} mm` : "Not Applicable"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Setup */}
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Setup</h2>
|
||||
<p>
|
||||
<strong>Software:</strong> {setting.laser_soft?.name || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Repeat All (global):</strong> {setting.repeat_all ?? "—"}
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<strong>Focus:</strong> {setting.focus ?? "—"} mm
|
||||
</p>
|
||||
<small>-Values Focus Closer | +Values Focus Further</small>
|
||||
</div>
|
||||
|
||||
{/* Laser (screenshot left, specs right; heading aligned above specs) */}
|
||||
<div className="card bg-card p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.screen?.filename_disk ? (
|
||||
<a
|
||||
href={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={setting.screen?.title || "Screenshot"}
|
||||
>
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
|
||||
alt={setting.screen?.title || "Screenshot"}
|
||||
width={250}
|
||||
height={250}
|
||||
className="rounded object-contain max-w-[250px] max-h-[250px]"
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">No screenshot</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Laser</h2>
|
||||
<p>
|
||||
<strong>Source Make:</strong> {setting.source?.make || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Source Model:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.source?.model)}
|
||||
>
|
||||
{setting.source?.model || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Lens:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.lens?.field_size)}
|
||||
>
|
||||
{setting.lens?.field_size || "—"}
|
||||
</span>{" "}
|
||||
mm | {setting.lens?.focal_length || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Lens Config:</strong> {setting.lens_conf?.name || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Aperture Type:</strong> {setting.lens_apt?.name || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Expansion Type:</strong> {setting.lens_exp?.name || "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
{setting.setting_notes && (
|
||||
<div className="prose dark:prose-invert mt-6">
|
||||
<h2>Notes</h2>
|
||||
<Markdown>{setting.setting_notes}</Markdown>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<hr className="my-6 border-muted" />
|
||||
|
||||
{/* Repeaters */}
|
||||
{renderRepeaterCard(
|
||||
"Fill Settings",
|
||||
[
|
||||
{ key: "fill_name", label: "Fill Name" },
|
||||
{ key: "power", label: "Power (%)" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "angle", label: "Angle (°)" },
|
||||
{ key: "auto", label: "Auto-Rotate" },
|
||||
{ key: "increment", label: "Increment (°)", condition: (e) => e.auto },
|
||||
{ key: "cross", label: "Crosshatch" },
|
||||
{ key: "flood", label: "Flood Fill" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.fill_settings)}
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "angle", label: "Angle (°)" },
|
||||
{ key: "auto", label: "Auto-Rotate" },
|
||||
{ key: "increment", label: "Increment (°)", condition: (e: any) => e.auto },
|
||||
{ key: "cross", label: "Crosshatch" },
|
||||
{ key: "flood", label: "Flood Fill" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.fill_settings
|
||||
)}
|
||||
|
||||
{renderRepeaterCard("Line Settings", [
|
||||
{renderRepeaterCard(
|
||||
"Line Settings",
|
||||
[
|
||||
{ key: "name", label: "Line Name" },
|
||||
{ key: "power", label: "Power (%)" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "perf", label: "Perforation Mode" },
|
||||
{ key: "cut", label: "Cut (mm)", condition: (e) => e.perf },
|
||||
{ key: "skip", label: "Skip (mm)", condition: (e) => e.perf },
|
||||
{ key: "wobble", label: "Wobble Mode" },
|
||||
{ key: "step", label: "Step (mm)", condition: (e) => e.wobble },
|
||||
{ key: "size", label: "Size (mm)", condition: (e) => e.wobble },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.line_settings)}
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "perf", label: "Perforation Mode" },
|
||||
{ key: "cut", label: "Cut (mm)", condition: (e: any) => e.perf },
|
||||
{ key: "skip", label: "Skip (mm)", condition: (e: any) => e.perf },
|
||||
{ key: "wobble", label: "Wobble Mode" },
|
||||
{ key: "step", label: "Step (mm)", condition: (e: any) => e.wobble },
|
||||
{ key: "size", label: "Size (mm)", condition: (e: any) => e.wobble },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.line_settings
|
||||
)}
|
||||
|
||||
{renderRepeaterCard("Raster Settings", [
|
||||
{renderRepeaterCard(
|
||||
"Raster Settings",
|
||||
[
|
||||
{ key: "name", label: "Raster Name" },
|
||||
{ key: "power", label: "Power (%)" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "dither", label: "Dither" },
|
||||
{ key: "halftone_cell", label: "Cell Size (mm)", condition: (e) => e.dither === "halftone" },
|
||||
{ key: "halftone_angle", label: "Halftone Angle", condition: (e) => e.dither === "halftone" },
|
||||
{ key: "inversion", label: "Image Inverted" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "dot", label: "Dot-width Adjustment (mm)" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "cross", label: "Crosshatch" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.raster_settings)}
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "dither", label: "Dither" },
|
||||
{
|
||||
key: "halftone_cell",
|
||||
label: "Cell Size (mm)",
|
||||
condition: (e: any) => e.dither === "halftone",
|
||||
},
|
||||
{
|
||||
key: "halftone_angle",
|
||||
label: "Halftone Angle",
|
||||
condition: (e: any) => e.dither === "halftone",
|
||||
},
|
||||
{ key: "inversion", label: "Image Inverted" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "dot", label: "Dot-width Adjustment (mm)" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "cross", label: "Crosshatch" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.raster_settings
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,174 +7,354 @@ import Markdown from "react-markdown";
|
|||
|
||||
export default function CO2GantrySettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [setting, setSetting] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// claim UI state
|
||||
const [claimBusy, setClaimBusy] = useState(false);
|
||||
const [claimMsg, setClaimMsg] = useState<string | null>(null);
|
||||
const [claimErr, setClaimErr] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gan/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,screen.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,mat_thickness,source.make,source.model,laser_soft.name,lens.name,lens_conf.name,focus,repeat_all,fill_settings,line_settings,raster_settings`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to load");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setSetting(data.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
const url =
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_co2gan/${id}` +
|
||||
`?fields=` +
|
||||
[
|
||||
"submission_id",
|
||||
"setting_title",
|
||||
"uploader",
|
||||
"owner.id",
|
||||
"owner.first_name",
|
||||
"owner.last_name",
|
||||
"owner.email",
|
||||
"setting_notes",
|
||||
"photo.filename_disk",
|
||||
"photo.title",
|
||||
"screen.filename_disk",
|
||||
"screen.title",
|
||||
"mat.name",
|
||||
"mat_coat.name",
|
||||
"mat_color.name",
|
||||
"mat_opacity.opacity",
|
||||
"mat_thickness",
|
||||
"source.make",
|
||||
"source.model",
|
||||
"laser_soft.name",
|
||||
"lens.name",
|
||||
"lens_conf.name",
|
||||
"focus",
|
||||
"repeat_all",
|
||||
"fill_settings",
|
||||
"line_settings",
|
||||
"raster_settings",
|
||||
].join(",");
|
||||
|
||||
fetch(url, { cache: "no-store" })
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to load");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setSetting(data.data);
|
||||
})
|
||||
.catch(() => setSetting(null))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const openSearchInNewTab = (value) => {
|
||||
if (loading) return <div className="p-6 max-w-7xl mx-auto">Loading…</div>;
|
||||
if (!setting) return <div className="p-6 max-w-7xl mx-auto">Setting not found.</div>;
|
||||
|
||||
const ownerName = (row: any) => {
|
||||
const o = row?.owner;
|
||||
if (!o) return null;
|
||||
const name = [o.first_name, o.last_name].filter(Boolean).join(" ").trim();
|
||||
return name || o.email || null;
|
||||
};
|
||||
|
||||
const formatBoolean = (val: any) =>
|
||||
val ? "Enabled" : val === false ? "Disabled" : "—";
|
||||
|
||||
const renderRepeaterCard = (title: string, fields: any[], data: any[]) => {
|
||||
if (!data || !Array.isArray(data) || data.length === 0) return null;
|
||||
const filtered = data.filter((item) =>
|
||||
Object.values(item).some((v) => v !== null && v !== "")
|
||||
);
|
||||
if (filtered.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<h2 className="text-2xl font-semibold mb-2">{title}</h2>
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
{filtered.map((item, i) => (
|
||||
<div key={i} className="border border-border rounded-lg p-4 bg-card">
|
||||
{fields.map(({ key, label, condition }: any) => {
|
||||
if (condition && !condition(item)) return null;
|
||||
const value = item[key];
|
||||
return (
|
||||
<p key={key} className="text-sm">
|
||||
<strong>{label}:</strong>{" "}
|
||||
{typeof value === "boolean" ? formatBoolean(value) : value ?? "—"}
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const openSearchInNewTab = (value: string) => {
|
||||
if (!value || typeof window === "undefined") return;
|
||||
const url = new URL("/co2-gantry-settings", window.location.origin);
|
||||
url.searchParams.set("query", value);
|
||||
window.open(url.toString(), "_blank", "noopener,noreferrer");
|
||||
};
|
||||
|
||||
const renderRepeaterCard = (title, fields, data) => {
|
||||
if (!data || !Array.isArray(data) || data.length === 0) return null;
|
||||
return (
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">{title}</h2>
|
||||
{data.map((item, i) => (
|
||||
<div key={i} className="mb-4 border-b border-muted pb-2">
|
||||
{fields.map((field) =>
|
||||
field.condition === undefined || field.condition(item) ? (
|
||||
<p key={field.key}>
|
||||
<strong>{field.label}:</strong>{" "}
|
||||
{item[field.key] !== undefined && item[field.key] !== null ? item[field.key].toString() : "—"}
|
||||
</p>
|
||||
) : null
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
const onClaim = async () => {
|
||||
setClaimBusy(true);
|
||||
setClaimErr(null);
|
||||
setClaimMsg(null);
|
||||
try {
|
||||
const r = await fetch("/api/claims", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
target_collection: "settings_co2gan",
|
||||
target_id: id,
|
||||
}),
|
||||
cache: "no-store",
|
||||
});
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
throw new Error(
|
||||
data?.error || data?.errors?.[0]?.message || "Failed to submit claim"
|
||||
);
|
||||
}
|
||||
setClaimMsg("Claim request submitted for review.");
|
||||
} catch (e: any) {
|
||||
setClaimErr(e?.message || "Failed to submit claim");
|
||||
} finally {
|
||||
setClaimBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div className="p-6 max-w-7xl mx-auto">Loading…</div>;
|
||||
if (!setting) return <div className="p-6 max-w-7xl mx-auto">Setting not found.</div>;
|
||||
const owner = ownerName(setting);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div className="card bg-card p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
|
||||
<p className="text-muted-foreground mb-4">Uploaded by: {setting.uploader || "—"}</p>
|
||||
</div>
|
||||
<a
|
||||
href="/co2-gantry-settings"
|
||||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
|
||||
>
|
||||
← Back to CO₂ Gantry Settings
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
{/* Title / Meta / Ownership */}
|
||||
<div className="card bg-card p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
|
||||
|
||||
<div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.photo?.filename_disk && (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/assets/${setting.photo.filename_disk}`}
|
||||
alt="Preview"
|
||||
width={300}
|
||||
height={300}
|
||||
className="rounded-md"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<strong>Material:</strong>{" "}
|
||||
<span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat?.name)}>
|
||||
{setting.mat?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Coating:</strong>{" "}
|
||||
<span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat_coat?.name)}>
|
||||
{setting.mat_coat?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
|
||||
<p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
|
||||
<p><strong>Thickness:</strong> {setting.mat_thickness ? `${setting.mat_thickness} mm` : "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm text-muted-foreground mb-3">
|
||||
<p>
|
||||
<strong>Owner:</strong>{" "}
|
||||
{owner ? <span>{owner}</span> : <span>—</span>}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Uploader:</strong> {setting.uploader || "—"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!owner && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onClaim}
|
||||
disabled={claimBusy}
|
||||
className="px-3 py-1.5 rounded bg-accent text-background text-sm disabled:opacity-60"
|
||||
>
|
||||
{claimBusy ? "Submitting…" : "Claim this setting"}
|
||||
</button>
|
||||
{claimMsg && (
|
||||
<span className="text-green-500 text-sm">{claimMsg}</span>
|
||||
)}
|
||||
{claimErr && (
|
||||
<span className="text-red-500 text-sm">{claimErr}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Laser</h2>
|
||||
<p><strong>Source Make:</strong> {setting.source?.make || "—"}</p>
|
||||
<p>
|
||||
<strong>Source Model:</strong>{" "}
|
||||
<span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.source?.model)}>
|
||||
{setting.source?.model || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Lens:</strong>{" "}
|
||||
<span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.lens?.name)}>
|
||||
{setting.lens?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p><strong>Lens Config:</strong> {setting.lens_conf?.name || "—"}</p>
|
||||
</div>
|
||||
<a
|
||||
href="/co2-gantry-settings"
|
||||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
|
||||
>
|
||||
← Back to CO₂ Gantry Settings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Focus</h2>
|
||||
<p><strong>Focus:</strong> {setting.focus || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Result Photo + Material */}
|
||||
<div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.photo?.filename_disk && (
|
||||
<a
|
||||
href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
||||
alt={setting.photo?.title || "Preview"}
|
||||
width={250}
|
||||
height={250}
|
||||
className="rounded object-contain max-w-[250px] max-h-[250px]"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Material</h2>
|
||||
<p>
|
||||
<strong>Material:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.mat?.name)}
|
||||
>
|
||||
{setting.mat?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Coating:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.mat_coat?.name)}
|
||||
>
|
||||
{setting.mat_coat?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
|
||||
<p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
|
||||
<p>
|
||||
<strong>Thickness:</strong>{" "}
|
||||
{setting.mat_thickness ? `${setting.mat_thickness} mm` : "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card bg-card p-4 mt-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Notes</h2>
|
||||
<div className="prose dark:prose-invert">
|
||||
<Markdown>{setting.setting_notes || "—"}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
{/* Setup */}
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Setup</h2>
|
||||
<p><strong>Software:</strong> {setting.laser_soft?.name || "—"}</p>
|
||||
<p><strong>Repeat All (global):</strong> {setting.repeat_all ?? "—"}</p>
|
||||
<p className="mt-4"><strong>Focus:</strong> {setting.focus ?? "—"} mm</p>
|
||||
<small>-Values Focus Closer | +Values Focus Further</small>
|
||||
</div>
|
||||
|
||||
<hr className="my-6 border-muted" />
|
||||
{/* Laser (screenshot left, specs right; heading aligned above specs) */}
|
||||
<div className="card bg-card p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.screen?.filename_disk ? (
|
||||
<a
|
||||
href={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={setting.screen?.title || "Screenshot"}
|
||||
>
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
|
||||
alt={setting.screen?.title || "Screenshot"}
|
||||
width={250}
|
||||
height={250}
|
||||
className="rounded object-contain max-w-[250px] max-h-[250px]"
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">No screenshot</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{renderRepeaterCard("Fill Settings", [
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Laser</h2>
|
||||
<p><strong>Source Make:</strong> {setting.source?.make || "—"}</p>
|
||||
<p>
|
||||
<strong>Source Model:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.source?.model)}
|
||||
>
|
||||
{setting.source?.model || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Lens:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.lens?.name)}
|
||||
>
|
||||
{setting.lens?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p><strong>Lens Config:</strong> {setting.lens_conf?.name || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="card bg-card p-4 mt-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Notes</h2>
|
||||
<div className="prose dark:prose-invert">
|
||||
<Markdown>{setting.setting_notes || "—"}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-6 border-muted" />
|
||||
|
||||
{/* Repeaters (unchanged fields per your original) */}
|
||||
{renderRepeaterCard(
|
||||
"Fill Settings",
|
||||
[
|
||||
{ key: "name", label: "Fill Name" },
|
||||
{ key: "power", label: "Power (%)" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "flood", label: "Flood Fill" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.fill_settings)}
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "flood", label: "Flood Fill" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.fill_settings
|
||||
)}
|
||||
|
||||
{renderRepeaterCard("Line Settings", [
|
||||
{renderRepeaterCard(
|
||||
"Line Settings",
|
||||
[
|
||||
{ key: "name", label: "Line Name" },
|
||||
{ key: "power", label: "Power (%)" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "perf", label: "Perforation" },
|
||||
{ key: "cut", label: "Cut Power Override" },
|
||||
{ key: "skip", label: "Skip Pass" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.line_settings)}
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "perf", label: "Perforation" },
|
||||
{ key: "cut", label: "Cut Power Override" },
|
||||
{ key: "skip", label: "Skip Pass" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.line_settings
|
||||
)}
|
||||
|
||||
{renderRepeaterCard("Raster Settings", [
|
||||
{renderRepeaterCard(
|
||||
"Raster Settings",
|
||||
[
|
||||
{ key: "name", label: "Raster Name" },
|
||||
{ key: "power", label: "Power (%)" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "dither", label: "Dither" },
|
||||
{ key: "halftone_cell", label: "Halftone Cell" },
|
||||
{ key: "halftone_angle", label: "Angle" },
|
||||
{ key: "inversion", label: "Inversion" },
|
||||
{ key: "interval", label: "Interval" },
|
||||
{ key: "dot", label: "Dot Size" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.raster_settings)}
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "dither", label: "Dither" },
|
||||
{ key: "halftone_cell", label: "Halftone Cell" },
|
||||
{ key: "halftone_angle", label: "Angle" },
|
||||
{ key: "inversion", label: "Inversion" },
|
||||
{ key: "interval", label: "Interval" },
|
||||
{ key: "dot", label: "Dot Size" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.raster_settings
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,162 +7,362 @@ import Markdown from "react-markdown";
|
|||
|
||||
export default function UVSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [setting, setSetting] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// claim UI state
|
||||
const [claimBusy, setClaimBusy] = useState(false);
|
||||
const [claimMsg, setClaimMsg] = useState<string | null>(null);
|
||||
const [claimErr, setClaimErr] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_uv/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,mat_thickness,source.model,lens.field_size,lens.focal_length,focus,fill_settings,line_settings,raster_settings`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to load");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setSetting(data.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
|
||||
const url =
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_uv/${id}` +
|
||||
`?fields=` +
|
||||
[
|
||||
"submission_id",
|
||||
"setting_title",
|
||||
"uploader",
|
||||
"owner.id",
|
||||
"owner.first_name",
|
||||
"owner.last_name",
|
||||
"owner.email",
|
||||
"setting_notes",
|
||||
"photo.filename_disk",
|
||||
"photo.title",
|
||||
"screen.filename_disk",
|
||||
"screen.title",
|
||||
"mat.name",
|
||||
"mat_coat.name",
|
||||
"mat_color.name",
|
||||
"mat_opacity.opacity",
|
||||
"mat_thickness",
|
||||
"source.model",
|
||||
"lens.field_size",
|
||||
"lens.focal_length",
|
||||
"focus",
|
||||
"fill_settings",
|
||||
"line_settings",
|
||||
"raster_settings",
|
||||
].join(",");
|
||||
|
||||
fetch(url, { cache: "no-store" })
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to load");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => setSetting(data.data))
|
||||
.catch(() => setSetting(null))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const openSearchInNewTab = (value) => {
|
||||
if (!value || typeof window === "undefined") return;
|
||||
const url = new URL("/uv-settings", window.location.origin);
|
||||
url.searchParams.set("query", value);
|
||||
window.open(url.toString(), "_blank", "noopener,noreferrer");
|
||||
if (loading) return <p className="p-6">Loading setting...</p>;
|
||||
if (!setting) return <p className="p-6">Setting not found.</p>;
|
||||
|
||||
const ownerName = (row: any) => {
|
||||
const o = row?.owner;
|
||||
if (!o) return null;
|
||||
const name = [o.first_name, o.last_name].filter(Boolean).join(" ").trim();
|
||||
return name || o.email || null;
|
||||
};
|
||||
|
||||
const renderRepeaterCard = (title, fields, data) => {
|
||||
if (!data || !Array.isArray(data) || data.length === 0) return null;
|
||||
const formatBoolean = (val: any) =>
|
||||
val ? "Enabled" : val === false ? "Disabled" : "—";
|
||||
|
||||
const renderRepeaterCard = (title: string, fields: any[], items: any[]) => {
|
||||
const filtered = (items || []).filter((item) =>
|
||||
Object.values(item).some((v) => v !== null && v !== "")
|
||||
);
|
||||
if (filtered.length === 0) return null;
|
||||
return (
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">{title}</h2>
|
||||
{data.map((item, i) => (
|
||||
<div key={i} className="mb-4 border-b border-muted pb-2">
|
||||
{fields.map((field) =>
|
||||
field.condition === undefined || field.condition(item) ? (
|
||||
<p key={field.key}>
|
||||
<strong>{field.label}:</strong>{" "}
|
||||
{item[field.key] !== undefined && item[field.key] !== null ? item[field.key].toString() : "—"}
|
||||
</p>
|
||||
) : null
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className="mt-6">
|
||||
<h2 className="text-2xl font-semibold mb-2">{title}</h2>
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
|
||||
{filtered.map((item, i) => (
|
||||
<div key={i} className="border border-border rounded-lg p-4 bg-card">
|
||||
{fields.map(({ key, label, condition }: any) => {
|
||||
const value = item[key];
|
||||
if (condition && !condition(item)) return null;
|
||||
return (
|
||||
<p key={key} className="text-sm">
|
||||
<strong>{label}:</strong>{" "}
|
||||
{typeof value === "boolean"
|
||||
? formatBoolean(value)
|
||||
: value ?? "—"}
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) return <div className="p-6 max-w-7xl mx-auto">Loading…</div>;
|
||||
if (!setting) return <div className="p-6 max-w-7xl mx-auto">Setting not found.</div>;
|
||||
const openSearchInNewTab = (value: string) => {
|
||||
if (!value || typeof window === "undefined") return;
|
||||
const url = new URL("/uv-settings", window.location.origin);
|
||||
url.searchParams.set("query", value);
|
||||
const a = document.createElement("a");
|
||||
a.href = url.toString();
|
||||
a.target = "_blank";
|
||||
a.rel = "noopener noreferrer";
|
||||
a.click();
|
||||
};
|
||||
|
||||
const onClaim = async () => {
|
||||
setClaimBusy(true);
|
||||
setClaimErr(null);
|
||||
setClaimMsg(null);
|
||||
try {
|
||||
const r = await fetch("/api/claims", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
target_collection: "settings_uv",
|
||||
target_id: id,
|
||||
}),
|
||||
cache: "no-store",
|
||||
});
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok) {
|
||||
throw new Error(
|
||||
data?.error || data?.errors?.[0]?.message || "Failed to submit claim"
|
||||
);
|
||||
}
|
||||
setClaimMsg("Claim request submitted for review.");
|
||||
} catch (e: any) {
|
||||
setClaimErr(e?.message || "Failed to submit claim");
|
||||
} finally {
|
||||
setClaimBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const owner = ownerName(setting);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div className="card bg-card p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
|
||||
<p className="text-muted-foreground mb-4">Uploaded by: {setting.uploader || "—"}</p>
|
||||
</div>
|
||||
<a
|
||||
href="/uv-settings"
|
||||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
|
||||
>
|
||||
← Back to UV Settings
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
{/* Title / Meta / Ownership */}
|
||||
<div className="card bg-card p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-1">{setting.setting_title}</h1>
|
||||
|
||||
<div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.photo?.filename_disk && (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/assets/${setting.photo.filename_disk}`}
|
||||
alt="Preview"
|
||||
width={300}
|
||||
height={300}
|
||||
className="rounded-md"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p><strong>Material:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat?.name)}>{setting.mat?.name || "—"}</span></p>
|
||||
<p><strong>Coating:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.mat_coat?.name)}>{setting.mat_coat?.name || "—"}</span></p>
|
||||
<p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
|
||||
<p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
|
||||
<p><strong>Thickness:</strong> {setting.mat_thickness ? `${setting.mat_thickness} mm` : "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 text-sm text-muted-foreground mb-3">
|
||||
<p>
|
||||
<strong>Owner:</strong>{" "}
|
||||
{owner ? <span>{owner}</span> : <span>—</span>}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Uploader:</strong> {setting.uploader || "—"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!owner && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onClaim}
|
||||
disabled={claimBusy}
|
||||
className="px-3 py-1.5 rounded bg-accent text-background text-sm disabled:opacity-60"
|
||||
>
|
||||
{claimBusy ? "Submitting…" : "Claim this setting"}
|
||||
</button>
|
||||
{claimMsg && (
|
||||
<span className="text-green-500 text-sm">{claimMsg}</span>
|
||||
)}
|
||||
{claimErr && (
|
||||
<span className="text-red-500 text-sm">{claimErr}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Laser</h2>
|
||||
<p><strong>Source Model:</strong> <span className="cursor-pointer underline hover:text-accent" onClick={() => openSearchInNewTab(setting.source?.model)}>{setting.source?.model || "—"}</span></p>
|
||||
<p><strong>Lens:</strong> {setting.lens?.field_size || "—"} mm | {setting.lens?.focal_length || "—"} mm</p>
|
||||
</div>
|
||||
<a
|
||||
href="/uv-settings"
|
||||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
|
||||
>
|
||||
← Back to UV Settings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Focus</h2>
|
||||
<p><strong>Focus:</strong> {setting.focus || "—"}</p>
|
||||
</div>
|
||||
{/* Result Photo + Material */}
|
||||
<div className="card bg-card p-4 grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.photo?.filename_disk && (
|
||||
<a
|
||||
href={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
||||
alt={setting.photo?.title || "Preview"}
|
||||
width={250}
|
||||
height={250}
|
||||
className="rounded object-contain max-w-[250px] max-h-[250px]"
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Material</h2>
|
||||
<p>
|
||||
<strong>Material:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.mat?.name)}
|
||||
>
|
||||
{setting.mat?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Coating:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.mat_coat?.name)}
|
||||
>
|
||||
{setting.mat_coat?.name || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Color:</strong> {setting.mat_color?.name || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Thickness:</strong>{" "}
|
||||
{setting.mat_thickness ? `${setting.mat_thickness} mm` : "Not Applicable"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Setup */}
|
||||
<div className="card bg-card p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">Setup</h2>
|
||||
<p>
|
||||
<strong>Focus:</strong> {setting.focus ?? "—"} mm
|
||||
</p>
|
||||
<small>-Values Focus Closer | +Values Focus Further</small>
|
||||
</div>
|
||||
|
||||
{/* Laser (screenshot on left, specs on right; heading above specs) */}
|
||||
<div className="card bg-card p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-start">
|
||||
<div className="flex justify-center">
|
||||
{setting.screen?.filename_disk ? (
|
||||
<a
|
||||
href={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={setting.screen?.title || "Screenshot"}
|
||||
>
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${setting.screen.filename_disk}`}
|
||||
alt={setting.screen?.title || "Screenshot"}
|
||||
width={250}
|
||||
height={250}
|
||||
className="rounded object-contain max-w-[250px] max-h-[250px]"
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">No screenshot</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-2">Laser</h2>
|
||||
<p>
|
||||
<strong>Source Model:</strong>{" "}
|
||||
<span
|
||||
className="cursor-pointer underline hover:text-accent"
|
||||
onClick={() => openSearchInNewTab(setting.source?.model)}
|
||||
>
|
||||
{setting.source?.model || "—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Lens:</strong> {setting.lens?.field_size || "—"} mm |{" "}
|
||||
{setting.lens?.focal_length || "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
{setting.setting_notes && (
|
||||
<div className="prose dark:prose-invert mt-6">
|
||||
<h2>Notes</h2>
|
||||
<Markdown>{setting.setting_notes}</Markdown>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card bg-card p-4 mt-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Notes</h2>
|
||||
<div className="prose dark:prose-invert">
|
||||
<Markdown>{setting.setting_notes || "—"}</Markdown>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-6 border-muted" />
|
||||
|
||||
<hr className="my-6 border-muted" />
|
||||
|
||||
{renderRepeaterCard("Fill Settings", [
|
||||
{/* Repeaters (UV-specific fields kept intact) */}
|
||||
{renderRepeaterCard(
|
||||
"Fill Settings",
|
||||
[
|
||||
{ key: "name", label: "Fill Name" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "angle", label: "Angle (°)" },
|
||||
{ key: "auto", label: "Auto-Rotate" },
|
||||
{ key: "increment", label: "Increment (°)", condition: (e) => e.auto },
|
||||
{ key: "cross", label: "Crosshatch" },
|
||||
{ key: "flood", label: "Flood Fill" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.fill_settings)}
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "angle", label: "Angle (°)" },
|
||||
{ key: "auto", label: "Auto-Rotate" },
|
||||
{ key: "increment", label: "Increment (°)", condition: (e: any) => e.auto },
|
||||
{ key: "cross", label: "Crosshatch" },
|
||||
{ key: "flood", label: "Flood Fill" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.fill_settings
|
||||
)}
|
||||
|
||||
{renderRepeaterCard("Line Settings", [
|
||||
{renderRepeaterCard(
|
||||
"Line Settings",
|
||||
[
|
||||
{ key: "name", label: "Line Name" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "perf", label: "Perforation Mode" },
|
||||
{ key: "cut", label: "Cut Override" },
|
||||
{ key: "skip", label: "Skip Pass" },
|
||||
{ key: "wobble", label: "Wobble Enabled" },
|
||||
{ key: "step", label: "Wobble Step" },
|
||||
{ key: "size", label: "Wobble Size" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.line_settings)}
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "perf", label: "Perforation Mode" },
|
||||
{ key: "cut", label: "Cut Override" },
|
||||
{ key: "skip", label: "Skip Pass" },
|
||||
{ key: "wobble", label: "Wobble Enabled" },
|
||||
{ key: "step", label: "Wobble Step" },
|
||||
{ key: "size", label: "Wobble Size" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.line_settings
|
||||
)}
|
||||
|
||||
{renderRepeaterCard("Raster Settings", [
|
||||
{renderRepeaterCard(
|
||||
"Raster Settings",
|
||||
[
|
||||
{ key: "name", label: "Raster Name" },
|
||||
{ key: "speed", label: "Speed (mm/s)" },
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "dither", label: "Dither" },
|
||||
{ key: "halftone_cell", label: "Halftone Cell" },
|
||||
{ key: "halftone_angle", label: "Halftone Angle" },
|
||||
{ key: "inversion", label: "Invert Colors" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "dot", label: "Dot Size" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "cross", label: "Crosshatch" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
], setting.raster_settings)}
|
||||
{ key: "frequency", label: "Frequency (kHz)" },
|
||||
{ key: "pulse", label: "Pulse Width (ns)" },
|
||||
{ key: "type", label: "Type" },
|
||||
{ key: "dither", label: "Dither" },
|
||||
{ key: "halftone_cell", label: "Halftone Cell" },
|
||||
{ key: "halftone_angle", label: "Halftone Angle" },
|
||||
{ key: "inversion", label: "Invert Colors" },
|
||||
{ key: "interval", label: "Interval (mm)" },
|
||||
{ key: "dot", label: "Dot Size" },
|
||||
{ key: "pass", label: "Passes" },
|
||||
{ key: "cross", label: "Crosshatch" },
|
||||
{ key: "air", label: "Air Assist" },
|
||||
],
|
||||
setting.raster_settings
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue