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)}
|
||||
/>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,6 +5,7 @@ import { useAuth } from "../auth/AuthContext";
|
||||
import SearchBar from "../components/SearchBar";
|
||||
import DataTable from "../components/DataTable";
|
||||
import ConfirmDialog from "../components/ConfirmDialog";
|
||||
import { getLocalizedValue, getLanguageName } from "./melodyUtils";
|
||||
|
||||
const MELODY_TYPES = ["", "orthodox", "catholic", "all"];
|
||||
const MELODY_TONES = ["", "normal", "festive", "cheerful", "lamentation"];
|
||||
@@ -17,11 +18,20 @@ export default function MelodyList() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [typeFilter, setTypeFilter] = useState("");
|
||||
const [toneFilter, setToneFilter] = useState("");
|
||||
const [displayLang, setDisplayLang] = useState("en");
|
||||
const [melodySettings, setMelodySettings] = useState(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const { hasRole } = useAuth();
|
||||
const canEdit = hasRole("superadmin", "melody_editor");
|
||||
|
||||
useEffect(() => {
|
||||
api.get("/settings/melody").then((ms) => {
|
||||
setMelodySettings(ms);
|
||||
setDisplayLang(ms.primary_language || "en");
|
||||
});
|
||||
}, []);
|
||||
|
||||
const fetchMelodies = async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
@@ -57,13 +67,17 @@ export default function MelodyList() {
|
||||
}
|
||||
};
|
||||
|
||||
const getDisplayName = (nameDict) => {
|
||||
return getLocalizedValue(nameDict, displayLang, "Untitled");
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
render: (row) => (
|
||||
<span className="font-medium text-gray-900">
|
||||
{row.information?.name || "Untitled"}
|
||||
{getDisplayName(row.information?.name)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
@@ -133,6 +147,8 @@ export default function MelodyList() {
|
||||
: []),
|
||||
];
|
||||
|
||||
const languages = melodySettings?.available_languages || ["en"];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
@@ -152,7 +168,7 @@ export default function MelodyList() {
|
||||
onSearch={setSearch}
|
||||
placeholder="Search by name, description, or tags..."
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => setTypeFilter(e.target.value)}
|
||||
@@ -177,6 +193,19 @@ export default function MelodyList() {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{languages.length > 1 && (
|
||||
<select
|
||||
value={displayLang}
|
||||
onChange={(e) => setDisplayLang(e.target.value)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{languages.map((l) => (
|
||||
<option key={l} value={l}>
|
||||
{getLanguageName(l)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<span className="flex items-center text-sm text-gray-500">
|
||||
{total} {total === 1 ? "melody" : "melodies"}
|
||||
</span>
|
||||
@@ -203,7 +232,7 @@ export default function MelodyList() {
|
||||
<ConfirmDialog
|
||||
open={!!deleteTarget}
|
||||
title="Delete Melody"
|
||||
message={`Are you sure you want to delete "${deleteTarget?.information?.name}"? This will also delete any uploaded files.`}
|
||||
message={`Are you sure you want to delete "${getDisplayName(deleteTarget?.information?.name)}"? This will also delete any uploaded files.`}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setDeleteTarget(null)}
|
||||
/>
|
||||
|
||||
341
frontend/src/melodies/MelodySettings.jsx
Normal file
341
frontend/src/melodies/MelodySettings.jsx
Normal file
@@ -0,0 +1,341 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import api from "../api/client";
|
||||
import {
|
||||
LANGUAGE_MASTER_LIST,
|
||||
getLanguageName,
|
||||
formatDuration,
|
||||
normalizeColor,
|
||||
} from "./melodyUtils";
|
||||
|
||||
export default function MelodySettings() {
|
||||
const [settings, setSettings] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState("");
|
||||
|
||||
// Add language state
|
||||
const [langToAdd, setLangToAdd] = useState("");
|
||||
|
||||
// Add color state
|
||||
const [colorToAdd, setColorToAdd] = useState("#FF0000");
|
||||
const [colorHexInput, setColorHexInput] = useState("#FF0000");
|
||||
|
||||
// Add duration state
|
||||
const [durationToAdd, setDurationToAdd] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
loadSettings();
|
||||
}, []);
|
||||
|
||||
const loadSettings = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await api.get("/settings/melody");
|
||||
setSettings(data);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const saveSettings = async (updated) => {
|
||||
setSaving(true);
|
||||
setError("");
|
||||
setSuccess("");
|
||||
try {
|
||||
const result = await api.put("/settings/melody", updated);
|
||||
setSettings(result);
|
||||
setSuccess("Settings saved.");
|
||||
setTimeout(() => setSuccess(""), 2000);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const addLanguage = () => {
|
||||
if (!langToAdd || settings.available_languages.includes(langToAdd)) return;
|
||||
const updated = {
|
||||
...settings,
|
||||
available_languages: [...settings.available_languages, langToAdd],
|
||||
};
|
||||
setLangToAdd("");
|
||||
saveSettings(updated);
|
||||
};
|
||||
|
||||
const removeLanguage = (code) => {
|
||||
if (settings.available_languages.length <= 1) return;
|
||||
const updated = {
|
||||
...settings,
|
||||
available_languages: settings.available_languages.filter((c) => c !== code),
|
||||
primary_language:
|
||||
settings.primary_language === code
|
||||
? settings.available_languages.find((c) => c !== code)
|
||||
: settings.primary_language,
|
||||
};
|
||||
saveSettings(updated);
|
||||
};
|
||||
|
||||
const setPrimaryLanguage = (code) => {
|
||||
saveSettings({ ...settings, primary_language: code });
|
||||
};
|
||||
|
||||
const addColor = () => {
|
||||
const color = colorHexInput.startsWith("#") ? colorHexInput : `#${colorHexInput}`;
|
||||
if (!/^#[0-9A-Fa-f]{6}$/.test(color)) return;
|
||||
if (settings.quick_colors.includes(color)) return;
|
||||
const updated = {
|
||||
...settings,
|
||||
quick_colors: [...settings.quick_colors, color],
|
||||
};
|
||||
saveSettings(updated);
|
||||
};
|
||||
|
||||
const removeColor = (color) => {
|
||||
const updated = {
|
||||
...settings,
|
||||
quick_colors: settings.quick_colors.filter((c) => c !== color),
|
||||
};
|
||||
saveSettings(updated);
|
||||
};
|
||||
|
||||
const addDuration = () => {
|
||||
const val = parseInt(durationToAdd, 10);
|
||||
if (isNaN(val) || val < 0) return;
|
||||
if (settings.duration_values.includes(val)) return;
|
||||
const updated = {
|
||||
...settings,
|
||||
duration_values: [...settings.duration_values, val].sort((a, b) => a - b),
|
||||
};
|
||||
setDurationToAdd("");
|
||||
saveSettings(updated);
|
||||
};
|
||||
|
||||
const removeDuration = (val) => {
|
||||
const updated = {
|
||||
...settings,
|
||||
duration_values: settings.duration_values.filter((v) => v !== val),
|
||||
};
|
||||
saveSettings(updated);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-8 text-gray-500">Loading...</div>;
|
||||
}
|
||||
|
||||
if (!settings) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
|
||||
{error || "Failed to load settings."}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const availableLangsToAdd = LANGUAGE_MASTER_LIST.filter(
|
||||
(l) => !settings.available_languages.includes(l.code)
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Melody Settings</h1>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="bg-green-50 border border-green-200 text-green-700 text-sm rounded-md p-3 mb-4">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
{/* --- Languages Section --- */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Available Languages
|
||||
</h2>
|
||||
<div className="space-y-2 mb-4">
|
||||
{settings.available_languages.map((code) => (
|
||||
<div
|
||||
key={code}
|
||||
className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-md"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-mono text-gray-500 uppercase w-8">
|
||||
{code}
|
||||
</span>
|
||||
<span className="text-sm text-gray-900">
|
||||
{getLanguageName(code)}
|
||||
</span>
|
||||
{settings.primary_language === code && (
|
||||
<span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
|
||||
Primary
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{settings.primary_language !== code && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPrimaryLanguage(code)}
|
||||
className="text-xs text-blue-600 hover:text-blue-800"
|
||||
disabled={saving}
|
||||
>
|
||||
Set Primary
|
||||
</button>
|
||||
)}
|
||||
{settings.available_languages.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeLanguage(code)}
|
||||
className="text-xs text-red-600 hover:text-red-800"
|
||||
disabled={saving}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={langToAdd}
|
||||
onChange={(e) => setLangToAdd(e.target.value)}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select language...</option>
|
||||
{availableLangsToAdd.map((l) => (
|
||||
<option key={l.code} value={l.code}>
|
||||
{l.name} ({l.code})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addLanguage}
|
||||
disabled={!langToAdd || saving}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- Quick Colors Section --- */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Quick Selection Colors
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-3 mb-4">
|
||||
{settings.quick_colors.map((color) => (
|
||||
<div key={color} className="relative group">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg border-2 border-gray-200 shadow-sm cursor-default"
|
||||
style={{ backgroundColor: normalizeColor(color) }}
|
||||
title={color}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeColor(color)}
|
||||
disabled={saving}
|
||||
className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={colorToAdd}
|
||||
onChange={(e) => {
|
||||
setColorToAdd(e.target.value);
|
||||
setColorHexInput(e.target.value);
|
||||
}}
|
||||
className="w-10 h-10 rounded cursor-pointer border border-gray-300"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={colorHexInput}
|
||||
onChange={(e) => {
|
||||
setColorHexInput(e.target.value);
|
||||
if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) {
|
||||
setColorToAdd(e.target.value);
|
||||
}
|
||||
}}
|
||||
placeholder="#FF0000"
|
||||
className="w-28 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addColor}
|
||||
disabled={saving}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* --- Duration Presets Section --- */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6 xl:col-span-2">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
Duration Presets (seconds)
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{settings.duration_values.map((val) => (
|
||||
<div
|
||||
key={val}
|
||||
className="group flex items-center gap-1 px-3 py-1.5 bg-gray-50 border border-gray-200 rounded-full"
|
||||
>
|
||||
<span className="text-sm text-gray-900">
|
||||
{formatDuration(val)}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 ml-1">({val}s)</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeDuration(val)}
|
||||
disabled={saving}
|
||||
className="ml-1 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity text-xs"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={durationToAdd}
|
||||
onChange={(e) => setDurationToAdd(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addDuration();
|
||||
}
|
||||
}}
|
||||
placeholder="Seconds (e.g. 45)"
|
||||
className="w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addDuration}
|
||||
disabled={saving || !durationToAdd}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
98
frontend/src/melodies/TranslationModal.jsx
Normal file
98
frontend/src/melodies/TranslationModal.jsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { getLanguageName } from "./melodyUtils";
|
||||
|
||||
/**
|
||||
* Modal for editing translations of a field (Name or Description).
|
||||
* Props:
|
||||
* open - boolean
|
||||
* onClose - function
|
||||
* field - string label ("Name" or "Description")
|
||||
* value - dict { lang_code: text }
|
||||
* onChange - function(updatedDict)
|
||||
* languages - array of lang codes ["en", "el", "sr"]
|
||||
* multiline - boolean (use textarea instead of input)
|
||||
*/
|
||||
export default function TranslationModal({
|
||||
open,
|
||||
onClose,
|
||||
field,
|
||||
value,
|
||||
onChange,
|
||||
languages,
|
||||
multiline = false,
|
||||
}) {
|
||||
const [draft, setDraft] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setDraft({ ...value });
|
||||
}
|
||||
}, [open, value]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const updateDraft = (lang, text) => {
|
||||
setDraft((prev) => ({ ...prev, [lang]: text }));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
onChange(draft);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
|
||||
<div className="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Translations — {field}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{languages.map((lang) => (
|
||||
<div key={lang}>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{getLanguageName(lang)}{" "}
|
||||
<span className="text-gray-400 font-mono text-xs uppercase">
|
||||
({lang})
|
||||
</span>
|
||||
</label>
|
||||
{multiline ? (
|
||||
<textarea
|
||||
value={draft[lang] || ""}
|
||||
onChange={(e) => updateDraft(lang, e.target.value)}
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
value={draft[lang] || ""}
|
||||
onChange={(e) => updateDraft(lang, e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-md hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Save Translations
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
81
frontend/src/melodies/melodyUtils.js
Normal file
81
frontend/src/melodies/melodyUtils.js
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Format duration in seconds to human-readable string.
|
||||
* 0 → "Single Run", 45 → "0:45", 75 → "1:15", 300 → "5:00"
|
||||
*/
|
||||
export function formatDuration(seconds) {
|
||||
if (seconds === 0) return "Single Run";
|
||||
const min = Math.floor(seconds / 60);
|
||||
const sec = seconds % 60;
|
||||
return `${min}:${sec.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a localized value from a dict, with fallback chain:
|
||||
* selected lang → "en" → first available value → fallback
|
||||
*/
|
||||
export function getLocalizedValue(dict, lang, fallback = "") {
|
||||
if (!dict || typeof dict !== "object") return fallback;
|
||||
return dict[lang] || dict["en"] || Object.values(dict)[0] || fallback;
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize color string for HTML color input.
|
||||
* Converts "0xFFRRGGBB" or "0xRRGGBB" format to "#RRGGBB".
|
||||
*/
|
||||
export function normalizeColor(val) {
|
||||
if (!val) return "#000000";
|
||||
if (val.startsWith("0x") || val.startsWith("0X")) {
|
||||
const hex = val.slice(2);
|
||||
// If 8 chars (AARRGGBB), skip alpha
|
||||
return `#${hex.length === 8 ? hex.slice(2) : hex}`;
|
||||
}
|
||||
if (val.startsWith("#")) return val;
|
||||
return `#${val}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Master list of common ISO 639-1 language codes.
|
||||
*/
|
||||
export const LANGUAGE_MASTER_LIST = [
|
||||
{ code: "en", name: "English" },
|
||||
{ code: "el", name: "Greek" },
|
||||
{ code: "sr", name: "Serbian" },
|
||||
{ code: "bg", name: "Bulgarian" },
|
||||
{ code: "ro", name: "Romanian" },
|
||||
{ code: "ru", name: "Russian" },
|
||||
{ code: "uk", name: "Ukrainian" },
|
||||
{ code: "ka", name: "Georgian" },
|
||||
{ code: "ar", name: "Arabic" },
|
||||
{ code: "de", name: "German" },
|
||||
{ code: "fr", name: "French" },
|
||||
{ code: "es", name: "Spanish" },
|
||||
{ code: "it", name: "Italian" },
|
||||
{ code: "pt", name: "Portuguese" },
|
||||
{ code: "nl", name: "Dutch" },
|
||||
{ code: "pl", name: "Polish" },
|
||||
{ code: "cs", name: "Czech" },
|
||||
{ code: "sk", name: "Slovak" },
|
||||
{ code: "hu", name: "Hungarian" },
|
||||
{ code: "hr", name: "Croatian" },
|
||||
{ code: "sl", name: "Slovenian" },
|
||||
{ code: "mk", name: "Macedonian" },
|
||||
{ code: "sq", name: "Albanian" },
|
||||
{ code: "tr", name: "Turkish" },
|
||||
{ code: "ja", name: "Japanese" },
|
||||
{ code: "zh", name: "Chinese" },
|
||||
{ code: "ko", name: "Korean" },
|
||||
{ code: "hi", name: "Hindi" },
|
||||
{ code: "he", name: "Hebrew" },
|
||||
{ code: "fi", name: "Finnish" },
|
||||
{ code: "sv", name: "Swedish" },
|
||||
{ code: "da", name: "Danish" },
|
||||
{ code: "no", name: "Norwegian" },
|
||||
];
|
||||
|
||||
/**
|
||||
* Get display name for a language code.
|
||||
*/
|
||||
export function getLanguageName(code) {
|
||||
const lang = LANGUAGE_MASTER_LIST.find((l) => l.code === code);
|
||||
return lang ? lang.name : code.toUpperCase();
|
||||
}
|
||||
Reference in New Issue
Block a user