Phase 2 UI Adjustments/Edits by bonamin
This commit is contained in:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user