makearmy/makearmy-app
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

portal(settings): embed authed SettingsSubmit form in Add tab; switcher remembers last data tab

Browse source
This commit is contained in:
makearmy 2025-09-28 01:38:08 -04:00
parent e2d5042e60
commit e6c37d0b14
6 changed files with 1595 additions and 823 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/api/me/route.ts Normal file
View file

@ -0,0 +1,16 @@
// app/api/me/route.ts
import { NextResponse } from "next/server";
export async function GET(req: Request) {
const cookie = req.headers.get("cookie") || "";
const base = process.env.NEXT_PUBLIC_API_BASE_URL!;
const url = `${base}/users/me?fields=id,display_name,first_name,last_name,email`;
const res = await fetch(url, { headers: { cookie }, cache: "no-store" });
const body = await res.json().catch(() => ({}));
return new NextResponse(JSON.stringify(body), {
status: res.status,
headers: { "content-type": "application/json" },
});
}

920
app/components/forms/SettingsSubmit.tsx
View file

@ -6,6 +6,13 @@ import { useRouter, useSearchParams } from "next/navigation";
type Target = "settings_fiber" | "settings_co2gan" | "settings_co2gal" | "settings_uv";
type Opt = { id: string; label: string };
type Me = {
id: string;
display_name?: string;
first_name?: string;
last_name?: string;
email?: string;
};
function useOptions(path: string) {
const [opts, setOpts] = useState<Opt[]>([]);
@ -16,11 +23,17 @@ function useOptions(path: string) {
let alive = true;
setLoading(true);
const url = `/api/options/${path}${path.includes("?") ? "&" : "?"}q=${encodeURIComponent(q)}`;
fetch(url, { cache: "no-store" })
fetch(url, { cache: "no-store", credentials: "include" })
.then((r) => r.json())
.then((j) => { if (alive) setOpts((j?.data as Opt[]) ?? []); })
.finally(() => { if (alive) setLoading(false); });
return () => { alive = false; };
.then((j) => {
if (alive) setOpts((j?.data as Opt[]) ?? []);
})
.finally(() => {
if (alive) setLoading(false);
});
return () => {
alive = false;
};
}, [path, q]);
return { opts, loading, setQ };
@ -60,7 +73,9 @@ function FilterableSelect({
/>
<select className="w-full border rounded px-2 py-1" {...register(name, { required })}>
<option value="">{placeholder}{loading ? " (loading…)" : ""}</option>
{filtered.map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
{filtered.map((o) => (
<option key={o.id} value={o.id}>{o.label}</option>
))}
</select>
</div>
);
@ -88,435 +103,540 @@ export default function SettingsSubmit({ initialTarget }: { initialTarget?: Targ
const [photoPreview, setPhotoPreview] = useState<string>("");
const [screenPreview, setScreenPreview] = useState<string>("");
// Generic lists (alphabetical)
const mats = useOptions("material");
const coats = useOptions("material_coating");
const colors = useOptions("material_color");
const opacs = useOptions("material_opacity");
const soft = useOptions("laser_software"); // only visible for fiber
// UX error for auth/submit
const [submitErr, setSubmitErr] = useState<string | null>(null);
// Target-driven lists
const srcs = useOptions(`laser_source?target=${target}`); // wavelength filter server-side
const lens = useOptions(`lens?target=${target}`); // scan vs focus lens by target
// Current signed-in user (for banner only)
const [me, setMe] = useState<Me | null>(null);
const [meErr, setMeErr] = useState<string | null>(null);
// Repeater select choices from Directus field config
const fillType = useOptions(`repeater-choices?target=${target}&group=fill_settings&field=type`);
const rasterType = useOptions(`repeater-choices?target=${target}&group=raster_settings&field=type`);
const rasterDither = useOptions(`repeater-choices?target=${target}&group=raster_settings&field=dither`);
useEffect(() => {
let alive = true;
fetch("/api/me", { cache: "no-store", credentials: "include" })
.then((r) => (r.ok ? r.json() : Promise.reject(r)))
.then((j) => { if (alive) setMe(j?.data || j || null); })
.catch(() => { if (alive) setMeErr("not-signed-in"); });
return () => { alive = false; };
}, []);
const { register, handleSubmit, control, reset, formState: { isSubmitting } } = useForm<any>({
defaultValues: {
setting_title: "", uploader: "", setting_notes: "",
mat: "", mat_coat: "", mat_color: "", mat_opacity: "",
mat_thickness: "", source: "", lens: "", focus: "",
laser_soft: "", repeat_all: "",
fill_settings: [], line_settings: [], raster_settings: [],
},
});
const meLabel =
me?.display_name ||
[me?.first_name, me?.last_name].filter(Boolean).join(" ").trim() ||
me?.email ||
me?.id ||
"";
const fills = useFieldArray({ control, name: "fill_settings" });
const lines = useFieldArray({ control, name: "line_settings" });
const rasters = useFieldArray({ control, name: "raster_settings" });
// Generic lists (alphabetical)
const mats = useOptions("material");
const coats = useOptions("material_coating");
const colors = useOptions("material_color");
const opacs = useOptions("material_opacity");
const soft = useOptions("laser_software"); // only visible for fiber
const isGantry = target === "settings_co2gan";
const isFiber = target === "settings_fiber";
// const isUV = target === "settings_uv";
// const isCO2Gal = target === "settings_co2gal";
// Target-driven lists
const srcs = useOptions(`laser_source?target=${target}`); // wavelength filter server-side
const lens = useOptions(`lens?target=${target}`); // scan vs focus lens by target
function num(v: any) { return (v === "" || v == null) ? null : Number(v); }
const bool = (v: any) => !!v;
// Repeater select choices from Directus field config
const fillType = useOptions(`repeater-choices?target=${target}&group=fill_settings&field=type`);
const rasterType = useOptions(`repeater-choices?target=${target}&group=raster_settings&field=type`);
const rasterDither = useOptions(`repeater-choices?target=${target}&group=raster_settings&field=dither`);
async function onSubmit(values: any) {
// Browser validation for required photo
if (!photoFile) {
// Let the native required attribute handle focus/UX,
// but this is a safety net in case the browser skips it.
(document.querySelector('input[type="file"][data-role="photo"]') as HTMLInputElement | null)?.focus();
return;
}
const { register, handleSubmit, control, reset, formState: { isSubmitting } } = useForm<any>({
defaultValues: {
setting_title: "",
setting_notes: "",
mat: "", mat_coat: "", mat_color: "", mat_opacity: "",
mat_thickness: "", source: "", lens: "", focus: "",
laser_soft: "", repeat_all: "",
fill_settings: [], line_settings: [], raster_settings: [],
},
});
const payload: any = {
target,
setting_title: values.setting_title,
uploader: values.uploader,
setting_notes: values.setting_notes || "",
mat: values.mat || null,
mat_coat: values.mat_coat || null,
mat_color: values.mat_color || null,
mat_opacity: values.mat_opacity || null,
mat_thickness: num(values.mat_thickness),
source: values.source || null,
lens: values.lens || null,
focus: num(values.focus),
const fills = useFieldArray({ control, name: "fill_settings" });
const lines = useFieldArray({ control, name: "line_settings" });
const rasters = useFieldArray({ control, name: "raster_settings" });
fill_settings: (values.fill_settings || []).map((r: any) => ({
name: r.name || "",
power: num(r.power),
speed: num(r.speed),
interval: num(r.interval),
pass: num(r.pass),
type: r.type || "",
// present on fiber/uv/co2gal
frequency: num(r.frequency),
pulse: num(r.pulse),
angle: num(r.angle),
auto: bool(r.auto),
increment: num(r.increment),
cross: bool(r.cross),
// present on all
flood: bool(r.flood),
air: bool(r.air),
})),
const isGantry = target === "settings_co2gan";
const isFiber = target === "settings_fiber";
line_settings: (values.line_settings || []).map((r: any) => ({
name: r.name || "",
power: num(r.power),
speed: num(r.speed),
perf: bool(r.perf),
cut: r.cut || "",
skip: r.skip || "",
pass: num(r.pass),
air: bool(r.air),
// extra on fiber/uv/co2gal
frequency: num(r.frequency),
pulse: num(r.pulse),
wobble: bool(r.wobble),
step: num(r.step),
size: num(r.size),
})),
function num(v: any) { return (v === "" || v == null) ? null : Number(v); }
const bool = (v: any) => !!v;
raster_settings: (values.raster_settings || []).map((r: any) => ({
name: r.name || "",
power: num(r.power),
speed: num(r.speed),
type: r.type || "",
dither: r.dither || "",
halftone_cell: num(r.halftone_cell),
halftone_angle: num(r.halftone_angle),
inversion: bool(r.inversion),
interval: num(r.interval),
dot: num(r.dot),
pass: num(r.pass),
air: bool(r.air),
// extras on fiber/uv/co2gal
frequency: num(r.frequency),
pulse: num(r.pulse),
cross: bool(r.cross),
})),
};
async function onSubmit(values: any) {
setSubmitErr(null);
if (isFiber) {
payload.laser_soft = values.laser_soft || null;
payload.repeat_all = num(values.repeat_all);
}
// Result photo required on all
if (!photoFile) {
(document.querySelector('input[type="file"][data-role="photo"]') as HTMLInputElement | null)?.focus();
return;
}
// Decide JSON vs multipart (include images when present)
let res: Response;
const payload: any = {
target,
setting_title: values.setting_title,
setting_notes: values.setting_notes || "",
mat: values.mat || null,
mat_coat: values.mat_coat || null,
mat_color: values.mat_color || null,
mat_opacity: values.mat_opacity || null,
mat_thickness: num(values.mat_thickness),
source: values.source || null,
lens: values.lens || null,
focus: num(values.focus),
fill_settings: (values.fill_settings || []).map((r: any) => ({
name: r.name || "",
power: num(r.power),
speed: num(r.speed),
interval: num(r.interval),
pass: num(r.pass),
type: r.type || "",
// present on fiber/uv/co2gal
frequency: num(r.frequency),
pulse: num(r.pulse),
angle: num(r.angle),
auto: bool(r.auto),
increment: num(r.increment),
cross: bool(r.cross),
// present on all
flood: bool(r.flood),
air: bool(r.air),
})),
line_settings: (values.line_settings || []).map((r: any) => ({
name: r.name || "",
power: num(r.power),
speed: num(r.speed),
perf: bool(r.perf),
cut: r.cut || "",
skip: r.skip || "",
pass: num(r.pass),
air: bool(r.air),
// extra on fiber/uv/co2gal
frequency: num(r.frequency),
pulse: num(r.pulse),
wobble: bool(r.wobble),
step: num(r.step),
size: num(r.size),
})),
raster_settings: (values.raster_settings || []).map((r: any) => ({
name: r.name || "",
power: num(r.power),
speed: num(r.speed),
type: r.type || "",
dither: r.dither || "",
halftone_cell: num(r.halftone_cell),
halftone_angle: num(r.halftone_angle),
inversion: bool(r.inversion),
interval: num(r.interval),
dot: num(r.dot),
pass: num(r.pass),
air: bool(r.air),
// extras on fiber/uv/co2gal
frequency: num(r.frequency),
pulse: num(r.pulse),
cross: bool(r.cross),
})),
};
if (isFiber) {
payload.laser_soft = values.laser_soft || null;
payload.repeat_all = num(values.repeat_all);
}
let res: Response;
try {
if (photoFile || screenFile) {
const form = new FormData();
form.set("payload", JSON.stringify(payload));
if (photoFile) form.set("photo", photoFile, photoFile.name || "photo");
if (screenFile) form.set("screen", screenFile, screenFile.name || "screen");
res = await fetch("/api/submit/settings", { method: "POST", body: form });
res = await fetch("/api/submit/settings", {
method: "POST",
body: form,
credentials: "include",
});
} else {
res = await fetch("/api/submit/settings", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
credentials: "include",
});
}
const data = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(data?.error || "Submission failed");
if (!res.ok) {
if (res.status === 401 || res.status === 403) {
throw new Error("You must be signed in to submit settings.");
}
throw new Error(data?.error || "Submission failed");
}
// Clear form + file previews
// Clear form + previews
reset();
setPhotoFile(null);
setScreenFile(null);
setPhotoPreview("");
setScreenPreview("");
// Redirect to success page (don’t show alert)
const id = data?.id ? String(data.id) : "";
router.push(`/submit/settings/success?target=${encodeURIComponent(target)}&id=${encodeURIComponent(id)}`);
router.push(
`/submit/settings/success?target=${encodeURIComponent(target)}&id=${encodeURIComponent(id)}`
);
} catch (e: any) {
setSubmitErr(e?.message || "Submission failed");
}
// File input helpers
function onPick(
file: File | null,
setFile: (f: File | null) => void,
setPreview: (s: string) => void
) {
setFile(file);
if (!file) { setPreview(""); return; }
const reader = new FileReader();
reader.onload = () => setPreview(String(reader.result || ""));
reader.readAsDataURL(file);
}
return (
<div className="max-w-3xl mx-auto space-y-4">
{/* Target + (fiber) software */}
<div className="flex flex-wrap gap-3 items-end">
<div>
<label className="block text-sm mb-1">Target</label>
<select
className="border rounded px-2 py-1"
value={target}
onChange={(e) => setTarget(e.target.value as Target)}
>
<option value="settings_fiber">Fiber</option>
<option value="settings_co2gan">CO₂ Gantry</option>
<option value="settings_co2gal">CO₂ Galvo</option>
<option value="settings_uv">UV</option>
</select>
</div>
{isFiber && (
<div className="flex-1 min-w-[220px]">
<FilterableSelect
label="Software"
name="laser_soft"
register={register}
options={soft.opts}
loading={soft.loading}
onQuery={soft.setQ}
required={true}
/>
</div>
)}
</div>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
{/* Title / Uploader */}
<div className="grid md:grid-cols-2 gap-3">
<div>
<label className="block text-sm mb-1">Title <span className="text-red-600">*</span></label>
<input className="w-full border rounded px-2 py-1" {...register("setting_title", { required: true })} />
</div>
<div>
<label className="block text-sm mb-1">Uploader <span className="text-red-600">*</span></label>
<input className="w-full border rounded px-2 py-1" {...register("uploader", { required: true })} />
</div>
</div>
{/* Images */}
<div className="grid md:grid-cols-2 gap-4">
<div>
<label className="block text-sm mb-1">Result Photo <span className="text-red-600">*</span></label>
<input
type="file"
accept="image/*"
data-role="photo"
required
onChange={(e) => onPick(e.target.files?.[0] ?? null, setPhotoFile, setPhotoPreview)}
/>
<p className="text-xs text-muted-foreground mt-1">
{photoFile ? <>Selected: <span className="font-mono">{photoFile.name}</span></> : "Max 25 MB. JPG/PNG/WebP recommended."}
</p>
{photoPreview ? (
<img src={photoPreview} alt="Result preview" className="mt-2 rounded border" />
) : null}
</div>
<div>
<label className="block text-sm mb-1">Settings Screenshot (optional)</label>
<input
type="file"
accept="image/*"
onChange={(e) => onPick(e.target.files?.[0] ?? null, setScreenFile, setScreenPreview)}
/>
<p className="text-xs text-muted-foreground mt-1">
{screenFile ? <>Selected: <span className="font-mono">{screenFile.name}</span></> : "Max 25 MB. JPG/PNG/WebP recommended."}
</p>
{screenPreview ? (
<img src={screenPreview} alt="Settings preview" className="mt-2 rounded border" />
) : null}
</div>
</div>
{/* Notes */}
<div>
<label className="block text-sm mb-1">Notes</label>
<textarea rows={4} className="w-full border rounded px-2 py-1" {...register("setting_notes")} />
</div>
{/* Material / Source / Lens */}
<div className="grid md:grid-cols-2 gap-3">
<FilterableSelect label="Material" name="mat" register={register} options={mats.opts} loading={mats.loading} onQuery={mats.setQ} required />
<FilterableSelect label="Coating" name="mat_coat" register={register} options={coats.opts} loading={coats.loading} onQuery={coats.setQ} required />
<FilterableSelect label="Color" name="mat_color" register={register} options={colors.opts} loading={colors.loading} onQuery={colors.setQ} required />
<FilterableSelect label="Opacity" name="mat_opacity" register={register} options={opacs.opts} loading={opacs.loading} onQuery={opacs.setQ} required />
<FilterableSelect label="Laser Source" name="source" register={register} options={srcs.opts} loading={srcs.loading} onQuery={srcs.setQ} required />
<FilterableSelect label="Lens" name="lens" register={register} options={lens.opts} loading={lens.loading} onQuery={lens.setQ} required />
</div>
{/* Focus, thickness, repeat_all */}
<div className="grid md:grid-cols-3 gap-3">
<div>
<label className="block text-sm mb-1">Material Thickness (mm)</label>
<input type="number" step="0.01" className="w-full border rounded px-2 py-1" {...register("mat_thickness")} />
</div>
<div>
<label className="block text-sm mb-1">Focus (mm) <span className="text-red-600">*</span></label>
<input type="number" min={-10} max={10} step="1" className="w-full border rounded px-2 py-1" {...register("focus", { required: true })} />
<p className="text-xs text-muted-foreground mt-1">
0 = in focus. Negative = focus closer. Positive = focus further.
</p>
</div>
{isFiber && (
<div>
<label className="block text-sm mb-1">Repeat All <span className="text-red-600">*</span></label>
<input type="number" step="1" className="w-full border rounded px-2 py-1" {...register("repeat_all", { required: true })} />
</div>
)}
</div>
{/* FILL */}
<fieldset className="border rounded p-3 space-y-2">
<div className="flex items-center justify-between">
<legend className="font-semibold">Fill Settings</legend>
<button type="button" className="px-2 py-1 border rounded" onClick={() => fills.append({})}>+ Add</button>
</div>
{fills.fields.map((f, i) => (
<div key={f.id} className="grid md:grid-cols-4 gap-2">
<input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`fill_settings.${i}.name`)} />
<FilterableSelect
label="Type"
name={`fill_settings.${i}.type`}
register={register}
options={fillType.opts}
loading={fillType.loading}
onQuery={fillType.setQ}
placeholder="Select type"
/>
{!isGantry && (
<>
<input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.frequency`)} />
<input placeholder="Pulse (ns)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.pulse`)} />
</>
)}
<input placeholder="Power (%)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.power`)} />
<input placeholder="Speed (mm/s)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.speed`)} />
<input placeholder="Interval (mm)" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.interval`)} />
<input placeholder="Pass" type="number" step="1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.pass`)} />
{!isGantry && (
<>
<input placeholder="Angle (°)" type="number" step="1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.angle`)} />
<input placeholder="Increment" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.increment`)} />
<div className="flex items-center gap-3">
<BoolBox label="Auto" name={`fill_settings.${i}.auto`} register={register} />
<BoolBox label="Cross" name={`fill_settings.${i}.cross`} register={register} />
</div>
</>
)}
<div className="flex items-center gap-3">
<BoolBox label="Flood" name={`fill_settings.${i}.flood`} register={register} />
<BoolBox label="Air" name={`fill_settings.${i}.air`} register={register} />
</div>
<button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => fills.remove(i)}>Remove</button>
</div>
))}
</fieldset>
{/* LINE */}
<fieldset className="border rounded p-3 space-y-2">
<div className="flex items-center justify-between">
<legend className="font-semibold">Line Settings</legend>
<button type="button" className="px-2 py-1 border rounded" onClick={() => lines.append({})}>+ Add</button>
</div>
{lines.fields.map((f, i) => (
<div key={f.id} className="grid md:grid-cols-4 gap-2">
<input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`line_settings.${i}.name`)} />
{!isGantry && (
<>
<input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.frequency`)} />
<input placeholder="Pulse (ns)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.pulse`)} />
</>
)}
<input placeholder="Power (%)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.power`)} />
<input placeholder="Speed (mm/s)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.speed`)} />
<input placeholder="Perf" className="border rounded px-2 py-1" {...register(`line_settings.${i}.perf`)} />
<input placeholder="Cut" className="border rounded px-2 py-1" {...register(`line_settings.${i}.cut`)} />
<input placeholder="Skip" className="border rounded px-2 py-1" {...register(`line_settings.${i}.skip`)} />
<input placeholder="Pass" type="number" step="1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.pass`)} />
{!isGantry && (
<>
<input placeholder="Step" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`line_settings.${i}.step`)} />
<input placeholder="Size" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`line_settings.${i}.size`)} />
<BoolBox label="Wobble" name={`line_settings.${i}.wobble`} register={register} />
</>
)}
<BoolBox label="Air" name={`line_settings.${i}.air`} register={register} />
<button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => lines.remove(i)}>Remove</button>
</div>
))}
</fieldset>
{/* RASTER */}
<fieldset className="border rounded p-3 space-y-2">
<div className="flex items-center justify-between">
<legend className="font-semibold">Raster Settings</legend>
<button type="button" className="px-2 py-1 border rounded" onClick={() => rasters.append({})}>+ Add</button>
</div>
{rasters.fields.map((f, i) => (
<div key={f.id} className="grid md:grid-cols-4 gap-2">
<input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`raster_settings.${i}.name`)} />
{!isGantry && (
<>
<input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.frequency`)} />
<input placeholder="Pulse (ns)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.pulse`)} />
</>
)}
<FilterableSelect
label="Type"
name={`raster_settings.${i}.type`}
register={register}
options={rasterType.opts}
loading={rasterType.loading}
onQuery={rasterType.setQ}
placeholder="Select type"
/>
<FilterableSelect
label="Dither"
name={`raster_settings.${i}.dither`}
register={register}
options={rasterDither.opts}
loading={rasterDither.loading}
onQuery={rasterDither.setQ}
placeholder="Select dither"
/>
<input placeholder="Power (%)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.power`)} />
<input placeholder="Speed (mm/s)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.speed`)} />
<input placeholder="Halftone Cell" type="number" step="1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.halftone_cell`)} />
<input placeholder="Halftone Angle" type="number" step="1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.halftone_angle`)} />
<input placeholder="Interval (mm)" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.interval`)} />
<input placeholder="Dot" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.dot`)} />
<input placeholder="Pass" type="number" step="1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.pass`)} />
{!isGantry && <BoolBox label="Cross" name={`raster_settings.${i}.cross`} register={register} />}
<div className="flex items-center gap-3">
<BoolBox label="Inversion" name={`raster_settings.${i}.inversion`} register={register} />
<BoolBox label="Air" name={`raster_settings.${i}.air`} register={register} />
</div>
<button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => rasters.remove(i)}>Remove</button>
</div>
))}
</fieldset>
<button disabled={isSubmitting} className="px-3 py-2 border rounded bg-accent text-background hover:opacity-90 disabled:opacity-50">
{isSubmitting ? "Submitting…" : "Submit Settings"}
</button>
</form>
</div>
);
}
// File input helpers
function onPick(
file: File | null,
setFile: (f: File | null) => void,
setPreview: (s: string) => void
) {
setFile(file);
if (!file) {
setPreview("");
return;
}
const reader = new FileReader();
reader.onload = () => setPreview(String(reader.result || ""));
reader.readAsDataURL(file);
}
return (
<div className="max-w-3xl mx-auto space-y-4">
{/* Target + (fiber) software */}
<div className="flex flex-wrap gap-3 items-end">
<div>
<label className="block text-sm mb-1">Target</label>
<select
className="border rounded px-2 py-1"
value={target}
onChange={(e) => setTarget(e.target.value as Target)}
>
<option value="settings_fiber">Fiber</option>
<option value="settings_co2gan">CO₂ Gantry</option>
<option value="settings_co2gal">CO₂ Galvo</option>
<option value="settings_uv">UV</option>
</select>
</div>
{isFiber && (
<div className="flex-1 min-w-[220px]">
<FilterableSelect
label="Software"
name="laser_soft"
register={register}
options={soft.opts}
loading={soft.loading}
onQuery={soft.setQ}
required={true}
/>
</div>
)}
</div>
{/* Submitting-as banner */}
{me ? (
<div className="text-sm text-muted-foreground">
Submitting as <span className="font-medium">{meLabel}</span>.
</div>
) : meErr ? (
<div className="border border-yellow-600 bg-yellow-50 text-yellow-800 rounded p-2 text-sm">
You’re not signed in. Submissions will fail until you sign in.
</div>
) : null}
{submitErr ? (
<div className="border border-red-500 text-red-600 bg-red-50 rounded p-2 text-sm">
{submitErr}
</div>
) : null}
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
{/* Title */}
<div className="grid md:grid-cols-2 gap-3">
<div className="md:col-span-2">
<label className="block text-sm mb-1">
Title <span className="text-red-600">*</span>
</label>
<input
className="w-full border rounded px-2 py-1"
{...register("setting_title", { required: true })}
/>
</div>
</div>
{/* Images */}
<div className="grid md:grid-cols-2 gap-4">
<div>
<label className="block text-sm mb-1">
Result Photo <span className="text-red-600">*</span>
</label>
<input
type="file"
accept="image/*"
data-role="photo"
required
onChange={(e) =>
onPick(e.target.files?.[0] ?? null, setPhotoFile, setPhotoPreview)
}
/>
<p className="text-xs text-muted-foreground mt-1">
{photoFile ? (
<>
Selected: <span className="font-mono">{photoFile.name}</span>
</>
) : (
"Max 25 MB. JPG/PNG/WebP recommended."
)}
</p>
{photoPreview ? (
<img src={photoPreview} alt="Result preview" className="mt-2 rounded border" />
) : null}
</div>
<div>
<label className="block text-sm mb-1">Settings Screenshot (optional)</label>
<input
type="file"
accept="image/*"
onChange={(e) =>
onPick(e.target.files?.[0] ?? null, setScreenFile, setScreenPreview)
}
/>
<p className="text-xs text-muted-foreground mt-1">
{screenFile ? (
<>
Selected: <span className="font-mono">{screenFile.name}</span>
</>
) : (
"Max 25 MB. JPG/PNG/WebP recommended."
)}
</p>
{screenPreview ? (
<img src={screenPreview} alt="Settings preview" className="mt-2 rounded border" />
) : null}
</div>
</div>
{/* Notes */}
<div>
<label className="block text-sm mb-1">Notes</label>
<textarea rows={4} className="w-full border rounded px-2 py-1" {...register("setting_notes")} />
</div>
{/* Material / Source / Lens */}
<div className="grid md:grid-cols-2 gap-3">
<FilterableSelect label="Material" name="mat" register={register} options={mats.opts} loading={mats.loading} onQuery={mats.setQ} required />
<FilterableSelect label="Coating" name="mat_coat" register={register} options={coats.opts} loading={coats.loading} onQuery={coats.setQ} required />
<FilterableSelect label="Color" name="mat_color" register={register} options={colors.opts} loading={colors.loading} onQuery={colors.setQ} required />
<FilterableSelect label="Opacity" name="mat_opacity" register={register} options={opacs.opts} loading={opacs.loading} onQuery={opacs.setQ} required />
<FilterableSelect label="Laser Source" name="source" register={register} options={srcs.opts} loading={srcs.loading} onQuery={srcs.setQ} required />
<FilterableSelect label="Lens" name="lens" register={register} options={lens.opts} loading={lens.loading} onQuery={lens.setQ} required />
</div>
{/* Focus, thickness, repeat_all */}
<div className="grid md:grid-cols-3 gap-3">
<div>
<label className="block text-sm mb-1">Material Thickness (mm)</label>
<input type="number" step="0.01" className="w-full border rounded px-2 py-1" {...register("mat_thickness")} />
</div>
<div>
<label className="block text-sm mb-1">
Focus (mm) <span className="text-red-600">*</span>
</label>
<input
type="number"
min={-10}
max={10}
step="1"
className="w-full border rounded px-2 py-1"
{...register("focus", { required: true })}
/>
<p className="text-xs text-muted-foreground mt-1">
0 = in focus. Negative = focus closer. Positive = focus further.
</p>
</div>
{isFiber && (
<div>
<label className="block text-sm mb-1">
Repeat All <span className="text-red-600">*</span>
</label>
<input
type="number"
step="1"
className="w-full border rounded px-2 py-1"
{...register("repeat_all", { required: true })}
/>
</div>
)}
</div>
{/* FILL */}
<fieldset className="border rounded p-3 space-y-2">
<div className="flex items-center justify-between">
<legend className="font-semibold">Fill Settings</legend>
<button type="button" className="px-2 py-1 border rounded" onClick={() => fills.append({})}>
+ Add
</button>
</div>
{fills.fields.map((f, i) => (
<div key={f.id} className="grid md:grid-cols-4 gap-2">
<input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`fill_settings.${i}.name`)} />
<FilterableSelect
label="Type"
name={`fill_settings.${i}.type`}
register={register}
options={fillType.opts}
loading={fillType.loading}
onQuery={fillType.setQ}
placeholder="Select type"
/>
{!isGantry && (
<>
<input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.frequency`)} />
<input placeholder="Pulse (ns)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.pulse`)} />
</>
)}
<input placeholder="Power (%)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.power`)} />
<input placeholder="Speed (mm/s)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.speed`)} />
<input placeholder="Interval (mm)" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.interval`)} />
<input placeholder="Pass" type="number" step="1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.pass`)} />
{!isGantry && (
<>
<input placeholder="Angle (°)" type="number" step="1" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.angle`)} />
<input placeholder="Increment" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`fill_settings.${i}.increment`)} />
<div className="flex items-center gap-3">
<BoolBox label="Auto" name={`fill_settings.${i}.auto`} register={register} />
<BoolBox label="Cross" name={`fill_settings.${i}.cross`} register={register} />
</div>
</>
)}
<div className="flex items-center gap-3">
<BoolBox label="Flood" name={`fill_settings.${i}.flood`} register={register} />
<BoolBox label="Air" name={`fill_settings.${i}.air`} register={register} />
</div>
<button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => fills.remove(i)}>
Remove
</button>
</div>
))}
</fieldset>
{/* LINE */}
<fieldset className="border rounded p-3 space-y-2">
<div className="flex items-center justify-between">
<legend className="font-semibold">Line Settings</legend>
<button type="button" className="px-2 py-1 border rounded" onClick={() => lines.append({})}>
+ Add
</button>
</div>
{lines.fields.map((f, i) => (
<div key={f.id} className="grid md:grid-cols-4 gap-2">
<input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`line_settings.${i}.name`)} />
{!isGantry && (
<>
<input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.frequency`)} />
<input placeholder="Pulse (ns)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.pulse`)} />
</>
)}
<input placeholder="Power (%)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.power`)} />
<input placeholder="Speed (mm/s)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.speed`)} />
<input placeholder="Perf" className="border rounded px-2 py-1" {...register(`line_settings.${i}.perf`)} />
<input placeholder="Cut" className="border rounded px-2 py-1" {...register(`line_settings.${i}.cut`)} />
<input placeholder="Skip" className="border rounded px-2 py-1" {...register(`line_settings.${i}.skip`)} />
<input placeholder="Pass" type="number" step="1" className="border rounded px-2 py-1" {...register(`line_settings.${i}.pass`)} />
{!isGantry && (
<>
<input placeholder="Step" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`line_settings.${i}.step`)} />
<input placeholder="Size" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`line_settings.${i}.size`)} />
<BoolBox label="Wobble" name={`line_settings.${i}.wobble`} register={register} />
</>
)}
<BoolBox label="Air" name={`line_settings.${i}.air`} register={register} />
<button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => lines.remove(i)}>
Remove
</button>
</div>
))}
</fieldset>
{/* RASTER */}
<fieldset className="border rounded p-3 space-y-2">
<div className="flex items-center justify-between">
<legend className="font-semibold">Raster Settings</legend>
<button type="button" className="px-2 py-1 border rounded" onClick={() => rasters.append({})}>
+ Add
</button>
</div>
{rasters.fields.map((f, i) => (
<div key={f.id} className="grid md:grid-cols-4 gap-2">
<input placeholder="Name" className="border rounded px-2 py-1 md:col-span-2" {...register(`raster_settings.${i}.name`)} />
{!isGantry && (
<>
<input placeholder="Frequency (kHz)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.frequency`)} />
<input placeholder="Pulse (ns)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.pulse`)} />
</>
)}
<FilterableSelect
label="Type"
name={`raster_settings.${i}.type`}
register={register}
options={rasterType.opts}
loading={rasterType.loading}
onQuery={rasterType.setQ}
placeholder="Select type"
/>
<FilterableSelect
label="Dither"
name={`raster_settings.${i}.dither`}
register={register}
options={rasterDither.opts}
loading={rasterDither.loading}
onQuery={rasterDither.setQ}
placeholder="Select dither"
/>
<input placeholder="Power (%)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.power`)} />
<input placeholder="Speed (mm/s)" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.speed`)} />
<input placeholder="Halftone Cell" type="number" step="1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.halftone_cell`)} />
<input placeholder="Halftone Angle" type="number" step="1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.halftone_angle`)} />
<input placeholder="Interval (mm)" type="number" step="0.001" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.interval`)} />
<input placeholder="Dot" type="number" step="0.1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.dot`)} />
<input placeholder="Pass" type="number" step="1" className="border rounded px-2 py-1" {...register(`raster_settings.${i}.pass`)} />
{!isGantry && <BoolBox label="Cross" name={`raster_settings.${i}.cross`} register={register} />}
<div className="flex items-center gap-3">
<BoolBox label="Inversion" name={`raster_settings.${i}.inversion`} register={register} />
<BoolBox label="Air" name={`raster_settings.${i}.air`} register={register} />
</div>
<button type="button" className="px-2 py-1 border rounded md:col-span-4" onClick={() => rasters.remove(i)}>
Remove
</button>
</div>
))}
</fieldset>
<button
disabled={isSubmitting}
className="px-3 py-2 border rounded bg-accent text-background hover:opacity-90 disabled:opacity-50"
>
{isSubmitting ? "Submitting…" : "Submit Settings"}
</button>
</form>
</div>
);
}

