co2 galvo test UI cleanup and image fix

This commit is contained in:
makearmy 2025-10-03 15:22:15 -04:00
parent a76a6d1414
commit 29b5cac774
2 changed files with 31 additions and 15 deletions

View file

@ -1,11 +1,12 @@
// app/settings/co2-galvo/[id]/co2-galvo.tsx
"use client";
import { useParams, useSearchParams } from "next/navigation";
import CO2GalvoDetail from "@/components/details/CO2GalvoDetail";
export default function CO2GalvoDetailStandalone() {
const params = useParams<{ id: string }>();
export default function CO2GalvoSettingDetailPage() {
const { id } = useParams<{ id: string }>();
const sp = useSearchParams();
const edit = sp.get("edit") === "1";
return <CO2GalvoDetail id={params.id} mode={edit ? "edit" : "view"} />;
return <CO2GalvoDetail id={id} mode={edit ? "edit" : "view"} />;
}

View file

@ -1,3 +1,4 @@
// components/details/CO2GalvoDetail.tsx
"use client";
import { useEffect, useMemo, useState } from "react";
@ -48,8 +49,12 @@ function ownerLabel(o: Rec["owner"]) {
return o.username || String(o.id ?? "—");
}
// Use public Directus base for <img> sources so images actually load
const API_BASE = (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, "");
function fileUrl(id?: string) {
return id ? `/api/dx/assets/${id}` : "";
if (!id) return "";
if (API_BASE) return `${API_BASE}/assets/${id}`;
return `/api/dx/assets/${id}`; // fallback if you proxy assets
}
export default function CO2GalvoDetail({
@ -166,16 +171,16 @@ export default function CO2GalvoDetail({
setting_notes: rec.setting_notes ?? "",
photo: photoId,
screen: screenId,
mat: matId ? String(matId) : null,
mat_coat: coatId ? String(coatId) : null,
mat_color: colorId ? String(colorId) : null,
mat_opacity: opacityId ? String(opacityId) : null,
mat: matId ? String(matId) : null,
mat_coat: coatId ? String(coatId) : null,
mat_color: colorId ? String(colorId) : null,
mat_opacity: opacityId ? String(opacityId) : null,
mat_thickness: rec.mat_thickness ?? null,
source: sourceId != null ? String(sourceId) : null,
lens: lensId != null ? String(lensId) : null,
focus: rec.focus ?? null,
laser_soft: rec.laser_soft ?? null,
repeat_all: rec.repeat_all ?? null,
source: sourceId != null ? String(sourceId) : null,
lens: lensId != null ? String(lensId) : null,
focus: rec.focus ?? null,
laser_soft: rec.laser_soft ?? null,
repeat_all: rec.repeat_all ?? null,
fill_settings: rec.fill_settings ?? [],
line_settings: rec.line_settings ?? [],
raster_settings: rec.raster_settings ?? [],
@ -251,13 +256,23 @@ export default function CO2GalvoDetail({
<div className="grid grid-cols-2 gap-4">
{photoId ? (
<figure className="border rounded overflow-hidden">
<img src={fileUrl(String(photoId))} alt="Result" className="w-full h-auto" />
<img
src={fileUrl(String(photoId))}
alt="Result"
className="w-full h-auto"
onError={(e) => { e.currentTarget.style.display = "none"; }}
/>
<figcaption className="text-xs p-1 text-muted-foreground">Result</figcaption>
</figure>
) : null}
{screenId ? (
<figure className="border rounded overflow-hidden">
<img src={fileUrl(String(screenId))} alt="Settings screenshot" className="w-full h-auto" />
<img
src={fileUrl(String(screenId))}
alt="Settings screenshot"
className="w-full h-auto"
onError={(e) => { e.currentTarget.style.display = "none"; }}
/>
<figcaption className="text-xs p-1 text-muted-foreground">Settings Screenshot</figcaption>
</figure>
) : null}