Quick Mode with 4 presets: - 💪 Kraft-Ruhetag (strength/hiit pause, cardio allowed, max 60%) - 🏃 Cardio-Ruhetag (cardio pause, strength/mobility allowed, max 70%) - 🧘 Entspannungstag (all pause, only meditation/walk, max 40%) - 📉 Deload (all allowed, max 70% intensity) Features: - Preset selection with visual cards - Date picker - Optional note field - List view with inline editing - Delete with confirmation - Toast notifications - Detail view (shows rest_from, allows, intensity_max) Integration: - Route: /rest-days - CaptureHub entry: 🛌 Ruhetage Next Phase: - Custom Mode (full control) - Activity conflict warnings - Weekly planning integration Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
113 lines
2.9 KiB
JavaScript
113 lines
2.9 KiB
JavaScript
import { useNavigate } from 'react-router-dom'
|
|
import { ChevronRight } from 'lucide-react'
|
|
|
|
const ENTRIES = [
|
|
{
|
|
icon: '⚖️',
|
|
label: 'Gewicht',
|
|
sub: 'Tägliche Gewichtseingabe',
|
|
to: '/weight',
|
|
color: '#378ADD',
|
|
},
|
|
{
|
|
icon: '🪄',
|
|
label: 'Assistent',
|
|
sub: 'Schritt-für-Schritt Messung (Umfänge & Caliper)',
|
|
to: '/wizard',
|
|
color: '#7F77DD',
|
|
highlight: true,
|
|
},
|
|
{
|
|
icon: '📏',
|
|
label: 'Umfänge',
|
|
sub: 'Hals, Brust, Taille, Bauch, Hüfte, Oberschenkel, Wade, Arm',
|
|
to: '/circum',
|
|
color: '#1D9E75',
|
|
},
|
|
{
|
|
icon: '📐',
|
|
label: 'Caliper',
|
|
sub: 'Körperfett per Hautfaltenmessung',
|
|
to: '/caliper',
|
|
color: '#D85A30',
|
|
},
|
|
{
|
|
icon: '🍽️',
|
|
label: 'Ernährung',
|
|
sub: 'FDDB CSV importieren',
|
|
to: '/nutrition',
|
|
color: '#EF9F27',
|
|
},
|
|
{
|
|
icon: '🏋️',
|
|
label: 'Aktivität',
|
|
sub: 'Training manuell oder Apple Health importieren',
|
|
to: '/activity',
|
|
color: '#D4537E',
|
|
},
|
|
{
|
|
icon: '🌙',
|
|
label: 'Schlaf',
|
|
sub: 'Schlafdaten erfassen oder Apple Health importieren',
|
|
to: '/sleep',
|
|
color: '#7B68EE',
|
|
},
|
|
{
|
|
icon: '🛌',
|
|
label: 'Ruhetage',
|
|
sub: 'Kraft-, Cardio-, oder Entspannungs-Ruhetag erfassen',
|
|
to: '/rest-days',
|
|
color: '#9B59B6',
|
|
},
|
|
{
|
|
icon: '📖',
|
|
label: 'Messanleitung',
|
|
sub: 'Wie und wo genau messen?',
|
|
to: '/guide',
|
|
color: '#888780',
|
|
},
|
|
]
|
|
|
|
export default function CaptureHub() {
|
|
const nav = useNavigate()
|
|
return (
|
|
<div>
|
|
<h1 className="page-title">Erfassen</h1>
|
|
<div style={{display:'flex',flexDirection:'column',gap:10}}>
|
|
{ENTRIES.map(e => (
|
|
<button key={e.to} onClick={()=>nav(e.to)}
|
|
style={{
|
|
display:'flex', alignItems:'center', gap:14,
|
|
padding:'14px 16px', borderRadius:14,
|
|
border: e.highlight ? `2px solid ${e.color}` : '1.5px solid var(--border)',
|
|
background: e.highlight ? e.color+'14' : 'var(--surface)',
|
|
cursor:'pointer', fontFamily:'var(--font)', textAlign:'left',
|
|
transition:'all 0.15s',
|
|
}}>
|
|
<div style={{
|
|
width:44, height:44, borderRadius:12,
|
|
background: e.color+'22',
|
|
display:'flex', alignItems:'center', justifyContent:'center',
|
|
fontSize:22, flexShrink:0,
|
|
}}>
|
|
{e.icon}
|
|
</div>
|
|
<div style={{flex:1}}>
|
|
<div style={{
|
|
fontSize:15, fontWeight:600,
|
|
color: e.highlight ? e.color : 'var(--text1)',
|
|
}}>
|
|
{e.label}
|
|
</div>
|
|
<div style={{fontSize:12, color:'var(--text3)', marginTop:2}}>
|
|
{e.sub}
|
|
</div>
|
|
</div>
|
|
<ChevronRight size={18} style={{color:'var(--text3)',flexShrink:0}}/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|