293 lines
8.9 KiB
TypeScript
293 lines
8.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useMemo } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function UVSettingsPage() {
|
|
const searchParams = useSearchParams();
|
|
const initialQuery = searchParams.get("query") || "";
|
|
|
|
const [query, setQuery] = useState(initialQuery);
|
|
const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
|
|
const [settings, setSettings] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const detailHref = (id: string | number) => `/settings/uv/${id}`;
|
|
|
|
useEffect(() => {
|
|
const t = setTimeout(() => setDebouncedQuery(query), 300);
|
|
return () => clearTimeout(t);
|
|
}, [query]);
|
|
|
|
useEffect(() => {
|
|
const url =
|
|
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_uv?fields=` +
|
|
[
|
|
"submission_id",
|
|
"setting_title",
|
|
"uploader",
|
|
"owner.display_name",
|
|
"owner.first_name",
|
|
"owner.last_name",
|
|
"owner.username",
|
|
"owner.email",
|
|
"photo.id",
|
|
"photo.title",
|
|
"mat.name",
|
|
"mat_coat.name",
|
|
"source.model",
|
|
"lens.field_size",
|
|
"lens.name",
|
|
].join(",") +
|
|
"&limit=-1";
|
|
|
|
fetch(url, { cache: "no-store" })
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
setSettings(data?.data || []);
|
|
setLoading(false);
|
|
})
|
|
.catch(() => setLoading(false));
|
|
}, []);
|
|
|
|
const ownerName = (owner?: any) => {
|
|
if (!owner) return "—";
|
|
return (
|
|
owner.display_name ||
|
|
[owner.first_name, owner.last_name].filter(Boolean).join(" ").trim() ||
|
|
owner.username ||
|
|
owner.email ||
|
|
"—"
|
|
);
|
|
};
|
|
|
|
const lensLabel = (row: any) => row?.lens?.field_size ?? row?.lens?.name ?? "—";
|
|
|
|
const highlight = (text?: string) => {
|
|
if (!debouncedQuery) return text || "";
|
|
const regex = new RegExp(`(${debouncedQuery})`, "gi");
|
|
return (text || "").replace(regex, "<mark>$1</mark>");
|
|
};
|
|
|
|
const filtered = useMemo(() => {
|
|
const q = debouncedQuery.toLowerCase();
|
|
return settings.filter((entry) => {
|
|
const fieldsToSearch = [
|
|
entry.setting_title,
|
|
ownerName(entry.owner),
|
|
entry.uploader,
|
|
entry.mat?.name,
|
|
entry.mat_coat?.name,
|
|
entry.source?.model,
|
|
lensLabel(entry),
|
|
];
|
|
return fieldsToSearch
|
|
.filter(Boolean)
|
|
.some((field: string) => String(field).toLowerCase().includes(q));
|
|
});
|
|
}, [settings, debouncedQuery]);
|
|
|
|
// Stats
|
|
const totalSettings = settings.length;
|
|
const uniqueMaterials = new Set(settings.map((s) => s.mat?.name).filter(Boolean)).size;
|
|
|
|
const commonLens = settings.reduce((acc: Record<string, number>, cur) => {
|
|
const l = lensLabel(cur);
|
|
if (!l || l === "—") return acc;
|
|
acc[l] = (acc[l] || 0) + 1;
|
|
return acc;
|
|
}, {});
|
|
const mostCommonLens =
|
|
Object.entries(commonLens).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] ||
|
|
"—";
|
|
|
|
const sourceModels = settings.reduce((acc: Record<string, number>, cur) => {
|
|
const model = cur.source?.model;
|
|
if (!model) return acc;
|
|
acc[model] = (acc[model] || 0) + 1;
|
|
return acc;
|
|
}, {});
|
|
const mostCommonSource =
|
|
Object.entries(sourceModels).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0))[0]?.[0] ||
|
|
"—";
|
|
|
|
const recentSettings = [...settings]
|
|
.sort((a, b) => Number(b.submission_id) - Number(a.submission_id))
|
|
.slice(0, 5);
|
|
|
|
return (
|
|
<div className="p-6 max-w-7xl mx-auto">
|
|
<style jsx global>{`
|
|
mark {
|
|
background: #ffde59;
|
|
color: #242424;
|
|
padding: 0 2px;
|
|
border-radius: 2px;
|
|
}
|
|
`}</style>
|
|
|
|
{/* Header + Search */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
|
|
<div className="card bg-card text-card-foreground p-4">
|
|
<h1 className="text-2xl font-bold mb-2">UV Laser Settings</h1>
|
|
<input
|
|
type="search"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Search by material, owner, uploader, model, etc…"
|
|
className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
|
|
/>
|
|
<p className="text-sm text-muted-foreground">
|
|
View and explore detailed UV settings with context.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="card bg-card text-card-foreground p-4">
|
|
<h2 className="text-lg font-semibold mb-2">How to Use</h2>
|
|
<p className="text-sm">
|
|
Browse community UV laser settings. Use search to narrow results. Click any
|
|
title to view full configuration, notes, and photos.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="card bg-card text-card-foreground p-4">
|
|
<h2 className="text-lg font-semibold mb-2">Stats Summary</h2>
|
|
<ul className="text-sm space-y-1">
|
|
<li>Total Settings: {totalSettings}</li>
|
|
<li>Unique Materials: {uniqueMaterials}</li>
|
|
<li>Most Common Lens: {mostCommonLens}</li>
|
|
<li>Most Used Source: {mostCommonSource}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="card bg-card text-card-foreground p-4">
|
|
<h2 className="text-lg font-semibold mb-2">Recently Added</h2>
|
|
<ul className="text-sm space-y-1">
|
|
{recentSettings.map((s) => (
|
|
<li key={s.submission_id}>
|
|
<Link href={detailHref(s.submission_id)} className="underline text-accent">
|
|
{s.setting_title || "Untitled"}
|
|
</Link>{" "}
|
|
<span className="text-muted-foreground">
|
|
by {ownerName(s.owner) !== "—" ? ownerName(s.owner) : s.uploader || "—"}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="card bg-card text-card-foreground p-4">
|
|
<h2 className="text-lg font-semibold mb-2">Resources</h2>
|
|
<ul className="text-sm space-y-1">
|
|
<li>
|
|
<a href="/materials" target="_blank" rel="noopener noreferrer" className="underline text-accent">
|
|
Material Safety Guide
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://lasereverything.net/scripts/laspwrconvert.php"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline text-accent"
|
|
>
|
|
Laser Parameter Calculator
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://jptoe.com/downloads"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline text-accent"
|
|
>
|
|
JPT Datasheets
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
{loading ? (
|
|
<p className="text-muted">Loading settings...</p>
|
|
) : filtered.length === 0 ? (
|
|
<p className="text-muted">No UV settings found.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr>
|
|
<th className="px-2 py-2 text-left">Photo</th>
|
|
<th className="px-2 py-2 text-left">Title</th>
|
|
<th className="px-2 py-2 text-left">Owner</th>
|
|
<th className="px-2 py-2 text-left">Uploader</th>
|
|
<th className="px-2 py-2 text-left">Material</th>
|
|
<th className="px-2 py-2 text-left">Coating</th>
|
|
<th className="px-2 py-2 text-left">Source</th>
|
|
<th className="px-2 py-2 text-left">Lens</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filtered.map((setting) => {
|
|
const ownerText = ownerName(setting.owner);
|
|
return (
|
|
<tr key={setting.submission_id} className="border-t border-border">
|
|
<td className="px-2 py-2">
|
|
{setting.photo?.id ? (
|
|
<Image
|
|
src={`https://forms.lasereverything.net/assets/${setting.photo.id}`}
|
|
alt={setting.photo.title || "laser preview"}
|
|
width={64}
|
|
height={64}
|
|
className="rounded-md"
|
|
/>
|
|
) : (
|
|
"—"
|
|
)}
|
|
</td>
|
|
<td className="px-2 py-2 whitespace-nowrap">
|
|
<Link
|
|
href={detailHref(setting.submission_id)}
|
|
className="text-accent underline"
|
|
dangerouslySetInnerHTML={{
|
|
__html: highlight(setting.setting_title || "—"),
|
|
}}
|
|
/>
|
|
</td>
|
|
<td
|
|
className="px-2 py-2 whitespace-nowrap"
|
|
dangerouslySetInnerHTML={{ __html: highlight(ownerText) }}
|
|
/>
|
|
<td
|
|
className="px-2 py-2 whitespace-nowrap"
|
|
dangerouslySetInnerHTML={{ __html: highlight(setting.uploader || "—") }}
|
|
/>
|
|
<td
|
|
className="px-2 py-2 whitespace-nowrap"
|
|
dangerouslySetInnerHTML={{ __html: highlight(setting.mat?.name || "—") }}
|
|
/>
|
|
<td
|
|
className="px-2 py-2 whitespace-nowrap"
|
|
dangerouslySetInnerHTML={{ __html: highlight(setting.mat_coat?.name || "—") }}
|
|
/>
|
|
<td
|
|
className="px-2 py-2 whitespace-nowrap"
|
|
dangerouslySetInnerHTML={{ __html: highlight(setting.source?.model || "—") }}
|
|
/>
|
|
<td
|
|
className="px-2 py-2 whitespace-nowrap"
|
|
dangerouslySetInnerHTML={{ __html: highlight(lensLabel(setting)) }}
|
|
/>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|