Lars/mitai-jinkendo
1
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Goalsystem V1 #50

Merged
Lars merged 51 commits from develop into main 2026-03-27 17:40:51 +01:00
Conversation 0 Commits 51 Files Changed 33 +186 -93
1 changed files with 186 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 75f0a5dd6e - Show all commits

169
frontend/src/pages/GoalsPage.jsx
View File

@ -440,26 +440,50 @@ 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,
background: '#FCEBEB',
border: '1px solid #D85A30',
borderRadius: 8,
fontSize: 13,
color: '#D85A30',
marginBottom: 16
}}>
{error}
</div>
)}
{/* Zieltyp */}
<div style={{ marginBottom: 16 }}>
<label style={{
display: 'block',
fontSize: 13,
fontWeight: 600,
marginBottom: 4,
color: 'var(--text2)'
}}>
Zieltyp
</label>
<select <select
className="form-input" className="form-input"
style={{ width: '100%' }}
value={formData.goal_type} value={formData.goal_type}
onChange={e => handleGoalTypeChange(e.target.value)} onChange={e => handleGoalTypeChange(e.target.value)}
> >
@ -471,52 +495,103 @@ export default function GoalsPage() {
</select> </select>
</div> </div>
<div> {/* Name */}
<label className="form-label">Name (optional)</label> <div style={{ marginBottom: 16 }}>
<label style={{
display: 'block',
fontSize: 13,
fontWeight: 500,
marginBottom: 4,
color: 'var(--text2)'
}}>
Name (optional)
</label>
<input <input
type="text" type="text"
className="form-input" className="form-input"
style={{ width: '100%' }}
value={formData.name} value={formData.name}
onChange={e => setFormData(f => ({ ...f, name: e.target.value }))} onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
placeholder="z.B. Sommerfigur 2026" placeholder="z.B. Sommerfigur 2026"
/> />
</div> </div>
<div> {/* Zielwert */}
<label className="form-label">Zielwert *</label> <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 }}> <div style={{ display: 'flex', gap: 8 }}>
<input <input
type="number" type="number"
step="0.01" step="0.01"
className="form-input" className="form-input"
style={{ flex: 1 }}
value={formData.target_value} value={formData.target_value}
onChange={e => setFormData(f => ({ ...f, target_value: e.target.value }))} onChange={e => setFormData(f => ({ ...f, target_value: e.target.value }))}
placeholder="Zielwert" placeholder="Zielwert eingeben"
/>
<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> </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 <input
type="date" type="date"
className="form-input" className="form-input"
style={{ width: '100%' }}
value={formData.target_date} value={formData.target_date}
onChange={e => setFormData(f => ({ ...f, target_date: e.target.value }))} onChange={e => setFormData(f => ({ ...f, target_date: e.target.value }))}
/> />
</div> </div>
<div> {/* Beschreibung */}
<label className="form-label">Beschreibung (optional)</label> <div style={{ marginBottom: 16 }}>
<label style={{
display: 'block',
fontSize: 13,
fontWeight: 500,
marginBottom: 4,
color: 'var(--text2)'
}}>
Beschreibung (optional)
</label>
<textarea <textarea
className="form-input" className="form-input"
style={{ width: '100%', minHeight: 80 }}
value={formData.description} value={formData.description}
onChange={e => setFormData(f => ({ ...f, description: e.target.value }))} onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
rows={3} rows={3}
@ -524,38 +599,56 @@ export default function GoalsPage() {
/> />
</div> </div>
<div> {/* Primärziel */}
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}> <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="checkbox" type="checkbox"
checked={formData.is_primary} checked={formData.is_primary}
onChange={e => setFormData(f => ({ ...f, is_primary: e.target.checked }))} onChange={e => setFormData(f => ({ ...f, is_primary: e.target.checked }))}
style={{ marginTop: 2 }}
/> />
<span>Als Primärziel setzen</span> <div>
</label> <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>
<p style={{ fontSize: 12, color: 'var(--text2)', marginTop: 4, marginLeft: 24 }}> Als Primärziel setzen
Dein Primärziel hat höchste Priorität in Analysen und Charts
</p>
</div> </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>
<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"
onClick={handleSaveGoal}
style={{ marginBottom: 8 }}
>
{editingGoal ? 'Aktualisieren' : 'Ziel erstellen'}
</button> </button>
<button <button
className="btn-secondary" className="btn btn-secondary btn-full"
onClick={() => { onClick={() => {
setShowGoalForm(false) setShowGoalForm(false)
setEditingGoal(null) setEditingGoal(null)
setError(null)
}} }}
style={{ flex: 1 }}
> >
Abbrechen Abbrechen
</button> </button>
</div> </div>
</div> </div>
</div>
)} )}
</div> </div>
) )