372 lines
14 KiB
TypeScript
372 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
type Opt = { id: string | number; label: string };
|
|
|
|
const API = (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
|
|
|
|
// helper: render multipliers like "06x", "8x", "1.5x"; avoid double "x"
|
|
function formatMultiplier(raw: any) {
|
|
const s = String(raw ?? "").trim();
|
|
if (!s) return "—";
|
|
if (/x$/i.test(s)) return s; // already has x
|
|
// pure number?
|
|
if (/^\d+(\.\d+)?$/.test(s)) {
|
|
if (/^\d$/.test(s)) return `0${s}x`;
|
|
return `${s}x`;
|
|
}
|
|
// otherwise, extract first number if present
|
|
const m = s.match(/(\d+(?:\.\d+)?)/);
|
|
if (m) {
|
|
const n = m[1];
|
|
if (/^\d$/.test(n)) return `0${n}x`;
|
|
return `${n}x`;
|
|
}
|
|
return `${s}x`;
|
|
}
|
|
|
|
// tiny helper to ensure we always iterate an array
|
|
function toArray<T = any>(v: any): T[] {
|
|
return Array.isArray(v) ? (v as T[]) : [];
|
|
}
|
|
|
|
function useOptions(
|
|
kind: "laser_software" | "laser_source" | "lens" | "scan_lens_apt" | "scan_lens_exp",
|
|
targetKey?: string
|
|
) {
|
|
const [opts, setOpts] = useState<Opt[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
setLoading(true);
|
|
|
|
(async () => {
|
|
try {
|
|
let url = "";
|
|
// default normalize
|
|
let normalize = (rows: any[]): Opt[] =>
|
|
rows.map((r) => ({
|
|
id: String(r.id ?? r.submission_id ?? ""),
|
|
label: String(r.name ?? r.label ?? r.title ?? r.model ?? r.id ?? ""),
|
|
}));
|
|
|
|
if (kind === "laser_software") {
|
|
url = `${API}/items/laser_software?fields=id,name&limit=1000&sort=name`;
|
|
} else if (kind === "laser_source") {
|
|
// fetch all sources; client filter by nm band from targetKey
|
|
url = `${API}/items/laser_source?fields=submission_id,make,model,nm&limit=2000&sort=make,model`;
|
|
const parseNum = (v: any) => {
|
|
if (v == null) return null;
|
|
const m = String(v).match(/(\d+(\.\d+)?)/);
|
|
return m ? Number(m[1]) : null;
|
|
};
|
|
const nmRange = (t?: string | null): [number, number] | null => {
|
|
if (!t) return null;
|
|
const s = t.toLowerCase();
|
|
if (s.includes("fiber")) return [1000, 9000];
|
|
if (s.includes("uv")) return [300, 400];
|
|
if (s.includes("gantry") || s.includes("co2 gantry") || s.includes("co₂ gantry"))
|
|
return [10000, 11000];
|
|
if (s.includes("galvo") || s.includes("co2 galvo") || s.includes("co₂ galvo"))
|
|
return [10000, 11000];
|
|
return null;
|
|
};
|
|
const range = nmRange(targetKey);
|
|
normalize = (rows) => {
|
|
const filtered = range
|
|
? rows.filter((r: any) => {
|
|
const nm = parseNum(r.nm);
|
|
return nm != null && nm >= range[0] && nm <= range[1];
|
|
})
|
|
: rows;
|
|
return filtered.map((r: any) => ({
|
|
id: String(r.submission_id ?? ""),
|
|
label: [r.make, r.model].filter(Boolean).join(" ") || String(r.submission_id ?? ""),
|
|
}));
|
|
};
|
|
} else if (kind === "lens") {
|
|
if (targetKey && targetKey.toLowerCase().includes("gantry")) {
|
|
url = `${API}/items/laser_focus_lens?fields=id,name&limit=1000&sort=name`;
|
|
} else {
|
|
url = `${API}/items/laser_scan_lens?fields=id,field_size,focal_length&limit=1000`;
|
|
normalize = (rows) => {
|
|
const toNum = (v: any) => {
|
|
const m = String(v ?? "").match(/-?\d+(\.\d+)?/);
|
|
return m ? parseFloat(m[0]) : Number.POSITIVE_INFINITY;
|
|
};
|
|
return [...rows]
|
|
.sort((a, b) => toNum(a.focal_length) - toNum(b.focal_length))
|
|
.map((r) => ({
|
|
id: String(r.id ?? ""),
|
|
label:
|
|
[r.field_size && `${r.field_size} mm`, r.focal_length && `${r.focal_length} mm`]
|
|
.filter(Boolean)
|
|
.join(" — ") || String(r.id ?? ""),
|
|
}));
|
|
};
|
|
}
|
|
} else if (kind === "scan_lens_apt") {
|
|
url = `${API}/items/laser_scan_lens_apt?fields=id,name&limit=1000&sort=name`;
|
|
} else if (kind === "scan_lens_exp") {
|
|
url = `${API}/items/laser_scan_lens_exp?fields=id,name&limit=1000&sort=name`;
|
|
normalize = (rows) =>
|
|
rows.map((r: any) => ({
|
|
id: String(r.id ?? ""),
|
|
label: formatMultiplier(r.name ?? r.label ?? r.id ?? ""),
|
|
}));
|
|
}
|
|
|
|
const res = await fetch(url, { credentials: "include", cache: "no-store" });
|
|
if (!res.ok) throw new Error(`HTTP ${res.status} for ${kind}`);
|
|
const json = await res.json().catch(() => ({} as any));
|
|
const rows = toArray(json?.data);
|
|
|
|
let mapped: Opt[] = [];
|
|
try {
|
|
mapped = toArray(normalize(rows));
|
|
} catch {
|
|
// Safe fallback: minimal id/label mapping to prevent render crashes
|
|
mapped = rows.map((r: any) => ({
|
|
id: String(r?.id ?? r?.submission_id ?? ""),
|
|
label: String(r?.name ?? r?.label ?? r?.title ?? r?.model ?? r?.id ?? ""),
|
|
}));
|
|
}
|
|
|
|
if (alive) setOpts(mapped);
|
|
} catch (_err) {
|
|
if (alive) setOpts([]); // swallow errors → empty list; form still renders
|
|
} finally {
|
|
if (alive) setLoading(false);
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, [kind, targetKey]);
|
|
|
|
return { opts, loading };
|
|
}
|
|
|
|
export default function RigBuilderClient({ rigTypes }: { rigTypes: Opt[] }) {
|
|
const router = useRouter();
|
|
const [name, setName] = useState("");
|
|
const [notes, setNotes] = useState("");
|
|
const [rigType, setRigType] = useState<string>("");
|
|
const [laserSource, setLaserSource] = useState<string>("");
|
|
const [scanLens, setScanLens] = useState<string>("");
|
|
const [scanLensApt, setScanLensApt] = useState<string>(""); // galvo-only
|
|
const [scanLensExp, setScanLensExp] = useState<string>(""); // galvo-only
|
|
const [focusLens, setFocusLens] = useState<string>("");
|
|
const [software, setSoftware] = useState<string>("");
|
|
|
|
// rigTypes come from the SERVER as props.
|
|
const targetKey = useMemo(() => {
|
|
const rt = rigTypes.find((o) => String(o.id) === String(rigType))?.label || "";
|
|
return rt;
|
|
}, [rigTypes, rigType]);
|
|
|
|
const sources = useOptions("laser_source", targetKey);
|
|
const lens = useOptions("lens", targetKey);
|
|
const lensApt = useOptions("scan_lens_apt");
|
|
const lensExp = useOptions("scan_lens_exp");
|
|
const softwares = useOptions("laser_software");
|
|
|
|
const isGantry = (targetKey || "").toLowerCase().includes("gantry");
|
|
|
|
async function onSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
const body: any = {
|
|
name,
|
|
rig_type: rigType ? Number(rigType) : null,
|
|
laser_source: laserSource ? Number(laserSource) : null,
|
|
notes: notes || "",
|
|
laser_software: software ? Number(software) : null,
|
|
};
|
|
if (isGantry) {
|
|
body.laser_focus_lens = focusLens ? Number(focusLens) : null;
|
|
body.laser_scan_lens = null;
|
|
body.laser_scan_lens_apt = null;
|
|
body.laser_scan_lens_exp = null;
|
|
} else {
|
|
body.laser_scan_lens = scanLens ? Number(scanLens) : null;
|
|
body.laser_focus_lens = null;
|
|
body.laser_scan_lens_apt = scanLensApt ? Number(scanLensApt) : null;
|
|
body.laser_scan_lens_exp = scanLensExp ? Number(scanLensExp) : null;
|
|
}
|
|
|
|
const res = await fetch("/api/rigs", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
credentials: "include",
|
|
body: JSON.stringify(body),
|
|
});
|
|
const j = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
alert(j?.error || "Failed to create rig");
|
|
return;
|
|
}
|
|
router.replace("/portal/rigs?t=my", { scroll: false });
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={onSubmit} className="space-y-4 max-w-xl">
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Rig Name <span className="text-red-600">*</span>
|
|
</label>
|
|
<input
|
|
className="w-full border rounded px-2 py-1"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Rig Type <span className="text-red-600">*</span>
|
|
</label>
|
|
<select
|
|
className="w-full border rounded px-2 py-1"
|
|
value={rigType}
|
|
onChange={(e) => setRigType(e.target.value)}
|
|
required
|
|
>
|
|
<option value="">—</option>
|
|
{rigTypes.map((o) => (
|
|
<option key={o.id} value={o.id}>
|
|
{o.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">
|
|
Laser Source <span className="text-red-600">*</span>
|
|
</label>
|
|
<select
|
|
className="w-full border rounded px-2 py-1"
|
|
value={laserSource}
|
|
onChange={(e) => setLaserSource(e.target.value)}
|
|
required
|
|
>
|
|
<option value="">{sources.loading ? "Loading…" : "—"}</option>
|
|
{sources.opts.map((o) => (
|
|
<option key={o.id} value={o.id}>
|
|
{o.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lens (focus for gantry, scan + apt/exp for others) */}
|
|
{isGantry ? (
|
|
<div>
|
|
<label className="block text-sm mb-1">Focus Lens</label>
|
|
<select
|
|
className="w-full border rounded px-2 py-1"
|
|
value={focusLens}
|
|
onChange={(e) => setFocusLens(e.target.value)}
|
|
>
|
|
<option value="">{lens.loading ? "Loading…" : "—"}</option>
|
|
{lens.opts.map((o) => (
|
|
<option key={o.id} value={o.id}>
|
|
{o.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div>
|
|
<label className="block text-sm mb-1">Scan Lens</label>
|
|
<select
|
|
className="w-full border rounded px-2 py-1"
|
|
value={scanLens}
|
|
onChange={(e) => setScanLens(e.target.value)}
|
|
>
|
|
<option value="">{lens.loading ? "Loading…" : "—"}</option>
|
|
{lens.opts.map((o) => (
|
|
<option key={o.id} value={o.id}>
|
|
{o.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm mb-1">Scan Lens Apt</label>
|
|
<select
|
|
className="w-full border rounded px-2 py-1"
|
|
value={scanLensApt}
|
|
onChange={(e) => setScanLensApt(e.target.value)}
|
|
>
|
|
<option value="">{lensApt.loading ? "Loading…" : "—"}</option>
|
|
{lensApt.opts.map((o) => (
|
|
<option key={o.id} value={o.id}>
|
|
{o.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">Scan Lens Exp</label>
|
|
<select
|
|
className="w-full border rounded px-2 py-1"
|
|
value={scanLensExp}
|
|
onChange={(e) => setScanLensExp(e.target.value)}
|
|
>
|
|
<option value="">{lensExp.loading ? "Loading…" : "—"}</option>
|
|
{lensExp.opts.map((o) => (
|
|
<option key={o.id} value={o.id}>
|
|
{o.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">Software</label>
|
|
<select
|
|
className="w-full border rounded px-2 py-1"
|
|
value={software}
|
|
onChange={(e) => setSoftware(e.target.value)}
|
|
>
|
|
<option value="">{softwares.loading ? "Loading…" : "—"}</option>
|
|
{softwares.opts.map((o) => (
|
|
<option key={o.id} value={o.id}>
|
|
{o.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm mb-1">Notes</label>
|
|
<textarea
|
|
rows={4}
|
|
className="w-full border rounded px-2 py-1"
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<button className="px-3 py-2 border rounded bg-accent text-background hover:opacity-90">
|
|
Create Rig
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|