136 lines
6.3 KiB
Plaintext
136 lines
6.3 KiB
Plaintext
---
|
|
// src/pages/operativa/serviseri/index.astro
|
|
import Layout from "../../../layouts/Layout.astro";
|
|
import WelcomeHeader from "../../../components/WelcomeHeader.astro";
|
|
import RadniNalogLista from "../../../components/RadniNalogLista.astro";
|
|
---
|
|
|
|
<Layout title="Evidencija Servisera | Operativa">
|
|
<div class="w-full space-y-10">
|
|
|
|
<WelcomeHeader />
|
|
|
|
<div class="grid md:grid-cols-10 gap-8 items-start mb-10 px-2">
|
|
|
|
<div id="direktorij-sekcija" class="hidden md:col-span-10 space-y-6">
|
|
<div class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-[2.5rem] p-6 sm:p-8 shadow-xl shadow-gray-100/40 dark:shadow-none">
|
|
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 pb-4 border-b border-gray-50 dark:border-gray-800">
|
|
<div>
|
|
<h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight leading-none italic">
|
|
Registrirani <span class="text-blue-600">Serviseri</span>
|
|
</h2>
|
|
<p class="text-xs text-gray-400 mt-2 italic font-medium">Popis tehničara s aktivnim ovlastima za radne naloge</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 border border-blue-100/30 dark:border-blue-900/30 italic font-black uppercase tracking-widest text-[11px] px-4 py-2 rounded-2xl w-max">
|
|
Ukupno: <span id="serviseri-counter">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="serviseri-loading" class="py-12 flex flex-col items-center justify-center gap-3 text-gray-400 dark:text-gray-500 italic text-sm">
|
|
<i class="fa-solid fa-circle-notch animate-spin text-blue-600 text-2xl"></i>
|
|
Dohvaćanje operativnih podataka s poslužitelja...
|
|
</div>
|
|
|
|
<div id="serviseri-grid" class="hidden grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
</div>
|
|
|
|
<div id="serviseri-empty" class="hidden py-12 text-center text-gray-400 dark:text-gray-500 italic text-sm">
|
|
<i class="fa-solid fa-user-slash text-2xl mb-2 text-gray-300 dark:text-gray-700 block"></i>
|
|
Nema registriranih servisera u bazi podataka flote.
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="moji-nalozi-sekcija" class="hidden md:col-span-10 space-y-6">
|
|
<RadniNalogLista
|
|
limit={10}
|
|
prikaziNaslov={true}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
|
|
<script>
|
|
import { fetchCurrentUser, fetchServiseri } from "../../../lib/api";
|
|
|
|
async function ucitajStranicuServisera() {
|
|
const direktorijSekcija = document.getElementById('direktorij-sekcija');
|
|
const loadingEl = document.getElementById('serviseri-loading');
|
|
const gridEl = document.getElementById('serviseri-grid');
|
|
const emptyEl = document.getElementById('serviseri-empty');
|
|
const counterEl = document.getElementById('serviseri-counter');
|
|
const mojiNaloziSekcija = document.getElementById('moji-nalozi-sekcija');
|
|
|
|
try {
|
|
const user = await fetchCurrentUser();
|
|
const ulogaGore = user?.uloga ? String(user.uloga).toUpperCase().trim() : '';
|
|
|
|
// 1. Ako je običan serviser, prikaži sekciju s univerzalnom listom
|
|
if (ulogaGore === 'SERVISER') {
|
|
if (direktorijSekcija) direktorijSekcija.classList.add('hidden');
|
|
if (mojiNaloziSekcija) mojiNaloziSekcija.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
// 2. Ako je Admin / Voditelj, prikaži imenik tehničara
|
|
if (direktorijSekcija) direktorijSekcija.classList.remove('hidden');
|
|
if (mojiNaloziSekcija) mojiNaloziSekcija.classList.add('hidden');
|
|
|
|
const serviseri = await fetchServiseri();
|
|
if (loadingEl) loadingEl.classList.add('hidden');
|
|
|
|
if (!serviseri || serviseri.length === 0) {
|
|
if (emptyEl) emptyEl.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
if (counterEl) counterEl.textContent = serviseri.length.toString();
|
|
|
|
if (gridEl) {
|
|
gridEl.innerHTML = serviseri.map((s: any) => {
|
|
const inicijali = `${s.first_name?.[0] || ''}${s.last_name?.[0] || ''}`.toUpperCase() || 'ST';
|
|
const imePrezime = `${s.first_name || ''} ${s.last_name || ''}`.trim() || s.email;
|
|
|
|
return `
|
|
<div class="bg-gray-50/50 dark:bg-gray-800/30 border border-gray-100 dark:border-gray-800/60 rounded-[1.8rem] p-5 flex items-center justify-between gap-4 hover:border-blue-500/30 dark:hover:border-blue-500/20 hover:bg-white dark:hover:bg-gray-800/60 transition-all duration-300 group">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-blue-600/10 text-blue-600 dark:text-blue-400 font-black text-xs tracking-widest rounded-2xl flex items-center justify-center border border-blue-500/10 shadow-sm">
|
|
${inicijali}
|
|
</div>
|
|
<div class="text-left">
|
|
<h3 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-tight leading-none group-hover:text-blue-600 transition-colors italic">
|
|
${imePrezime}
|
|
</h3>
|
|
<p class="text-[10px] font-medium text-gray-400 mt-2 lowercase select-all">${s.email}</p>
|
|
</div>
|
|
</div>
|
|
<a href="/operativa/serviseri/${s.id}" class="w-10 h-10 flex items-center justify-center rounded-xl bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700/80 text-gray-400 group-hover:text-white group-hover:bg-blue-600 group-hover:border-blue-500 active:scale-90 shadow-sm transition-all cursor-pointer">
|
|
<i class="fa-solid fa-chevron-right text-xs group-hover:translate-x-0.5 transition-transform"></i>
|
|
</a>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
gridEl.classList.remove('hidden');
|
|
gridEl.classList.add('grid');
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error("Greška pri učitavanju stranice:", err);
|
|
if (loadingEl) loadingEl.classList.add('hidden');
|
|
|
|
// 🚀 TOAST OKIDAMO SAMO OVDJE NA GLAVNOJ STRANICI ZA IMENIK
|
|
// @ts-ignore
|
|
window.showToast?.("Sinkronizacija imenika flote neuspješna.", "error");
|
|
}
|
|
}
|
|
|
|
ucitajStranicuServisera();
|
|
document.addEventListener('astro:after-swap', ucitajStranicuServisera);
|
|
</script> |