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