522
app/settings/co2-galvo/[id]/co2-galvo.tsx
View file

@ -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>
);
}

450
app/settings/co2-gantry/[id]/co2-gantry.tsx
View file

@ -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>
);
}

450
app/settings/uv/[id]/uv.tsx
View file

@ -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>
);
}

60
components/portal/SettingsSwitcher.tsx
View file

@ -5,21 +5,42 @@ import { useRouter, useSearchParams } from "next/navigation";
import dynamic from "next/dynamic";
import { cn } from "@/lib/utils";
// Use existing canonical pages; dynamic imports in a client component are OK
// Existing canonical pages
const FiberPanel = dynamic(() => import("@/app/settings/fiber/page"), { ssr: false });
const UVPanel = dynamic(() => import("@/app/settings/uv/page"), { ssr: false });
const CO2GalvoPanel = dynamic(() => import("@/app/settings/co2-galvo/page"), { ssr: false });
const CO2GantryPanel = dynamic(() => import("@/app/settings/co2-gantry/page"), { ssr: false });
const TABS = [
// NEW: embed the submission form in the "Add" tab
const SettingsSubmit = dynamic(
() => import("@/app/components/forms/SettingsSubmit"),
{ ssr: false }
);
type DataTab = "fiber" | "uv" | "co2-gantry" | "co2-galvo";
type Tab = DataTab | "add";
const TABS: { key: Tab; label: string }[] = [
{ key: "fiber", label: "Fiber" },
{ key: "uv", label: "UV" },
{ key: "co2-gantry", label: "CO₂ Gantry" },
{ key: "co2-galvo", label: "CO₂ Galvo" },
{ key: "add", label: "Add Setting" }, // new
{ key: "add", label: "Add Setting" },
];
function Panel({ tab }: { tab: string }) {
const isDataTab = (k: string): k is DataTab =>
k === "fiber" || k === "uv" || k === "co2-gantry" || k === "co2-galvo";
const tabToTarget: Record<DataTab,
"settings_fiber" | "settings_uv" | "settings_co2gan" | "settings_co2gal"
> = {
fiber: "settings_fiber",
uv: "settings_uv",
"co2-gantry": "settings_co2gan",
"co2-galvo": "settings_co2gal",
};
function Panel({ tab, lastDataTab }: { tab: Tab; lastDataTab: DataTab }) {
switch (tab) {
case "fiber": return <FiberPanel />;
case "uv": return <UVPanel />;
@ -29,14 +50,7 @@ function Panel({ tab }: { tab: string }) {
return (
<div className="rounded-md border p-4 space-y-3">
<h3 className="font-semibold">Add Setting</h3>
<div className="text-sm opacity-70">
Submission form will be embedded here. We’ll retrofit your existing public submission to require auth and record owner.
</div>
<ul className="text-sm list-disc pl-5 opacity-70">
<li>Route: <code>POST /api/my/settings/:type</code> (fiber|uv|co2-gantry|co2-galvo)</li>
<li>Server adds <code>owner</code> using <code>/users/me</code> via bearer</li>
<li>On success: toast + refresh current view tab</li>
</ul>
<SettingsSubmit initialTarget={tabToTarget[lastDataTab]} />
</div>
);
default:
@ -47,11 +61,27 @@ function Panel({ tab }: { tab: string }) {
export default function SettingsSwitcher() {
const router = useRouter();
const sp = useSearchParams();
const active = sp.get("t") || "fiber";
function setTab(nextKey: string) {
const activeRaw = (sp.get("t") || "fiber").toLowerCase();
const active: Tab = (TABS.some(t => t.key === activeRaw) ? activeRaw : "fiber") as Tab;
// last data tab is taken from ?last=… (or fallback to current active if it’s a data tab)
const lastParam = (sp.get("last") || (isDataTab(active) ? active : "fiber")).toLowerCase();
const lastDataTab: DataTab = isDataTab(lastParam) ? lastParam : "fiber";
function setTab(nextKey: Tab) {
const q = new URLSearchParams(sp.toString());
q.set("t", nextKey);
// keep track of last data tab so the Add tab knows which target to preselect
if (nextKey === "add") {
q.set("last", isDataTab(active) ? active : lastDataTab);
} else {
q.set("last", nextKey);
}
// optional: clear detail id if switching away from a data tab you don’t want to show
// (leaving as-is preserves your existing behavior)
router.replace(`/portal/laser-settings?${q.toString()}`, { scroll: false });
}
@ -73,7 +103,7 @@ export default function SettingsSwitcher() {
</div>
<div className="rounded-md border p-4">
<Panel tab={active} />
<Panel tab={active} lastDataTab={lastDataTab} />
</div>
</div>
);