Phase 2 UI Adjustments/Edits by bonamin
This commit is contained in:
@@ -3,6 +3,12 @@ import { useParams, useNavigate } from "react-router-dom";
|
||||
import api from "../api/client";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import ConfirmDialog from "../components/ConfirmDialog";
|
||||
import {
|
||||
getLocalizedValue,
|
||||
getLanguageName,
|
||||
normalizeColor,
|
||||
formatDuration,
|
||||
} from "./melodyUtils";
|
||||
|
||||
function Field({ label, children }) {
|
||||
return (
|
||||
@@ -26,6 +32,15 @@ export default function MelodyDetail() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showDelete, setShowDelete] = useState(false);
|
||||
const [displayLang, setDisplayLang] = useState("en");
|
||||
const [melodySettings, setMelodySettings] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.get("/settings/melody").then((ms) => {
|
||||
setMelodySettings(ms);
|
||||
setDisplayLang(ms.primary_language || "en");
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
@@ -73,9 +88,11 @@ export default function MelodyDetail() {
|
||||
|
||||
const info = melody.information || {};
|
||||
const settings = melody.default_settings || {};
|
||||
const languages = melodySettings?.available_languages || ["en"];
|
||||
const displayName = getLocalizedValue(info.name, displayLang, "Untitled Melody");
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<button
|
||||
@@ -84,9 +101,22 @@ export default function MelodyDetail() {
|
||||
>
|
||||
← Back to Melodies
|
||||
</button>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
{info.name || "Untitled Melody"}
|
||||
</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-gray-900">{displayName}</h1>
|
||||
{languages.length > 1 && (
|
||||
<select
|
||||
value={displayLang}
|
||||
onChange={(e) => setDisplayLang(e.target.value)}
|
||||
className="text-xs px-2 py-1 border border-gray-200 rounded text-gray-500"
|
||||
>
|
||||
{languages.map((l) => (
|
||||
<option key={l} value={l}>
|
||||
{getLanguageName(l)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{canEdit && (
|
||||
<div className="flex gap-2">
|
||||
@@ -106,170 +136,180 @@ export default function MelodyDetail() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Melody Information */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Melody Information
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Type">
|
||||
<span className="capitalize">{melody.type}</span>
|
||||
</Field>
|
||||
<Field label="Tone">
|
||||
<span className="capitalize">{info.melodyTone}</span>
|
||||
</Field>
|
||||
<Field label="Total Notes">{info.totalNotes}</Field>
|
||||
<Field label="Steps">{info.steps}</Field>
|
||||
<Field label="Min Speed">{info.minSpeed}</Field>
|
||||
<Field label="Max Speed">{info.maxSpeed}</Field>
|
||||
<Field label="Color">
|
||||
{info.color ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span
|
||||
className="w-4 h-4 rounded border border-gray-300 inline-block"
|
||||
style={{ backgroundColor: info.color.startsWith("0x") ? `#${info.color.slice(4)}` : info.color }}
|
||||
/>
|
||||
{info.color}
|
||||
</span>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Field>
|
||||
<Field label="True Ring">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
info.isTrueRing
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{info.isTrueRing ? "Yes" : "No"}
|
||||
</span>
|
||||
</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Description">{info.description}</Field>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Notes">
|
||||
{info.notes?.length > 0 ? info.notes.join(", ") : "-"}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Custom Tags">
|
||||
{info.customTags?.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{info.customTags.map((tag) => (
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
{/* Left column */}
|
||||
<div className="space-y-6">
|
||||
{/* Melody Information */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Melody Information
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Type">
|
||||
<span className="capitalize">{melody.type}</span>
|
||||
</Field>
|
||||
<Field label="Tone">
|
||||
<span className="capitalize">{info.melodyTone}</span>
|
||||
</Field>
|
||||
<Field label="Total Active Notes (bells)">{info.totalNotes}</Field>
|
||||
<Field label="Steps">{info.steps}</Field>
|
||||
<Field label="Min Speed">{info.minSpeed}</Field>
|
||||
<Field label="Max Speed">{info.maxSpeed}</Field>
|
||||
<Field label="Color">
|
||||
{info.color ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{/* Default Settings */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Default Settings
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Speed">{settings.speed}</Field>
|
||||
<Field label="Duration">{settings.duration}</Field>
|
||||
<Field label="Total Run Duration">{settings.totalRunDuration}</Field>
|
||||
<Field label="Pause Duration">{settings.pauseDuration}</Field>
|
||||
<Field label="Infinite Loop">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
settings.infiniteLoop
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{settings.infiniteLoop ? "Yes" : "No"}
|
||||
</span>
|
||||
</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Echo Ring">
|
||||
{settings.echoRing?.length > 0
|
||||
? settings.echoRing.join(", ")
|
||||
: "-"}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Note Assignments">
|
||||
{settings.noteAssignments?.length > 0
|
||||
? settings.noteAssignments.join(", ")
|
||||
: "-"}
|
||||
</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{/* Identifiers */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Identifiers
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Document ID">{melody.id}</Field>
|
||||
<Field label="UID">{melody.uid}</Field>
|
||||
<Field label="PID">{melody.pid}</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="URL">{melody.url}</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{/* Files */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Files</h2>
|
||||
<dl className="space-y-4">
|
||||
<Field label="Binary File">
|
||||
{files.binary_url ? (
|
||||
<a
|
||||
href={files.binary_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline"
|
||||
>
|
||||
Download binary
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-gray-400">Not uploaded</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Audio Preview">
|
||||
{files.preview_url ? (
|
||||
<div className="space-y-1">
|
||||
<audio controls src={files.preview_url} className="h-8" />
|
||||
<a
|
||||
href={files.preview_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline text-xs"
|
||||
className="w-4 h-4 rounded border border-gray-300 inline-block"
|
||||
style={{ backgroundColor: normalizeColor(info.color) }}
|
||||
/>
|
||||
{info.color}
|
||||
</span>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Field>
|
||||
<Field label="True Ring">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
info.isTrueRing
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
Download preview
|
||||
</a>
|
||||
{info.isTrueRing ? "Yes" : "No"}
|
||||
</span>
|
||||
</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Description">
|
||||
{getLocalizedValue(info.description, displayLang)}
|
||||
</Field>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">Not uploaded</span>
|
||||
)}
|
||||
</Field>
|
||||
</dl>
|
||||
</section>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Notes">
|
||||
{info.notes?.length > 0 ? info.notes.join(", ") : "-"}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Custom Tags">
|
||||
{info.customTags?.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{info.customTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{/* Identifiers */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Identifiers
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Document ID">{melody.id}</Field>
|
||||
<Field label="UID">{melody.uid}</Field>
|
||||
<Field label="PID (Playback ID)">{melody.pid}</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="URL">{melody.url}</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right column */}
|
||||
<div className="space-y-6">
|
||||
{/* Default Settings */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Default Settings
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Speed">{settings.speed}%</Field>
|
||||
<Field label="Duration">{formatDuration(settings.duration)}</Field>
|
||||
<Field label="Total Run Duration">{settings.totalRunDuration}</Field>
|
||||
<Field label="Pause Duration">{settings.pauseDuration}</Field>
|
||||
<Field label="Infinite Loop">
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
settings.infiniteLoop
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{settings.infiniteLoop ? "Yes" : "No"}
|
||||
</span>
|
||||
</Field>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Echo Ring">
|
||||
{settings.echoRing?.length > 0
|
||||
? settings.echoRing.join(", ")
|
||||
: "-"}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-3">
|
||||
<Field label="Note Assignments">
|
||||
{settings.noteAssignments?.length > 0
|
||||
? settings.noteAssignments.join(", ")
|
||||
: "-"}
|
||||
</Field>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{/* Files */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">Files</h2>
|
||||
<dl className="space-y-4">
|
||||
<Field label="Binary File">
|
||||
{files.binary_url ? (
|
||||
<a
|
||||
href={files.binary_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline"
|
||||
>
|
||||
Download binary
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-gray-400">Not uploaded</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Audio Preview">
|
||||
{files.preview_url ? (
|
||||
<div className="space-y-1">
|
||||
<audio controls src={files.preview_url} className="h-8" />
|
||||
<a
|
||||
href={files.preview_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 underline text-xs"
|
||||
>
|
||||
Download preview
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">Not uploaded</span>
|
||||
)}
|
||||
</Field>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
open={showDelete}
|
||||
title="Delete Melody"
|
||||
message={`Are you sure you want to delete "${info.name}"? This will also delete any uploaded files. This action cannot be undone.`}
|
||||
message={`Are you sure you want to delete "${displayName}"? This will also delete any uploaded files. This action cannot be undone.`}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setShowDelete(false)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user