Merge branch 'main' of https://github.com/Dvorinka/ClubLogos

2026-06-03 19:42:58 +00:00 · 2025-12-02 13:55:30 +01:00
parent b27fe6fe0e 1824326b2f
commit b6ae5f0a5f
10 changed files with 423 additions and 66 deletions
@@ -11,8 +11,61 @@ const FACR_API_URL = 'https://facr.tdvorak.dev'
 const clubSearch = document.getElementById('clubSearch')
 const searchResults = document.getElementById('searchResults')
 const uploadSection = document.getElementById('uploadSection')
+const clubSportFilterButtons = document.querySelectorAll('[data-club-sport-filter]')
+
+const selectedClubSummary = document.getElementById('selectedClubSummary')
+const selectedClubNameEl = document.getElementById('selectedClubName')
+const selectedClubTypeEl = document.getElementById('selectedClubType')
+const selectedClubCityEl = document.getElementById('selectedClubCity')
+const selectedClubWebsiteEl = document.getElementById('selectedClubWebsite')
+const selectedClubLogoEl = document.getElementById('selectedClubLogo')

 let searchTimeout
+let activeIndex = -1
+let lastClubs = []
+let clubSportFilter = 'all'
+
+function normalizeText(s) {
+  return (s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
+}
+function highlight(text, query) {
+  const t = String(text || '')
+  const nq = normalizeText(query)
+  if (!nq) return t
+  const nt = normalizeText(t)
+  const idx = nt.indexOf(nq)
+  if (idx === -1) return t
+  let i = 0, oi = 0, start = -1, end = -1
+  while (oi < t.length && i <= idx + nq.length) {
+    const ch = t[oi]
+    const n = normalizeText(ch)
+    if (i === idx) start = oi
+    if (n) i += n.length
+    oi += 1
+    if (i >= idx + nq.length) { end = oi; break }
+  }
+  if (start === -1 || end === -1) return t
+  return t.slice(0, start) + '<span class="bg-accent-blue/20">' + t.slice(start, end) + '</span>' + t.slice(end)
+}
+function updateActive() {
+  const items = searchResults.querySelectorAll('.club-result')
+  items.forEach((el, i) => {
+    if (i === activeIndex) el.classList.add('ring-2', 'ring-accent-blue')
+    else el.classList.remove('ring-2', 'ring-accent-blue')
+  })
+}
+
+function updateClubSportFilterButtons() {
+  if (!clubSportFilterButtons || !clubSportFilterButtons.length) return
+  clubSportFilterButtons.forEach(btn => {
+    const value = (btn.dataset.clubSportFilter || 'all').toLowerCase()
+    const isActive = value === clubSportFilter
+    btn.classList.toggle('bg-accent-blue', isActive)
+    btn.classList.toggle('text-white', isActive)
+    btn.classList.toggle('bg-dark-bg', !isActive)
+    btn.classList.toggle('text-gray-300', !isActive)
+  })
+}

 clubSearch.addEventListener('input', (e) => {
  clearTimeout(searchTimeout)
@@ -28,6 +81,27 @@ clubSearch.addEventListener('input', (e) => {
  }, 300)
 })

+clubSearch.addEventListener('keydown', (e) => {
+  const total = searchResults.querySelectorAll('.club-result').length
+  if (!total) return
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex = (activeIndex + 1) % total
+    updateActive()
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex = (activeIndex - 1 + total) % total
+    updateActive()
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    if (activeIndex >= 0 && activeIndex < total) {
+      const item = searchResults.querySelectorAll('.club-result')[activeIndex]
+      const btn = item.querySelector('.select-club')
+      if (btn) btn.click(); else item.click()
+    }
+  }
+})
+
 async function searchClubs(query) {
  searchResults.innerHTML = '<div class="text-center py-4"><div class="spinner mx-auto"></div></div>'
  
@@ -45,7 +119,8 @@ async function searchClubs(query) {
    }
    
    const clubs = await response.json()
-    await displaySearchResults(clubs)
+    lastClubs = Array.isArray(clubs) ? clubs : []
+    await displaySearchResults(lastClubs)
    
  } catch (error) {
    // Suppress console spam from HTML responses
@@ -86,7 +161,22 @@ async function displaySearchResults(clubs) {
    // Silently fail - this is optional data
  }
  
-  searchResults.innerHTML = clubs.map(club => {
+  const q = clubSearch.value.trim()
+  const nq = normalizeText(q)
+  let filtered = Array.isArray(clubs) ? clubs : []
+  if (nq) {
+    filtered = filtered.filter(c => {
+      const name = normalizeText(c.name)
+      const city = normalizeText(c.city)
+      const id = String(c.id || '').toLowerCase()
+      return name.includes(nq) || city.includes(nq) || id.includes(q.toLowerCase())
+    })
+  }
+  if (clubSportFilter && clubSportFilter !== 'all') {
+    filtered = filtered.filter(c => (c.type || '').toLowerCase() === clubSportFilter)
+  }
+  activeIndex = -1
+  searchResults.innerHTML = filtered.map(club => {
    // Check if we have this logo in our API
    const existingLogo = existingLogos.find(l => l.id === club.id)
    
@@ -121,12 +211,13 @@ async function displaySearchResults(clubs) {
      `
    }
    
+    const clubData = { ...club, display_logo_url: logoUrl }
    return `
-    <div class="club-result bg-dark-bg rounded-lg p-4 border border-dark-border hover:border-accent-blue transition-smooth cursor-pointer" data-club='${JSON.stringify(club)}' data-logo-url='${logoUrl}'>
+    <div class="club-result bg-dark-bg rounded-lg p-4 border border-dark-border hover:border-accent-blue transition-smooth cursor-pointer" data-club='${JSON.stringify(clubData)}'>
      <div class="flex items-center gap-4">
        ${logoHtml}
        <div class="flex-1 min-w-0">
-          <h3 class="font-semibold text-lg truncate">${club.name}</h3>
+          <h3 class="font-semibold text-lg truncate">${highlight(club.name, q)}</h3>
          <p class="text-sm text-gray-400">${club.type || 'football'}</p>
          <p class="text-xs text-gray-500 font-mono mt-1 truncate">${club.id}</p>
          ${club.website ? `<p class="text-xs text-blue-400 mt-1 truncate">${club.website}</p>` : ''}
@@ -169,6 +260,27 @@ function selectClub(club) {
  document.getElementById('clubName').value = club.name
  document.getElementById('clubType').value = club.type || 'football'
  document.getElementById('clubWebsite').value = club.website || ''
+
+  // Update summary card
+  if (selectedClubSummary && selectedClubNameEl && selectedClubTypeEl && selectedClubCityEl && selectedClubWebsiteEl && selectedClubLogoEl) {
+    selectedClubNameEl.textContent = club.name || ''
+    selectedClubTypeEl.textContent = (club.type || 'football').toUpperCase()
+    selectedClubCityEl.textContent = club.city || ''
+    if (club.website) {
+      selectedClubWebsiteEl.innerHTML = `<a href="${club.website}" target="_blank" class="hover:underline">${club.website}</a>`
+    } else {
+      selectedClubWebsiteEl.textContent = ''
+    }
+
+    const displayLogo = club.display_logo_url || club.logo_url || ''
+    if (displayLogo) {
+      selectedClubLogoEl.innerHTML = `<img src="${displayLogo}" alt="${club.name || ''}" class="max-w-full max-h-full object-contain rounded-md">`
+    } else {
+      selectedClubLogoEl.textContent = '🏟️'
+    }
+
+    selectedClubSummary.classList.remove('hidden')
+  }
  
  // Show upload section
  uploadSection.classList.remove('hidden')
@@ -187,6 +299,23 @@ function selectClub(club) {
  showNotification(`Vybráno: ${club.name}`, 'success')
 }

+if (clubSportFilterButtons && clubSportFilterButtons.length) {
+  updateClubSportFilterButtons()
+  clubSportFilterButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const value = (btn.dataset.clubSportFilter || 'all').toLowerCase()
+      if (value === clubSportFilter) return
+      clubSportFilter = value
+      updateClubSportFilterButtons()
+      if (lastClubs.length) {
+        displaySearchResults(lastClubs)
+      } else if (clubSearch.value.trim().length >= 2) {
+        searchClubs(clubSearch.value.trim())
+      }
+    })
+  })
+}
+
 // ==================== Website Search ====================

 const searchWebsiteBtn = document.getElementById('searchWebsite')
@@ -0,0 +1,4 @@
+import './style.css'
+import './theme.js'
+
+console.log('🇨🇿 České Kluby Loga API - API Docs')
@@ -8,12 +8,14 @@ const loading = document.getElementById('allLoading')
 const empty = document.getElementById('allEmpty')
 const loadMoreBtn = document.getElementById('loadMoreBtn')
 const searchInput = document.getElementById('allLogoSearch')
+const sportFilterButtons = document.querySelectorAll('[data-sport-filter]')

 let page = 1
 const limit = 20
 let query = ''
 let isLoading = false
 let hasMore = true
+let sport = 'all'

 async function loadPage(reset = false) {
  if (isLoading) return
@@ -35,6 +37,7 @@ async function loadPage(reset = false) {
    url.searchParams.set('limit', String(limit))
    url.searchParams.set('page', String(page))
    if (query) url.searchParams.set('q', query)
+    if (sport && sport !== 'all') url.searchParams.set('sport', sport)

    const resp = await fetch(url.toString().replace(window.location.origin, ''))
    if (!resp.ok) throw new Error('Failed to fetch logos')
@@ -89,6 +92,18 @@ function appendCards(items) {
  grid.insertAdjacentHTML('beforeend', html)
 }

+function updateSportFilterButtons() {
+  if (!sportFilterButtons || !sportFilterButtons.length) return
+  sportFilterButtons.forEach(btn => {
+    const value = btn.dataset.sportFilter || 'all'
+    const isActive = value === sport
+    btn.classList.toggle('bg-accent-blue', isActive)
+    btn.classList.toggle('text-white', isActive)
+    btn.classList.toggle('bg-dark-card', !isActive)
+    btn.classList.toggle('text-gray-300', !isActive)
+  })
+}
+
 grid.addEventListener('click', async (e) => {
  const delBtn = e.target.closest('.delete-logo')
  if (delBtn) {
@@ -126,6 +141,19 @@ searchInput.addEventListener('input', () => {
  }, 300)
 })

+if (sportFilterButtons && sportFilterButtons.length) {
+  updateSportFilterButtons()
+  sportFilterButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const value = btn.dataset.sportFilter || 'all'
+      if (value === sport) return
+      sport = value
+      updateSportFilterButtons()
+      loadPage(true)
+    })
+  })
+}
+
 loadMoreBtn.addEventListener('click', () => {
  if (hasMore) loadPage(false)
 })
@@ -101,6 +101,42 @@ uploadBtn.addEventListener('click', () => {
 const searchInput = document.getElementById('searchInput')
 const searchResults = document.getElementById('searchResults')
 let searchTimeout
+let activeIndex = -1
+let currentClubs = []
+
+function normalizeText(s) {
+  return s.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
+}
+function highlight(text, query) {
+  const t = String(text)
+  const nq = normalizeText(query)
+  if (!nq) return t
+  const nt = normalizeText(t)
+  const idx = nt.indexOf(nq)
+  if (idx === -1) return t
+  let i = 0, oi = 0, start = -1, end = -1
+  while (oi < t.length && i <= idx + nq.length) {
+    const ch = t[oi]
+    const n = normalizeText(ch)
+    if (i === idx) start = oi
+    if (n) i += n.length
+    oi += 1
+    if (i >= idx + nq.length) { end = oi; break }
+  }
+  if (start === -1 || end === -1) return t
+  return t.slice(0, start) + '<span class="bg-accent-blue/20">' + t.slice(start, end) + '</span>' + t.slice(end)
+}
+
+function updateActive() {
+  const items = searchResults.querySelectorAll('.club-result')
+  items.forEach((el, i) => {
+    if (i === activeIndex) {
+      el.classList.add('ring-2', 'ring-accent-blue')
+    } else {
+      el.classList.remove('ring-2', 'ring-accent-blue')
+    }
+  })
+}

 searchInput.addEventListener('input', (e) => {
  clearTimeout(searchTimeout)
@@ -111,12 +147,31 @@ searchInput.addEventListener('input', (e) => {
    return
  }
  
-  // Debounce search
  searchTimeout = setTimeout(() => {
    searchClubs(query)
  }, 300)
 })

+searchInput.addEventListener('keydown', (e) => {
+  const total = searchResults.querySelectorAll('.club-result').length
+  if (!total) return
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex = (activeIndex + 1) % total
+    updateActive()
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex = (activeIndex - 1 + total) % total
+    updateActive()
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    if (activeIndex >= 0 && activeIndex < total) {
+      const item = searchResults.querySelectorAll('.club-result')[activeIndex]
+      item.click()
+    }
+  }
+})
+
 async function searchClubs(query) {
  searchResults.innerHTML = '<div class="text-center py-4"><div class="spinner mx-auto"></div></div>'
  
@@ -130,12 +185,19 @@ async function searchClubs(query) {
    }
    
    const data = await response.json()
-    displaySearchResults(data)
+    const nq = normalizeText(query)
+    const filtered = data.filter(c => {
+      const name = normalizeText(c.name || '')
+      const city = normalizeText(c.city || '')
+      const id = String(c.id || '').toLowerCase()
+      return name.includes(nq) || city.includes(nq) || id.includes(query.toLowerCase())
+    })
+    displaySearchResults(filtered, query)
    
  } catch (error) {
    console.log('Backend not available, showing demo data')
-    // Demo data when backend is not ready
-    displaySearchResults(getDemoClubs(query))
+    const demo = getDemoClubs(query)
+    displaySearchResults(demo, query)
  }
 }

@@ -167,12 +229,15 @@ function getDemoClubs(query) {
    }
  ]
  
-  return demoClubs.filter(club => 
-    club.name.toLowerCase().includes(query.toLowerCase())
-  )
+  const nq = normalizeText(query)
+  return demoClubs.filter(club => {
+    const name = normalizeText(club.name)
+    const city = normalizeText(club.city)
+    return name.includes(nq) || city.includes(nq)
+  })
 }

-function displaySearchResults(clubs) {
+function displaySearchResults(clubs, query) {
  if (clubs.length === 0) {
    searchResults.innerHTML = `
      <div class="text-center py-8 text-gray-400">
@@ -182,12 +247,14 @@ function displaySearchResults(clubs) {
    return
  }
  
-  searchResults.innerHTML = clubs.map(club => `
-    <div class="club-result bg-dark-bg rounded-lg p-4 border border-dark-border hover:border-accent-blue transition-smooth cursor-pointer">
+  activeIndex = -1
+  currentClubs = clubs
+  searchResults.innerHTML = clubs.map((club, idx) => `
+    <div class="club-result bg-dark-bg rounded-lg p-4 border border-dark-border hover:border-accent-blue transition-smooth cursor-pointer" data-index="${idx}">
      <div class="flex items-center justify-between">
        <div class="flex-1">
-          <h3 class="font-semibold text-lg">${club.name}</h3>
-          <p class="text-sm text-gray-400">${club.city || 'N/A'} • ${club.type || 'football'}</p>
+          <h3 class="font-semibold text-lg">${highlight(club.name, query)}</h3>
+          <p class="text-sm text-gray-400">${highlight(club.city || 'N/A', query)} • ${club.type || 'football'}</p>
          <p class="text-xs text-gray-500 font-mono mt-1">${club.id}</p>
        </div>
        <button 
@@ -55,3 +55,76 @@ if (document.readyState === 'loading') {
 } else {
  initThemeToggle()
 }
+
+// Global light/dark theme handling for Czech Clubs Logos frontend
+
+const THEME_KEY = 'clublogos-theme'
+
+function getPreferredTheme() {
+  try {
+    const stored = localStorage.getItem(THEME_KEY)
+    if (stored === 'light' || stored === 'dark') return stored
+  } catch (_) {}
+
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+    return 'light'
+  }
+  return 'dark'
+}
+
+function applyTheme(theme) {
+  const root = document.documentElement
+  const mode = theme === 'light' ? 'light' : 'dark'
+
+  root.classList.remove('theme-light', 'theme-dark', 'dark')
+  if (mode === 'light') {
+    root.classList.add('theme-light')
+  } else {
+    root.classList.add('theme-dark', 'dark')
+  }
+
+  try {
+    localStorage.setItem(THEME_KEY, mode)
+  } catch (_) {}
+
+  const toggle = document.getElementById('themeToggle')
+  if (toggle) {
+    if (mode === 'light') {
+      toggle.innerHTML = `
+        <span class="inline-flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+          </svg>
+          <span class="hidden sm:inline">Tmavý režim</span>
+        </span>
+      `
+    } else {
+      toggle.innerHTML = `
+        <span class="inline-flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v2m0 14v2m9-9h-2M5 12H3m15.364-6.364l-1.414 1.414M8.05 17.95l-1.414 1.414m0-12.728L8.05 8.05m9.9 9.9l-1.414-1.414M12 8a4 4 0 100 8 4 4 0 000-8z" />
+          </svg>
+          <span class="hidden sm:inline">Světlý režim</span>
+        </span>
+      `
+    }
+  }
+}
+
+function setupThemeToggle() {
+  const toggle = document.getElementById('themeToggle')
+  if (!toggle) return
+
+  toggle.addEventListener('click', () => {
+    const isLight = document.documentElement.classList.contains('theme-light')
+    applyTheme(isLight ? 'dark' : 'light')
+  })
+}
+
+if (typeof window !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    const initial = getPreferredTheme()
+    applyTheme(initial)
+    setupThemeToggle()
+  })
+}