383 lines
20 KiB
HTML
383 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Status popravke — {{.Nalog.BrojNaloga}}</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 14px; color: #e2e8f0; background: #0f172a; min-height: 100vh; }
|
|
|
|
.omotac { max-width: 480px; margin: 0 auto; padding: 24px 16px 48px; }
|
|
|
|
/* zaglavlje firme */
|
|
.zaglavlje { text-align: center; margin-bottom: 24px; }
|
|
.firma-naziv { font-size: 18px; font-weight: 700; color: #f1f5f9; }
|
|
.firma-info { font-size: 12px; color: #94a3b8; margin-top: 4px; line-height: 1.6; }
|
|
|
|
/* kartica naloga */
|
|
.kartica { background: #1e293b; border-radius: 16px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
|
|
.kartica-naslov { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #94a3b8; margin-bottom: 12px; }
|
|
|
|
.uredjaj { font-size: 22px; font-weight: 700; color: #f1f5f9; line-height: 1.2; }
|
|
.broj-naloga { font-size: 13px; color: #94a3b8; margin-top: 4px; font-family: monospace; }
|
|
|
|
/* status bedž */
|
|
.status-bedz {
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-top: 14px;
|
|
}
|
|
.status-primljeno { background: #e8f0fe; color: #1a56db; }
|
|
.status-dijagnostika { background: #fef3c7; color: #b45309; }
|
|
.status-ceka { background: #fee2e2; color: #dc2626; }
|
|
.status-popravka { background: #fef3c7; color: #b45309; }
|
|
.status-zavrseno { background: #d1fae5; color: #059669; }
|
|
.status-preuzeto { background: #f3f4f6; color: #374151; }
|
|
|
|
/* napredak */
|
|
.napredak { margin: 16px 0 4px; }
|
|
.napredak-labela { font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
|
|
.koraci { display: flex; gap: 4px; }
|
|
.korak {
|
|
flex: 1;
|
|
height: 5px;
|
|
border-radius: 3px;
|
|
background: #334155;
|
|
}
|
|
.korak.aktivan { background: #10b981; }
|
|
.korak.zavrseno { background: #10b981; }
|
|
.korak.tekuci { background: #f59e0b; }
|
|
|
|
/* red podataka */
|
|
.red { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 0.5px solid #334155; gap: 12px; }
|
|
.red:last-child { border-bottom: none; }
|
|
.red-labela { font-size: 12px; color: #94a3b8; min-width: 0; overflow-wrap: anywhere; }
|
|
.red-vrednost { font-size: 13px; color: #f1f5f9; font-weight: 500; text-align: right; flex-shrink: 0; white-space: nowrap; }
|
|
|
|
/* cena */
|
|
.cena-blok { background: #0f172a; border-radius: 10px; padding: 14px 16px; margin-top: 4px; }
|
|
.cena-od-do { display: flex; gap: 8px; align-items: center; }
|
|
.cena-od-do .cena-vrednost { font-size: 20px; font-weight: 700; color: #f1f5f9; }
|
|
.cena-od-do .cena-sep { color: #475569; }
|
|
.cena-labela { font-size: 11px; color: #94a3b8; margin-top: 2px; }
|
|
.cena-vrednost { color: #f1f5f9; }
|
|
|
|
/* kontakt */
|
|
.kontakt { background: #1e293b; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
|
|
.kontakt-naslov { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #94a3b8; margin-bottom: 12px; }
|
|
.kontakt-tel { font-size: 18px; font-weight: 700; color: #60a5fa; text-decoration: none; display: block; }
|
|
.kontakt-adresa { font-size: 13px; color: #94a3b8; margin-top: 6px; line-height: 1.5; }
|
|
|
|
/* napomena za klijenta */
|
|
.napomena-blok { background: #0f172a; border-left: 3px solid #f59e0b; border-radius: 8px; padding: 12px 14px; margin-top: 4px; font-size: 13px; color: #cbd5e1; line-height: 1.5; white-space: pre-wrap; }
|
|
|
|
/* predlog popravke — istaknuta kartica koju klijent odobrava */
|
|
.predlog-kartica { border: 1px solid #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }
|
|
|
|
/* dugmad za odobravanje */
|
|
.dugme-prihvati {
|
|
width: 100%; padding: 12px 16px; border: none; border-radius: 10px;
|
|
font-size: 14px; font-weight: 600; cursor: pointer;
|
|
background: #10b981; color: #fff;
|
|
transition: background 0.2s;
|
|
}
|
|
.dugme-prihvati:hover { background: #059669; }
|
|
.dugme-odbij {
|
|
width: 100%; padding: 12px 16px; border: 1px solid #475569; border-radius: 10px;
|
|
font-size: 14px; font-weight: 500; cursor: pointer;
|
|
background: transparent; color: #94a3b8;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
.dugme-odbij:hover { background: #334155; color: #e2e8f0; }
|
|
|
|
.predlog-bedz { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: #f59e0b; color: #1f1300; }
|
|
.predlog-ukupno .cena-labela { color: #fcd34d; }
|
|
.predlog-ukupno .cena-vrednost { color: #fcd34d; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="omotac">
|
|
|
|
<!-- naslov stranice -->
|
|
<div style="text-align:center;font-size:12px;color:#999;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:14px;">Praćenje statusa popravke</div>
|
|
|
|
<!-- zaglavlje firme — logo (ili naziv) + podaci, isto kao na dokumentima -->
|
|
<div class="zaglavlje">
|
|
{{if .LogoPutanja}}
|
|
<img src="{{.LogoPutanja}}" alt="Logo" style="max-height:60px;max-width:220px;object-fit:contain;margin-bottom:8px;">
|
|
{{else}}
|
|
<div class="firma-naziv">{{if .NazivFirme}}{{.NazivFirme}}{{else}}Servis{{end}}</div>
|
|
{{end}}
|
|
<div class="firma-info">
|
|
{{if .Podnazlov}}{{.Podnazlov}}<br>{{end}}
|
|
{{if .Adresa}}{{.Adresa}}<br>{{end}}
|
|
{{if .Telefon}}Tel: {{telefon .Telefon}}<br>{{end}}
|
|
{{if .PIB}}PIB: {{.PIB}}{{end}}{{if .MaticniBroj}}{{if .PIB}} · {{end}}MB: {{.MaticniBroj}}{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- kartica: uređaj i status -->
|
|
<div class="kartica">
|
|
<div class="kartica-naslov">Vaš uređaj</div>
|
|
<div class="uredjaj">{{.Nalog.Uredjaj}}</div>
|
|
<div class="broj-naloga">Nalog: {{.Nalog.BrojNaloga}}</div>
|
|
|
|
{{$s := .Nalog.Status}}
|
|
{{if eq $s "Primljeno"}}
|
|
<span class="status-bedz status-primljeno">Primljeno</span>
|
|
{{else if eq $s "U dijagnostici"}}
|
|
<span class="status-bedz status-dijagnostika">U dijagnostici</span>
|
|
{{else if eq $s "Čeka delove"}}
|
|
<span class="status-bedz status-ceka">Čeka delove</span>
|
|
{{else if eq $s "U popravci"}}
|
|
<span class="status-bedz status-popravka">U popravci</span>
|
|
{{else if eq $s "Završeno"}}
|
|
<span class="status-bedz status-zavrseno">Završeno — možete preuzeti</span>
|
|
{{else if eq $s "Preuzeto"}}
|
|
<span class="status-bedz status-preuzeto">Preuzeto</span>
|
|
{{end}}
|
|
|
|
<!-- traka napretka -->
|
|
<div class="napredak">
|
|
<div class="napredak-labela">Napredak popravke</div>
|
|
<div class="koraci">
|
|
{{range $i, $korak := .SviStatusi}}
|
|
{{if eq $korak $s}}
|
|
<div class="korak tekuci"></div>
|
|
{{else if statusPre $korak $s $.SviStatusi}}
|
|
<div class="korak zavrseno"></div>
|
|
{{else}}
|
|
<div class="korak"></div>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- kartica: zahtev klijenta (opis kvara, nadogradnje, napomena) -->
|
|
{{if or .Nalog.OpisKvara (or .Nalog.TrazeneNadogradnje .Nalog.NapomenaKlijentu)}}
|
|
<div class="kartica">
|
|
<div class="kartica-naslov">Vaš zahtev</div>
|
|
|
|
{{if .Nalog.OpisKvara}}
|
|
<div style="margin-bottom:12px;">
|
|
<div class="red-labela" style="margin-bottom:6px;">Opis kvara</div>
|
|
<div class="napomena-blok">{{.Nalog.OpisKvara}}</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .Nalog.TrazeneNadogradnje}}
|
|
<div style="margin-bottom:12px;">
|
|
<div class="red-labela" style="margin-bottom:6px;">Tražene nadogradnje</div>
|
|
<div class="napomena-blok">{{.Nalog.TrazeneNadogradnje}}</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .Nalog.NapomenaKlijentu}}
|
|
<div>
|
|
<div class="red-labela" style="margin-bottom:6px;">Napomena klijentu</div>
|
|
<div class="napomena-blok">{{.Nalog.NapomenaKlijentu}}</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- kartica: detalji -->
|
|
<div class="kartica">
|
|
<div class="kartica-naslov">Detalji</div>
|
|
|
|
<div class="red">
|
|
<span class="red-labela">Datum prijema</span>
|
|
<span class="red-vrednost">{{.Nalog.DatumPrijema.Format "02.01.2006."}}</span>
|
|
</div>
|
|
|
|
{{if .Nalog.PredvidjenDatum}}
|
|
<div class="red">
|
|
<span class="red-labela">Predviđeni datum završetka</span>
|
|
<span class="red-vrednost">{{.Nalog.PredvidjenDatum.Format "02.01.2006."}}</span>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="red">
|
|
<span class="red-labela">Garancija</span>
|
|
<span class="red-vrednost">{{garancijaTekst .Nalog.GarancijaDana}}</span>
|
|
</div>
|
|
|
|
{{if .Nalog.DatumZavrsetka}}
|
|
<div class="red">
|
|
<span class="red-labela">Datum završetka</span>
|
|
<span class="red-vrednost">{{.Nalog.DatumZavrsetka.Format "02.01.2006."}}</span>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .RokPodizanja}}
|
|
<div class="red">
|
|
<span class="red-labela">Rok za podizanje</span>
|
|
<span class="red-vrednost" style="color:#d97706;font-weight:600;">{{.RokPodizanja.Format "02.01.2006."}}</span>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .Nalog.NalazDijagnostike}}
|
|
<div style="margin-top:12px;">
|
|
<div class="red-labela" style="margin-bottom:6px;">Utvrđeno na dijagnostici</div>
|
|
<div class="napomena-blok">{{.Nalog.NalazDijagnostike}}</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
</div>
|
|
|
|
{{if .Nalog.PopravkaOdbijena}}
|
|
<!-- klijent odbio popravku — samo dijagnostika -->
|
|
<div class="kartica" style="border-color:#ef4444;">
|
|
<div class="kartica-naslov" style="color:#ef4444;">✕ Popravka je odbijena</div>
|
|
<p style="font-size:13px;color:#94a3b8;margin:8px 0 0;">Klijent nije prihvatio ponuđenu popravku.</p>
|
|
<div style="margin-top:10px;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#1e293b;border-radius:6px;">
|
|
<span style="font-size:13px;color:#94a3b8;">Cena dijagnostike</span>
|
|
<span style="font-size:16px;font-weight:700;color:#fbbf24;">{{.Nalog.CenaDijagnostikeStr}} din</span>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- kartica: radovi i delovi sa procenom -->
|
|
{{if or .Radovi .ServisniDelovi}}
|
|
<div class="kartica">
|
|
<div class="kartica-naslov">Radovi i delovi</div>
|
|
|
|
{{range .Radovi}}
|
|
<div class="red">
|
|
<span class="red-labela">{{.Naziv}}{{if gt .Kolicina 1.0}} ×{{.Kolicina}}{{end}}</span>
|
|
<span class="red-vrednost">{{if index $.Moduli "pdv"}}{{dinari .UkupnoSaPdv}}{{else}}{{dinari .Ukupno}}{{end}} din</span>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{range .ServisniDelovi}}
|
|
<div class="red">
|
|
<span class="red-labela">{{.ArtikalNaziv}}{{if gt .Kolicina 1}} ×{{.Kolicina}}{{end}}</span>
|
|
<span class="red-vrednost">{{if index $.Moduli "pdv"}}{{dinari .UkupnoSaPdv}}{{else}}{{dinari .Ukupno}}{{end}} din</span>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="cena-blok" style="margin-top:12px;display:flex;justify-content:space-between;align-items:center;">
|
|
<span class="cena-labela" style="margin:0;">Ukupno (procena)</span>
|
|
<span class="cena-vrednost">{{if index .Moduli "pdv"}}{{dinari .UkupnoSveSaPdv}}{{else}}{{dinari .UkupnoSve}}{{end}} din</span>
|
|
</div>
|
|
|
|
{{if .ImaPredlog}}
|
|
<div class="cena-blok" style="margin-top:8px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;background:#0f172a;border:1px solid #f59e0b;border-radius:8px;">
|
|
<span class="cena-labela" style="margin:0;color:#fbbf24;">Sa predlogom</span>
|
|
<span class="cena-vrednost" id="sa-predlogom-zbir" data-base="{{if index .Moduli "pdv"}}{{printf "%.2f" .UkupnoSveSaPdv}}{{else}}{{printf "%.2f" .UkupnoSve}}{{end}}" style="font-size:16px;font-weight:700;color:#fbbf24;">{{if index .Moduli "pdv"}}{{dinari .UkupnoSaPredlogomSaPdv}}{{else}}{{dinari .UkupnoSaPredlogom}}{{end}} din</span>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- kartica: predlog popravke — serviser predložio posle dijagnostike -->
|
|
{{if .ImaPredlog}}
|
|
{{if not .Odgovoreno}}
|
|
<div class="kartica predlog-kartica">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
|
<span class="kartica-naslov" style="margin:0;">Predlog popravke</span>
|
|
<span class="predlog-bedz">Predlog</span>
|
|
</div>
|
|
<div style="font-size:12px;color:#94a3b8;margin-bottom:10px;line-height:1.5;">
|
|
Serviser predlaže sledeće radove i delove. Pogledajte i javite nam da li ste saglasni.
|
|
</div>
|
|
|
|
<form method="POST" action="/status/{{.Nalog.JavniToken}}/odluka-odabrano" style="margin-top:4px;">
|
|
{{if .PredlozeniRadovi}}
|
|
<div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:#94a3b8;margin-bottom:6px;">Radovi</div>
|
|
{{range .PredlozeniRadovi}}
|
|
<label style="display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:0.5px solid #1e293b;cursor:pointer;">
|
|
<span style="display:flex;align-items:center;gap:10px;flex:1;">
|
|
<input type="checkbox" name="rad_id" value="{{.ID}}" checked data-iznos="{{if index $.Moduli "pdv"}}{{printf "%.2f" .UkupnoSaPdv}}{{else}}{{printf "%.2f" .Ukupno}}{{end}}"
|
|
style="width:18px;height:18px;accent-color:#f59e0b;flex-shrink:0;">
|
|
<span style="font-size:13px;color:#e2e8f0;">{{.Naziv}}{{if gt .Kolicina 1.0}} × {{printf "%.0f" .Kolicina}}{{end}}</span>
|
|
</span>
|
|
<span style="font-size:13px;font-weight:600;color:#fbbf24;white-space:nowrap;">{{if index $.Moduli "pdv"}}{{dinari .UkupnoSaPdv}}{{else}}{{dinari .Ukupno}}{{end}} din</span>
|
|
</label>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{if .PredlozeniDelovi}}
|
|
<div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:#94a3b8;margin:10px 0 6px;">Delovi i materijal</div>
|
|
{{range .PredlozeniDelovi}}
|
|
<label style="display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:0.5px solid #1e293b;cursor:pointer;">
|
|
<span style="display:flex;align-items:center;gap:10px;flex:1;">
|
|
<input type="checkbox" name="artikal_id" value="{{.ArtikalID}}" checked data-iznos="{{if index $.Moduli "pdv"}}{{printf "%.2f" .UkupnoSaPdv}}{{else}}{{printf "%.2f" .Ukupno}}{{end}}"
|
|
style="width:18px;height:18px;accent-color:#f59e0b;flex-shrink:0;">
|
|
<span style="font-size:13px;color:#e2e8f0;">{{.ArtikalNaziv}}{{if gt .Kolicina 1}} × {{.Kolicina}}{{end}}</span>
|
|
</span>
|
|
<span style="font-size:13px;font-weight:600;color:#fbbf24;white-space:nowrap;">{{if index $.Moduli "pdv"}}{{dinari .UkupnoSaPdv}}{{else}}{{dinari .Ukupno}}{{end}} din</span>
|
|
</label>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
<div class="cena-blok predlog-ukupno" style="margin-top:12px;display:flex;justify-content:space-between;align-items:center;">
|
|
<span class="cena-labela" style="margin:0;">Predlog ukupno</span>
|
|
<span class="cena-vrednost" id="predlog-zbir">{{if index .Moduli "pdv"}}{{dinari .UkupnoPredlogSaPdv}}{{else}}{{dinari .UkupnoPredlog}}{{end}} din</span>
|
|
</div>
|
|
|
|
<textarea name="komentar" placeholder="Poruka serviseru (opciono)..." rows="2"
|
|
style="width:100%;padding:10px 12px;border:0.5px solid #334155;border-radius:8px;background:#0f172a;color:#e2e8f0;font-size:13px;font-family:inherit;resize:vertical;margin:14px 0 10px;box-sizing:border-box;"></textarea>
|
|
<button type="submit" class="dugme-prihvati" style="width:100%;">Potvrdi odabrano</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{if .Odgovoreno}}
|
|
<div class="kartica" style="{{if eq .Nalog.OdlukaKlijenta "prihvaceno"}}border-color:#10b981{{else if eq .Nalog.OdlukaKlijenta "odbijeno"}}border-color:#ef4444{{else}}border-color:#10b981{{end}};text-align:center;">
|
|
{{if eq .Nalog.OdlukaKlijenta "prihvaceno"}}
|
|
<div style="font-size:16px;font-weight:600;color:#10b981;">✅ Prihvatili ste predlog</div>
|
|
{{else if eq .Nalog.OdlukaKlijenta "odbijeno"}}
|
|
<div style="font-size:16px;font-weight:600;color:#ef4444;">✕ Niste prihvatili predlog</div>
|
|
{{else}}
|
|
<div style="font-size:16px;font-weight:600;color:#10b981;">Hvala na odgovoru!</div>
|
|
{{end}}
|
|
{{if .Nalog.KomentarKlijenta}}
|
|
<div style="font-size:13px;color:#cbd5e1;margin-top:8px;background:#0f172a;padding:8px 12px;border-radius:8px;text-align:left;">{{.Nalog.KomentarKlijenta}}</div>
|
|
{{end}}
|
|
<div style="font-size:12px;color:#94a3b8;margin-top:8px;">Serviser je obavešten o vašoj odluci.</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
var zbir = document.getElementById('predlog-zbir');
|
|
if (!zbir) return;
|
|
var forma = zbir.closest('form');
|
|
if (!forma) return;
|
|
function fmt(v) {
|
|
var s = Math.round(v * 100);
|
|
var dec = String(s % 100).padStart(2, '0');
|
|
var cel = String(Math.floor(s / 100));
|
|
var r = '';
|
|
for (var i = 0; i < cel.length; i++) {
|
|
if (i > 0 && (cel.length - i) % 3 === 0) r += '.';
|
|
r += cel[i];
|
|
}
|
|
return r + ',' + dec + ' din';
|
|
}
|
|
var saPredlogom = document.getElementById('sa-predlogom-zbir');
|
|
var bazaUkupno = saPredlogom ? parseFloat(saPredlogom.getAttribute('data-base')) || 0 : 0;
|
|
function preracunaj() {
|
|
var suma = 0;
|
|
forma.querySelectorAll('input[type="checkbox"][data-iznos]').forEach(function (cb) {
|
|
if (cb.checked) suma += parseFloat(cb.getAttribute('data-iznos')) || 0;
|
|
});
|
|
zbir.textContent = fmt(suma);
|
|
if (saPredlogom) saPredlogom.textContent = fmt(bazaUkupno + suma);
|
|
}
|
|
forma.addEventListener('change', function (e) {
|
|
if (e.target && e.target.type === 'checkbox') preracunaj();
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|