Goalsystem V1 #50
|
|
@ -440,120 +440,213 @@ export default function GoalsPage() {
|
|||
bottom: 0,
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1000,
|
||||
padding: 16
|
||||
padding: 16,
|
||||
paddingTop: 40,
|
||||
overflowY: 'auto'
|
||||
}}>
|
||||
<div className="card" style={{
|
||||
maxWidth: 500,
|
||||
width: '100%',
|
||||
maxHeight: '90vh',
|
||||
overflow: 'auto'
|
||||
marginBottom: 40
|
||||
}}>
|
||||
<h2 style={{ marginTop: 0 }}>
|
||||
<div className="card-title">
|
||||
{editingGoal ? 'Ziel bearbeiten' : 'Neues Ziel'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div>
|
||||
<label className="form-label">Zieltyp</label>
|
||||
<select
|
||||
className="form-input"
|
||||
value={formData.goal_type}
|
||||
onChange={e => handleGoalTypeChange(e.target.value)}
|
||||
>
|
||||
{Object.entries(GOAL_TYPES).map(([key, info]) => (
|
||||
<option key={key} value={key}>
|
||||
{info.icon} {info.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{error && (
|
||||
<div style={{
|
||||
padding: 10,
|
||||
background: '#FCEBEB',
|
||||
border: '1px solid #D85A30',
|
||||
borderRadius: 8,
|
||||
fontSize: 13,
|
||||
color: '#D85A30',
|
||||
marginBottom: 16
|
||||
}}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="form-label">Name (optional)</label>
|
||||
{/* Zieltyp */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
marginBottom: 4,
|
||||
color: 'var(--text2)'
|
||||
}}>
|
||||
Zieltyp
|
||||
</label>
|
||||
<select
|
||||
className="form-input"
|
||||
style={{ width: '100%' }}
|
||||
value={formData.goal_type}
|
||||
onChange={e => handleGoalTypeChange(e.target.value)}
|
||||
>
|
||||
{Object.entries(GOAL_TYPES).map(([key, info]) => (
|
||||
<option key={key} value={key}>
|
||||
{info.icon} {info.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
marginBottom: 4,
|
||||
color: 'var(--text2)'
|
||||
}}>
|
||||
Name (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-input"
|
||||
style={{ width: '100%' }}
|
||||
value={formData.name}
|
||||
onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
|
||||
placeholder="z.B. Sommerfigur 2026"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Zielwert */}
|
||||
<div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8, marginTop: 20, color: 'var(--text1)' }}>
|
||||
🎯 Zielwert
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
marginBottom: 4,
|
||||
color: 'var(--text2)'
|
||||
}}>
|
||||
Wert *
|
||||
</label>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<input
|
||||
type="text"
|
||||
type="number"
|
||||
step="0.01"
|
||||
className="form-input"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
|
||||
placeholder="z.B. Sommerfigur 2026"
|
||||
style={{ flex: 1 }}
|
||||
value={formData.target_value}
|
||||
onChange={e => setFormData(f => ({ ...f, target_value: e.target.value }))}
|
||||
placeholder="Zielwert eingeben"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="form-label">Zielwert *</label>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
className="form-input"
|
||||
value={formData.target_value}
|
||||
onChange={e => setFormData(f => ({ ...f, target_value: e.target.value }))}
|
||||
placeholder="Zielwert"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="form-input"
|
||||
value={formData.unit}
|
||||
readOnly
|
||||
style={{ width: 80 }}
|
||||
/>
|
||||
<div style={{
|
||||
padding: '8px 16px',
|
||||
background: 'var(--surface2)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 8,
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
color: 'var(--text2)',
|
||||
minWidth: 70,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
{formData.unit}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="form-label">Zieldatum (optional)</label>
|
||||
{/* Zieldatum */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
marginBottom: 4,
|
||||
color: 'var(--text2)'
|
||||
}}>
|
||||
Zieldatum (optional)
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-input"
|
||||
style={{ width: '100%' }}
|
||||
value={formData.target_date}
|
||||
onChange={e => setFormData(f => ({ ...f, target_date: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Beschreibung */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
fontSize: 13,
|
||||
fontWeight: 500,
|
||||
marginBottom: 4,
|
||||
color: 'var(--text2)'
|
||||
}}>
|
||||
Beschreibung (optional)
|
||||
</label>
|
||||
<textarea
|
||||
className="form-input"
|
||||
style={{ width: '100%', minHeight: 80 }}
|
||||
value={formData.description}
|
||||
onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
|
||||
rows={3}
|
||||
placeholder="Warum ist dir dieses Ziel wichtig?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Primärziel */}
|
||||
<div style={{
|
||||
padding: 12,
|
||||
background: 'var(--surface2)',
|
||||
borderRadius: 8,
|
||||
marginBottom: 20
|
||||
}}>
|
||||
<label style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: 10,
|
||||
cursor: 'pointer'
|
||||
}}>
|
||||
<input
|
||||
type="date"
|
||||
className="form-input"
|
||||
value={formData.target_date}
|
||||
onChange={e => setFormData(f => ({ ...f, target_date: e.target.value }))}
|
||||
type="checkbox"
|
||||
checked={formData.is_primary}
|
||||
onChange={e => setFormData(f => ({ ...f, is_primary: e.target.checked }))}
|
||||
style={{ marginTop: 2 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="form-label">Beschreibung (optional)</label>
|
||||
<textarea
|
||||
className="form-input"
|
||||
value={formData.description}
|
||||
onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
|
||||
rows={3}
|
||||
placeholder="Warum ist dir dieses Ziel wichtig?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.is_primary}
|
||||
onChange={e => setFormData(f => ({ ...f, is_primary: e.target.checked }))}
|
||||
/>
|
||||
<span>Als Primärziel setzen</span>
|
||||
</label>
|
||||
<p style={{ fontSize: 12, color: 'var(--text2)', marginTop: 4, marginLeft: 24 }}>
|
||||
Dein Primärziel hat höchste Priorität in Analysen und Charts
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>
|
||||
Als Primärziel setzen
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--text2)' }}>
|
||||
Dein Primärziel hat höchste Priorität in Analysen und Charts
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
|
||||
<button className="btn-primary" onClick={handleSaveGoal} style={{ flex: 1 }}>
|
||||
{editingGoal ? 'Aktualisieren' : 'Erstellen'}
|
||||
</button>
|
||||
<button
|
||||
className="btn-secondary"
|
||||
onClick={() => {
|
||||
setShowGoalForm(false)
|
||||
setEditingGoal(null)
|
||||
}}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
{/* Buttons */}
|
||||
<button
|
||||
className="btn btn-primary btn-full"
|
||||
onClick={handleSaveGoal}
|
||||
style={{ marginBottom: 8 }}
|
||||
>
|
||||
{editingGoal ? 'Aktualisieren' : 'Ziel erstellen'}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-secondary btn-full"
|
||||
onClick={() => {
|
||||
setShowGoalForm(false)
|
||||
setEditingGoal(null)
|
||||
setError(null)
|
||||
}}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user