TDvorak/ClubLogos
1
0
Fork 0
mirror of https://github.com/Dvorinka/ClubLogos.git synced 2026-06-03 19:42:58 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
cdb8bcd3e99244f28612833cd801235ebe53a850
ClubLogos/frontend/api-docs.html
T
Tomáš Dvořák 0fc92f8464 first commit
2025-10-02 12:39:28 +02:00

424 lines
18 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="cs" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Dokumentace - České Kluby Loga API</title>
<link rel="stylesheet" href="/src/style.css">
</head>
<body class="bg-dark-bg text-white min-h-screen">
<!-- Navigation -->
<nav class="border-b border-dark-border bg-dark-card/50 backdrop-blur-sm sticky top-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<a href="/" class="text-2xl font-bold gradient-text">🇨🇿 České Kluby Loga</a>
<div class="flex gap-4">
<a href="/" class="nav-link px-4 py-2 rounded-lg hover:bg-dark-border transition-smooth">Domů</a>
<a href="/api-docs.html" class="nav-link px-4 py-2 rounded-lg bg-accent-blue/20">API Docs</a>
<a href="/admin.html" class="nav-link px-4 py-2 rounded-lg hover:bg-dark-border transition-smooth">Admin</a>
</div>
</div>
</div>
</nav>
<!-- Header -->
<header class="border-b border-dark-border bg-dark-card">
<div class="container mx-auto px-6 py-12">
<h1 class="text-4xl font-bold gradient-text mb-3">📚 API Dokumentace</h1>
<p class="text-xl text-gray-400">Kompletní referenční příručka pro České Kluby Loga API</p>
<div class="mt-6 flex gap-4 items-center flex-wrap">
<div>
<span class="text-sm text-gray-400 mr-2">Frontend:</span>
<code class="bg-dark-bg px-4 py-2 rounded text-accent-blue">http://localhost:3000</code>
</div>
<div>
<span class="text-sm text-gray-400 mr-2">Backend API:</span>
<code class="bg-dark-bg px-4 py-2 rounded text-accent-green">http://localhost:8080</code>
</div>
</div>
<p class="text-sm text-gray-400 mt-3">💡 Ve vývojovém prostředí používejte relativní cesty (např. <code class="text-accent-blue">/logos</code>), Vite proxy je přesměruje na backend</p>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-6 py-12">
<!-- Quick Start -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-6">🚀 Rychlý Start</h2>
<div class="bg-gradient-to-br from-accent-green/10 to-accent-blue/10 rounded-xl p-6 border-2 border-accent-green/30">
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
<span class="text-2xl">⬆️</span>
Nahrání loga klubu - Základní příkaz
</h3>
<pre class="bg-dark-bg rounded-lg p-4 overflow-x-auto"><code class="text-sm">curl -X POST http://localhost:8080/logos/{club-uuid} \
-F "file=@logo.svg" \
-F "club_name=Název Klubu"</code></pre>
<div class="mt-4 space-y-2">
<p class="text-sm text-gray-300"><strong class="text-accent-green">Povinné:</strong> Club UUID v URL, soubor loga (SVG/PNG/PDF), název klubu</p>
<p class="text-sm text-gray-300"><strong class="text-accent-blue">Volitelné:</strong> club_type, club_website, club_city</p>
</div>
</div>
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mt-6">
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
<span class="text-2xl">📥</span>
Stažení loga klubu
</h3>
<pre class="bg-dark-bg rounded-lg p-4 overflow-x-auto"><code class="text-sm"># Přímo z backendu
curl http://localhost:8080/logos/{uuid}
# Přes frontend proxy
curl http://localhost:3000/api/logos/{uuid}</code></pre>
<p class="text-gray-400 mt-3 text-sm">Vrátí PNG obrázek loga (SVG jako fallback)</p>
</div>
</section>
<!-- Endpoints -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-6">📡 Endpointy</h2>
<!-- List Logos -->
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mb-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 bg-blue-600/20 text-blue-400 rounded font-mono text-sm">GET</span>
<code class="text-lg">/logos</code>
</div>
<p class="text-gray-400 mb-4">Seznam všech nahraných log</p>
<div class="bg-dark-bg rounded-lg p-4">
<h4 class="text-sm font-semibold text-gray-400 mb-2">Response 200:</h4>
<pre class="text-sm overflow-x-auto"><code>[
{
"id": "uuid-here",
"club_name": "AC Sparta Praha",
"club_type": "football",
"has_svg": true,
"has_png": true,
"logo_url": "http://localhost:8080/logos/uuid-here",
"created_at": "2024-01-01T12:00:00Z"
}
]</code></pre>
</div>
</div>
<!-- Get Logo File -->
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mb-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 bg-blue-600/20 text-blue-400 rounded font-mono text-sm">GET</span>
<code class="text-lg">/logos/:id</code>
</div>
<p class="text-gray-400 mb-4">Získání souboru loga (PNG preferováno, SVG jako fallback)</p>
<h4 class="text-sm font-semibold mb-2">Query Parameters (volitelné):</h4>
<div class="bg-dark-bg rounded-lg p-4 mb-4">
<code class="text-sm">format</code> <span class="text-gray-500">string</span> - "png" nebo "svg"
</div>
<div class="bg-dark-bg rounded-lg p-4">
<h4 class="text-sm font-semibold text-gray-400 mb-2">Response 200:</h4>
<p class="text-sm text-gray-400">Binární data obrázku (image/png nebo image/svg+xml)</p>
</div>
</div>
<!-- Get Logo Metadata -->
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mb-6">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 bg-blue-600/20 text-blue-400 rounded font-mono text-sm">GET</span>
<code class="text-lg">/logos/:id/json</code>
</div>
<p class="text-gray-400 mb-4">Získání metadat loga ve formátu JSON</p>
<div class="bg-dark-bg rounded-lg p-4">
<h4 class="text-sm font-semibold text-gray-400 mb-2">Response 200:</h4>
<pre class="text-sm overflow-x-auto"><code>{
"id": "uuid-here",
"club_name": "AC Sparta Praha",
"club_type": "football",
"club_website": "https://sparta.cz",
"has_svg": true,
"has_png": true,
"primary_format": "png",
"logo_url": "http://localhost:8080/logos/uuid-here",
"logo_url_svg": "http://localhost:8080/logos/uuid-here?format=svg",
"logo_url_png": "http://localhost:8080/logos/uuid-here?format=png",
"file_size_svg": 12345,
"file_size_png": 54321,
"created_at": "2024-01-01T12:00:00Z",
"updated_at": "2024-01-01T12:00:00Z"
}</code></pre>
</div>
</div>
<!-- Upload Logo -->
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mb-6 border-2 border-accent-green/40">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 bg-accent-green/20 text-accent-green rounded font-mono text-sm">POST</span>
<code class="text-lg">/logos/:id</code>
</div>
<p class="text-gray-400 mb-4">Nahrání nového loga klubu s kompletními daty (ID klubu, název, logo soubory)</p>
<h4 class="text-sm font-semibold mb-2">URL Parameters:</h4>
<div class="bg-dark-bg rounded-lg p-4 mb-4">
<code class="text-sm">:id</code> <span class="text-red-400">*</span> <span class="text-gray-500">UUID</span> - Jedinečné ID klubu (např. <code class="text-xs">550e8400-e29b-41d4-a716-446655440000</code>)
</div>
<h4 class="text-sm font-semibold mb-2">Content-Type:</h4>
<div class="bg-dark-bg rounded-lg p-4 mb-4">
<code class="text-sm">multipart/form-data</code>
</div>
<h4 class="text-sm font-semibold mb-2">Form Data (Povinné pole):</h4>
<div class="bg-dark-bg rounded-lg p-4 mb-4 space-y-3">
<div class="border-l-2 border-red-400 pl-3">
<code class="text-sm font-semibold text-red-400">file</code> <span class="text-red-400">*</span> <span class="text-gray-500">file (SVG nebo PNG)</span>
<p class="text-xs text-gray-500 mt-1">Soubor loga. Podporované formáty: SVG (doporučeno), PNG, PDF</p>
</div>
<div class="border-l-2 border-red-400 pl-3">
<code class="text-sm font-semibold text-red-400">club_name</code> <span class="text-red-400">*</span> <span class="text-gray-500">string</span>
<p class="text-xs text-gray-500 mt-1">Název klubu (např. "AC Sparta Praha")</p>
</div>
</div>
<h4 class="text-sm font-semibold mb-2">Form Data (Volitelné):</h4>
<div class="bg-dark-bg rounded-lg p-4 mb-4 space-y-3">
<div class="border-l-2 border-blue-400 pl-3">
<code class="text-sm">club_type</code> <span class="text-gray-500">string</span>
<p class="text-xs text-gray-500 mt-1">Typ klubu: <code>"football"</code> (výchozí) nebo <code>"futsal"</code></p>
</div>
<div class="border-l-2 border-blue-400 pl-3">
<code class="text-sm">club_website</code> <span class="text-gray-500">string</span>
<p class="text-xs text-gray-500 mt-1">URL webové stránky klubu (např. "https://sparta.cz")</p>
</div>
<div class="border-l-2 border-blue-400 pl-3">
<code class="text-sm">club_city</code> <span class="text-gray-500">string</span>
<p class="text-xs text-gray-500 mt-1">Město klubu (např. "Praha")</p>
</div>
</div>
<div class="bg-dark-bg rounded-lg p-4 mb-4">
<h4 class="text-sm font-semibold text-gray-400 mb-2">Response 200 (Úspěch):</h4>
<pre class="text-sm overflow-x-auto"><code>{
"success": true,
"id": "550e8400-e29b-41d4-a716-446655440000",
"club_name": "AC Sparta Praha",
"has_svg": true,
"has_png": true,
"size_svg": 12543,
"size_png": 45210,
"message": "logo uploaded successfully"
}</code></pre>
</div>
<div class="bg-red-900/20 rounded-lg p-4 border border-red-600/30">
<h4 class="text-sm font-semibold text-red-400 mb-2">Response 400 (Chyba):</h4>
<pre class="text-sm overflow-x-auto"><code>{
"error": "club_name is required"
}</code></pre>
<p class="text-xs text-gray-400 mt-2">Možné chyby: <code>"no file provided"</code>, <code>"invalid UUID format"</code>, <code>"only .svg, .png and .pdf files are allowed"</code></p>
</div>
</div>
</section>
<!-- Examples -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-6">💡 Příklady Použití - Nahrání Loga</h2>
<!-- cURL Example -->
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mb-6">
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
<span>🔧</span> cURL (Terminal)
</h3>
<div class="space-y-4">
<div>
<h4 class="text-sm font-semibold mb-2 text-accent-green">Minimální nahrání (pouze povinná pole):</h4>
<pre class="bg-dark-bg rounded-lg p-4 overflow-x-auto"><code class="text-sm">curl -X POST http://localhost:8080/logos/550e8400-e29b-41d4-a716-446655440000 \
-F "file=@sparta_logo.svg" \
-F "club_name=AC Sparta Praha"</code></pre>
</div>
<div>
<h4 class="text-sm font-semibold mb-2 text-accent-blue">Kompletní nahrání (všechna data):</h4>
<pre class="bg-dark-bg rounded-lg p-4 overflow-x-auto"><code class="text-sm">curl -X POST http://localhost:8080/logos/550e8400-e29b-41d4-a716-446655440000 \
-F "file=@sparta_logo.svg" \
-F "club_name=AC Sparta Praha" \
-F "club_type=football" \
-F "club_website=https://sparta.cz" \
-F "club_city=Praha"</code></pre>
</div>
<div>
<h4 class="text-sm font-semibold mb-2 text-gray-400">Nahrání PNG místo SVG:</h4>
<pre class="bg-dark-bg rounded-lg p-4 overflow-x-auto"><code class="text-sm">curl -X POST http://localhost:8080/logos/550e8400-e29b-41d4-a716-446655440000 \
-F "file=@sparta_logo.png" \
-F "club_name=AC Sparta Praha"</code></pre>
</div>
</div>
</div>
<!-- JavaScript Example -->
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mb-6">
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
<span>📜</span> JavaScript (Fetch API)
</h3>
<pre class="bg-dark-bg rounded-lg p-4 overflow-x-auto"><code class="text-sm">// Funkce pro nahrání loga s kompletními daty
async function uploadClubLogo(clubId, file, clubData) {
const formData = new FormData();
// Povinná pole
formData.append('file', file);
formData.append('club_name', clubData.name);
// Volitelná pole
if (clubData.type) formData.append('club_type', clubData.type);
if (clubData.website) formData.append('club_website', clubData.website);
if (clubData.city) formData.append('club_city', clubData.city);
const response = await fetch(`http://localhost:8080/logos/${clubId}`, {
method: 'POST',
body: formData
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.error);
}
return await response.json();
}
// Použití s file input
const fileInput = document.getElementById('logoFile');
const clubId = '550e8400-e29b-41d4-a716-446655440000';
const result = await uploadClubLogo(clubId, fileInput.files[0], {
name: 'AC Sparta Praha',
type: 'football',
website: 'https://sparta.cz',
city: 'Praha'
});
console.log('Upload successful:', result);</code></pre>
</div>
<!-- Python Example -->
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mb-6">
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
<span>🐍</span> Python (requests)
</h3>
<pre class="bg-dark-bg rounded-lg p-4 overflow-x-auto"><code class="text-sm">import requests
def upload_club_logo(club_id, file_path, club_name, **optional_data):
"""
Nahraje logo klubu s kompletními daty
Args:
club_id: UUID klubu
file_path: Cesta k souboru loga
club_name: Název klubu (povinný)
**optional_data: club_type, club_website, club_city
"""
with open(file_path, 'rb') as f:
files = {'file': f}
data = {'club_name': club_name}
data.update(optional_data)
response = requests.post(
f"http://localhost:8080/logos/{club_id}",
files=files,
data=data
)
response.raise_for_status()
return response.json()
# Použití
result = upload_club_logo(
club_id='550e8400-e29b-41d4-a716-446655440000',
file_path='sparta_logo.svg',
club_name='AC Sparta Praha',
club_type='football',
club_website='https://sparta.cz',
club_city='Praha'
)
print(f"Upload úspěšný: {result['message']}")
print(f"Has SVG: {result['has_svg']}, Has PNG: {result['has_png']}")</code></pre>
</div>
<!-- PowerShell Example -->
<div class="bg-dark-card rounded-xl p-6 border border-dark-border mb-6">
<h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
<span>💻</span> PowerShell
</h3>
<pre class="bg-dark-bg rounded-lg p-4 overflow-x-auto"><code class="text-sm"># Nahrání loga s kompletními daty
$clubId = "550e8400-e29b-41d4-a716-446655440000"
$logoFile = "C:\logos\sparta_logo.svg"
$form = @{
file = Get-Item -Path $logoFile
club_name = "AC Sparta Praha"
club_type = "football"
club_website = "https://sparta.cz"
club_city = "Praha"
}
$result = Invoke-RestMethod `
-Uri "http://localhost:8080/logos/$clubId" `
-Method Post `
-Form $form
Write-Host "Upload úspěšný: $($result.message)" -ForegroundColor Green
Write-Host "Club: $($result.club_name)" -ForegroundColor Cyan</code></pre>
</div>
</section>
<!-- Error Codes -->
<section>
<h2 class="text-3xl font-bold mb-6">⚠️ Chybové Kódy</h2>
<div class="bg-dark-card rounded-xl p-6 border border-dark-border">
<div class="space-y-4">
<div class="flex items-start gap-4">
<span class="px-3 py-1 bg-green-600/20 text-green-400 rounded text-sm font-mono">200</span>
<div>
<h4 class="font-semibold">OK</h4>
<p class="text-gray-400 text-sm">Požadavek úspěšně dokončen</p>
</div>
</div>
<div class="flex items-start gap-4">
<span class="px-3 py-1 bg-red-600/20 text-red-400 rounded text-sm font-mono">400</span>
<div>
<h4 class="font-semibold">Bad Request</h4>
<p class="text-gray-400 text-sm">Neplatné parametry nebo chybějící povinná pole</p>
</div>
</div>
<div class="flex items-start gap-4">
<span class="px-3 py-1 bg-red-600/20 text-red-400 rounded text-sm font-mono">404</span>
<div>
<h4 class="font-semibold">Not Found</h4>
<p class="text-gray-400 text-sm">Logo nebo klub nenalezen</p>
</div>
</div>
<div class="flex items-start gap-4">
<span class="px-3 py-1 bg-red-600/20 text-red-400 rounded text-sm font-mono">500</span>
<div>
<h4 class="font-semibold">Internal Server Error</h4>
<p class="text-gray-400 text-sm">Interní chyba serveru</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-dark-border mt-20">
<div class="container mx-auto px-6 py-8 text-center text-gray-400">
<p>🇨🇿 České Kluby Loga API</p>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink