699 lines
28 KiB
React
699 lines
28 KiB
React
|
import { useState, useEffect } from 'react'
|
||
|
|
import { api } from '../utils/api'
|
||
|
|
|
||
|
|
export default function AdminCatalogsPage() {
|
||
|
|
const [activeTab, setActiveTab] = useState('focus-areas')
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
|
||
|
|
// Focus Areas
|
||
|
|
const [focusAreas, setFocusAreas] = useState([])
|
||
|
|
const [editingFA, setEditingFA] = useState(null)
|
||
|
|
const [newFA, setNewFA] = useState({ name: '', description: '', color: '#1D9E75', icon: '' })
|
||
|
|
|
||
|
|
// Training Styles
|
||
|
|
const [trainingStyles, setTrainingStyles] = useState([])
|
||
|
|
const [editingTS, setEditingTS] = useState(null)
|
||
|
|
const [newTS, setNewTS] = useState({ name: '', description: '', parent_style_id: null })
|
||
|
|
|
||
|
|
// Training Characters
|
||
|
|
const [trainingCharacters, setTrainingCharacters] = useState([])
|
||
|
|
const [editingTC, setEditingTC] = useState(null)
|
||
|
|
const [newTC, setNewTC] = useState({ name: '', description: '' })
|
||
|
|
|
||
|
|
// Skill Categories
|
||
|
|
const [skillCategories, setSkillCategories] = useState([])
|
||
|
|
const [editingSC, setEditingSC] = useState(null)
|
||
|
|
const [newSC, setNewSC] = useState({ name: '', description: '', parent_category_id: null })
|
||
|
|
|
||
|
|
// Trainer Focus Areas
|
||
|
|
const [trainerAssignments, setTrainerAssignments] = useState([])
|
||
|
|
const [profiles, setProfiles] = useState([])
|
||
|
|
const [newAssignment, setNewAssignment] = useState({ profile_id: '', focus_area_id: '' })
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
loadData()
|
||
|
|
}, [activeTab])
|
||
|
|
|
||
|
|
async function loadData() {
|
||
|
|
setLoading(true)
|
||
|
|
setError('')
|
||
|
|
try {
|
||
|
|
if (activeTab === 'focus-areas') {
|
||
|
|
const data = await api.listFocusAreas()
|
||
|
|
setFocusAreas(data)
|
||
|
|
} else if (activeTab === 'training-styles') {
|
||
|
|
const data = await api.listTrainingStyles()
|
||
|
|
setTrainingStyles(data)
|
||
|
|
} else if (activeTab === 'training-characters') {
|
||
|
|
const data = await api.listTrainingCharacters()
|
||
|
|
setTrainingCharacters(data)
|
||
|
|
} else if (activeTab === 'skill-categories') {
|
||
|
|
const data = await api.listSkillCategories()
|
||
|
|
setSkillCategories(data)
|
||
|
|
} else if (activeTab === 'trainer-assignments') {
|
||
|
|
const [assignments, profs, areas] = await Promise.all([
|
||
|
|
api.listTrainerFocusAreas(),
|
||
|
|
fetch('/api/profiles').then(r => r.json()),
|
||
|
|
api.listFocusAreas()
|
||
|
|
])
|
||
|
|
setTrainerAssignments(assignments)
|
||
|
|
setProfiles(profs)
|
||
|
|
setFocusAreas(areas)
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Focus Areas
|
||
|
|
async function createFocusArea() {
|
||
|
|
try {
|
||
|
|
await api.createFocusArea(newFA)
|
||
|
|
setNewFA({ name: '', description: '', color: '#1D9E75', icon: '' })
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateFocusArea(id, data) {
|
||
|
|
try {
|
||
|
|
await api.updateFocusArea(id, data)
|
||
|
|
setEditingFA(null)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function deleteFocusArea(id) {
|
||
|
|
if (!confirm('Fokusbereich wirklich löschen?')) return
|
||
|
|
try {
|
||
|
|
await api.deleteFocusArea(id)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Training Styles
|
||
|
|
async function createTrainingStyle() {
|
||
|
|
try {
|
||
|
|
await api.createTrainingStyle(newTS)
|
||
|
|
setNewTS({ name: '', description: '', parent_style_id: null })
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateTrainingStyle(id, data) {
|
||
|
|
try {
|
||
|
|
await api.updateTrainingStyle(id, data)
|
||
|
|
setEditingTS(null)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function deleteTrainingStyle(id) {
|
||
|
|
if (!confirm('Trainingsstil wirklich löschen?')) return
|
||
|
|
try {
|
||
|
|
await api.deleteTrainingStyle(id)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Training Characters
|
||
|
|
async function createTrainingCharacter() {
|
||
|
|
try {
|
||
|
|
await api.createTrainingCharacter(newTC)
|
||
|
|
setNewTC({ name: '', description: '' })
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateTrainingCharacter(id, data) {
|
||
|
|
try {
|
||
|
|
await api.updateTrainingCharacter(id, data)
|
||
|
|
setEditingTC(null)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function deleteTrainingCharacter(id) {
|
||
|
|
if (!confirm('Trainingscharakter wirklich löschen?')) return
|
||
|
|
try {
|
||
|
|
await api.deleteTrainingCharacter(id)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Skill Categories
|
||
|
|
async function createSkillCategory() {
|
||
|
|
try {
|
||
|
|
await api.createSkillCategory(newSC)
|
||
|
|
setNewSC({ name: '', description: '', parent_category_id: null })
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateSkillCategory(id, data) {
|
||
|
|
try {
|
||
|
|
await api.updateSkillCategory(id, data)
|
||
|
|
setEditingSC(null)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function deleteSkillCategory(id) {
|
||
|
|
if (!confirm('Fähigkeitskategorie wirklich löschen?')) return
|
||
|
|
try {
|
||
|
|
await api.deleteSkillCategory(id)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Trainer Assignments
|
||
|
|
async function assignTrainer() {
|
||
|
|
try {
|
||
|
|
await api.assignTrainerFocusArea(newAssignment)
|
||
|
|
setNewAssignment({ profile_id: '', focus_area_id: '' })
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function removeAssignment(id) {
|
||
|
|
if (!confirm('Zuordnung wirklich entfernen?')) return
|
||
|
|
try {
|
||
|
|
await api.deleteTrainerFocusArea(id)
|
||
|
|
loadData()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ padding: '16px', maxWidth: '1200px', margin: '0 auto' }}>
|
||
|
|
<h1 style={{ marginBottom: '24px' }}>Stammdaten-Kataloge</h1>
|
||
|
|
|
||
|
|
{/* Tabs */}
|
||
|
|
<div style={{ display: 'flex', gap: '8px', borderBottom: '2px solid var(--border)', marginBottom: '24px', overflowX: 'auto' }}>
|
||
|
|
{[
|
||
|
|
{ id: 'focus-areas', label: 'Fokusbereiche' },
|
||
|
|
{ id: 'training-styles', label: 'Trainingsstile' },
|
||
|
|
{ id: 'training-characters', label: 'Trainingscharakter' },
|
||
|
|
{ id: 'skill-categories', label: 'Fähigkeitskategorien' },
|
||
|
|
{ id: 'trainer-assignments', label: 'Trainer-Zuordnungen' }
|
||
|
|
].map(tab => (
|
||
|
|
<button
|
||
|
|
key={tab.id}
|
||
|
|
onClick={() => setActiveTab(tab.id)}
|
||
|
|
className="btn"
|
||
|
|
style={{
|
||
|
|
borderBottom: activeTab === tab.id ? '3px solid var(--accent)' : 'none',
|
||
|
|
borderRadius: 0,
|
||
|
|
fontWeight: activeTab === tab.id ? 600 : 400,
|
||
|
|
color: activeTab === tab.id ? 'var(--accent)' : 'var(--text2)',
|
||
|
|
padding: '12px 16px',
|
||
|
|
whiteSpace: 'nowrap'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{tab.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{error && (
|
||
|
|
<div style={{ padding: '12px', background: 'var(--danger)', color: 'white', borderRadius: '8px', marginBottom: '16px' }}>
|
||
|
|
{error}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{loading ? (
|
||
|
|
<div className="spinner" />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{/* Focus Areas */}
|
||
|
|
{activeTab === 'focus-areas' && (
|
||
|
|
<div>
|
||
|
|
<div className="card" style={{ marginBottom: '24px' }}>
|
||
|
|
<h3>Neuer Fokusbereich</h3>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={newFA.name}
|
||
|
|
onChange={e => setNewFA({ ...newFA, name: e.target.value })}
|
||
|
|
placeholder="z.B. Karate"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<textarea
|
||
|
|
className="form-input"
|
||
|
|
value={newFA.description}
|
||
|
|
onChange={e => setNewFA({ ...newFA, description: e.target.value })}
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Farbe</label>
|
||
|
|
<input
|
||
|
|
type="color"
|
||
|
|
className="form-input"
|
||
|
|
value={newFA.color}
|
||
|
|
onChange={e => setNewFA({ ...newFA, color: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Icon</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={newFA.icon}
|
||
|
|
onChange={e => setNewFA({ ...newFA, icon: e.target.value })}
|
||
|
|
placeholder="z.B. 🥋"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<button className="btn btn-primary" onClick={createFocusArea}>Anlegen</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'grid', gap: '16px' }}>
|
||
|
|
{focusAreas.map(fa => (
|
||
|
|
<div key={fa.id} className="card">
|
||
|
|
{editingFA?.id === fa.id ? (
|
||
|
|
<div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={editingFA.name}
|
||
|
|
onChange={e => setEditingFA({ ...editingFA, name: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<textarea
|
||
|
|
className="form-input"
|
||
|
|
value={editingFA.description || ''}
|
||
|
|
onChange={e => setEditingFA({ ...editingFA, description: e.target.value })}
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Farbe</label>
|
||
|
|
<input
|
||
|
|
type="color"
|
||
|
|
className="form-input"
|
||
|
|
value={editingFA.color}
|
||
|
|
onChange={e => setEditingFA({ ...editingFA, color: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Icon</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={editingFA.icon || ''}
|
||
|
|
onChange={e => setEditingFA({ ...editingFA, icon: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||
|
|
<button className="btn btn-primary" onClick={() => updateFocusArea(fa.id, editingFA)}>Speichern</button>
|
||
|
|
<button className="btn" onClick={() => setEditingFA(null)}>Abbrechen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '8px' }}>
|
||
|
|
<span style={{ fontSize: '24px' }}>{fa.icon}</span>
|
||
|
|
<div style={{ flex: 1 }}>
|
||
|
|
<h3 style={{ margin: 0 }}>{fa.name}</h3>
|
||
|
|
<p style={{ margin: '4px 0 0', color: 'var(--text2)', fontSize: '14px' }}>{fa.description}</p>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: '32px',
|
||
|
|
height: '32px',
|
||
|
|
borderRadius: '4px',
|
||
|
|
background: fa.color
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||
|
|
<button className="btn" onClick={() => setEditingFA(fa)}>Bearbeiten</button>
|
||
|
|
<button className="btn" onClick={() => deleteFocusArea(fa.id)}>Löschen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Training Styles */}
|
||
|
|
{activeTab === 'training-styles' && (
|
||
|
|
<div>
|
||
|
|
<div className="card" style={{ marginBottom: '24px' }}>
|
||
|
|
<h3>Neuer Trainingsstil</h3>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={newTS.name}
|
||
|
|
onChange={e => setNewTS({ ...newTS, name: e.target.value })}
|
||
|
|
placeholder="z.B. Shotokan"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<textarea
|
||
|
|
className="form-input"
|
||
|
|
value={newTS.description}
|
||
|
|
onChange={e => setNewTS({ ...newTS, description: e.target.value })}
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Übergeordneter Stil (optional)</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={newTS.parent_style_id || ''}
|
||
|
|
onChange={e => setNewTS({ ...newTS, parent_style_id: e.target.value ? parseInt(e.target.value) : null })}
|
||
|
|
>
|
||
|
|
<option value="">- Kein -</option>
|
||
|
|
{trainingStyles.map(ts => (
|
||
|
|
<option key={ts.id} value={ts.id}>{ts.name}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button className="btn btn-primary" onClick={createTrainingStyle}>Anlegen</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'grid', gap: '16px' }}>
|
||
|
|
{trainingStyles.map(ts => (
|
||
|
|
<div key={ts.id} className="card">
|
||
|
|
{editingTS?.id === ts.id ? (
|
||
|
|
<div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={editingTS.name}
|
||
|
|
onChange={e => setEditingTS({ ...editingTS, name: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<textarea
|
||
|
|
className="form-input"
|
||
|
|
value={editingTS.description || ''}
|
||
|
|
onChange={e => setEditingTS({ ...editingTS, description: e.target.value })}
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Übergeordneter Stil</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={editingTS.parent_style_id || ''}
|
||
|
|
onChange={e => setEditingTS({ ...editingTS, parent_style_id: e.target.value ? parseInt(e.target.value) : null })}
|
||
|
|
>
|
||
|
|
<option value="">- Kein -</option>
|
||
|
|
{trainingStyles.filter(x => x.id !== ts.id).map(x => (
|
||
|
|
<option key={x.id} value={x.id}>{x.name}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||
|
|
<button className="btn btn-primary" onClick={() => updateTrainingStyle(ts.id, editingTS)}>Speichern</button>
|
||
|
|
<button className="btn" onClick={() => setEditingTS(null)}>Abbrechen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div>
|
||
|
|
<h3>{ts.name}</h3>
|
||
|
|
{ts.parent_style_name && (
|
||
|
|
<p style={{ margin: '4px 0', color: 'var(--text2)', fontSize: '14px' }}>
|
||
|
|
→ {ts.parent_style_name}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
<p style={{ margin: '8px 0', color: 'var(--text2)' }}>{ts.description}</p>
|
||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||
|
|
<button className="btn" onClick={() => setEditingTS(ts)}>Bearbeiten</button>
|
||
|
|
<button className="btn" onClick={() => deleteTrainingStyle(ts.id)}>Löschen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Training Characters */}
|
||
|
|
{activeTab === 'training-characters' && (
|
||
|
|
<div>
|
||
|
|
<div className="card" style={{ marginBottom: '24px' }}>
|
||
|
|
<h3>Neuer Trainingscharakter</h3>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={newTC.name}
|
||
|
|
onChange={e => setNewTC({ ...newTC, name: e.target.value })}
|
||
|
|
placeholder="z.B. Technisch"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<textarea
|
||
|
|
className="form-input"
|
||
|
|
value={newTC.description}
|
||
|
|
onChange={e => setNewTC({ ...newTC, description: e.target.value })}
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<button className="btn btn-primary" onClick={createTrainingCharacter}>Anlegen</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'grid', gap: '16px' }}>
|
||
|
|
{trainingCharacters.map(tc => (
|
||
|
|
<div key={tc.id} className="card">
|
||
|
|
{editingTC?.id === tc.id ? (
|
||
|
|
<div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={editingTC.name}
|
||
|
|
onChange={e => setEditingTC({ ...editingTC, name: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<textarea
|
||
|
|
className="form-input"
|
||
|
|
value={editingTC.description || ''}
|
||
|
|
onChange={e => setEditingTC({ ...editingTC, description: e.target.value })}
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||
|
|
<button className="btn btn-primary" onClick={() => updateTrainingCharacter(tc.id, editingTC)}>Speichern</button>
|
||
|
|
<button className="btn" onClick={() => setEditingTC(null)}>Abbrechen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div>
|
||
|
|
<h3>{tc.name}</h3>
|
||
|
|
<p style={{ margin: '8px 0', color: 'var(--text2)' }}>{tc.description}</p>
|
||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||
|
|
<button className="btn" onClick={() => setEditingTC(tc)}>Bearbeiten</button>
|
||
|
|
<button className="btn" onClick={() => deleteTrainingCharacter(tc.id)}>Löschen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Skill Categories */}
|
||
|
|
{activeTab === 'skill-categories' && (
|
||
|
|
<div>
|
||
|
|
<div className="card" style={{ marginBottom: '24px' }}>
|
||
|
|
<h3>Neue Fähigkeitskategorie</h3>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={newSC.name}
|
||
|
|
onChange={e => setNewSC({ ...newSC, name: e.target.value })}
|
||
|
|
placeholder="z.B. Technik"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<textarea
|
||
|
|
className="form-input"
|
||
|
|
value={newSC.description}
|
||
|
|
onChange={e => setNewSC({ ...newSC, description: e.target.value })}
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Übergeordnete Kategorie (optional)</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={newSC.parent_category_id || ''}
|
||
|
|
onChange={e => setNewSC({ ...newSC, parent_category_id: e.target.value ? parseInt(e.target.value) : null })}
|
||
|
|
>
|
||
|
|
<option value="">- Keine -</option>
|
||
|
|
{skillCategories.map(sc => (
|
||
|
|
<option key={sc.id} value={sc.id}>{sc.name}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button className="btn btn-primary" onClick={createSkillCategory}>Anlegen</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'grid', gap: '16px' }}>
|
||
|
|
{skillCategories.map(sc => (
|
||
|
|
<div key={sc.id} className="card">
|
||
|
|
{editingSC?.id === sc.id ? (
|
||
|
|
<div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={editingSC.name}
|
||
|
|
onChange={e => setEditingSC({ ...editingSC, name: e.target.value })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<textarea
|
||
|
|
className="form-input"
|
||
|
|
value={editingSC.description || ''}
|
||
|
|
onChange={e => setEditingSC({ ...editingSC, description: e.target.value })}
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Übergeordnete Kategorie</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={editingSC.parent_category_id || ''}
|
||
|
|
onChange={e => setEditingSC({ ...editingSC, parent_category_id: e.target.value ? parseInt(e.target.value) : null })}
|
||
|
|
>
|
||
|
|
<option value="">- Keine -</option>
|
||
|
|
{skillCategories.filter(x => x.id !== sc.id).map(x => (
|
||
|
|
<option key={x.id} value={x.id}>{x.name}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||
|
|
<button className="btn btn-primary" onClick={() => updateSkillCategory(sc.id, editingSC)}>Speichern</button>
|
||
|
|
<button className="btn" onClick={() => setEditingSC(null)}>Abbrechen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div>
|
||
|
|
<h3>{sc.name}</h3>
|
||
|
|
{sc.parent_category_name && (
|
||
|
|
<p style={{ margin: '4px 0', color: 'var(--text2)', fontSize: '14px' }}>
|
||
|
|
→ {sc.parent_category_name}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
<p style={{ margin: '8px 0', color: 'var(--text2)' }}>{sc.description}</p>
|
||
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
||
|
|
<button className="btn" onClick={() => setEditingSC(sc)}>Bearbeiten</button>
|
||
|
|
<button className="btn" onClick={() => deleteSkillCategory(sc.id)}>Löschen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Trainer Assignments */}
|
||
|
|
{activeTab === 'trainer-assignments' && (
|
||
|
|
<div>
|
||
|
|
<div className="card" style={{ marginBottom: '24px' }}>
|
||
|
|
<h3>Neue Zuordnung</h3>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Trainer</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={newAssignment.profile_id}
|
||
|
|
onChange={e => setNewAssignment({ ...newAssignment, profile_id: parseInt(e.target.value) })}
|
||
|
|
>
|
||
|
|
<option value="">- Trainer auswählen -</option>
|
||
|
|
{profiles.filter(p => p.role === 'trainer' || p.role === 'admin').map(p => (
|
||
|
|
<option key={p.id} value={p.id}>{p.name} ({p.email})</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Fokusbereich</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={newAssignment.focus_area_id}
|
||
|
|
onChange={e => setNewAssignment({ ...newAssignment, focus_area_id: parseInt(e.target.value) })}
|
||
|
|
>
|
||
|
|
<option value="">- Fokusbereich auswählen -</option>
|
||
|
|
{focusAreas.map(fa => (
|
||
|
|
<option key={fa.id} value={fa.id}>{fa.icon} {fa.name}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button className="btn btn-primary" onClick={assignTrainer}>Zuordnen</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'grid', gap: '16px' }}>
|
||
|
|
{trainerAssignments.map(ta => (
|
||
|
|
<div key={ta.id} className="card">
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
|
|
<div>
|
||
|
|
<h3 style={{ margin: 0 }}>{ta.trainer_name}</h3>
|
||
|
|
<p style={{ margin: '4px 0', color: 'var(--text2)', fontSize: '14px' }}>
|
||
|
|
{ta.focus_area_icon} {ta.focus_area_name}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button className="btn" onClick={() => removeAssignment(ta.id)}>Entfernen</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|