mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 18:52:56 +00:00
Tomáš Dvořák
98 lines
3.2 KiB
Markdown
98 lines
3.2 KiB
Markdown
# Logo API Implementation Summary
|
|
|
|
## Overview
|
|
Updated the HomePage to prioritize logoapi.sportcreative.eu for all team logos with FACR as fallback.
|
|
|
|
## Changes Made
|
|
|
|
### 1. HomePage.tsx - State Management
|
|
- Added `clubId` state to store the club's UUID
|
|
- Extract `club_id` from settings and store it
|
|
|
|
### 2. Logo URL Generation Strategy
|
|
**Priority Order:**
|
|
1. **LogoAPI** (if team_id available): `http://logoapi.sportcreative.eu/logos/{team_id}?format=svg`
|
|
2. **Local Overrides** (from team logo overrides table)
|
|
3. **FACR Original** (fallback when logoapi doesn't have the logo)
|
|
|
|
### 3. Updated Functions
|
|
|
|
#### `displayClubLogo` (memoized)
|
|
```typescript
|
|
// Now generates logoapi URL for main club logo
|
|
if (clubId) {
|
|
return `http://logoapi.sportcreative.eu/logos/${clubId}?format=svg`;
|
|
}
|
|
```
|
|
|
|
#### `getOverrideLogo(teamName?, teamId?, original?)`
|
|
- Takes team ID as second parameter
|
|
- Returns logoapi URL if team_id is available
|
|
- Falls back to local overrides or FACR URL
|
|
|
|
#### `getFallbackLogo(teamName?, original?)`
|
|
- Helper function to get fallback logo
|
|
- Checks local overrides first
|
|
- Returns FACR original as final fallback
|
|
|
|
### 4. Data Structure Updates
|
|
|
|
#### Matches Data
|
|
- Now extracts `home_id` and `away_id` from FACR API
|
|
- Passes team IDs to `getOverrideLogo()`
|
|
- Logo URLs now point to logoapi with fallback chain
|
|
|
|
#### Tables/Standings Data
|
|
- Extracts `team_id` from FACR table data
|
|
- Stores both `team_name` and `team_id`
|
|
- Logo URLs use logoapi when team_id is available
|
|
|
|
### 5. Logo Usage Points
|
|
All logo `<img>` tags throughout the homepage now use:
|
|
- **Club logo header**: Uses `displayClubLogo` (logoapi)
|
|
- **Match cards**: Uses `home_logo_url`/`away_logo_url` with logoapi
|
|
- **Tables/Standings**: Uses `logo_url` with logoapi
|
|
- **Next match section**: All team logos use logoapi pattern
|
|
|
|
## How It Works
|
|
|
|
### Example Flow:
|
|
1. **User visits homepage**
|
|
2. **Settings load** → `club_id` extracted (`7eacd9f0-bfa0-4928-a9b6-936140168f58`)
|
|
3. **Club logo displays**: `http://logoapi.sportcreative.eu/logos/7eacd9f0-bfa0-4928-a9b6-936140168f58?format=svg`
|
|
4. **Browser requests logo from logoapi**
|
|
5. **If logoapi has it** → ✓ Displays
|
|
6. **If logoapi doesn't have it** → Browser's native error handling would need fallback
|
|
|
|
## Browser Behavior
|
|
- When logoapi returns 404, the browser shows broken image
|
|
- **Note**: For full fallback support, `onError` handlers should be added to `<img>` tags
|
|
- This would require storing fallback URL alongside primary URL
|
|
|
|
## Testing Checklist
|
|
- [ ] Club logo displays in header (logoapi)
|
|
- [ ] Match team logos display (logoapi with team IDs)
|
|
- [ ] Table team logos display (logoapi with team IDs)
|
|
- [ ] Logos fallback to FACR when logoapi doesn't have them
|
|
- [ ] Local overrides still work correctly
|
|
- [ ] All layouts (unified, magazine, pro, edge) work correctly
|
|
|
|
## Future Enhancements
|
|
Add `onError` handlers to images for automatic fallback:
|
|
```typescript
|
|
<img
|
|
src={logoapi_url}
|
|
onError={(e) => {
|
|
e.currentTarget.src = facr_fallback_url;
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## Files Modified
|
|
- `frontend/src/pages/HomePage.tsx`
|
|
|
|
## Related Systems
|
|
- Logo API: `utils/sportLogosAPI.ts`
|
|
- Team Logo Overrides: Admin matches/teams pages
|
|
- FACR Integration: Fetches team IDs automatically
|