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

feat: improve ProfileBuilder UI clarity with field labels
All checks were successful
Deploy Development / deploy (push) Successful in 42s
Details
Build Test / lint-backend (push) Successful in 1s
Details
Build Test / build-frontend (push) Successful in 12s
Details

Browse Source 
- Added label row: PARAMETER | OPERATOR | SCHWELLENWERT | GEWICHT
- Prevents confusion between threshold value and weight fields
- Better placeholder for value field (z.B. 90)
- Between operator: stacked vertical inputs with Min/Max labels
- User feedback: confusion between value and weight fields

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lars 2026-03-23 13:35:52 +01:00
parent 2c73c3df52
commit 65846042e2
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/ProfileBuilder.jsx
View File

@ -250,6 +250,16 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
marginBottom: '8px'
}}
>
{/* Labels Row */}
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1.5fr 1fr 0.8fr 40px', gap: '8px', marginBottom: '4px' }}>
<div style={{ fontSize: '10px', color: 'var(--text3)', fontWeight: '600' }}>PARAMETER</div>
<div style={{ fontSize: '10px', color: 'var(--text3)', fontWeight: '600' }}>OPERATOR</div>
<div style={{ fontSize: '10px', color: 'var(--text3)', fontWeight: '600' }}>SCHWELLENWERT</div>
<div style={{ fontSize: '10px', color: 'var(--text3)', fontWeight: '600' }}>GEWICHT</div>
<div></div>
</div>
{/* Input Row */}
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1.5fr 1fr 0.8fr 40px', gap: '8px', marginBottom: '8px' }}>
{/* Parameter */}
<select
@ -279,16 +289,16 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
{/* Value */}
{rule.operator === 'between' ? (
<div style={{ display: 'flex', gap: '4px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
<input
type="number"
className="form-input"
placeholder="Min"
value={Array.isArray(rule.value) ? rule.value[0] : 0}
onChange={(e) => updateRule(idx, {
value: [parseFloat(e.target.value), Array.isArray(rule.value) ? rule.value[1] : 0]
value: [parseFloat(e.target.value) || 0, Array.isArray(rule.value) ? rule.value[1] : 0]
})}
style={{ fontSize: '13px' }}
style={{ fontSize: '13px', padding: '4px 8px' }}
/>
<input
type="number"
@ -296,15 +306,16 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
placeholder="Max"
value={Array.isArray(rule.value) ? rule.value[1] : 0}
onChange={(e) => updateRule(idx, {
value: [Array.isArray(rule.value) ? rule.value[0] : 0, parseFloat(e.target.value)]
value: [Array.isArray(rule.value) ? rule.value[0] : 0, parseFloat(e.target.value) || 0]
})}
style={{ fontSize: '13px' }}
style={{ fontSize: '13px', padding: '4px 8px' }}
/>
</div>
) : (
<input
type="number"
className="form-input"
placeholder="z.B. 90"
value={rule.value}
onChange={(e) => updateRule(idx, { value: parseFloat(e.target.value) || 0 })}
style={{ fontSize: '13px' }}
@ -315,13 +326,13 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
<input
type="number"
className="form-input"
placeholder="Gewicht"
placeholder="1-10"
min="1"
max="10"
value={rule.weight}
onChange={(e) => updateRule(idx, { weight: parseInt(e.target.value) || 1 })}
style={{ fontSize: '13px' }}
title="Gewichtung 1-10"
title="Gewichtung der Regel (1=niedrig, 10=hoch)"
/>
{/* Delete */}
@ -329,6 +340,7 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
className="btn"
onClick={() => removeRule(idx)}
style={{ padding: '6px', minWidth: 'auto' }}
title="Regel löschen"
>
<Trash2 size={14} />
</button>