417 lines
16 KiB
React
417 lines
16 KiB
React
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|||
|
|
import { Link } from 'react-router-dom'
|
|||
|
|
import { ChevronDown, ChevronUp, LayoutDashboard, Search } from 'lucide-react'
|
|||
|
|
import { api, formatFastApiDetail } from '../utils/api'
|
|||
|
|
import { ensurePilotLabWidgetsRegistered } from '../widgetSystem/registerPilotLabWidgets'
|
|||
|
|
import {
|
|||
|
|
BODY_CHART_DAYS_DEFAULT,
|
|||
|
|
BODY_CHART_DAYS_MAX,
|
|||
|
|
BODY_CHART_DAYS_MIN,
|
|||
|
|
normalizeBodyChartDays,
|
|||
|
|
} from '../widgetSystem/bodyChartDays'
|
|||
|
|
import KpiBoardConfigEditor from '../widgetSystem/KpiBoardConfigEditor'
|
|||
|
|
import QuickCaptureConfigEditor from '../widgetSystem/QuickCaptureConfigEditor'
|
|||
|
|
import { moveWidget, normalizeLayoutForEditor, toggleWidget } from '../widgetSystem/layoutEditor'
|
|||
|
|
|
|||
|
|
const CHART_DAYS_WIDGET_IDS = new Set([
|
|||
|
|
'body_overview',
|
|||
|
|
'activity_overview',
|
|||
|
|
'nutrition_detail_charts',
|
|||
|
|
'recovery_charts_panel',
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
function catalogMetaById(catalog) {
|
|||
|
|
if (!catalog?.widgets?.length) return {}
|
|||
|
|
return Object.fromEntries(catalog.widgets.map((w) => [w.id, w]))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function DashboardConfigurePage() {
|
|||
|
|
ensurePilotLabWidgetsRegistered()
|
|||
|
|
|
|||
|
|
const [bundle, setBundle] = useState(null)
|
|||
|
|
const [catalog, setCatalog] = useState(null)
|
|||
|
|
const [layout, setLayout] = useState(null)
|
|||
|
|
const [search, setSearch] = useState('')
|
|||
|
|
const [busy, setBusy] = useState(false)
|
|||
|
|
const [msg, setMsg] = useState(null)
|
|||
|
|
const [err, setErr] = useState(null)
|
|||
|
|
const [chartDaysDraftByWidgetId, setChartDaysDraftByWidgetId] = useState({})
|
|||
|
|
|
|||
|
|
const metaById = useMemo(() => catalogMetaById(catalog), [catalog])
|
|||
|
|
|
|||
|
|
const isWidgetCatalogAllowed = useCallback(
|
|||
|
|
(widgetId) => {
|
|||
|
|
const m = metaById[widgetId]
|
|||
|
|
if (m == null) return true
|
|||
|
|
return m.allowed !== false
|
|||
|
|
},
|
|||
|
|
[metaById],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const commitChartDaysDraftToLayout = useCallback((draftStr, baseLayout, widgetId) => {
|
|||
|
|
const clamped = normalizeBodyChartDays(
|
|||
|
|
draftStr === '' || draftStr == null ? BODY_CHART_DAYS_DEFAULT : draftStr
|
|||
|
|
)
|
|||
|
|
return {
|
|||
|
|
...baseLayout,
|
|||
|
|
widgets: baseLayout.widgets.map((x) =>
|
|||
|
|
x.id !== widgetId ? x : { ...x, config: { ...x.config, chart_days: clamped } }
|
|||
|
|
),
|
|||
|
|
}
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
const load = useCallback(async () => {
|
|||
|
|
setErr(null)
|
|||
|
|
try {
|
|||
|
|
const [cat, b] = await Promise.all([api.getAppWidgetsCatalog(), api.getAppDashboardLayout()])
|
|||
|
|
setCatalog(cat)
|
|||
|
|
setBundle(b)
|
|||
|
|
setChartDaysDraftByWidgetId({})
|
|||
|
|
const base = b.custom ? b.layout : structuredClone(b.product_default_layout)
|
|||
|
|
setLayout(normalizeLayoutForEditor(base))
|
|||
|
|
} catch (e) {
|
|||
|
|
setErr(formatFastApiDetail(null, e.message))
|
|||
|
|
}
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
load()
|
|||
|
|
}, [load])
|
|||
|
|
|
|||
|
|
const save = async () => {
|
|||
|
|
if (!layout) return
|
|||
|
|
let toSave = layout
|
|||
|
|
const draftEntries = Object.entries(chartDaysDraftByWidgetId)
|
|||
|
|
if (draftEntries.length) {
|
|||
|
|
for (const [wid, val] of draftEntries) {
|
|||
|
|
toSave = normalizeLayoutForEditor(commitChartDaysDraftToLayout(val, toSave, wid))
|
|||
|
|
}
|
|||
|
|
setLayout(toSave)
|
|||
|
|
setChartDaysDraftByWidgetId({})
|
|||
|
|
}
|
|||
|
|
setBusy(true)
|
|||
|
|
setMsg(null)
|
|||
|
|
setErr(null)
|
|||
|
|
try {
|
|||
|
|
await api.putAppDashboardLayout(toSave)
|
|||
|
|
setMsg('Dein Dashboard wurde gespeichert.')
|
|||
|
|
await load()
|
|||
|
|
} catch (e) {
|
|||
|
|
setErr(formatFastApiDetail(null, e.message))
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const resetToSystem = async () => {
|
|||
|
|
if (!window.confirm('Dein individuelles Layout löschen und System-Standard wiederherstellen?')) return
|
|||
|
|
setBusy(true)
|
|||
|
|
setMsg(null)
|
|||
|
|
setErr(null)
|
|||
|
|
try {
|
|||
|
|
const r = await api.resetAppDashboardLayout()
|
|||
|
|
setChartDaysDraftByWidgetId({})
|
|||
|
|
setLayout(normalizeLayoutForEditor(r.layout))
|
|||
|
|
setMsg('Auf System-Standard zurückgesetzt.')
|
|||
|
|
await load()
|
|||
|
|
} catch (e) {
|
|||
|
|
setErr(formatFastApiDetail(null, e.message))
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const searchLower = search.trim().toLowerCase()
|
|||
|
|
|
|||
|
|
const libraryIndices = useMemo(() => {
|
|||
|
|
if (!layout?.widgets) return []
|
|||
|
|
return layout.widgets
|
|||
|
|
.map((w, i) => i)
|
|||
|
|
.filter((i) => {
|
|||
|
|
const w = layout.widgets[i]
|
|||
|
|
if (w.enabled || !isWidgetCatalogAllowed(w.id)) return false
|
|||
|
|
if (!searchLower) return true
|
|||
|
|
const m = metaById[w.id]
|
|||
|
|
const hay = `${m?.title || ''} ${m?.description || ''} ${w.id}`.toLowerCase()
|
|||
|
|
return hay.includes(searchLower)
|
|||
|
|
})
|
|||
|
|
}, [layout, searchLower, metaById, isWidgetCatalogAllowed])
|
|||
|
|
|
|||
|
|
const activeIndices = useMemo(() => {
|
|||
|
|
if (!layout?.widgets) return []
|
|||
|
|
return layout.widgets
|
|||
|
|
.map((w, i) => i)
|
|||
|
|
.filter((i) => layout.widgets[i].enabled && isWidgetCatalogAllowed(layout.widgets[i].id))
|
|||
|
|
}, [layout, isWidgetCatalogAllowed])
|
|||
|
|
|
|||
|
|
if (err && !layout) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: 24, maxWidth: 640, margin: '0 auto' }}>
|
|||
|
|
<p style={{ color: '#D85A30' }}>{err}</p>
|
|||
|
|
<button type="button" className="btn btn-secondary" onClick={load}>
|
|||
|
|
Erneut laden
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!layout) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: 48, textAlign: 'center' }}>
|
|||
|
|
<div className="spinner" style={{ width: 32, height: 32, margin: '0 auto' }} />
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ paddingBottom: 96, textAlign: 'left', maxWidth: 720, margin: '0 auto' }}>
|
|||
|
|
<div style={{ marginBottom: 20 }}>
|
|||
|
|
<Link
|
|||
|
|
to="/settings"
|
|||
|
|
className="btn btn-secondary"
|
|||
|
|
style={{ display: 'inline-flex', marginBottom: 12, textDecoration: 'none' }}
|
|||
|
|
>
|
|||
|
|
← Einstellungen
|
|||
|
|
</Link>
|
|||
|
|
<h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
|||
|
|
<LayoutDashboard size={26} color="var(--accent)" />
|
|||
|
|
Übersicht anpassen
|
|||
|
|
</h1>
|
|||
|
|
<p style={{ fontSize: 13, color: 'var(--text2)', lineHeight: 1.6, marginTop: 8 }}>
|
|||
|
|
Wähle Kacheln für deine Startseite. Änderungen gelten nur für dein Profil – der System-Standard bleibt erhalten,
|
|||
|
|
bis du speicherst. Gesperrte Kacheln (Abonnement) erscheinen nicht in der Auswahl.
|
|||
|
|
</p>
|
|||
|
|
{!bundle?.custom && (
|
|||
|
|
<p style={{ fontSize: 12, color: 'var(--accent)', marginTop: 10, lineHeight: 1.5 }}>
|
|||
|
|
Du bearbeitest gerade das <strong>System-Standardlayout</strong>. Mit „Speichern“ legst du deine persönliche
|
|||
|
|
Version ab.
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="card section-gap" style={{ marginBottom: 16 }}>
|
|||
|
|
<label style={{ fontSize: 12, color: 'var(--text2)', display: 'block', marginBottom: 6 }}>
|
|||
|
|
Widgets durchsuchen (Bibliothek unten)
|
|||
|
|
</label>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|||
|
|
<Search size={18} color="var(--text3)" style={{ flexShrink: 0 }} />
|
|||
|
|
<input
|
|||
|
|
type="search"
|
|||
|
|
className="form-input"
|
|||
|
|
placeholder="Titel, Beschreibung oder ID …"
|
|||
|
|
value={search}
|
|||
|
|
onChange={(e) => setSearch(e.target.value)}
|
|||
|
|
aria-label="Widgets durchsuchen"
|
|||
|
|
style={{ flex: 1 }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="card section-gap" style={{ marginBottom: 16 }}>
|
|||
|
|
<div className="card-title" style={{ fontSize: 15 }}>
|
|||
|
|
Auf der Übersicht aktiv · {activeIndices.length}
|
|||
|
|
</div>
|
|||
|
|
{err && <p style={{ fontSize: 12, color: '#D85A30', marginBottom: 8 }}>{err}</p>}
|
|||
|
|
{msg && <p style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 8 }}>{msg}</p>}
|
|||
|
|
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
|||
|
|
{activeIndices.map((i) => {
|
|||
|
|
const w = layout.widgets[i]
|
|||
|
|
const label = metaById[w.id]?.title || w.id
|
|||
|
|
const chartDaysVal =
|
|||
|
|
w.config?.chart_days != null
|
|||
|
|
? normalizeBodyChartDays(w.config.chart_days)
|
|||
|
|
: BODY_CHART_DAYS_DEFAULT
|
|||
|
|
return (
|
|||
|
|
<li
|
|||
|
|
key={w.id}
|
|||
|
|
style={{
|
|||
|
|
padding: '10px 0',
|
|||
|
|
borderBottom: '1px solid var(--border)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
|||
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: 8, flex: '1 1 160px' }}>
|
|||
|
|
<input type="checkbox" checked={w.enabled} onChange={() => setLayout((L) => toggleWidget(L, i))} />
|
|||
|
|
<span style={{ fontSize: 14 }}>{label}</span>
|
|||
|
|
</label>
|
|||
|
|
<div style={{ display: 'flex', gap: 6 }}>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-secondary"
|
|||
|
|
style={{ padding: '6px 10px' }}
|
|||
|
|
aria-label="Nach oben"
|
|||
|
|
onClick={() => setLayout((L) => moveWidget(L, i, -1))}
|
|||
|
|
>
|
|||
|
|
<ChevronUp size={18} />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-secondary"
|
|||
|
|
style={{ padding: '6px 10px' }}
|
|||
|
|
aria-label="Nach unten"
|
|||
|
|
onClick={() => setLayout((L) => moveWidget(L, i, 1))}
|
|||
|
|
>
|
|||
|
|
<ChevronDown size={18} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{w.id === 'quick_capture' && (
|
|||
|
|
<QuickCaptureConfigEditor
|
|||
|
|
config={w.config || {}}
|
|||
|
|
onChange={(next) =>
|
|||
|
|
setLayout((L) =>
|
|||
|
|
normalizeLayoutForEditor({
|
|||
|
|
...L,
|
|||
|
|
widgets: L.widgets.map((x, j) => {
|
|||
|
|
if (j !== i) return x
|
|||
|
|
const cfg = { ...(x.config || {}) }
|
|||
|
|
for (const k of ['show_weight', 'show_resting_hr', 'show_hrv', 'show_vo2_max']) {
|
|||
|
|
delete cfg[k]
|
|||
|
|
}
|
|||
|
|
Object.assign(cfg, next)
|
|||
|
|
return { ...x, config: cfg }
|
|||
|
|
}),
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{w.id === 'kpi_board' && (
|
|||
|
|
<KpiBoardConfigEditor
|
|||
|
|
tiles={Object.prototype.hasOwnProperty.call(w.config || {}, 'tiles') ? w.config.tiles : undefined}
|
|||
|
|
onChange={(next) =>
|
|||
|
|
setLayout((L) =>
|
|||
|
|
normalizeLayoutForEditor({
|
|||
|
|
...L,
|
|||
|
|
widgets: L.widgets.map((x, j) => {
|
|||
|
|
if (j !== i) return x
|
|||
|
|
const cfg = { ...(x.config || {}) }
|
|||
|
|
if (next === undefined) {
|
|||
|
|
delete cfg.tiles
|
|||
|
|
} else {
|
|||
|
|
cfg.tiles = next
|
|||
|
|
}
|
|||
|
|
return { ...x, config: cfg }
|
|||
|
|
}),
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{CHART_DAYS_WIDGET_IDS.has(w.id) && (
|
|||
|
|
<div style={{ marginTop: 10, marginLeft: 28 }}>
|
|||
|
|
<label style={{ fontSize: 12, color: 'var(--text2)', display: 'block', marginBottom: 4 }}>
|
|||
|
|
Zeitraum (Tage): {BODY_CHART_DAYS_MIN}–{BODY_CHART_DAYS_MAX}
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
inputMode="numeric"
|
|||
|
|
autoComplete="off"
|
|||
|
|
className="form-input"
|
|||
|
|
style={{ maxWidth: 120 }}
|
|||
|
|
value={
|
|||
|
|
chartDaysDraftByWidgetId[w.id] !== undefined
|
|||
|
|
? chartDaysDraftByWidgetId[w.id]
|
|||
|
|
: String(chartDaysVal)
|
|||
|
|
}
|
|||
|
|
onFocus={() =>
|
|||
|
|
setChartDaysDraftByWidgetId((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
[w.id]: String(chartDaysVal),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setChartDaysDraftByWidgetId((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
[w.id]: e.target.value,
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
onBlur={(e) => {
|
|||
|
|
const raw = e.target.value
|
|||
|
|
setLayout((L) =>
|
|||
|
|
normalizeLayoutForEditor(commitChartDaysDraftToLayout(raw, L, w.id))
|
|||
|
|
)
|
|||
|
|
setChartDaysDraftByWidgetId((prev) => {
|
|||
|
|
const next = { ...prev }
|
|||
|
|
delete next[w.id]
|
|||
|
|
return next
|
|||
|
|
})
|
|||
|
|
}}
|
|||
|
|
onKeyDown={(e) => {
|
|||
|
|
if (e.key === 'Enter') e.currentTarget.blur()
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</li>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="card section-gap" style={{ marginBottom: 20 }}>
|
|||
|
|
<div className="card-title" style={{ fontSize: 15 }}>
|
|||
|
|
Bibliothek · hinzufügen
|
|||
|
|
</div>
|
|||
|
|
{libraryIndices.length === 0 ? (
|
|||
|
|
<p style={{ fontSize: 13, color: 'var(--text3)', margin: 0 }}>
|
|||
|
|
{searchLower ? 'Keine passenden inaktiven Widgets.' : 'Alle verfügbaren Kacheln sind schon aktiv.'}
|
|||
|
|
</p>
|
|||
|
|
) : (
|
|||
|
|
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
|||
|
|
{libraryIndices.map((i) => {
|
|||
|
|
const w = layout.widgets[i]
|
|||
|
|
const m = metaById[w.id]
|
|||
|
|
return (
|
|||
|
|
<li
|
|||
|
|
key={w.id}
|
|||
|
|
style={{
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'space-between',
|
|||
|
|
gap: 12,
|
|||
|
|
padding: '10px 0',
|
|||
|
|
borderBottom: '1px solid var(--border)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<div style={{ fontSize: 14, fontWeight: 600 }}>{m?.title || w.id}</div>
|
|||
|
|
<div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 2 }}>{m?.description || ''}</div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-primary"
|
|||
|
|
style={{ flexShrink: 0, fontSize: 12, padding: '8px 14px' }}
|
|||
|
|
onClick={() =>
|
|||
|
|
setLayout((L) =>
|
|||
|
|
normalizeLayoutForEditor({
|
|||
|
|
...L,
|
|||
|
|
widgets: L.widgets.map((x, j) => (j === i ? { ...x, enabled: true } : x)),
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
Hinzufügen
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
|||
|
|
<button type="button" className="btn btn-primary" disabled={busy} onClick={save}>
|
|||
|
|
Speichern
|
|||
|
|
</button>
|
|||
|
|
<button type="button" className="btn btn-secondary" disabled={busy} onClick={resetToSystem}>
|
|||
|
|
System-Standard wiederherstellen
|
|||
|
|
</button>
|
|||
|
|
<Link to="/" className="btn btn-secondary" style={{ textDecoration: 'none', textAlign: 'center' }}>
|
|||
|
|
Zur Übersicht
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|