From b73c77d811ec609ffaf0b49d13d63498883f7e10 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Mon, 23 Mar 2026 14:18:58 +0100
Subject: [PATCH] feat: improve ProfileBuilder mobile UX and clarity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Responsive layout: fields stack vertically, no more cramped grid
- Clear labels: 'WAS?', 'BEDINGUNG', 'WICHTIGKEIT'
- Weight field only shown when using 'weighted_score' strategy
- Weight explanation: '1 = unwichtig, 10 = sehr wichtig'
- Success message replaces alert() dialog (auto-dismiss after 2s)
- Delete button moved to rule header
- Better visual hierarchy with sections

User feedback:
- Felder lassen sich auf Handy nicht gut bearbeiten
- Überschriften nicht eindeutig
- Gewicht-Feld Verwirrung
- Keine OK-Dialoge

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ProfileBuilder.jsx    | 199 +++++++++++-------
 frontend/src/pages/AdminTrainingTypesPage.jsx |   9 +-
 2 files changed, 124 insertions(+), 84 deletions(-)

diff --git a/frontend/src/components/ProfileBuilder.jsx b/frontend/src/components/ProfileBuilder.jsx
index dc517d3..27b53f5 100644
--- a/frontend/src/components/ProfileBuilder.jsx
+++ b/frontend/src/components/ProfileBuilder.jsx
@@ -22,6 +22,7 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
   const [profile, setProfile] = useState(null)
   const [loading, setLoading] = useState(false)
   const [expandedSections, setExpandedSections] = useState({ minReq: true })
+  const [successMessage, setSuccessMessage] = useState(null)
 
   useEffect(() => {
     // Initialize or load existing profile
@@ -146,6 +147,12 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
     setLoading(true)
     try {
       await onSave(profile)
+      setSuccessMessage('✓ Profil gespeichert!')
+      setTimeout(() => {
+        setSuccessMessage(null)
+      }, 2000)
+    } catch (err) {
+      // Error is already handled by parent
     } finally {
       setLoading(false)
     }
@@ -166,6 +173,21 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
         </p>
       </div>
 
+      {/* Success Message */}
+      {successMessage && (
+        <div style={{
+          padding: '12px',
+          background: 'var(--accent)',
+          color: 'white',
+          borderRadius: '8px',
+          marginBottom: '16px',
+          fontSize: '14px',
+          fontWeight: '600'
+        }}>
+          {successMessage}
+        </div>
+      )}
+
       {/* Minimum Requirements */}
       <div className="card" style={{ marginBottom: '16px' }}>
         <div
@@ -239,6 +261,7 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
                 const availableOps = OPERATORS.filter(op =>
                   param ? op.types.includes(param.data_type) : true
                 )
+                const useWeights = minReq.pass_strategy === 'weighted_score'
 
                 return (
                   <div
@@ -250,23 +273,30 @@ 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 style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
+                      <div style={{ fontSize: '12px', fontWeight: '600', color: 'var(--text2)' }}>
+                        Regel {idx + 1}
+                      </div>
+                      <button
+                        className="btn"
+                        onClick={() => removeRule(idx)}
+                        style={{ padding: '4px 8px', minWidth: 'auto', fontSize: '11px' }}
+                        title="Regel löschen"
+                      >
+                        <Trash2 size={12} /> Löschen
+                      </button>
                     </div>
 
-                    {/* Input Row */}
-                    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.5fr 1fr 0.8fr 40px', gap: '8px', marginBottom: '8px' }}>
-                      {/* Parameter */}
+                    {/* Parameter */}
+                    <div style={{ marginBottom: '8px' }}>
+                      <label style={{ fontSize: '11px', color: 'var(--text3)', fontWeight: '600', display: 'block', marginBottom: '4px' }}>
+                        WAS soll geprüft werden?
+                      </label>
                       <select
                         className="form-select"
                         value={rule.parameter}
                         onChange={(e) => updateRule(idx, { parameter: e.target.value })}
-                        style={{ fontSize: '13px' }}
+                        style={{ fontSize: '13px', width: '100%' }}
                       >
                         {parameters.map(p => (
                           <option key={p.key} value={p.key}>
@@ -274,90 +304,97 @@ export default function ProfileBuilder({ trainingType, onSave, onCancel, paramet
                           </option>
                         ))}
                       </select>
+                    </div>
 
-                      {/* Operator */}
-                      <select
-                        className="form-select"
-                        value={rule.operator}
-                        onChange={(e) => updateRule(idx, { operator: e.target.value })}
-                        style={{ fontSize: '13px' }}
-                      >
-                        {availableOps.map(op => (
-                          <option key={op.value} value={op.value}>{op.label}</option>
-                        ))}
-                      </select>
+                    {/* Operator + Value */}
+                    <div style={{ marginBottom: '8px' }}>
+                      <label style={{ fontSize: '11px', color: 'var(--text3)', fontWeight: '600', display: 'block', marginBottom: '4px' }}>
+                        BEDINGUNG
+                      </label>
+                      <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+                        <select
+                          className="form-select"
+                          value={rule.operator}
+                          onChange={(e) => updateRule(idx, { operator: e.target.value })}
+                          style={{ fontSize: '13px', flex: rule.operator === 'between' ? '0 0 80px' : '0 0 100px' }}
+                        >
+                          {availableOps.map(op => (
+                            <option key={op.value} value={op.value}>{op.label}</option>
+                          ))}
+                        </select>
 
-                      {/* Value */}
-                      {rule.operator === 'between' ? (
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                        {rule.operator === 'between' ? (
+                          <div style={{ flex: 1, display: 'flex', 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) || 0, Array.isArray(rule.value) ? rule.value[1] : 0]
+                              })}
+                              style={{ fontSize: '13px', flex: 1 }}
+                            />
+                            <input
+                              type="number"
+                              className="form-input"
+                              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) || 0]
+                              })}
+                              style={{ fontSize: '13px', flex: 1 }}
+                            />
+                          </div>
+                        ) : (
                           <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) || 0, Array.isArray(rule.value) ? rule.value[1] : 0]
