rigbuilder fix + laser source 403 fix
This commit is contained in:
parent
96d462df62
commit
59b26635d9
4 changed files with 379 additions and 370 deletions
|
|
@ -1,2 +1,83 @@
|
||||||
// app/lasers/[id]/page.tsx
|
// app/lasers/[id]/page.tsx
|
||||||
export { default } from "./lasers";
|
import { cookies } from "next/headers";
|
||||||
|
import { redirect, notFound } from "next/navigation";
|
||||||
|
import { dxGET } from "@/lib/directus";
|
||||||
|
import LaserDetailsClient from "./LaserDetailsClient";
|
||||||
|
|
||||||
|
const FIELD_GROUPS = [
|
||||||
|
{
|
||||||
|
title: "General Information",
|
||||||
|
fields: {
|
||||||
|
make: "Make",
|
||||||
|
model: "Model",
|
||||||
|
op: "Pulse Operation Mode",
|
||||||
|
notes: "Notes",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Optical Specifications",
|
||||||
|
fields: {
|
||||||
|
w: "Laser Wattage (W)",
|
||||||
|
mj: "milliJoule Max (mJ)",
|
||||||
|
nm: "Wavelength (nm)",
|
||||||
|
k_hz: "Pulse Repetition Rate (kHz)",
|
||||||
|
ns: "Pulse Width (ns)",
|
||||||
|
d: "Beam Diameter (mm)",
|
||||||
|
m2: "M² - Quality",
|
||||||
|
instability: "Instability",
|
||||||
|
polarization: "Polarization",
|
||||||
|
band: "Band (nm)",
|
||||||
|
anti: "Anti-Reflection Coating",
|
||||||
|
mw: "Red Dot Wattage (mW)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Electrical & Timing",
|
||||||
|
fields: {
|
||||||
|
v: "Operating Voltage (V)",
|
||||||
|
temp_op: "Operating Temperature (°C)",
|
||||||
|
temp_store: "Storage Temperature (°C)",
|
||||||
|
l_on: "l_on",
|
||||||
|
l_off: "l_off",
|
||||||
|
mj_c: "mj_c",
|
||||||
|
ns_c: "ns_c",
|
||||||
|
d_c: "d_c",
|
||||||
|
on_c: "on_c",
|
||||||
|
off_c: "off_c",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Integration & Physical",
|
||||||
|
fields: {
|
||||||
|
cable: "Cable Length (m)",
|
||||||
|
cooling: "Cooling Method",
|
||||||
|
weight: "Weight (kg)",
|
||||||
|
dimensions: "Dimensions (cm)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const FIELD_KEYS = Array.from(
|
||||||
|
new Set(["make", "model", ...FIELD_GROUPS.flatMap((g) => Object.keys(g.fields))])
|
||||||
|
);
|
||||||
|
|
||||||
|
export default async function Page({ params }: { params: { id: string } }) {
|
||||||
|
const token = cookies().get("ma_at")?.value;
|
||||||
|
if (!token) {
|
||||||
|
redirect(`/auth/sign-in?next=${encodeURIComponent(`/lasers/${params.id}`)}`);
|
||||||
|
}
|
||||||
|
const bearer = `Bearer ${token}`;
|
||||||
|
const fields = encodeURIComponent(FIELD_KEYS.join(","));
|
||||||
|
const submissionId = params.id; // CONFIRMED: primary key is submission_id
|
||||||
|
|
||||||
|
// Fetch by item endpoint using submission_id as PK
|
||||||
|
const res = await dxGET<any>(
|
||||||
|
`/items/laser_source/${encodeURIComponent(submissionId)}?fields=${fields}`,
|
||||||
|
bearer
|
||||||
|
);
|
||||||
|
const row = res?.data ?? res ?? null;
|
||||||
|
|
||||||
|
if (!row) notFound();
|
||||||
|
|
||||||
|
return <LaserDetailsClient laser={row} fieldGroups={FIELD_GROUPS as any} />;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,288 +1,58 @@
|
||||||
'use client';
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState, useMemo } from 'react';
|
import Link from "next/link";
|
||||||
import Link from 'next/link';
|
|
||||||
|
|
||||||
type LaserRow = {
|
type Group = { title: string; fields: Record<string, string> };
|
||||||
id: string | number;
|
type Laser = Record<string, any>;
|
||||||
submission_id?: string | number;
|
|
||||||
make?: string;
|
const CHOICE_LABELS: Record<string, Record<string, string>> = {
|
||||||
model?: string;
|
op: { pm: "MOPA", pq: "Q-Switch" },
|
||||||
w?: string;
|
cooling: { aa: "Air, Active", ap: "Air, Passive", w: "Water" },
|
||||||
mj?: string;
|
|
||||||
nm?: string;
|
|
||||||
kHz?: string;
|
|
||||||
ns?: string;
|
|
||||||
v?: string;
|
|
||||||
// Directus returns `op` as a string for an “options” field.
|
|
||||||
// We also defensively support an object with {label|name} in case of custom responses.
|
|
||||||
op?: { label?: string; name?: string } | string | null;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function LaserSourcesPage() {
|
function resolveLabel(field: string, value: any) {
|
||||||
const [sources, setSources] = useState<LaserRow[]>([]);
|
if (value == null || value === "") return "—";
|
||||||
const [query, setQuery] = useState('');
|
const map = CHOICE_LABELS[field];
|
||||||
const [debouncedQuery, setDebouncedQuery] = useState('');
|
if (map && typeof value === "string" && map[value]) return map[value];
|
||||||
const [wavelengthFilters, setWavelengthFilters] = useState<Record<string, number | null>>({});
|
if (typeof value === "boolean") return value ? "Yes" : "No";
|
||||||
const [sortKey, setSortKey] = useState<keyof LaserRow | 'op' | 'model'>('model');
|
if (typeof value === "number") return Number.isFinite(value) ? String(value) : "—";
|
||||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
|
return String(value);
|
||||||
|
}
|
||||||
// canonical href builder (prefers submission_id if present)
|
|
||||||
const detailHref = (row: LaserRow) => `/lasers/${row.submission_id ?? row.id}`;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setTimeout(() => setDebouncedQuery(query), 300);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [query]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Request everything; `op` will come back as a simple string for an “options” field.
|
|
||||||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/laser_source?limit=-1&fields=*`, {
|
|
||||||
cache: 'no-store',
|
|
||||||
})
|
|
||||||
.then((res) => res.json())
|
|
||||||
.then((data) => setSources(data?.data || []));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const highlightMatch = (text?: string, q?: string) => {
|
|
||||||
const safeText = String(text ?? '');
|
|
||||||
const query = String(q ?? '');
|
|
||||||
if (!query) return safeText;
|
|
||||||
const parts = safeText.split(new RegExp(`(${query})`, 'gi'));
|
|
||||||
return parts.map((part, i) =>
|
|
||||||
part.toLowerCase() === query.toLowerCase() ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Render OP as a string safely (supports string or {label|name})
|
|
||||||
const opText = (row: LaserRow) => {
|
|
||||||
const v = row.op as any;
|
|
||||||
if (v && typeof v === 'object') {
|
|
||||||
return String(v.label ?? v.name ?? '—');
|
|
||||||
}
|
|
||||||
return v == null || v === '' ? '—' : String(v);
|
|
||||||
};
|
|
||||||
|
|
||||||
const filtered = useMemo(() => {
|
|
||||||
const q = debouncedQuery.toLowerCase();
|
|
||||||
return sources.filter((src) => {
|
|
||||||
const matchesQuery = [src.make, src.model]
|
|
||||||
.filter(Boolean)
|
|
||||||
.some((field) => String(field).toLowerCase().includes(q));
|
|
||||||
return matchesQuery;
|
|
||||||
});
|
|
||||||
}, [sources, debouncedQuery]);
|
|
||||||
|
|
||||||
const grouped = useMemo<Record<string, LaserRow[]>>(() => {
|
|
||||||
return filtered.reduce((acc, src) => {
|
|
||||||
const key = src.make || 'Unknown Make';
|
|
||||||
(acc[key] = acc[key] || []).push(src);
|
|
||||||
return acc;
|
|
||||||
}, {} as Record<string, LaserRow[]>);
|
|
||||||
}, [filtered]);
|
|
||||||
|
|
||||||
const wavelengths = [10600, 1064, 455, 355];
|
|
||||||
|
|
||||||
const toggleFilter = (make: string, value: number) => {
|
|
||||||
setWavelengthFilters((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[make]: prev[make] === value ? null : value,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleSort = (key: keyof LaserRow | 'op' | 'model') => {
|
|
||||||
setSortKey(key);
|
|
||||||
setSortOrder((prev) => (prev === 'asc' ? 'desc' : 'asc'));
|
|
||||||
};
|
|
||||||
|
|
||||||
const getSortableValue = (row: LaserRow, key: keyof LaserRow | 'op' | 'model') => {
|
|
||||||
const val = key === 'op' ? opText(row) : (row as any)[key];
|
|
||||||
if (val == null) return '';
|
|
||||||
const k = String(key).toLowerCase();
|
|
||||||
|
|
||||||
if (k === 'w') return parseFloat(String(val).replace(/[^\d.]/g, '')) || 0;
|
|
||||||
if (['mj', 'nm', 'khz', 'ns', 'v'].includes(k)) return parseFloat(String(val)) || 0;
|
|
||||||
|
|
||||||
return String(val).toLowerCase();
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortArrow = (key: keyof LaserRow | 'op' | 'model') =>
|
|
||||||
sortKey === key ? (sortOrder === 'asc' ? ' ▲' : ' ▼') : '';
|
|
||||||
|
|
||||||
const summaryStats = useMemo(() => {
|
|
||||||
const makes = new Set<string>();
|
|
||||||
const nmCounts: Record<string, number> = {};
|
|
||||||
for (const src of sources) {
|
|
||||||
if (src.make) makes.add(src.make);
|
|
||||||
if (src.nm) {
|
|
||||||
const nm = String(src.nm);
|
|
||||||
nmCounts[nm] = (nmCounts[nm] || 0) + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const mostCommonNm =
|
|
||||||
Object.entries(nmCounts).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] || '—';
|
|
||||||
return {
|
|
||||||
total: sources.length,
|
|
||||||
uniqueMakes: makes.size,
|
|
||||||
commonNm: mostCommonNm,
|
|
||||||
};
|
|
||||||
}, [sources]);
|
|
||||||
|
|
||||||
const recentSources = useMemo(() => {
|
|
||||||
return [...sources]
|
|
||||||
.filter((src) => src.submission_id != null)
|
|
||||||
.sort((a, b) => Number(b.submission_id) - Number(a.submission_id))
|
|
||||||
.slice(0, 5);
|
|
||||||
}, [sources]);
|
|
||||||
|
|
||||||
|
export default function LaserDetailsClient({
|
||||||
|
laser,
|
||||||
|
fieldGroups,
|
||||||
|
}: {
|
||||||
|
laser: Laser;
|
||||||
|
fieldGroups: Group[];
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="p-6 max-w-7xl mx-auto">
|
<div className="p-6 max-w-4xl mx-auto">
|
||||||
<div className="grid gap-4 md:grid-cols-3 mb-6">
|
<h1 className="text-3xl font-bold mb-4">
|
||||||
<div className="card p-4">
|
{(laser.make as string) || "—"} {laser.model || ""}
|
||||||
<h2 className="text-lg font-semibold mb-2">Database Summary</h2>
|
</h1>
|
||||||
<p>Total Sources: {summaryStats.total}</p>
|
|
||||||
<p>Unique Makes: {summaryStats.uniqueMakes}</p>
|
|
||||||
<p>Most Common Wavelength: {summaryStats.commonNm}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card p-4">
|
<div className="space-y-6">
|
||||||
<h2 className="text-lg font-semibold mb-2">Recent Additions</h2>
|
{fieldGroups.map(({ title, fields }) => (
|
||||||
<ul className="text-sm list-disc pl-4">
|
<section key={title} className="bg-card border border-border rounded-xl p-4">
|
||||||
{recentSources.map((src) => (
|
<h2 className="text-xl font-semibold mb-2">{title}</h2>
|
||||||
<li key={src.id}>
|
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
|
||||||
<Link className="text-accent underline" href={detailHref(src)}>
|
{Object.entries(fields).map(([key, label]) => (
|
||||||
{src.make} {src.model}
|
<div key={key}>
|
||||||
</Link>
|
<dt className="font-medium text-muted-foreground">{label}</dt>
|
||||||
</li>
|
<dd className="text-base break-words">{resolveLabel(key, laser[key])}</dd>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
))}
|
))}
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card p-4">
|
<div className="mt-8">
|
||||||
<h2 className="text-lg font-semibold mb-2">Feedback</h2>
|
<Link href="/lasers" className="text-blue-600 underline">
|
||||||
<p className="text-sm mb-2">See something wrong or want to suggest an improvement?</p>
|
← Back to Laser Sources
|
||||||
<Link href="#" className="btn-primary inline-block">
|
|
||||||
Submit Feedback
|
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-6 card bg-card text-card-foreground">
|
|
||||||
<h1 className="text-3xl font-bold mb-2">Laser Source Database</h1>
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
value={query}
|
|
||||||
onChange={(e) => setQuery(e.target.value)}
|
|
||||||
placeholder="Search by make or model..."
|
|
||||||
className="w-full max-w-md mb-4 dark:bg-background border border-border rounded-md p-2"
|
|
||||||
/>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Browse laser source specifications collected from community-submitted and verified sources.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{Object.entries(grouped).length === 0 ? (
|
|
||||||
<p className="text-muted">No laser sources found.</p>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{Object.entries(grouped).map(([make, items]) => {
|
|
||||||
const filteredItems =
|
|
||||||
wavelengthFilters[make] != null
|
|
||||||
? items.filter((item) => Number(item.nm) === wavelengthFilters[make])
|
|
||||||
: items;
|
|
||||||
|
|
||||||
const sortedItems = [...filteredItems].sort((a, b) => {
|
|
||||||
const aVal = getSortableValue(a, sortKey);
|
|
||||||
const bVal = getSortableValue(b, sortKey);
|
|
||||||
if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
|
|
||||||
if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<details key={make} className="border border-border rounded-md">
|
|
||||||
<summary className="bg-card px-4 py-2 font-semibold cursor-pointer flex justify-between items-center">
|
|
||||||
<span>
|
|
||||||
{make} <span className="text-sm text-muted">({filteredItems.length})</span>
|
|
||||||
</span>
|
|
||||||
<div className="space-x-2">
|
|
||||||
{[10600, 1064, 455, 355].map((w) => (
|
|
||||||
<button
|
|
||||||
key={w}
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
toggleFilter(make, w);
|
|
||||||
}}
|
|
||||||
className={`px-2 py-1 text-xs rounded-md border ${
|
|
||||||
wavelengthFilters[make] === w ? 'bg-accent text-white' : 'bg-muted text-muted-foreground'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{w}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full min-w-[900px] text-sm whitespace-nowrap">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th className="px-2 py-2 text-left">Make</th>
|
|
||||||
<th className="px-2 py-2 text-left w-64">
|
|
||||||
<button onClick={() => toggleSort('model')}>
|
|
||||||
Model{sortArrow('model')}
|
|
||||||
</button>
|
|
||||||
</th>
|
|
||||||
<th className="px-2 py-2 text-left">
|
|
||||||
<button onClick={() => toggleSort('w')}>W{sortArrow('w')}</button>
|
|
||||||
</th>
|
|
||||||
<th className="px-2 py-2 text-left">
|
|
||||||
<button onClick={() => toggleSort('mj')}>mJ{sortArrow('mj')}</button>
|
|
||||||
</th>
|
|
||||||
<th className="px-2 py-2 text-left">
|
|
||||||
<button onClick={() => toggleSort('op')}>OP{sortArrow('op')}</button>
|
|
||||||
</th>
|
|
||||||
<th className="px-2 py-2 text-left">
|
|
||||||
<button onClick={() => toggleSort('nm')}>nm{sortArrow('nm')}</button>
|
|
||||||
</th>
|
|
||||||
<th className="px-2 py-2 text-left">
|
|
||||||
<button onClick={() => toggleSort('kHz')}>kHz{sortArrow('kHz')}</button>
|
|
||||||
</th>
|
|
||||||
<th className="px-2 py-2 text-left">
|
|
||||||
<button onClick={() => toggleSort('ns')}>ns{sortArrow('ns')}</button>
|
|
||||||
</th>
|
|
||||||
<th className="px-2 py-2 text-left">
|
|
||||||
<button onClick={() => toggleSort('v')}>V{sortArrow('v')}</button>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{sortedItems.map((src) => (
|
|
||||||
<tr key={src.id} className="border-t border-border">
|
|
||||||
<td className="px-2 py-2 truncate max-w-[10rem]">
|
|
||||||
{highlightMatch(src.make || '—', debouncedQuery)}
|
|
||||||
</td>
|
|
||||||
<td className="px-2 py-2 truncate max-w-[16rem]">
|
|
||||||
<Link href={detailHref(src)} className="text-accent underline">
|
|
||||||
{highlightMatch(src.model || '—', debouncedQuery)}
|
|
||||||
</Link>
|
|
||||||
</td>
|
|
||||||
<td className="px-2 py-2 whitespace-nowrap">{src.w || '—'}</td>
|
|
||||||
<td className="px-2 py-2 whitespace-nowrap">{src.mj || '—'}</td>
|
|
||||||
<td className="px-2 py-2 whitespace-nowrap">{opText(src)}</td>
|
|
||||||
<td className="px-2 py-2 whitespace-nowrap">{src.nm || '—'}</td>
|
|
||||||
<td className="px-2 py-2 whitespace-nowrap">{src.kHz || '—'}</td>
|
|
||||||
<td className="px-2 py-2 whitespace-nowrap">{src.ns || '—'}</td>
|
|
||||||
<td className="px-2 py-2 whitespace-nowrap">{src.v || '—'}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,10 @@ const API = (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
|
||||||
// helper: render multipliers like "06x", "8x", "1.5x"; avoid double "x"
|
// helper: render multipliers like "06x", "8x", "1.5x"; avoid double "x"
|
||||||
function formatMultiplier(raw: any) {
|
function formatMultiplier(raw: any) {
|
||||||
const s = String(raw ?? "").trim();
|
const s = String(raw ?? "").trim();
|
||||||
|
if (!s) return "—";
|
||||||
if (/x$/i.test(s)) return s; // already has x
|
if (/x$/i.test(s)) return s; // already has x
|
||||||
// pure number?
|
// pure number?
|
||||||
if (/^\d+(\.\d+)?$/.test(s)) {
|
if (/^\d+(\.\d+)?$/.test(s)) {
|
||||||
// pad single-digit integers to 2 chars (e.g., 6 -> 06)
|
|
||||||
if (/^\d$/.test(s)) return `0${s}x`;
|
if (/^\d$/.test(s)) return `0${s}x`;
|
||||||
return `${s}x`;
|
return `${s}x`;
|
||||||
}
|
}
|
||||||
|
|
@ -27,13 +27,13 @@ function formatMultiplier(raw: any) {
|
||||||
return `${s}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(
|
function useOptions(
|
||||||
kind:
|
kind: "laser_software" | "laser_source" | "lens" | "scan_lens_apt" | "scan_lens_exp",
|
||||||
| "laser_software"
|
|
||||||
| "laser_source"
|
|
||||||
| "lens"
|
|
||||||
| "scan_lens_apt"
|
|
||||||
| "scan_lens_exp",
|
|
||||||
targetKey?: string
|
targetKey?: string
|
||||||
) {
|
) {
|
||||||
const [opts, setOpts] = useState<Opt[]>([]);
|
const [opts, setOpts] = useState<Opt[]>([]);
|
||||||
|
|
@ -44,94 +44,104 @@ function useOptions(
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
let url = "";
|
try {
|
||||||
let normalize = (rows: any[]): Opt[] =>
|
let url = "";
|
||||||
rows.map((r) => ({
|
// default normalize
|
||||||
id: String(r.id ?? r.submission_id),
|
let normalize = (rows: any[]): Opt[] =>
|
||||||
label: String(r.name ?? r.label ?? r.title ?? r.model ?? r.id),
|
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") {
|
if (kind === "laser_software") {
|
||||||
url = `${API}/items/laser_software?fields=id,name&limit=1000&sort=name`;
|
url = `${API}/items/laser_software?fields=id,name&limit=1000&sort=name`;
|
||||||
} else if (kind === "laser_source") {
|
} else if (kind === "laser_source") {
|
||||||
url = `${API}/items/laser_source?fields=submission_id,make,model,nm&limit=2000&sort=make,model`;
|
// fetch all sources; client filter by nm band from targetKey
|
||||||
const parseNum = (v: any) => {
|
url = `${API}/items/laser_source?fields=submission_id,make,model,nm&limit=2000&sort=make,model`;
|
||||||
if (v == null) return null;
|
const parseNum = (v: any) => {
|
||||||
const m = String(v).match(/(\d+(\.\d+)?)/);
|
if (v == null) return null;
|
||||||
return m ? Number(m[1]) : 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 nmRange = (t?: string | null): [number, number] | null => {
|
||||||
const s = t.toLowerCase();
|
if (!t) return null;
|
||||||
if (s.includes("fiber")) return [1000, 9000];
|
const s = t.toLowerCase();
|
||||||
if (s.includes("uv")) return [300, 400];
|
if (s.includes("fiber")) return [1000, 9000];
|
||||||
if (s.includes("gantry") || s.includes("co2 gantry") || s.includes("co₂ gantry"))
|
if (s.includes("uv")) return [300, 400];
|
||||||
return [10000, 11000];
|
if (s.includes("gantry") || s.includes("co2 gantry") || s.includes("co₂ gantry"))
|
||||||
if (s.includes("galvo") || s.includes("co2 galvo") || s.includes("co₂ galvo"))
|
return [10000, 11000];
|
||||||
return [10000, 11000];
|
if (s.includes("galvo") || s.includes("co2 galvo") || s.includes("co₂ galvo"))
|
||||||
return null;
|
return [10000, 11000];
|
||||||
};
|
return null;
|
||||||
const range = nmRange(targetKey);
|
};
|
||||||
normalize = (rows) => {
|
const range = nmRange(targetKey);
|
||||||
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) => {
|
normalize = (rows) => {
|
||||||
const toNum = (v: any) => {
|
const filtered = range
|
||||||
const m = String(v ?? "").match(/-?\d+(\.\d+)?/);
|
? rows.filter((r: any) => {
|
||||||
return m ? parseFloat(m[0]) : Number.POSITIVE_INFINITY;
|
const nm = parseNum(r.nm);
|
||||||
};
|
return nm != null && nm >= range[0] && nm <= range[1];
|
||||||
return [...rows]
|
})
|
||||||
.sort((a, b) => toNum(a.focal_length) - toNum(b.focal_length))
|
: rows;
|
||||||
.map((r) => ({
|
return filtered.map((r: any) => ({
|
||||||
id: String(r.id),
|
id: String(r.submission_id ?? ""),
|
||||||
label:
|
label: [r.make, r.model].filter(Boolean).join(" ") || String(r.submission_id ?? ""),
|
||||||
[
|
|
||||||
r.field_size && `${r.field_size} mm`,
|
|
||||||
r.focal_length && `${r.focal_length} mm`,
|
|
||||||
]
|
|
||||||
.filter(Boolean)
|
|
||||||
.join(" — ") || String(r.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 ?? ""),
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
} 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), // add "x"
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
const res = await fetch(url, {
|
const res = await fetch(url, { credentials: "include", cache: "no-store" });
|
||||||
credentials: "include",
|
if (!res.ok) throw new Error(`HTTP ${res.status} for ${kind}`);
|
||||||
cache: "no-store",
|
const json = await res.json().catch(() => ({} as any));
|
||||||
});
|
const rows = toArray(json?.data);
|
||||||
const json = await res.json();
|
|
||||||
const rows = json?.data ?? [];
|
let mapped: Opt[] = [];
|
||||||
const mapped = normalize(rows);
|
try {
|
||||||
if (alive) setOpts(mapped);
|
mapped = toArray(normalize(rows));
|
||||||
})()
|
} catch {
|
||||||
.catch(() => alive && setOpts([]))
|
// Safe fallback: minimal id/label mapping to prevent render crashes
|
||||||
.finally(() => alive && setLoading(false));
|
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 () => {
|
return () => {
|
||||||
alive = false;
|
alive = false;
|
||||||
|
|
@ -148,14 +158,14 @@ export default function RigBuilderClient({ rigTypes }: { rigTypes: Opt[] }) {
|
||||||
const [rigType, setRigType] = useState<string>("");
|
const [rigType, setRigType] = useState<string>("");
|
||||||
const [laserSource, setLaserSource] = useState<string>("");
|
const [laserSource, setLaserSource] = useState<string>("");
|
||||||
const [scanLens, setScanLens] = useState<string>("");
|
const [scanLens, setScanLens] = useState<string>("");
|
||||||
const [scanLensApt, setScanLensApt] = useState<string>("");
|
const [scanLensApt, setScanLensApt] = useState<string>(""); // galvo-only
|
||||||
const [scanLensExp, setScanLensExp] = useState<string>("");
|
const [scanLensExp, setScanLensExp] = useState<string>(""); // galvo-only
|
||||||
const [focusLens, setFocusLens] = useState<string>("");
|
const [focusLens, setFocusLens] = useState<string>("");
|
||||||
const [software, setSoftware] = useState<string>("");
|
const [software, setSoftware] = useState<string>("");
|
||||||
|
|
||||||
|
// rigTypes come from the SERVER as props.
|
||||||
const targetKey = useMemo(() => {
|
const targetKey = useMemo(() => {
|
||||||
const rt =
|
const rt = rigTypes.find((o) => String(o.id) === String(rigType))?.label || "";
|
||||||
rigTypes.find((o) => String(o.id) === String(rigType))?.label || "";
|
|
||||||
return rt;
|
return rt;
|
||||||
}, [rigTypes, rigType]);
|
}, [rigTypes, rigType]);
|
||||||
|
|
||||||
|
|
@ -205,10 +215,158 @@ export default function RigBuilderClient({ rigTypes }: { rigTypes: Opt[] }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={onSubmit} className="space-y-4 max-w-xl">
|
<form onSubmit={onSubmit} className="space-y-4 max-w-xl">
|
||||||
{/* ...existing fields... */}
|
<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>
|
||||||
|
|
||||||
{/* Lens sections unchanged, expander select now shows labels with trailing "x" */}
|
<div className="grid sm:grid-cols-2 gap-3">
|
||||||
{/* (full component omitted for brevity—only the hook/normalize changed) */}
|
<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>
|
</form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue