v004
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
import Button from './Button.astro';
|
||||
|
||||
interface Props {
|
||||
tip: 'dashboard' | 'radni-nalog' | 'stroj' | 'vlasnik';
|
||||
tip: 'dashboard' | 'radni-nalog' | 'stroj' | 'vlasnik' | 'vozilo'; // DODANO: vozilo
|
||||
podaci: any;
|
||||
}
|
||||
|
||||
@@ -16,117 +16,138 @@ const formatDate = (date: string) =>
|
||||
---
|
||||
|
||||
<aside class="space-y-6">
|
||||
<!-- SEKCIJA 1: GLAVNE AKCIJE (Uvijek vidljivo) -->
|
||||
<div class="grid gap-3">
|
||||
{tip === 'dashboard' && (
|
||||
<>
|
||||
<div class="space-y-6">
|
||||
<h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight italic px-4">
|
||||
Upravljanje
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<a href="/operativa/radni-nalozi/novi" class="group bg-blue-600 text-white p-6 rounded-[2rem] flex items-center gap-4 hover:bg-blue-700 transition-all shadow-xl shadow-blue-500/20 active:scale-95">
|
||||
<div class="bg-white text-blue-600 w-12 h-12 rounded-2xl flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-plus text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest leading-none">Novi nalog</span>
|
||||
<span class="text-[10px] opacity-70 mt-1 italic font-bold uppercase">Inicijaliziraj nalog</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="grid gap-3">
|
||||
{tip === 'dashboard' && (
|
||||
<>
|
||||
<div class="space-y-6">
|
||||
<h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight italic px-4">
|
||||
Upravljanje
|
||||
</h2>
|
||||
<a href="/fleet/vozila" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-blue-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
|
||||
<div class="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-truck-pickup text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Vozni park</span>
|
||||
<span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Status flote</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/kupci/svi" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-indigo-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
|
||||
<div class="bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-address-book text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Klijenti</span>
|
||||
<span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Baza partnera</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<Button variant="primary" class="w-full justify-center gap-2 !rounded-2xl py-4 uppercase font-black italic tracking-widest">
|
||||
<i class="fa-solid fa-print"></i> Ispis naloga
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'radni-nalog' && (
|
||||
<>
|
||||
<button class="w-full py-4 bg-blue-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
|
||||
<i class="fa-solid fa-check-double mr-2"></i> Završi nalog
|
||||
</button>
|
||||
<button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all">
|
||||
<i class="fa-solid fa-print mr-2"></i> Ispis (PDF)
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'stroj' && (
|
||||
<>
|
||||
<button class="w-full py-4 bg-green-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-green-700 transition-all shadow-lg shadow-green-500/20">
|
||||
<i class="fa-solid fa-plus mr-2"></i> Novi Radni Nalog
|
||||
</button>
|
||||
<button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest">
|
||||
<i class="fa-solid fa-file-contract mr-2"></i> Atesti i Dokumenti
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'vlasnik' && (
|
||||
<>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-[2.5rem] p-6 shadow-xl border border-gray-100 dark:border-gray-700 mb-6">
|
||||
<label class="text-[9px] font-black uppercase text-indigo-600 block mb-4 tracking-[0.2em] italic">Upravljanje klijentom</label>
|
||||
<div class="grid gap-3">
|
||||
<Button class="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-500/20">
|
||||
<i class="fa-solid fa-pen-to-square mr-2"></i> Uredi podatke
|
||||
</Button>
|
||||
<a href={`tel:${podaci.telefon}`} class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all text-center no-underline">
|
||||
<i class="fa-solid fa-phone mr-2"></i> Nazovi klijenta
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-50/50 dark:bg-indigo-900/10 rounded-[2.5rem] p-6 border border-dashed border-indigo-200 dark:border-indigo-800">
|
||||
<label class="text-[9px] font-black uppercase text-indigo-400 block mb-4 tracking-[0.2em] italic">Podaci o tvrtki</label>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">OIB</span>
|
||||
<span class="text-sm font-black dark:text-gray-200 tracking-tighter">{podaci.oib}</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">Adresa</span>
|
||||
<span class="text-sm font-black dark:text-gray-200 leading-tight">{podaci.adresa}, {podaci.grad}</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">Email</span>
|
||||
<span class="text-sm font-black text-indigo-600 truncate">{podaci.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'vozilo' && (
|
||||
<>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-[2.5rem] p-6 shadow-xl border border-gray-100 dark:border-gray-700 mb-2">
|
||||
<label class="text-[9px] font-black uppercase text-blue-600 block mb-4 tracking-[0.2em] italic">Upravljanje vozilom</label>
|
||||
<div class="grid gap-3">
|
||||
<Button
|
||||
id="btn-brzi-servis"
|
||||
variant="primary"
|
||||
class="w-full justify-center py-4 rounded-2xl font-black uppercase text-[11px] tracking-widest shadow-lg shadow-blue-500/20"
|
||||
data-id={podaci.id}
|
||||
>
|
||||
<i class="fa-solid fa-screwdriver-wrench mr-2"></i> Otvori Servis
|
||||
</Button>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<a href="/operativa/radni-nalozi/novi" class="group bg-blue-600 text-white p-6 rounded-[2rem] flex items-center gap-4 hover:bg-blue-700 transition-all shadow-xl shadow-blue-500/20 active:scale-95">
|
||||
<div class="bg-white text-blue-600 w-12 h-12 rounded-2xl flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-plus text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest leading-none">Novi nalog</span>
|
||||
<span class="text-[10px] opacity-70 mt-1 italic font-bold uppercase">Inicijaliziraj nalog</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/fleet/vozila" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-blue-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
|
||||
<div class="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-truck-pickup text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Vozni park</span>
|
||||
<span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Status flote</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/kupci/svi" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-indigo-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
|
||||
<div class="bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
|
||||
<i class="fa-solid fa-address-book text-xl"></i>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Klijenti</span>
|
||||
<span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Baza partnera</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<Button variant="primary" class="w-full justify-center gap-2 !rounded-2xl py-4 uppercase font-black italic tracking-widest">
|
||||
<i class="fa-solid fa-print"></i> Ispis naloga
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
href={`/operativa/radni-nalozi?vozilo=${podaci.id}`}
|
||||
variant="secondary"
|
||||
class="w-full justify-center py-4 rounded-2xl font-black uppercase text-[11px] tracking-widest"
|
||||
>
|
||||
<i class="fa-solid fa-file-invoice mr-2 opacity-70"></i> Radni Nalozi
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{tip === 'radni-nalog' && (
|
||||
<>
|
||||
<button class="w-full py-4 bg-blue-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
|
||||
<i class="fa-solid fa-check-double mr-2"></i> Završi nalog
|
||||
</button>
|
||||
<button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all">
|
||||
<i class="fa-solid fa-print mr-2"></i> Ispis (PDF)
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'stroj' && (
|
||||
<>
|
||||
<button class="w-full py-4 bg-green-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-green-700 transition-all shadow-lg shadow-green-500/20">
|
||||
<i class="fa-solid fa-plus mr-2"></i> Novi Radni Nalog
|
||||
</button>
|
||||
<button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest">
|
||||
<i class="fa-solid fa-file-contract mr-2"></i> Atesti i Dokumenti
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'vlasnik' && (
|
||||
<>
|
||||
<!-- AKCIJE ZA KUPCA -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-[2.5rem] p-6 shadow-xl border border-gray-100 dark:border-gray-700 mb-6">
|
||||
<label class="text-[9px] font-black uppercase text-indigo-600 block mb-4 tracking-[0.2em] italic">Upravljanje klijentom</label>
|
||||
<div class="grid gap-3">
|
||||
<Button class="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-500/20">
|
||||
<i class="fa-solid fa-pen-to-square mr-2"></i> Uredi podatke
|
||||
</Button>
|
||||
<a href={`tel:${podaci.telefon}`} class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all text-center no-underline">
|
||||
<i class="fa-solid fa-phone mr-2"></i> Nazovi klijenta
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DETALJI TVRTKE (Metadata preseljena s glavnog ekrana) -->
|
||||
<div class="bg-indigo-50/50 dark:bg-indigo-900/10 rounded-[2.5rem] p-6 border border-dashed border-indigo-200 dark:border-indigo-800">
|
||||
<label class="text-[9px] font-black uppercase text-indigo-400 block mb-4 tracking-[0.2em] italic">Podaci o tvrtki</label>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">OIB</span>
|
||||
<span class="text-sm font-black dark:text-gray-200 tracking-tighter">{podaci.oib}</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">Adresa</span>
|
||||
<span class="text-sm font-black dark:text-gray-200 leading-tight">{podaci.adresa}, {podaci.grad}</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[9px] font-bold text-gray-400 uppercase">Email</span>
|
||||
<span class="text-sm font-black text-indigo-600 truncate">{podaci.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
<!-- SEKCIJA 2: KONTEKSTUALNI DETALJI (Ovdje selimo manje bitne stvari) -->
|
||||
<div class="bg-gray-50 dark:bg-gray-900/40 rounded-[2.5rem] p-6 border border-dashed border-gray-200 dark:border-gray-700">
|
||||
<label class="text-[9px] font-black uppercase text-gray-400 block mb-4 tracking-[0.2em] italic">Informacije sustava</label>
|
||||
|
||||
@@ -134,16 +155,12 @@ const formatDate = (date: string) =>
|
||||
{tip === 'radni-nalog' && (
|
||||
<>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Prioritet</span>
|
||||
<span class="text-xs font-black text-red-500 uppercase italic">Visok</span>
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Status</span>
|
||||
<span class="text-xs font-black text-red-500 uppercase italic">{podaci.status}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Izradio</span>
|
||||
<span class="text-xs font-black dark:text-gray-200">Admin Sustava</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Ažurirano</span>
|
||||
<span class="text-xs font-black dark:text-gray-200">{formatDate(podaci.datum_azuriranja)}</span>
|
||||
<span class="text-xs font-black dark:text-gray-200">{podaci.izvrsitelj_ime}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@@ -164,6 +181,19 @@ const formatDate = (date: string) =>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tip === 'vozilo' && (
|
||||
<>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">Sustav ID</span>
|
||||
<span class="text-xs font-black dark:text-gray-200">#{podaci.id}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
|
||||
<span class="text-[10px] font-bold text-gray-400 uppercase">DB Status</span>
|
||||
<span class="text-xs font-black text-blue-500 uppercase italic">{podaci.status}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -8,9 +8,26 @@ const apiEvents = await fetchCalendarEvents();
|
||||
|
||||
// 2. Grupiranje događaja po datumu (YYYY-MM-DD)
|
||||
const eventsByDate = apiEvents.reduce((acc, event) => {
|
||||
if (!event.start) return acc;
|
||||
|
||||
const dateKey = new Date(event.start).toISOString().split('T')[0];
|
||||
if (!acc[dateKey]) acc[dateKey] = [];
|
||||
acc[dateKey].push(event);
|
||||
|
||||
// Koristimo čista, razdvojena polja s novog Django serializera
|
||||
acc[dateKey].push({
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
opis: event.opis_cisti, // Čisti opis kvara s backenda
|
||||
start: event.start,
|
||||
tip: (event.tip || event.status || 'planirano').toLowerCase(),
|
||||
radni_nalog: event.radni_nalog || event.id,
|
||||
je_radni_nalog: event.je_radni_nalog !== undefined ? event.je_radni_nalog : true,
|
||||
izvrsitelj_ime: event.izvrsitelj_ime,
|
||||
klijent: event.klijent || null,
|
||||
stroj: event.stroj || null,
|
||||
vozilo: event.vozilo_naziv // Čisti naziv vozila s backenda
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
@@ -70,18 +87,13 @@ const currentYearMonth = "2026-05";
|
||||
<div id="panel-arrow" class="absolute w-0 h-0 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent border-b-[12px] border-b-blue-600 transition-all duration-300"></div>
|
||||
</div>
|
||||
<div id="event-list" class="flex flex-col gap-6 w-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function formatStatusLocal(status) {
|
||||
const map = { 'u_radu': 'U radu', 'planirano': 'Planirano', 'zavrseno': 'Završeno', 'servis': 'Na servisu' };
|
||||
return map[status] || status;
|
||||
}
|
||||
|
||||
function initKalendar() {
|
||||
const grid = document.getElementById('days-grid');
|
||||
const panel = document.getElementById('event-panel');
|
||||
@@ -99,44 +111,72 @@ const currentYearMonth = "2026-05";
|
||||
const allItems = Array.from(grid.children);
|
||||
const index = allItems.indexOf(cell);
|
||||
|
||||
// 1. Pozicioniranje strelice (Matematički precizno)
|
||||
// 1. Pozicioniranje strelice
|
||||
const colIndex = index % 7;
|
||||
const percentage = (colIndex * (100 / 7)) + (100 / 7 / 2);
|
||||
arrow.style.left = `calc(${percentage}% - 12px)`;
|
||||
|
||||
// 2. Injekcija panela na kraj tjedna
|
||||
// 2. Injekcija panela na kraj tjedna (redka)
|
||||
const rowEndIndex = Math.floor(index / 7) * 7 + 6;
|
||||
const targetCell = allItems[Math.min(rowEndIndex, allItems.length - 1)];
|
||||
|
||||
// 3. Generiranje liste (text-left poravnanje)
|
||||
eventList.innerHTML = eventsData.map(ev => `
|
||||
<div class="flex items-start gap-5 border-b border-white/20 pb-6 last:border-0 last:pb-0 group/item">
|
||||
<a href="/operativa/radni-nalozi/${ev.radni_nalog}" class="bg-white/10 hover:bg-white hover:text-blue-600 text-white p-4 rounded-2xl transition-all shadow-lg shrink-0 group-hover/item:scale-105 active:scale-95">
|
||||
<i class="fa-solid ${ev.je_radni_nalog ? 'fa-file-signature' : 'fa-wrench'} text-2xl"></i>
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 text-left">
|
||||
<div class="flex flex-wrap justify-between items-start gap-2">
|
||||
<a href="/operativa/radni-nalozi/${ev.radni_nalog}" class="hover:underline">
|
||||
<span class="font-black uppercase text-2xl tracking-tighter italic leading-none">${ev.title}</span>
|
||||
</a>
|
||||
<span class="text-[10px] font-black bg-white/20 px-3 py-1 rounded-full uppercase tracking-widest border border-white/10">
|
||||
${formatStatusLocal(ev.tip)}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm opacity-90 font-medium mt-2 leading-relaxed max-w-2xl text-left w-full">
|
||||
// 3. Generiranje liste (Struktura točno prema tvojoj ispravno.png skici)
|
||||
eventList.innerHTML = eventsData.map(ev => {
|
||||
const klijentStroj = [ev.klijent, ev.stroj].filter(Boolean).join(' | ');
|
||||
const infoLinija = klijentStroj
|
||||
? `<div class="text-[13px] opacity-80 font-medium tracking-tight mt-1"><i class="fa-solid fa-industry text-[11px] mr-1 opacity-60"></i> ${klijentStroj}</div>`
|
||||
: '';
|
||||
|
||||
// Čisti naziv vozila u zasebnom redu (bez labela "Vozilo:")
|
||||
const voziloRed = ev.vozilo
|
||||
? `<p class="text-sm font-medium mt-1 text-white opacity-90">
|
||||
${ev.vozilo}
|
||||
</p>`
|
||||
: '';
|
||||
|
||||
// ISTAKNUTO: Opis kvara u posebnom uokvirenom kontejneru radi boljeg kontrasta
|
||||
const opisRed = `
|
||||
<div class="mt-3 p-3 bg-black/15 rounded-xl border border-white/10 text-left">
|
||||
<p class="text-[10px] font-black uppercase tracking-widest text-amber-300 opacity-90 mb-1">
|
||||
Opis kvara:
|
||||
</p>
|
||||
<p class="text-sm font-medium text-white leading-relaxed">
|
||||
${ev.opis}
|
||||
</p>
|
||||
<div class="mt-4 flex flex-wrap gap-3">
|
||||
<span class="text-[10px] font-black uppercase tracking-widest bg-black/30 px-3 py-1.5 rounded-lg flex items-center gap-2">
|
||||
<i class="fa-solid fa-user-gear opacity-50"></i> ${ev.izvrsitelj_ime}
|
||||
</span>
|
||||
<span class="text-[10px] font-black uppercase tracking-widest bg-black/30 px-3 py-1.5 rounded-lg flex items-center gap-2">
|
||||
<i class="fa-solid fa-clock opacity-50"></i> ${new Date(ev.start).toLocaleTimeString('hr-HR', {hour: '2-digit', minute:'2-digit'})} h
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return `
|
||||
<div class="flex items-start gap-5 border-b border-white/20 pb-6 last:border-0 last:pb-0 group/item">
|
||||
<a href="/operativa/radni-nalozi/${ev.radni_nalog}" class="bg-white/10 hover:bg-white hover:text-blue-600 text-white p-4 rounded-2xl transition-all shadow-lg shrink-0 group-hover/item:scale-105 active:scale-95">
|
||||
<i class="fa-solid ${ev.je_radni_nalog ? 'fa-file-signature' : 'fa-wrench'} text-2xl"></i>
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 text-left">
|
||||
|
||||
<div class="flex justify-between items-start">
|
||||
<a href="/operativa/radni-nalozi/${ev.radni_nalog}" class="hover:underline">
|
||||
<span class="font-black uppercase text-2xl tracking-tighter italic leading-none">${ev.title}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
${infoLinija}
|
||||
|
||||
${voziloRed}
|
||||
|
||||
${opisRed}
|
||||
|
||||
<div class="mt-4 flex flex-wrap gap-3">
|
||||
<span class="text-[10px] font-black uppercase tracking-widest bg-black/30 px-3 py-1.5 rounded-lg flex items-center gap-2">
|
||||
<i class="fa-solid fa-user-gear opacity-50"></i> ${ev.izvrsitelj_ime}
|
||||
</span>
|
||||
<span class="text-[10px] font-black uppercase tracking-widest bg-black/30 px-3 py-1.5 rounded-lg flex items-center gap-2">
|
||||
<i class="fa-solid fa-clock opacity-50"></i> ${new Date(ev.start).toLocaleTimeString('hr-HR', {hour: '2-digit', minute:'2-digit'})} h
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
targetCell.after(panel);
|
||||
panel.classList.remove('hidden');
|
||||
|
||||
@@ -17,22 +17,23 @@ const {
|
||||
prikaziNaslov = true,
|
||||
} = Astro.props;
|
||||
|
||||
// 1. Dohvat filtera iz URL-a (npr. ?status=u_radu)
|
||||
const statusFilter = Astro.url.searchParams.get('status');
|
||||
// 1. Dohvat filtera iz URL-a (pretvaramo u mala slova radi sigurnosti)
|
||||
const statusFilter = Astro.url.searchParams.get('status')?.toLowerCase();
|
||||
|
||||
// 2. Dohvat podataka s API-ja
|
||||
const { nalozi = [] } = await fetchDashboardData();
|
||||
|
||||
// 3. Logika filtriranja (Serverska strana)
|
||||
// 3. Logika filtriranja (Serverska strana - tolerantna na velika/mala slova)
|
||||
let filtriraniNalozi = nalozi;
|
||||
|
||||
if (statusFilter) {
|
||||
filtriraniNalozi = nalozi.filter(n => n.status === statusFilter);
|
||||
filtriraniNalozi = nalozi.filter(n => n.status?.toLowerCase() === statusFilter);
|
||||
}
|
||||
|
||||
// 4. Izračun brojeva za NaslovList (uvijek se računa iz originalne liste nalozi)
|
||||
const planiranoCount = nalozi.filter(n => n.status === 'planirano').length;
|
||||
const uRaduCount = nalozi.filter(n => n.status === 'u_radu').length;
|
||||
// 4. POPRAVLJENO: Izračun brojeva uz obvezno pretvaranje u mala slova (.toLowerCase())
|
||||
// Na ovaj način 'PLANIRANO' s backenda sigurno postaje 'planirano' u JS-u
|
||||
const planiranoCount = nalozi.filter(n => n.status?.toLowerCase() === 'planirano').length;
|
||||
const uRaduCount = nalozi.filter(n => n.status?.toLowerCase() === 'u_radu').length;
|
||||
|
||||
// 5. Primjena limita na prikaz (npr. top 5 nalozi)
|
||||
const prikazaniNalozi = limit > 0 ? filtriraniNalozi.slice(0, limit) : filtriraniNalozi;
|
||||
@@ -49,10 +50,10 @@ const prikazaniNaslov = statusFilter
|
||||
naslov={prikazaniNaslov}
|
||||
ukupno={filtriraniNalozi.length}
|
||||
label1="Planirano"
|
||||
count1={planiranoCount}
|
||||
count1={planiranoCount} // Sada će ispravno prikazati stvarni broj
|
||||
filter1="planirano"
|
||||
label2="U radu"
|
||||
count2={uRaduCount}
|
||||
count2={uRaduCount} // Sada će ispravno prikazati stvarni broj
|
||||
filter2="u_radu"
|
||||
/>
|
||||
)}
|
||||
@@ -63,13 +64,13 @@ const prikazaniNaslov = statusFilter
|
||||
prikazaniNalozi.map((n) => (
|
||||
<GenericKarticaItem
|
||||
href={`/operativa/radni-nalozi/${n.id}`}
|
||||
status={n.status}
|
||||
statusBojaClass={getStatusColorClass(n.status)}
|
||||
ikona={n.status === 'u_radu' ? 'fa-screwdriver-wrench' : 'fa-file-invoice'}
|
||||
status={n.status?.toLowerCase()} // Šaljemo ujednačeni lowercase u podkomponente
|
||||
statusBojaClass={getStatusColorClass(n.status?.toLowerCase())}
|
||||
ikona={n.status?.toLowerCase() === 'u_radu' ? 'fa-screwdriver-wrench' : 'fa-file-invoice'}
|
||||
naslov={`#${n.broj_naloga}`}
|
||||
subNaslov={formatStatus(n.status)}
|
||||
metaTekst={`${n.klijent_naziv} | ${n.vozilo_naziv} | ${n.stroj_naziv}`}
|
||||
statusPrikaz={formatStatus(n.status)}
|
||||
subNaslov={formatStatus(n.status?.toLowerCase())}
|
||||
metaTekst={`${n.klijent_naziv || 'Nepoznat klijent'} | ${n.vozilo_naziv || 'Bez vozila'} | ${n.stroj_naziv || 'Bez stroja'}`}
|
||||
statusPrikaz={formatStatus(n.status?.toLowerCase())}
|
||||
bojaTeme={n.boja_teme || 'blue'}
|
||||
/>
|
||||
))
|
||||
@@ -89,6 +90,6 @@ const prikazaniNaslov = statusFilter
|
||||
// Prvo pokretanje
|
||||
initFilters();
|
||||
|
||||
// Podrška za Astro View Transitions (ako ih koristiš)
|
||||
// Podrška za Astro View Transitions
|
||||
document.addEventListener('astro:after-swap', initFilters);
|
||||
</script>
|
||||
Reference in New Issue
Block a user