-                            })}
-                            style={{ fontSize: '13px', padding: '4px 8px' }}
+                            placeholder="z.B. 90"
+                            value={rule.value}
+                            onChange={(e) => updateRule(idx, { value: parseFloat(e.target.value) || 0 })}
+                            style={{ fontSize: '13px', flex: 1 }}
                           />
-                          <input
-                            type="number"
-                            className="form-input"
-                            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) || 0]
-                            })}
-                            style={{ fontSize: '13px', padding: '4px 8px' }}
-                          />
-                        </div>
-                      ) : (
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Weight - nur bei weighted_score */}
+                    {useWeights && (
+                      <div style={{ marginBottom: '8px', paddingTop: '8px', borderTop: '1px dashed var(--border)' }}>
+                        <label style={{ fontSize: '11px', color: 'var(--text3)', fontWeight: '600', display: 'block', marginBottom: '4px' }}>
+                          WICHTIGKEIT dieser Regel (1 = unwichtig, 10 = sehr wichtig)
+                        </label>
                         <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' }}
+                          placeholder="1-10"
+                          min="1"
+                          max="10"
+                          value={rule.weight}
+                          onChange={(e) => updateRule(idx, { weight: parseInt(e.target.value) || 1 })}
+                          style={{ fontSize: '13px', width: '80px' }}
                         />
-                      )}
-
-                      {/* Weight */}
-                      <input
-                        type="number"
-                        className="form-input"
-                        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 der Regel (1=niedrig, 10=hoch)"
-                      />
-
-                      {/* Delete */}
-                      <button
-                        className="btn"
-                        onClick={() => removeRule(idx)}
-                        style={{ padding: '6px', minWidth: 'auto' }}
-                        title="Regel löschen"
-                      >
-                        <Trash2 size={14} />
-                      </button>
-                    </div>
+                      </div>
+                    )}
 
                     {/* Reason */}
-                    <input
-                      type="text"
-                      className="form-input"
-                      placeholder="Begründung (optional)"
-                      value={rule.reason}
-                      onChange={(e) => updateRule(idx, { reason: e.target.value })}
-                      style={{ fontSize: '12px' }}
-                    />
+                    <div style={{ marginBottom: '8px' }}>
+                      <label style={{ fontSize: '11px', color: 'var(--text3)', fontWeight: '600', display: 'block', marginBottom: '4px' }}>
+                        Begründung (optional)
+                      </label>
+                      <input
+                        type="text"
+                        className="form-input"
+                        placeholder="z.B. 'Techniktraining sollte ruhig sein'"
+                        value={rule.reason}
+                        onChange={(e) => updateRule(idx, { reason: e.target.value })}
+                        style={{ fontSize: '12px', width: '100%' }}
+                      />
+                    </div>
 
                     {/* Optional Checkbox */}
-                    <label style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px', marginTop: '4px' }}>
+                    <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px', color: 'var(--text2)' }}>
                       <input
                         type="checkbox"
                         checked={rule.optional}
diff --git a/frontend/src/pages/AdminTrainingTypesPage.jsx b/frontend/src/pages/AdminTrainingTypesPage.jsx
index 90d5e50..8b9ee1b 100644
--- a/frontend/src/pages/AdminTrainingTypesPage.jsx
+++ b/frontend/src/pages/AdminTrainingTypesPage.jsx
@@ -128,10 +128,13 @@ export default function AdminTrainingTypesPage() {
     try {
       await api.adminUpdateTrainingType(editingProfileId, { profile })
       await load()
-      setEditingProfileId(null)
-      alert('✓ Profil gespeichert!')
+      // Success message is shown by ProfileBuilder component
+      // Don't close editor immediately - let user see success message
+      setTimeout(() => {
+        setEditingProfileId(null)
+      }, 2000)
     } catch (err) {
-      alert('Speichern fehlgeschlagen: ' + err.message)
+      // Error will be thrown to ProfileBuilder
       throw err
     }
   }