fix: add dashboard weight enforcement and fix hover tooltips

- Dashboard QuickWeight: Feature limit enforcement hinzugefügt - Hover-Tooltip Fix: Button in div wrapper (disabled buttons zeigen keine nativen tooltips) - Error handling für Dashboard weight input - Konsistentes UX über alle Eingabe-Screens Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-21 07:25:47 +01:00 · 2026-03-21 07:25:47 +01:00 · d13c2c7e25
commit d13c2c7e25
parent 0f019f87a4
4 changed files with 94 additions and 39 deletions
--- a/frontend/src/pages/CaliperScreen.jsx
+++ b/frontend/src/pages/CaliperScreen.jsx
@ -72,15 +72,19 @@ function CaliperForm({ form, setForm, profile, onSave, onCancel, saveLabel='Spei
        </div>
      )}
      <div style={{display:'flex',gap:6,marginTop:8}}>
-        <button
-          className="btn btn-primary"
-          style={{flex:1, cursor: (usage && !usage.allowed) ? 'not-allowed' : 'pointer'}}
-          onClick={()=>onSave(bfPct, sex)}
-          disabled={saving || (usage && !usage.allowed)}
+        <div
          title={usage && !usage.allowed ? `Limit erreicht (${usage.used}/${usage.limit}). Kontaktiere den Admin oder warte bis zum nächsten Reset.` : ''}
+          style={{flex:1,display:'inline-block'}}
        >
-          {(usage && !usage.allowed) ? '🔒 Limit erreicht' : saveLabel}
-        </button>
+          <button
+            className="btn btn-primary"
+            style={{width:'100%', cursor: (usage && !usage.allowed) ? 'not-allowed' : 'pointer'}}
+            onClick={()=>onSave(bfPct, sex)}
+            disabled={saving || (usage && !usage.allowed)}
+          >
+            {(usage && !usage.allowed) ? '🔒 Limit erreicht' : saveLabel}
+          </button>
+        </div>
        {onCancel && <button className="btn btn-secondary" style={{flex:1}} onClick={onCancel}><X size={13}/> Abbrechen</button>}
      </div>
    </div>
--- a/frontend/src/pages/CircumScreen.jsx
+++ b/frontend/src/pages/CircumScreen.jsx
@ -130,18 +130,22 @@ export default function CircumScreen() {
            {error}
          </div>
        )}
-        <button
-          className="btn btn-primary btn-full"
-          style={{marginTop:8, cursor: (circumUsage && !circumUsage.allowed) ? 'not-allowed' : 'pointer'}}
-          onClick={handleSave}
-          disabled={saving || (circumUsage && !circumUsage.allowed)}
+        <div
          title={circumUsage && !circumUsage.allowed ? `Limit erreicht (${circumUsage.used}/${circumUsage.limit}). Kontaktiere den Admin oder warte bis zum nächsten Reset.` : ''}
+          style={{display:'inline-block',width:'100%',marginTop:8}}
        >
