${logoHtml}
- 
`
+ } 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')
diff --git a/frontend/src/api-docs.js b/frontend/src/api-docs.js
new file mode 100644
index 0000000..a08fdcf
--- /dev/null
+++ b/frontend/src/api-docs.js
@@ -0,0 +1,4 @@
+import './style.css'
+import './theme.js'
+
+console.log('🇨🇿 České Kluby Loga API - API Docs')
diff --git a/frontend/src/logos.js b/frontend/src/logos.js
index 311249b..adba854 100644
--- a/frontend/src/logos.js
+++ b/frontend/src/logos.js
@@ -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)
})
diff --git a/frontend/src/main.js b/frontend/src/main.js
index bbb7156..eba39cd 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -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) + '' + t.slice(start, end) + '' + 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 = '
${club.name}
+${highlight(club.name, q)}
${club.type || 'football'}
${club.id}
${club.website ? `${club.website}
` : ''} @@ -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 = `${club.website}` + } else { + selectedClubWebsiteEl.textContent = '' + } + + const displayLogo = club.display_logo_url || club.logo_url || '' + if (displayLogo) { + selectedClubLogoEl.innerHTML = `'
@@ -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 = `
@@ -182,12 +247,14 @@ function displaySearchResults(clubs) {
return
}
- searchResults.innerHTML = clubs.map(club => `
-
+ activeIndex = -1
+ currentClubs = clubs
+ searchResults.innerHTML = clubs.map((club, idx) => `
+
-
${club.name}
-${club.city || 'N/A'} • ${club.type || 'football'}
+${highlight(club.name, query)}
+${highlight(club.city || 'N/A', query)} • ${club.type || 'football'}
${club.id}