Files
pgz-sport/static/dokumenti.html
T

154 lines
6.2 KiB
HTML

<!DOCTYPE html>
<!--
dokumenti.html — Lista dokumenata: godišnjaci, publikacije, izdanja
Author: Damir Radulić | v1.0 | 05.05.2026
-->
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>📚 Dokumenti — PGŽ Sport</title>
<link rel="icon" href="/favicon.ico">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px system-ui;background:#06080d;color:#e0e0e0;padding:0}
header{background:#0a0e15;padding:12px 20px;border-bottom:1px solid #2a2a2e;display:flex;justify-content:space-between;align-items:center}
header h1{font-size:20px;color:#5fb6ff}
header a{color:#888;text-decoration:none;margin-left:16px;font-size:14px}
header a:hover{color:#fff}
.container{padding:20px;max-width:1400px;margin:0 auto}
.filters{background:#0c1016;padding:16px;border-radius:8px;margin-bottom:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.filters label{font-size:12px;color:#888}
.filters select, .filters input {
background:#1a1a1e;border:1px solid #2a2a2e;color:#fff;padding:8px 12px;border-radius:5px;font-size:13px
}
.filters input{min-width:240px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{background:#0c1016;border:1px solid #1a1a1e;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s}
.card:hover{border-color:#5fb6ff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(95,182,255,.2)}
.card-year{font-size:32px;font-weight:800;color:#5fb6ff;margin-bottom:4px}
.card-title{font-size:14px;font-weight:600;margin-bottom:8px;color:#fff;line-height:1.3}
.card-org{font-size:11px;color:#888;margin-bottom:6px}
.card-meta{font-size:10px;color:#666;display:flex;gap:8px;flex-wrap:wrap}
.card-meta span{background:#1a1a1e;padding:2px 8px;border-radius:3px}
.empty{text-align:center;padding:40px;color:#666}
.stats{font-size:13px;color:#888;margin-bottom:16px}
.stats b{color:#5fb6ff;font-weight:600}
.badge-godisnjak{background:#1e3a5f;color:#5fb6ff;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600}
</style>
</head>
<body>
<header>
<h1><a href="/" style="color:#5fb6ff;text-decoration:none">📚 Dokumenti</a></h1>
<div>
<a href="/">🏠 Home</a>
<a href="/app">📊 App</a>
<a href="/admin/users">👥 Admin</a>
<a href="/erp/full">💼 ERP</a>
<a href="/crm/v2">📝 CRM</a>
</div>
</header>
<div class="container">
<div class="filters">
<div>
<label>Vrsta</label><br>
<select id="f-vrsta" onchange="loadDocs()">
<option value="">Sve</option>
<option value="godisnjak">Godišnjak</option>
<option value="manifestacija">Manifestacija</option>
<option value="natjecaj">Natječaj</option>
<option value="izvjestaj">Izvještaj</option>
</select>
</div>
<div>
<label>Izdavatelj</label><br>
<select id="f-org" onchange="loadDocs()">
<option value="">Svi</option>
<option value="Zajednica športskih saveza PGŽ">ZSP PGŽ</option>
<option value="Riječki sportski savez">RSS</option>
<option value="Grad Rijeka">Grad Rijeka</option>
<option value="HOO">HOO</option>
<option value="Grad/Općina">JLS</option>
</select>
</div>
<div>
<label>Sport</label><br>
<select id="f-sport" onchange="loadDocs()">
<option value="">Svi</option>
<option value="nogomet">Nogomet</option>
<option value="košarka">Košarka</option>
<option value="rukomet">Rukomet</option>
<option value="odbojka">Odbojka</option>
<option value="vaterpolo">Vaterpolo</option>
</select>
</div>
<div>
<label>Pretraga</label><br>
<input type="text" id="f-q" placeholder="Naziv, opis…" onkeyup="if(event.key==='Enter') loadDocs()">
</div>
<button onclick="loadDocs()" style="background:#5fb6ff;color:#000;border:none;padding:10px 16px;border-radius:5px;font-weight:600;cursor:pointer">🔍 Pretraži</button>
</div>
<div class="stats" id="stats">Učitavanje…</div>
<div class="grid" id="docs-grid">
<div class="empty">Učitavanje dokumenata…</div>
</div>
</div>
<script>
async function loadDocs(){
const vrsta = document.getElementById('f-vrsta').value;
const org = document.getElementById('f-org').value;
const sport = document.getElementById('f-sport').value;
const q = document.getElementById('f-q').value;
const params = new URLSearchParams();
if(vrsta) params.set('vrsta', vrsta);
if(sport) params.set('sport', sport);
if(q) params.set('q', q);
if(org) params.set('organizacija', org);
params.set('limit', '500');
document.getElementById('docs-grid').innerHTML = '<div class="empty">Učitavanje…</div>';
try{
const r = await fetch('/sport/api/v2/dokumenti?'+params.toString());
const d = await r.json();
let rows = d.rows || d.dokumenti || [];
document.getElementById('stats').innerHTML = `<b>${rows.length}</b> dokumenata po filtru (filter: ${[vrsta,sport,org,q].filter(Boolean).join(', ') || 'bez filtera'})`;
if(rows.length === 0){
document.getElementById('docs-grid').innerHTML = '<div class="empty">Nema dokumenata po filtru</div>';
return;
}
document.getElementById('docs-grid').innerHTML = rows.map(r => {
const year = r.godina || '—';
const url = r.izvor_url || ('/sport/api/v2/dokumenti/'+r.id);
const isGod = r.vrsta === 'godisnjak';
return `
<div class="card" onclick="window.open('${url}', '_blank')">
<div class="card-year">${year}</div>
<div class="card-title">${r.title || r.fname || 'Dokument'}</div>
<div class="card-org">${r.organizacija || '—'}</div>
<div class="card-meta">
${isGod ? '<span class="badge-godisnjak">📖 GODIŠNJAK</span>' : ''}
<span>${r.vrsta || ''}</span>
${r.sport ? '<span>'+r.sport+'</span>' : ''}
${r.sadrzaj_size ? '<span>'+(Math.round(r.sadrzaj_size/1000))+'KB</span>' : ''}
<span>📄 PDF</span>
</div>
</div>
`;
}).join('');
}catch(e){
document.getElementById('docs-grid').innerHTML = '<div class="empty">Greška: '+e.message+'</div>';
}
}
loadDocs();
</script>
</body>
</html>