dev day #62

2026-06-05 03:02:56 +00:00 · 2025-10-16 17:10:13 +02:00
parent f5e7be92c7
commit 35d0954afd
84 changed files with 9571 additions and 4668 deletions
@@ -0,0 +1,162 @@
+# Setup Page Enhancements
+
+## Overview
+Enhanced the setup page with logoapi.sportcreative.eu integration, improved UX flow, and live typography preview.
+
+## Changes Made
+
+### 1. ✅ LogoAPI Integration for Club Search
+- **Club search now uses logoapi.sportcreative.eu** as primary logo source
+- When user selects a club from FAČR search:
+  1. Fetches logo from `logoapi.sportcreative.eu` using club UUID
+  2. Falls back to FACR logo if logoapi doesn't have it
+  3. Automatically extracts color palette from the logo
+- **Direct logoapi URLs** are passed through without proxy (no CORS issues)
+- Improved logo resolution display with optimized SVGs
+
+### 2. ✅ Logo Upload to LogoAPI
+- When uploading a club logo:
+  1. Uploads to local backend storage (`/uploads`)
+  2. **Simultaneously uploads to logoapi.sportcreative.eu** if club ID exists
+  3. Toast notification confirms successful upload to both locations
+- Graceful fallback if logoapi upload fails (local upload still succeeds)
+- Uses `POST https://logoapi.sportcreative.eu/logos/{clubId}` endpoint
+
+### 3. ✅ Section Reordering
+**New order:**
+1. 🔐 Administrátorský účet
+2. ⚽ Informace o klubu
+3. **🎨 Barvy a vzhled webu** ⬆️ (moved up)
+4. 📱 Sociální sítě a fotogalerie ⬇️ (moved down)
+5. ✍️ Písmo a typografie
+6. 📍 GPS poloha a mapa
+7. 📧 Kontaktní údaje
+8. 🔒 Zabezpečení a SMTP
+
+**Rationale:** Colors and appearance are more important and should be set before social networks.
+
+### 4. ✅ Live Typography Preview
+- **Typography changes apply immediately** to the entire setup page
+- Selected font pairing affects:
+  - All headings (`fontFamily={fontHeading}`)
+  - All body text (root Box has `fontFamily={fontBody}`)
+- User can see **real-time preview** as they select different fonts
+- Updated help text: "Náhled se aplikuje okamžitě na celou stránku"
+
+### 5. ✅ Map Style Integration
+- **Removed duplicate "🎨 Styl mapy" section**
+- Map style selector now **integrated directly** into "📍 GPS poloha a mapa" section
+- Single unified location for all map-related settings
+- Updated description: "Nastavte polohu vašeho stadionu. Můžete vložit odkaz z mapy, nebo zadat souřadnice ručně. Vyberte také styl mapy."
+
+## Technical Details
+
+### Logo Resolution Helper
+```typescript
+const resolveLogoUrl = (u?: string | null) => {
+  if (!u) return undefined;
+  // If it's a logoapi URL, use it directly (no proxy needed)
+  if (u.includes('logoapi.sportcreative.eu')) return u;
+  // Backend-relative paths
+  if (u.startsWith('/uploads') || u.startsWith('/dist') || u.startsWith('/api/')) 
+    return assetUrl(u);
+  // Proxy other remote URLs
+  if (/^https?:\/\//i.test(u)) {
+    return `${API_URL}/proxy/image?url=${encodeURIComponent(u)}`;
+  }
+  return u;
+};
+```
+
+### Club Selection with LogoAPI
+```typescript
+const handleSelectClub = async (item: SearchResult) => {
+  // Try logoapi first
+  let logoUrl = '';
+  if (clubIdValue) {
+    const logoApiUrl = await fetchLogoFromLogoAPI(clubIdValue, item.name);
+    if (logoApiUrl) logoUrl = logoApiUrl;
+  }
+  // Fallback to FACR
+  if (!logoUrl && item.logo_url) {
+    logoUrl = item.logo_url;
+  }
+  setClubLogoUrl(logoUrl);
+  // Extract colors automatically...
+};
+```
+
+### Logo Upload to LogoAPI
+```typescript
+// Also upload to logoapi if we have a club ID
+if (clubId) {
+  const logoFd = new FormData();
+  logoFd.append('logo', f);
+  const logoApiRes = await fetch(
+    `https://logoapi.sportcreative.eu/logos/${clubId}`, 
+    { method: 'POST', body: logoFd }
+  );
+  if (logoApiRes.ok) {
+    toast({ 
+      title: 'Logo nahráno', 
+      description: 'Logo bylo nahráno na logoapi i lokálně' 
+    });
+  }
+}
+```
+
+### Live Font Preview
+```typescript
+// Get selected font pairing for live preview
+const selectedFontPairing = FONT_PAIRINGS.find((f) => f.id === selectedFont);
+const fontHeading = selectedFontPairing?.cssHeading || 'inherit';
+const fontBody = selectedFontPairing?.cssBody || 'inherit';
+
+// Apply to entire page
+<Box fontFamily={fontBody}>
+  <Heading fontFamily={fontHeading}>Title</Heading>
+  <Text>Body text inherits from parent</Text>
+</Box>
+```
+
+## User Experience Improvements
+
+### Before
+- Logo from FACR only (sometimes low quality)
+- Colors section after social networks
+- Typography preview only in selector boxes
+- Duplicate map style section
+
+### After
+- **High-quality SVG logos** from logoapi.sportcreative.eu
+- **Automatic upload to logoapi** when adding custom logo
+- Colors section prominent (before social networks)
+- **Live typography preview** across entire page
+- Unified map configuration in one place
+
+## Files Modified
+- `frontend/src/pages/SetupPage.tsx` - All enhancements implemented
+
+## Testing Checklist
+- [x] Club search fetches logos from logoapi
+- [x] Logo upload uploads to both local and logoapi
+- [x] Colors section appears before social networks
+- [x] Typography changes apply to whole page immediately
+- [x] Map style selector integrated into GPS section
+- [x] No duplicate map style section
+- [x] All headings use font preview
+- [x] logoapi URLs bypass proxy correctly
+
+## Benefits
+1. **Better logos** - High-quality SVG logos from logoapi
+2. **Centralized storage** - Logos uploaded to logoapi for reuse
+3. **Improved flow** - Colors before social (more important)
+4. **Live preview** - See typography changes immediately
+5. **Cleaner UI** - No duplicate sections
+6. **Better UX** - Related settings grouped together
+
+## Related Documentation
+- `LOGO_API_IMPLEMENTATION.md` - LogoAPI integration details
+- `LOGO_ENHANCEMENT_SUMMARY.md` - Logo system overview
+- `TYPOGRAPHY_AND_DARKMODE_ENHANCEMENTS.md` - Typography system
+- `MAP_STYLES_QUICK_REFERENCE.md` - Map styling options