Jannik/Quizalarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add per-set color picker and Wettkampf countdown timer with auto-submit

Browse Source
This commit is contained in:
Jannik
2026-04-26 11:53:11 +02:00
parent 5980aaab41
commit a6fd9d26f8
3 changed files with 150 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/admin.js
+49 -15
View File
@@ -60,21 +60,26 @@ function ConfigPage({ config, setConfig, saveConfig }) {
const [newSetName, setNewSetName] = useState('');
const [newSetTableId, setNewSetTableId] = useState('');
const [newSetWettkampfCount, setNewSetWettkampfCount] = useState('');
const [newSetColor, setNewSetColor] = useState('#d97706');
const [newSetTimer, setNewSetTimer] = useState('');
const [msg, setMsg] = useState('');
const [debugResult, setDebugResult] = useState(null);
const addSet = () => {
if (!newSetName || !newSetTableId) return;
const wkCount = parseInt(newSetWettkampfCount) || null;
const wkTimer = parseInt(newSetTimer) || null;
const updated = {
...config,
sets: [...(config.sets || []), { id: Date.now().toString(36), name: newSetName, tableId: parseInt(newSetTableId), wettkampfCount: wkCount }],
sets: [...(config.sets || []), { id: Date.now().toString(36), name: newSetName, tableId: parseInt(newSetTableId), wettkampfCount: wkCount, color: newSetColor, wettkampfTimer: wkTimer }],
};
setConfig(updated);
saveConfig(updated);
setNewSetName('');
setNewSetTableId('');
setNewSetWettkampfCount('');
setNewSetColor('#d97706');
setNewSetTimer('');
setMsg('Fragenset hinzugefügt!');
setTimeout(() => setMsg(''), 3000);
};
@@ -87,10 +92,20 @@ function ConfigPage({ config, setConfig, saveConfig }) {
const updateSetWettkampfCount = (setId, val) => {
const wkCount = parseInt(val) || null;
const updated = {
...config,
sets: config.sets.map((s) => s.id === setId ? { ...s, wettkampfCount: wkCount } : s),
};
const updated = { ...config, sets: config.sets.map((s) => s.id === setId ? { ...s, wettkampfCount: wkCount } : s) };
setConfig(updated);
saveConfig(updated);
};
const updateSetColor = (setId, val) => {
const updated = { ...config, sets: config.sets.map((s) => s.id === setId ? { ...s, color: val } : s) };
setConfig(updated);
saveConfig(updated);
};
const updateSetTimer = (setId, val) => {
const wkTimer = parseInt(val) || null;
const updated = { ...config, sets: config.sets.map((s) => s.id === setId ? { ...s, wettkampfTimer: wkTimer } : s) };
setConfig(updated);
saveConfig(updated);
};
@@ -119,21 +134,40 @@ function ConfigPage({ config, setConfig, saveConfig }) {
{(config.sets || []).map((s) => (
<div key={s.id} className="py-3 border-b last:border-0">
<div className="flex items-center justify-between">
<div><span className="font-semibold">{s.name}</span> <span className="text-gray-400 text-sm">(Table ID: {s.tableId})</span></div>
<div className="flex items-center gap-2">
<div style={{ backgroundColor: s.color || '#d97706', width: 16, height: 16, borderRadius: 4, flexShrink: 0 }} />
<span className="font-semibold">{s.name}</span>
<span className="text-gray-400 text-sm">(Table ID: {s.tableId})</span>
</div>
<button onClick={() => removeSet(s.id)} className="text-red-500 hover:text-red-700 text-sm">Entfernen</button>
</div>
<div className="flex items-center gap-2 mt-2">
<span className="text-sm text-gray-500">⚔️ Wettkampf-Fragen:</span>
<input className="w-20 p-1 border rounded text-center text-sm focus:border-emerald-500 outline-none" type="number" min="1" placeholder="—" value={s.wettkampfCount || ''} onChange={(e) => updateSetWettkampfCount(s.id, e.target.value)} />
{s.wettkampfCount ? <span className="text-xs text-emerald-600">✓ aktiv</span> : <span className="text-xs text-gray-400">nicht konfiguriert</span>}
<div className="flex flex-wrap items-center gap-3 mt-2">
<div className="flex items-center gap-1">
<span className="text-sm text-gray-500">🎨</span>
<input type="color" value={s.color || '#d97706'} onChange={(e) => updateSetColor(s.id, e.target.value)} className="w-8 h-8 border rounded cursor-pointer" style={{ padding: 0 }} />
</div>
<div className="flex items-center gap-1">
<span className="text-sm text-gray-500">⚔️ Fragen:</span>
<input className="w-16 p-1 border rounded text-center text-sm focus:border-emerald-500 outline-none" type="number" min="1" placeholder="—" value={s.wettkampfCount || ''} onChange={(e) => updateSetWettkampfCount(s.id, e.target.value)} />
</div>
<div className="flex items-center gap-1">
<span className="text-sm text-gray-500">⏱ Timer (Min):</span>
<input className="w-16 p-1 border rounded text-center text-sm focus:border-emerald-500 outline-none" type="number" min="1" placeholder="—" value={s.wettkampfTimer || ''} onChange={(e) => updateSetTimer(s.id, e.target.value)} />
</div>
</div>
</div>
))}
<div className="mt-4 flex gap-2 flex-wrap">
<input className="flex-1 min-w-0 p-2 border rounded-lg focus:border-red-500 outline-none" placeholder="Name" value={newSetName} onChange={(e) => setNewSetName(e.target.value)} />
<input className="w-28 p-2 border rounded-lg focus:border-red-500 outline-none" placeholder="Table ID" type="number" value={newSetTableId} onChange={(e) => setNewSetTableId(e.target.value)} />
<input className="w-20 p-2 border rounded-lg focus:border-emerald-500 outline-none" placeholder="⚔️ Anz." type="number" min="1" value={newSetWettkampfCount} onChange={(e) => setNewSetWettkampfCount(e.target.value)} />
<button onClick={addSet} className="px-4 py-2 bg-red-600 text-white rounded-lg font-bold hover:bg-red-700">+</button>
<div className="mt-4 space-y-2">
<div className="flex gap-2 flex-wrap">
<input className="flex-1 min-w-0 p-2 border rounded-lg focus:border-red-500 outline-none" placeholder="Name" value={newSetName} onChange={(e) => setNewSetName(e.target.value)} />
<input className="w-24 p-2 border rounded-lg focus:border-red-500 outline-none" placeholder="Table ID" type="number" value={newSetTableId} onChange={(e) => setNewSetTableId(e.target.value)} />
<input type="color" value={newSetColor} onChange={(e) => setNewSetColor(e.target.value)} className="w-10 h-10 border rounded cursor-pointer" style={{ padding: 0 }} />
</div>
<div className="flex gap-2 flex-wrap">
<input className="w-24 p-2 border rounded-lg focus:border-emerald-500 outline-none" placeholder="⚔️ Anz." type="number" min="1" value={newSetWettkampfCount} onChange={(e) => setNewSetWettkampfCount(e.target.value)} />
<input className="w-28 p-2 border rounded-lg focus:border-emerald-500 outline-none" placeholder="⏱ Timer (Min)" type="number" min="1" value={newSetTimer} onChange={(e) => setNewSetTimer(e.target.value)} />
<button onClick={addSet} className="px-4 py-2 bg-red-600 text-white rounded-lg font-bold hover:bg-red-700">+ Hinzufügen</button>
</div>
</div>
{msg && <p className="text-green-600 text-sm mt-2">{msg}</p>}
</div>