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

feat: add training type badges to activity list (v9d Phase 1b complete)
Some checks failed
Build Test / lint-backend (push) Waiting to run
Details
Build Test / build-frontend (push) Waiting to run
Details
Deploy Development / deploy (push) Has been cancelled
Details

Browse Source 
- Load training categories in ActivityPage
- Display colored badge next to activity name in list view
- Badge shows category icon + name with category color
- Only shown if training_category is set
- Completes v9d Phase 1b

Ready for testing and production deployment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lars 2026-03-21 19:02:25 +01:00
parent 967d92025c
commit d4826c8df4
1 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/pages/ActivityPage.jsx
View File

@ -180,6 +180,7 @@ export default function ActivityPage() {
const [saved, setSaved] = useState(false) const [saved, setSaved] = useState(false)
const [error, setError] = useState(null) const [error, setError] = useState(null)
const [activityUsage, setActivityUsage] = useState(null) // Phase 4: Usage badge const [activityUsage, setActivityUsage] = useState(null) // Phase 4: Usage badge
const [categories, setCategories] = useState({}) // v9d: Training categories
const load = async () => { const load = async () => {
const [e, s] = await Promise.all([api.listActivity(), api.activityStats()]) const [e, s] = await Promise.all([api.listActivity(), api.activityStats()])
@ -196,6 +197,7 @@ export default function ActivityPage() {
useEffect(()=>{ useEffect(()=>{
load() load()
loadUsage() loadUsage()
api.getTrainingCategories().then(setCategories).catch(err => console.error('Failed to load categories:', err))
},[]) },[])
const handleSave = async () => { const handleSave = async () => {
@ -351,7 +353,26 @@ export default function ActivityPage() {
<div> <div>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}> <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
<div style={{flex:1}}> <div style={{flex:1}}>
<div style={{display:'flex',alignItems:'center',gap:6,marginBottom:2}}>
<div style={{fontSize:14,fontWeight:600}}>{e.activity_type}</div> <div style={{fontSize:14,fontWeight:600}}>{e.activity_type}</div>
{e.training_category && categories[e.training_category] && (
<div style={{
display:'inline-flex',
alignItems:'center',
gap:3,
padding:'2px 6px',
background:categories[e.training_category].color + '22',
border:`1px solid ${categories[e.training_category].color}`,
borderRadius:4,
fontSize:10,
fontWeight:600,
color:categories[e.training_category].color
}}>
<span>{categories[e.training_category].icon}</span>
<span>{categories[e.training_category].name_de}</span>
</div>
)}
</div>
<div style={{fontSize:11,color:'var(--text3)',marginBottom:4}}> <div style={{fontSize:11,color:'var(--text3)',marginBottom:4}}>
{dayjs(e.date).format('dd, DD. MMMM YYYY')} {dayjs(e.date).format('dd, DD. MMMM YYYY')}
{e.start_time && e.start_time.length>10 && ` · ${e.start_time.slice(11,16)}`} {e.start_time && e.start_time.length>10 && ` · ${e.start_time.slice(11,16)}`}