[id] pages render in portal
This commit is contained in:
parent
dcd88b200f
commit
656ad5fe7e
17 changed files with 1028 additions and 1025 deletions
144
app/lasers/[id]/lasers.tsx
Normal file
144
app/lasers/[id]/lasers.tsx
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function LaserSourceDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [laser, setLaser] = useState(null);
|
||||
const [labels, setLabels] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/laser_source/${id}?fields=*`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setLaser(data.data || null));
|
||||
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/fields/laser_source`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const labelMap = {};
|
||||
(data.data || []).forEach((field) => {
|
||||
if (field.interface === 'select-dropdown' && field.options?.choices) {
|
||||
labelMap[field.field] = {};
|
||||
field.options.choices.forEach((choice) => {
|
||||
labelMap[field.field][choice.value] = choice.text;
|
||||
});
|
||||
}
|
||||
});
|
||||
setLabels(labelMap);
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
if (!laser) return <div className="p-6">Loading...</div>;
|
||||
|
||||
const resolveLabel = (field, value) => {
|
||||
if (!value) return '—';
|
||||
|
||||
const hardcodedLabels = {
|
||||
op: {
|
||||
pm: 'MOPA',
|
||||
pq: 'Q-Switch',
|
||||
},
|
||||
cooling: {
|
||||
aa: 'Air, Active',
|
||||
ap: 'Air, Passive',
|
||||
w: 'Water',
|
||||
},
|
||||
};
|
||||
|
||||
if (hardcodedLabels[field] && hardcodedLabels[field][value]) {
|
||||
return hardcodedLabels[field][value];
|
||||
}
|
||||
|
||||
return labels[field]?.[value] || value;
|
||||
};
|
||||
|
||||
const fieldGroups = [
|
||||
{
|
||||
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)',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">
|
||||
{laser.make || '—'} {laser.model || ''}
|
||||
</h1>
|
||||
|
||||
<div className="space-y-6">
|
||||
{fieldGroups.map(({ title, fields }) => (
|
||||
<section key={title} className="bg-card border border-border rounded-xl p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">{title}</h2>
|
||||
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
|
||||
{Object.entries(fields).map(([key, label]) => (
|
||||
<div key={key}>
|
||||
<dt className="font-medium text-muted-foreground">{label}</dt>
|
||||
<dd className="text-base break-words">
|
||||
{resolveLabel(key, laser[key])}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/lasers" className="text-blue-600 underline">
|
||||
← Back to Laser Sources
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,144 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function LaserSourceDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [laser, setLaser] = useState(null);
|
||||
const [labels, setLabels] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/laser_source/${id}?fields=*`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setLaser(data.data || null));
|
||||
|
||||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/fields/laser_source`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const labelMap = {};
|
||||
(data.data || []).forEach((field) => {
|
||||
if (field.interface === 'select-dropdown' && field.options?.choices) {
|
||||
labelMap[field.field] = {};
|
||||
field.options.choices.forEach((choice) => {
|
||||
labelMap[field.field][choice.value] = choice.text;
|
||||
});
|
||||
}
|
||||
});
|
||||
setLabels(labelMap);
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
if (!laser) return <div className="p-6">Loading...</div>;
|
||||
|
||||
const resolveLabel = (field, value) => {
|
||||
if (!value) return '—';
|
||||
|
||||
const hardcodedLabels = {
|
||||
op: {
|
||||
pm: 'MOPA',
|
||||
pq: 'Q-Switch',
|
||||
},
|
||||
cooling: {
|
||||
aa: 'Air, Active',
|
||||
ap: 'Air, Passive',
|
||||
w: 'Water',
|
||||
},
|
||||
};
|
||||
|
||||
if (hardcodedLabels[field] && hardcodedLabels[field][value]) {
|
||||
return hardcodedLabels[field][value];
|
||||
}
|
||||
|
||||
return labels[field]?.[value] || value;
|
||||
};
|
||||
|
||||
const fieldGroups = [
|
||||
{
|
||||
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)',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">
|
||||
{laser.make || '—'} {laser.model || ''}
|
||||
</h1>
|
||||
|
||||
<div className="space-y-6">
|
||||
{fieldGroups.map(({ title, fields }) => (
|
||||
<section key={title} className="bg-card border border-border rounded-xl p-4">
|
||||
<h2 className="text-xl font-semibold mb-2">{title}</h2>
|
||||
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
|
||||
{Object.entries(fields).map(([key, label]) => (
|
||||
<div key={key}>
|
||||
<dt className="font-medium text-muted-foreground">{label}</dt>
|
||||
<dd className="text-base break-words">
|
||||
{resolveLabel(key, laser[key])}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/lasers" className="text-blue-600 underline">
|
||||
← Back to Laser Sources
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// app/lasers/[id]/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
redirect(`/portal/laser-sources?id=${encodeURIComponent(params.id)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
58
app/materials/materials-coatings/[id]/materials-coatings.tsx
Normal file
58
app/materials/materials-coatings/[id]/materials-coatings.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function MaterialCoatingDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [material, setMaterial] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material_coating/${id}?fields=id,name,abbreviation,technical_name,composition,notes,override_reason,coating_status.name,coating_status_override,hazard_tags.hazard_tags_id.hazard_source.source,hazard_tags.hazard_tags_id.hazard_danger.danger,hazard_tags.hazard_tags_id.hazard_severity.severity`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setMaterial(data.data || null));
|
||||
}, [id]);
|
||||
|
||||
if (!material) return <div className="p-6">Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">{material.name}</h1>
|
||||
<div className="space-y-2">
|
||||
<p><strong>Status:</strong> {material.coating_status?.name || '—'}</p>
|
||||
<p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</p>
|
||||
<p><strong>Technical Name:</strong> {material.technical_name || '—'}</p>
|
||||
<p><strong>Composition:</strong> {material.composition || '—'}</p>
|
||||
<p><strong>Notes:</strong> {material.notes || '—'}</p>
|
||||
<p><strong>Override Reason:</strong> {material.override_reason || '—'}</p>
|
||||
|
||||
<div>
|
||||
<strong>Hazard Tags</strong>
|
||||
<ul className="list-disc pl-6">
|
||||
{Array.isArray(material.hazard_tags) && material.hazard_tags.length > 0 ? (
|
||||
material.hazard_tags.map((tag, index) => (
|
||||
<li key={index}>
|
||||
{tag.hazard_tags_id?.hazard_source?.source || '—'} |{' '}
|
||||
{tag.hazard_tags_id?.hazard_danger?.danger || '—'} |{' '}
|
||||
{tag.hazard_tags_id?.hazard_severity?.severity || '—'}
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li>None</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/materials-coatings" className="text-blue-600 underline">← Back to Coatings</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,58 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function MaterialCoatingDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [material, setMaterial] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material_coating/${id}?fields=id,name,abbreviation,technical_name,composition,notes,override_reason,coating_status.name,coating_status_override,hazard_tags.hazard_tags_id.hazard_source.source,hazard_tags.hazard_tags_id.hazard_danger.danger,hazard_tags.hazard_tags_id.hazard_severity.severity`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setMaterial(data.data || null));
|
||||
}, [id]);
|
||||
|
||||
if (!material) return <div className="p-6">Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">{material.name}</h1>
|
||||
<div className="space-y-2">
|
||||
<p><strong>Status:</strong> {material.coating_status?.name || '—'}</p>
|
||||
<p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</p>
|
||||
<p><strong>Technical Name:</strong> {material.technical_name || '—'}</p>
|
||||
<p><strong>Composition:</strong> {material.composition || '—'}</p>
|
||||
<p><strong>Notes:</strong> {material.notes || '—'}</p>
|
||||
<p><strong>Override Reason:</strong> {material.override_reason || '—'}</p>
|
||||
|
||||
<div>
|
||||
<strong>Hazard Tags</strong>
|
||||
<ul className="list-disc pl-6">
|
||||
{Array.isArray(material.hazard_tags) && material.hazard_tags.length > 0 ? (
|
||||
material.hazard_tags.map((tag, index) => (
|
||||
<li key={index}>
|
||||
{tag.hazard_tags_id?.hazard_source?.source || '—'} |{' '}
|
||||
{tag.hazard_tags_id?.hazard_danger?.danger || '—'} |{' '}
|
||||
{tag.hazard_tags_id?.hazard_severity?.severity || '—'}
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li>None</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/materials-coatings" className="text-blue-600 underline">← Back to Coatings</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// app/materials/materials-coatings/[id]/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
redirect(`/portal/materials?t=materials-coatings&id=${encodeURIComponent(params.id)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
60
app/materials/materials/[id]/materials.tsx
Normal file
60
app/materials/materials/[id]/materials.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function MaterialDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [material, setMaterial] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material/${id}?fields=id,name,abbreviation,common_names,technical_name,composition,material_cat.name,material_status.name,notes,override_reason,hazard_tags.hazard_tags_id.hazard_source.source,hazard_tags.hazard_tags_id.hazard_danger.danger,hazard_tags.hazard_tags_id.hazard_severity.severity`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setMaterial(data.data || null));
|
||||
}, [id]);
|
||||
|
||||
if (!material) return <div className="p-6">Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">{material.name}</h1>
|
||||
<div className="space-y-2">
|
||||
<p><strong>Category:</strong> {material.material_cat?.name || '—'}</p>
|
||||
<p><strong>Status:</strong> {material.material_status?.name || '—'}</p>
|
||||
<p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</p>
|
||||
<p><strong>Common Names:</strong> {material.common_names || '—'}</p>
|
||||
<p><strong>Technical Name:</strong> {material.technical_name || '—'}</p>
|
||||
<p><strong>Composition:</strong> {material.composition || '—'}</p>
|
||||
<p><strong>Notes:</strong> {material.notes || '—'}</p>
|
||||
<p><strong>Override Reason:</strong> {material.override_reason || '—'}</p>
|
||||
|
||||
<div>
|
||||
<strong>Hazard Tags</strong>
|
||||
<ul className="list-disc pl-6">
|
||||
{Array.isArray(material.hazard_tags) && material.hazard_tags.length > 0 ? (
|
||||
material.hazard_tags.map((tag, index) => (
|
||||
<li key={index}>
|
||||
{tag.hazard_tags_id?.hazard_source?.source || '—'} |{' '}
|
||||
{tag.hazard_tags_id?.hazard_danger?.danger || '—'} |{' '}
|
||||
{tag.hazard_tags_id?.hazard_severity?.severity || '—'}
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li>None</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/materials" className="text-blue-600 underline">← Back to Materials</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,60 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
export default function MaterialDetailsPage() {
|
||||
const { id } = useParams();
|
||||
const [material, setMaterial] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/material/${id}?fields=id,name,abbreviation,common_names,technical_name,composition,material_cat.name,material_status.name,notes,override_reason,hazard_tags.hazard_tags_id.hazard_source.source,hazard_tags.hazard_tags_id.hazard_danger.danger,hazard_tags.hazard_tags_id.hazard_severity.severity`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => setMaterial(data.data || null));
|
||||
}, [id]);
|
||||
|
||||
if (!material) return <div className="p-6">Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">{material.name}</h1>
|
||||
<div className="space-y-2">
|
||||
<p><strong>Category:</strong> {material.material_cat?.name || '—'}</p>
|
||||
<p><strong>Status:</strong> {material.material_status?.name || '—'}</p>
|
||||
<p><strong>Abbreviation:</strong> {material.abbreviation || '—'}</p>
|
||||
<p><strong>Common Names:</strong> {material.common_names || '—'}</p>
|
||||
<p><strong>Technical Name:</strong> {material.technical_name || '—'}</p>
|
||||
<p><strong>Composition:</strong> {material.composition || '—'}</p>
|
||||
<p><strong>Notes:</strong> {material.notes || '—'}</p>
|
||||
<p><strong>Override Reason:</strong> {material.override_reason || '—'}</p>
|
||||
|
||||
<div>
|
||||
<strong>Hazard Tags</strong>
|
||||
<ul className="list-disc pl-6">
|
||||
{Array.isArray(material.hazard_tags) && material.hazard_tags.length > 0 ? (
|
||||
material.hazard_tags.map((tag, index) => (
|
||||
<li key={index}>
|
||||
{tag.hazard_tags_id?.hazard_source?.source || '—'} |{' '}
|
||||
{tag.hazard_tags_id?.hazard_danger?.danger || '—'} |{' '}
|
||||
{tag.hazard_tags_id?.hazard_severity?.severity || '—'}
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li>None</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link href="/materials" className="text-blue-600 underline">← Back to Materials</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// app/materials/materials/[id]/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
redirect(`/portal/materials?t=materials&id=${encodeURIComponent(params.id)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,36 @@
|
|||
// app/portal/laser-settings/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
import SettingsSwitcher from "@/components/portal/SettingsSwitcher";
|
||||
|
||||
export const metadata = { title: "MakerDash • Laser Settings" };
|
||||
|
||||
export default function LaserSettingsPortalPage() {
|
||||
function pickOne<T>(v: T | T[] | undefined): T | undefined {
|
||||
if (Array.isArray(v)) return v[0];
|
||||
return v;
|
||||
}
|
||||
|
||||
export default function LaserSettingsPortalPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams?: Record<string, string | string[] | undefined>;
|
||||
}) {
|
||||
// Read tab + optional id from query
|
||||
const t = (pickOne(searchParams?.t) || "fiber").toLowerCase();
|
||||
const id = pickOne(searchParams?.id);
|
||||
|
||||
// If an id is present, hop directly to the existing detail route
|
||||
if (id) {
|
||||
const slugMap: Record<string, string> = {
|
||||
fiber: "fiber",
|
||||
uv: "uv",
|
||||
"co2-galvo": "co2-galvo",
|
||||
"co2-gantry": "co2-gantry",
|
||||
};
|
||||
const slug = slugMap[t] ?? "fiber";
|
||||
redirect(`/settings/${slug}/${encodeURIComponent(id)}`);
|
||||
}
|
||||
|
||||
// Otherwise show the normal portal view
|
||||
return (
|
||||
<div className="rounded-lg border p-6">
|
||||
<h2 className="mb-4 text-xl font-semibold">Laser Settings</h2>
|
||||
|
|
|
|||
183
app/settings/co2-galvo/[id]/co2-galvo.tsx
Normal file
183
app/settings/co2-galvo/[id]/co2-galvo.tsx
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function CO2GalvoSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
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));
|
||||
}, [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>;
|
||||
|
||||
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="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="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>
|
||||
)}
|
||||
|
||||
<hr className="my-6 border-muted" />
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,183 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function CO2GalvoSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
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));
|
||||
}, [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>;
|
||||
|
||||
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="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="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>
|
||||
)}
|
||||
|
||||
<hr className="my-6 border-muted" />
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
</div>
|
||||
);
|
||||
// app/settings/co2-galvo/[id]/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
redirect(`/portal/laser-settings?t=co2-galvo&id=${encodeURIComponent(params.id)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
180
app/settings/co2-gantry/[id]/co2-gantry.tsx
Normal file
180
app/settings/co2-gantry/[id]/co2-gantry.tsx
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function CO2GantrySettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
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));
|
||||
}, [id]);
|
||||
|
||||
const openSearchInNewTab = (value) => {
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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>;
|
||||
|
||||
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="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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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" />
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,180 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function CO2GantrySettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
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));
|
||||
}, [id]);
|
||||
|
||||
const openSearchInNewTab = (value) => {
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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>;
|
||||
|
||||
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="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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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" />
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
</div>
|
||||
);
|
||||
// app/settings/co2-gantry/[id]/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
redirect(`/portal/laser-settings?t=co2-gantry&id=${encodeURIComponent(params.id)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
179
app/settings/fiber/[id]/fiber.tsx
Normal file
179
app/settings/fiber/[id]/fiber.tsx
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function FiberSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${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,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));
|
||||
}, [id]);
|
||||
|
||||
if (loading) return <p className="p-6">Loading setting...</p>;
|
||||
if (!setting) return <p className="p-6">Setting not found.</p>;
|
||||
|
||||
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("/fiber-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();
|
||||
};
|
||||
|
||||
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="/fiber-settings"
|
||||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
|
||||
>
|
||||
← Back to Fiber Settings
|
||||
</a>
|
||||
</div>
|
||||
<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="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 || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{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" />
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,179 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function FiberSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${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,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));
|
||||
}, [id]);
|
||||
|
||||
if (loading) return <p className="p-6">Loading setting...</p>;
|
||||
if (!setting) return <p className="p-6">Setting not found.</p>;
|
||||
|
||||
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("/fiber-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();
|
||||
};
|
||||
|
||||
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="/fiber-settings"
|
||||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm self-start"
|
||||
>
|
||||
← Back to Fiber Settings
|
||||
</a>
|
||||
</div>
|
||||
<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="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 || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{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" />
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
</div>
|
||||
);
|
||||
// app/settings/fiber/[id]/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
redirect(`/portal/laser-settings?t=fiber&id=${encodeURIComponent(params.id)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function FiberSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,source.model,lens.field_size`
|
||||
)
|
||||
.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]);
|
||||
|
||||
if (loading) return <p className="p-6">Loading setting...</p>;
|
||||
if (!setting) return <p className="p-6">Setting not found.</p>;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">{setting.setting_title}</h1>
|
||||
{setting.photo?.filename_disk && (
|
||||
<Image
|
||||
src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
||||
alt="Laser preview"
|
||||
width={512}
|
||||
height={512}
|
||||
className="rounded mb-4"
|
||||
/>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<p><strong>Uploader:</strong> {setting.uploader || "—"}</p>
|
||||
<p><strong>Material:</strong> {setting.mat?.name || "—"}</p>
|
||||
<p><strong>Coating:</strong> {setting.mat_coat?.name || "—"}</p>
|
||||
<p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
|
||||
<p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
|
||||
<p><strong>Source Model:</strong> {setting.source?.model || "—"}</p>
|
||||
<p><strong>Lens Field Size:</strong> {setting.lens?.field_size || "—"}</p>
|
||||
</div>
|
||||
{setting.setting_notes && (
|
||||
<div className="mt-6 prose dark:prose-invert">
|
||||
<h2>Notes</h2>
|
||||
<Markdown>{setting.setting_notes}</Markdown>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,168 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function UVSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
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));
|
||||
}, [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");
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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>;
|
||||
|
||||
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="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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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" />
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
</div>
|
||||
);
|
||||
// app/settings/uv/[id]/page.tsx
|
||||
import { redirect } from "next/navigation";
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
redirect(`/portal/laser-settings?t=uv&id=${encodeURIComponent(params.id)}`);
|
||||
}
|
||||
|
||||
|
|
|
|||
168
app/settings/uv/[id]/uv.tsx
Normal file
168
app/settings/uv/[id]/uv.tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
export default function UVSettingDetailPage() {
|
||||
const { id } = useParams();
|
||||
const [setting, setSetting] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
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));
|
||||
}, [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");
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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>;
|
||||
|
||||
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="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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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" />
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
|
||||
{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)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue