Damir Radulić
3a79965899
Reference: app.rinet.one/klasik/dabi — uppercase section headers + grouped items.
Shared module rewrite:
- /static/shared/sidebar.css v2.0
* 6 named sections, 240px expanded / 58px collapsed
* Active item: gold left-border + transparent gradient fill
* Hover: blue left-border accent
* Section header hidden in collapsed mode (replaced with dashed separator)
* Tooltip on hover (data-label) when collapsed
* Mobile <768px overlay with backdrop
- /static/shared/sidebar.js v2.0
* SIDEBAR_SECTIONS = [PORTAL, OPERATIVA, CRM, ERP, ANALITIKA, ADMIN]
* ADMIN section hidden unless user_type ∈ {pgz_admin, super_admin} (gated by /api/auth/me)
* Cross-portal links (↗ marker) for items that target a different page
* Same-page items trigger hashchange instead of full reload
* Footer = avatar + name + role + ▾ user menu (Profil / Postavke / Public portal / Prijava ↔ Odjava)
* localStorage 'sidebarCollapsed' persists across all 8 pages
Page integration:
- sport2.html ← native .sb hidden; data-active=dashboard; hashchange→navTo
- app.html ← native .sb hidden; data-active=profil; hashchange→navTo
- admin.html ← native .sidebar hidden; data-active=korisnici
- erp.html ← native .sidebar hidden; data-active=racuni
- crm.html ← data-active=clanarine
- audit.html ← data-active=audit (existing)
- kpi.html ← data-active=kpi (existing)
- login.html ← data-active=login (no item match → no highlight; user menu shows Prijava)
Backups: _backups/*.cc3_pre_redesign.{TS}
Live verified: all 8 pages HTTP 200; shared sidebar.css 200 (8664 B); sidebar.js 200 (12678 B); 6 sections present.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
299 lines
12 KiB
JavaScript
299 lines
12 KiB
JavaScript
/* PGŽ SPORT — Unified Sectioned Sidebar v2.0
|
|
* dradulic@outlook.com / damir@rinet.one — 2026-05-05
|
|
* Reference: app.rinet.one/klasik/dabi
|
|
*
|
|
* Usage:
|
|
* <link rel="stylesheet" href="/sport/static/shared/sidebar.css">
|
|
* <script src="/sport/static/shared/sidebar.js" defer
|
|
* data-active="dashboard" // active item id
|
|
* data-portal="portal"></script> // active portal hint (optional)
|
|
*
|
|
* Auto-mounts <aside id="pgz-sb"> at start of <body> and adds class "pgz-has-sb" to <body>
|
|
* for layout. ADMIN section is gated by user role from /api/auth/me.
|
|
*/
|
|
(function(){
|
|
'use strict';
|
|
|
|
// Sectioned menu (DABI-style).
|
|
// href can be:
|
|
// "/sport/<page>" → cross-portal navigation (full page load)
|
|
// "/sport/<page>#<hash>" → cross-portal + intent on that page
|
|
// "#<id>" → in-page anchor (handled by host page on hashchange)
|
|
const SIDEBAR_SECTIONS = [
|
|
{title:'PORTAL', items: [
|
|
{id:'dashboard', ic:'\u{1F4CA}', label:'Dashboard', href:'/sport/static/sport2.html#dashboard'},
|
|
{id:'savezi', ic:'\u{1F3C5}', label:'Savezi', href:'/sport/static/sport2.html#savezi'},
|
|
{id:'klubovi', ic:'⬢', label:'Klubovi', href:'/sport/static/sport2.html#klubovi'},
|
|
{id:'sportasi', ic:'\u{1F464}', label:'Sportaši', href:'/sport/static/sport2.html#sportasi'},
|
|
{id:'manifestacije', ic:'\u{1F4C5}', label:'Manifestacije', href:'/sport/static/sport2.html#manifestacije'}
|
|
]},
|
|
{title:'OPERATIVA', items: [
|
|
{id:'profil', ic:'\u{1F464}', label:'Moj profil', href:'/sport/app#profil'},
|
|
{id:'app', ic:'\u{1F4F1}', label:'Aplikacija', href:'/sport/app'},
|
|
{id:'kalendar', ic:'\u{1F4C5}', label:'Kalendar', href:'/sport/app#kalendar'},
|
|
{id:'notif', ic:'\u{1F514}', label:'Notifikacije', href:'/sport/app#notif'}
|
|
]},
|
|
{title:'CRM', items: [
|
|
{id:'clanarine', ic:'\u{1F4B3}', label:'Članarine', href:'/sport/crm#clanarine'},
|
|
{id:'lijecnicki',ic:'⚕', label:'Liječnički', href:'/sport/crm#lijecnicki'},
|
|
{id:'obrasci', ic:'\u{1F4CB}', label:'Obrasci', href:'/sport/crm#obrasci'},
|
|
{id:'dokumenti', ic:'\u{1F4C4}', label:'Dokumenti', href:'/sport/crm#dokumenti'}
|
|
]},
|
|
{title:'ERP', items: [
|
|
{id:'racuni', ic:'\u{1F9FE}', label:'Računi (OCR)', href:'/sport/erp#racuni'},
|
|
{id:'putni', ic:'✈', label:'Putni nalozi', href:'/sport/erp#putni'},
|
|
{id:'placanja', ic:'\u{1F4B0}', label:'Plaćanja', href:'/sport/erp#placanja'},
|
|
{id:'xlsx', ic:'\u{1F4C8}', label:'XLSX export', href:'/sport/erp#xlsx'}
|
|
]},
|
|
{title:'ANALITIKA', items: [
|
|
{id:'kpi', ic:'\u{1F4C8}', label:'KPI Dashboard', href:'/sport/kpi'},
|
|
{id:'financije', ic:'€', label:'Financije', href:'/sport/static/sport2.html#financije'},
|
|
{id:'mreza', ic:'\u{1F578}', label:'Mreža (graf)', href:'/sport/static/sport2.html#mreza'},
|
|
{id:'forenzika', ic:'⚠', label:'Forenzika', href:'/sport/static/sport2.html#forenzika'},
|
|
{id:'audit', ic:'\u{1F512}', label:'Audit log', href:'/sport/audit'}
|
|
]},
|
|
{title:'ADMIN', requireRole:['pgz_admin','super_admin'], items: [
|
|
{id:'korisnici', ic:'\u{1F465}', label:'Korisnici', href:'/sport/admin#korisnici'},
|
|
{id:'tenanti', ic:'\u{1F3E2}', label:'Tenanti', href:'/sport/admin#tenanti'},
|
|
{id:'sigurnost', ic:'\u{1F6E1}', label:'Sigurnost', href:'/sport/admin#sigurnost'},
|
|
{id:'sustav', ic:'⚙', label:'Sustav', href:'/sport/admin#sustav'}
|
|
]}
|
|
];
|
|
|
|
const STATE_KEY = 'sidebarCollapsed';
|
|
const $ = (s, root) => (root||document).querySelector(s);
|
|
const esc = s => String(s==null?'':s).replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]));
|
|
|
|
function readToken(){
|
|
try { return localStorage.getItem('jwt') || localStorage.getItem('access_token') || ''; }
|
|
catch(e){ return ''; }
|
|
}
|
|
function logout(){
|
|
if(!confirm('Odjava iz aplikacije?')) return;
|
|
try {
|
|
localStorage.removeItem('jwt');
|
|
localStorage.removeItem('access_token');
|
|
localStorage.removeItem('app-role');
|
|
} catch(e){}
|
|
location.href = '/sport/login';
|
|
}
|
|
function initials(n){
|
|
if(!n) return '?';
|
|
const p = String(n).trim().split(/\s+/);
|
|
return ((p[0]||'')[0]||'').toUpperCase() + ((p[1]||'')[0]||'').toUpperCase();
|
|
}
|
|
|
|
// Determine current page intent
|
|
function getActiveKey(){
|
|
const cs = document.currentScript || Array.from(document.scripts).find(s => /sidebar\.js/.test(s.src||''));
|
|
return (cs && cs.dataset && cs.dataset.active) || '';
|
|
}
|
|
|
|
function userCanSeeSection(sec, user){
|
|
if(!sec.requireRole || !sec.requireRole.length) return true;
|
|
if(!user) return false;
|
|
return sec.requireRole.indexOf(user.user_type) >= 0;
|
|
}
|
|
|
|
function renderSections(activeKey, user){
|
|
const out = [];
|
|
for(const sec of SIDEBAR_SECTIONS){
|
|
if(!userCanSeeSection(sec, user)) continue;
|
|
out.push(`<div class="pgz-sb-section ${sec.title==='ADMIN'?'pgz-admin':''}">${esc(sec.title)}</div>`);
|
|
for(const it of sec.items){
|
|
const active = it.id === activeKey;
|
|
const cross = it.href && it.href.startsWith('/sport/') && !sameOrigin(it.href);
|
|
out.push(`<a class="pgz-nav-i ${active?'active':''} ${cross?'cross-portal':''}"
|
|
href="${esc(it.href)}" data-id="${esc(it.id)}" data-label="${esc(it.label)}">
|
|
<span class="ic">${it.ic||'•'}</span>
|
|
<span class="lbl">${esc(it.label)}</span>
|
|
${it.badge?`<span class="badge">${esc(it.badge)}</span>`:''}
|
|
</a>`);
|
|
}
|
|
}
|
|
return out.join('');
|
|
}
|
|
|
|
// is this href same as current page (just hash navigation)?
|
|
function sameOrigin(href){
|
|
try {
|
|
const u = new URL(href, location.href);
|
|
return u.origin === location.origin && u.pathname === location.pathname;
|
|
} catch(e){ return false; }
|
|
}
|
|
|
|
function renderShell(activeKey, user){
|
|
const sb = document.createElement('aside');
|
|
sb.id = 'pgz-sb';
|
|
sb.innerHTML = `
|
|
<div class="pgz-sb-h">
|
|
<div class="pgz-mark">PGŽ</div>
|
|
<div class="pgz-htxt">
|
|
<div class="pgz-logo">PGŽ <span class="g">SPORT</span></div>
|
|
<div class="pgz-sub">Odjel za sport</div>
|
|
</div>
|
|
<div class="pgz-sb-toggle" onclick="PGZSidebar.toggle()" title="Skupi/raširi">←</div>
|
|
<div class="pgz-sb-mx" onclick="PGZSidebar.closeMobile()" title="Zatvori">✕</div>
|
|
</div>
|
|
<nav class="pgz-sb-nav" id="pgz-sb-nav">${renderSections(activeKey, user)}</nav>
|
|
<div class="pgz-sb-foot" id="pgz-sb-foot" onclick="PGZSidebar.toggleUserMenu(event)">
|
|
<div class="av" id="pgz-sb-av">PG</div>
|
|
<div class="ui">
|
|
<div class="un" id="pgz-sb-un">Gost</div>
|
|
<div class="ur" id="pgz-sb-ur">Demo</div>
|
|
</div>
|
|
<div class="caret">▾</div>
|
|
<div class="pgz-user-menu" id="pgz-user-menu" onclick="event.stopPropagation()">
|
|
<a href="/sport/app#profil"><span>👤</span><span>Moj profil</span></a>
|
|
<a href="/sport/app#postavke"><span>⚙</span><span>Postavke</span></a>
|
|
<a href="/sport/static/sport2.html"><span>🌐</span><span>Public portal</span></a>
|
|
<div class="sep"></div>
|
|
<a href="/sport/login" id="pgz-menu-login"><span>🔑</span><span>Prijava</span></a>
|
|
<a class="danger" id="pgz-menu-logout" onclick="PGZSidebar.logout()" style="display:none"><span>⎋</span><span>Odjava</span></a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
return sb;
|
|
}
|
|
function renderBurger(){
|
|
if(document.getElementById('pgz-sb-burger')) return;
|
|
const b = document.createElement('div');
|
|
b.id = 'pgz-sb-burger';
|
|
b.className = 'pgz-sb-burger';
|
|
b.innerHTML = '≡';
|
|
b.onclick = () => PGZSidebar.openMobile();
|
|
document.body.appendChild(b);
|
|
}
|
|
|
|
function setUserDisplay(me){
|
|
const un = $('#pgz-sb-un'), ur = $('#pgz-sb-ur'), av = $('#pgz-sb-av');
|
|
const loginLink = document.getElementById('pgz-menu-login');
|
|
const logoutLink = document.getElementById('pgz-menu-logout');
|
|
if(!me){
|
|
if(un) un.textContent = 'Gost';
|
|
if(ur) ur.textContent = 'Klikni za prijavu';
|
|
if(av){ av.textContent = '?'; av.innerHTML = av.innerHTML; }
|
|
if(loginLink) loginLink.style.display = 'flex';
|
|
if(logoutLink) logoutLink.style.display = 'none';
|
|
return;
|
|
}
|
|
const name = me.full_name || ((me.ime||'')+' '+(me.prezime||'')).trim() || me.email || '—';
|
|
const role = me.user_type || '';
|
|
const avSrc = me.avatar_url || me.google_picture;
|
|
if(un) un.textContent = name;
|
|
if(ur) ur.textContent = role;
|
|
if(av){
|
|
if(avSrc) av.innerHTML = `<img src="${esc(avSrc)}" alt="">`;
|
|
else av.textContent = initials(name);
|
|
}
|
|
if(loginLink) loginLink.style.display = 'none';
|
|
if(logoutLink) logoutLink.style.display = 'flex';
|
|
}
|
|
|
|
function applyCollapsedFromStorage(){
|
|
let col = false;
|
|
try { col = localStorage.getItem(STATE_KEY) === '1'; } catch(e){}
|
|
const sb = document.getElementById('pgz-sb');
|
|
if(!sb) return;
|
|
sb.classList.toggle('pgz-collapsed', col);
|
|
document.body.classList.toggle('pgz-sb-col', col);
|
|
}
|
|
|
|
async function tryLoadMe(){
|
|
const tok = readToken(); if(!tok) return null;
|
|
try {
|
|
const r = await fetch('/sport/api/auth/me', {headers:{'Authorization':'Bearer '+tok}});
|
|
if(!r.ok) return null;
|
|
return await r.json();
|
|
} catch(e){ return null; }
|
|
}
|
|
|
|
// ────────── Public API ──────────
|
|
const PGZSidebar = {
|
|
SIDEBAR_SECTIONS,
|
|
|
|
async mount(opts){
|
|
opts = opts || {};
|
|
const activeKey = opts.activeKey || getActiveKey();
|
|
const existing = document.getElementById('pgz-sb');
|
|
if(existing) existing.remove();
|
|
|
|
// Try /api/auth/me first so ADMIN section is gated correctly
|
|
const me = await tryLoadMe();
|
|
const sb = renderShell(activeKey, me);
|
|
document.body.insertBefore(sb, document.body.firstChild);
|
|
document.body.classList.add('pgz-has-sb');
|
|
renderBurger();
|
|
applyCollapsedFromStorage();
|
|
setUserDisplay(me);
|
|
|
|
// listen for hashchange to update active item without reload
|
|
window.addEventListener('hashchange', () => {
|
|
const h = location.hash.replace(/^#/,'');
|
|
if(!h) return;
|
|
document.querySelectorAll('#pgz-sb .pgz-nav-i').forEach(el => {
|
|
el.classList.toggle('active', el.dataset.id===h);
|
|
});
|
|
});
|
|
},
|
|
|
|
toggle(){
|
|
const sb = document.getElementById('pgz-sb');
|
|
if(!sb) return;
|
|
const col = sb.classList.toggle('pgz-collapsed');
|
|
document.body.classList.toggle('pgz-sb-col', col);
|
|
try { localStorage.setItem(STATE_KEY, col ? '1' : '0'); } catch(e){}
|
|
},
|
|
openMobile(){
|
|
const sb = document.getElementById('pgz-sb');
|
|
if(!sb) return;
|
|
sb.classList.add('pgz-mobile-open');
|
|
document.body.classList.add('pgz-mobile-sb-open');
|
|
const closer = (ev) => {
|
|
if(!sb.contains(ev.target) && ev.target.id !== 'pgz-sb-burger'){
|
|
PGZSidebar.closeMobile();
|
|
document.removeEventListener('click', closer, true);
|
|
}
|
|
};
|
|
setTimeout(() => document.addEventListener('click', closer, true), 50);
|
|
},
|
|
closeMobile(){
|
|
const sb = document.getElementById('pgz-sb');
|
|
if(!sb) return;
|
|
sb.classList.remove('pgz-mobile-open');
|
|
document.body.classList.remove('pgz-mobile-sb-open');
|
|
},
|
|
toggleUserMenu(ev){
|
|
ev && ev.stopPropagation();
|
|
const f = document.getElementById('pgz-sb-foot');
|
|
const m = document.getElementById('pgz-user-menu');
|
|
if(!f || !m) return;
|
|
const open = f.classList.toggle('menu-open');
|
|
m.classList.toggle('open', open);
|
|
if(open){
|
|
const closer = (e) => {
|
|
if(!f.contains(e.target)){
|
|
f.classList.remove('menu-open');
|
|
m.classList.remove('open');
|
|
document.removeEventListener('click', closer, true);
|
|
}
|
|
};
|
|
setTimeout(() => document.addEventListener('click', closer, true), 50);
|
|
}
|
|
},
|
|
logout
|
|
};
|
|
window.PGZSidebar = PGZSidebar;
|
|
|
|
// Auto-mount unless data-inline=1
|
|
const cs = document.currentScript;
|
|
const inline = cs && cs.dataset && cs.dataset.inline === '1';
|
|
if(!inline){
|
|
if(document.readyState === 'loading'){
|
|
document.addEventListener('DOMContentLoaded', () => PGZSidebar.mount({}));
|
|
} else {
|
|
PGZSidebar.mount({});
|
|
}
|
|
}
|
|
})();
|