-          {saved ? <><Check size={14}/> Gespeichert!</>
-                 : saving ? '…'
-                 : (circumUsage && !circumUsage.allowed) ? '🔒 Limit erreicht'
-                 : 'Speichern'}
-        </button>
+          <button
+            className="btn btn-primary btn-full"
+            style={{cursor: (circumUsage && !circumUsage.allowed) ? 'not-allowed' : 'pointer'}}
+            onClick={handleSave}
+            disabled={saving || (circumUsage && !circumUsage.allowed)}
+          >
+            {saved ? <><Check size={14}/> Gespeichert!</>
+                   : saving ? '…'
+                   : (circumUsage && !circumUsage.allowed) ? '🔒 Limit erreicht'
+                   : 'Speichern'}
+          </button>
+        </div>
      </div>

      {/* Liste */}
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@ -27,32 +27,75 @@ function QuickWeight({ onSaved }) {
  const [input,  setInput]  = useState('')
  const [saving, setSaving] = useState(false)
  const [saved,  setSaved]  = useState(false)
+  const [error,  setError]  = useState(null)
+  const [weightUsage, setWeightUsage] = useState(null)
  const today = dayjs().format('YYYY-MM-DD')

+  const loadUsage = () => {
+    api.getFeatureUsage().then(features => {
+      const weightFeature = features.find(f => f.feature_id === 'weight_entries')
+      setWeightUsage(weightFeature)
+    }).catch(err => console.error('Failed to load usage:', err))
+  }
+
  useEffect(()=>{
    api.weightStats().then(s=>{
      if(s?.latest?.date===today) setInput(String(s.latest.weight))
    })
+    loadUsage()
  },[])

  const handleSave = async () => {
    const w=parseFloat(input); if(!w||w<20||w>300) return
    setSaving(true)
-    try{ await api.upsertWeight(today,w); setSaved(true); onSaved?.(); setTimeout(()=>setSaved(false),2000) }
-    finally{ setSaving(false) }
+    setError(null)
+    try{
+      await api.upsertWeight(today,w)
+      setSaved(true)
+      await loadUsage()  // Reload usage after save
+      onSaved?.()
+      setTimeout(()=>setSaved(false),2000)
+    } catch(err) {
+      console.error('Save failed:', err)
+      setError(err.message || 'Fehler beim Speichern')
+      setTimeout(()=>setError(null), 5000)
+    } finally {
+      setSaving(false)
+    }
  }

+  const isDisabled = saving || !input || (weightUsage && !weightUsage.allowed)
+  const tooltipText = weightUsage && !weightUsage.allowed
+    ? `Limit erreicht (${weightUsage.used}/${weightUsage.limit}). Kontaktiere den Admin oder warte bis zum nächsten Reset.`
+    : ''
+
  return (
-    <div style={{display:'flex',gap:8,alignItems:'center'}}>
-      <input type="number" min={20} max={300} step={0.1} className="form-input"
-        style={{flex:1,fontSize:17,fontWeight:600,textAlign:'center'}}
-        placeholder="kg eingeben" value={input} onChange={e=>setInput(e.target.value)}
-        onKeyDown={e=>e.key==='Enter'&&handleSave()}/>
-      <span style={{fontSize:13,color:'var(--text3)'}}>kg</span>
-      <button className="btn btn-primary" style={{padding:'8px 14px'}}
-        onClick={handleSave} disabled={saving||!input}>
-        {saved?<Check size={15}/>:saving?<div className="spinner" style={{width:14,height:14}}/>:'Speichern'}
-      </button>
+    <div>
+      {error && (
+        <div style={{padding:'8px 10px',background:'var(--danger-bg)',border:'1px solid var(--danger)',borderRadius:8,fontSize:12,color:'var(--danger)',marginBottom:8}}>
+          {error}
+        </div>
+      )}
+      <div style={{display:'flex',gap:8,alignItems:'center'}}>
+        <input type="number" min={20} max={300} step={0.1} className="form-input"
+          style={{flex:1,fontSize:17,fontWeight:600,textAlign:'center'}}
+          placeholder="kg eingeben" value={input} onChange={e=>setInput(e.target.value)}
+          onKeyDown={e=>e.key==='Enter'&&!isDisabled&&handleSave()}/>
+        <span style={{fontSize:13,color:'var(--text3)'}}>kg</span>
+        <div title={tooltipText} style={{display:'inline-block'}}>
+          <button
+            className="btn btn-primary"
+            style={{padding:'8px 14px', cursor: isDisabled ? 'not-allowed' : 'pointer'}}
+            onClick={handleSave}
+            disabled={isDisabled}
+          >
+            {saved ? <Check size={15}/>
+                   : saving ? <div className="spinner" style={{width:14,height:14}}/>
+                   : (weightUsage && !weightUsage.allowed) ? '🔒 Limit'
+                   : 'Speichern'}
+          </button>
+        </div>
+      </div>
    </div>
  )
 }
--- a/frontend/src/pages/WeightScreen.jsx
+++ b/frontend/src/pages/WeightScreen.jsx
@ -111,18 +111,22 @@ export default function WeightScreen() {
            {error}
          </div>
        )}
-        <button
-          className="btn btn-primary btn-full"
-          onClick={handleSave}
-          disabled={saving || !newWeight || (weightUsage && !weightUsage.allowed)}
+        <div
          title={weightUsage && !weightUsage.allowed ? `Limit erreicht (${weightUsage.used}/${weightUsage.limit}). Kontaktiere den Admin oder warte bis zum nächsten Reset.` : ''}
-          style={{cursor: (weightUsage && !weightUsage.allowed) ? 'not-allowed' : 'pointer'}}
+          style={{display:'inline-block',width:'100%'}}
        >
-          {saved ? <><Check size={15}/> Gespeichert!</>
-                 : saving ? <><div className="spinner" style={{width:14,height:14}}/> …</>
-                 : (weightUsage && !weightUsage.allowed) ? '🔒 Limit erreicht'
-                 : 'Speichern'}
-        </button>
+          <button
+            className="btn btn-primary btn-full"
+            onClick={handleSave}
+            disabled={saving || !newWeight || (weightUsage && !weightUsage.allowed)}
+            style={{cursor: (weightUsage && !weightUsage.allowed) ? 'not-allowed' : 'pointer'}}
+          >
+            {saved ? <><Check size={15}/> Gespeichert!</>
+                   : saving ? <><div className="spinner" style={{width:14,height:14}}/> …</>
+                   : (weightUsage && !weightUsage.allowed) ? '🔒 Limit erreicht'
+                   : 'Speichern'}
+          </button>
+        </div>
      </div>

      {/* Chart */}