Dasko
fba3cb15a6
Izdvojen partial web/templates/komponente/servis_zaglavlje.html sa dva
{{define}} bloka (zaglavljeFirma, zaglavljeKlijent) — koriste ih revers,
predračun, otpremnica (oba bloka) i eskalacioni list (samo firma; klijent
blok tamo ima drugačiji markup/stil pa nije spojen).
kes.go: dodata standaloneExtraFajlovi mapa da standalone šabloni mogu da
uključe dodatne partial fajlove uz svoj glavni (i u produkcionom kešu i u
dev lazy-parse putanji).
Vizuelno provereno u browseru (sva 4 dokumenta, servis nalog SN-2606-007) —
identičan izgled kao pre refaktora, ispravan redosled kolona po dokumentu.
283 lines
14 KiB
HTML
283 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="sr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Otpremnica — {{.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: 13px; color: #111; background: #fff; min-width: 780px; }
|
||
|
||
.strana { max-width: 780px; margin: 0 auto; padding: 32px 40px; }
|
||
|
||
/* zaglavlje: tri okvira (firma · klijent · dokument) */
|
||
.zaglavlje { display: flex; align-items: stretch; margin-bottom: 20px; gap: 12px; }
|
||
.zg-okvir { flex: 1; padding: 12px 14px; border: 0.5px solid #ddd; border-radius: 6px; }
|
||
.firma-naziv { font-size: 18px; font-weight: 700; }
|
||
.firma-info { font-size: 11px; color: #555; margin-top: 4px; line-height: 1.7; }
|
||
.dok-tip { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #555; margin-bottom: 4px; }
|
||
.dok-broj { font-size: 18px; font-weight: 700; font-family: monospace; }
|
||
.dok-datum { font-size: 12px; color: #555; margin-top: 4px; }
|
||
|
||
/* strane */
|
||
.strane-blok { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
|
||
.strana-kartica { padding: 12px 14px; border: 0.5px solid #ddd; border-radius: 6px; }
|
||
.strana-tip { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #888; margin-bottom: 6px; }
|
||
.strana-naziv { font-size: 14px; font-weight: 600; }
|
||
.strana-info { font-size: 12px; color: #555; margin-top: 3px; line-height: 1.6; }
|
||
|
||
/* odeljci */
|
||
.odeljak { margin-bottom: 18px; }
|
||
.odeljak-naslov { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: #555; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 0.5px solid #ccc; }
|
||
|
||
/* podaci */
|
||
.podaci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||
.podaci-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.polje-labela { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
|
||
.polje-vrednost { font-size: 13px; font-weight: 500; }
|
||
.polje-vrednost-mono { font-family: monospace; font-size: 13px; font-weight: 500; }
|
||
.polje-tekst { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
|
||
.prazno { color: #aaa; font-style: italic; }
|
||
|
||
/* tabela delova */
|
||
.tabela { width: 100%; border-collapse: collapse; margin-top: 6px; }
|
||
.tabela th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #555; padding: 6px 8px; border-bottom: 1.5px solid #111; text-align: left; }
|
||
.tabela th.desno { text-align: right; }
|
||
.tabela td { padding: 7px 8px; border-bottom: 0.5px solid #ddd; font-size: 13px; vertical-align: middle; }
|
||
.tabela td.desno { text-align: right; }
|
||
.tabela .ukupno-red td { font-weight: 600; border-top: 1.5px solid #111; border-bottom: none; background: #fafafa; }
|
||
|
||
/* iznos za naplatu */
|
||
.naplata-blok { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1.5px solid #111; border-radius: 6px; margin-top: 12px; }
|
||
.naplata-labela { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
|
||
.naplata-iznos { font-size: 22px; font-weight: 700; }
|
||
|
||
/* garancija */
|
||
.garancija-blok { padding: 10px 14px; border: 0.5px solid #86efac; background: #f0fdf4; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
|
||
.garancija-tekst { font-size: 12px; color: #15803d; font-weight: 500; }
|
||
.garancija-datum { font-size: 15px; font-weight: 700; color: #15803d; }
|
||
|
||
/* potpisi */
|
||
.potpisi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; padding-top: 16px; border-top: 0.5px solid #ccc; }
|
||
.potpis-linija { border-top: 1px solid #888; margin-top: 44px; padding-top: 6px; font-size: 11px; color: #555; text-align: center; }
|
||
|
||
/* napomena na dnu */
|
||
.napomena-dno { margin-top: 20px; padding: 10px 14px; background: #f9fafb; border-left: 3px solid #ddd; font-size: 12px; color: #555; line-height: 1.6; }
|
||
|
||
@media print {
|
||
body { font-size: 12px; }
|
||
.strana { padding: 32px 40px; max-width: 780px; }
|
||
.dugme-stampa { display: none !important; }
|
||
@page { size: A4; margin: 12mm 14mm; }
|
||
/* red tabele se ne sme prelomiti preko granice stranice — prelom pada između stavki */
|
||
.tabela tr { break-inside: avoid; }
|
||
/* zaglavlje tabele se ponavlja na svakoj stranici kad tabela pređe na novu */
|
||
.tabela thead { display: table-header-group; }
|
||
}
|
||
.dugme-stampa { position: fixed; bottom: 24px; right: 24px; background: #111; color: #fff; border: none; padding: 12px 22px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
|
||
.dugme-stampa:hover { background: #333; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="strana">
|
||
|
||
<!-- zaglavlje -->
|
||
<div class="zaglavlje">
|
||
{{template "zaglavljeFirma" .}}
|
||
{{template "zaglavljeKlijent" .}}
|
||
<!-- DESNO: barkod na vrhu, ispod datumi (levo) + QR (skroz desno) -->
|
||
<div class="zg-okvir" style="flex:1.3;">
|
||
{{if .Barkod}}<img src="data:image/png;base64,{{.Barkod}}" alt="Barkod {{.Nalog.BrojNaloga}}" style="display:block;width:100%;max-height:46px;object-fit:contain;margin-bottom:10px;">{{end}}
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px;">
|
||
<div>
|
||
<div class="dok-tip">Otpremnica</div>
|
||
<div class="dok-broj">{{.Nalog.BrojNaloga}}</div>
|
||
<div class="dok-datum">Datum: {{.Nalog.DatumPrijema.Format "02.01.2006."}}</div>
|
||
{{if .Nalog.DatumZavrsetka}}
|
||
<div class="dok-datum">Završeno: {{.Nalog.DatumZavrsetka.Format "02.01.2006."}}</div>
|
||
{{end}}
|
||
</div>
|
||
{{if .QRKod}}<img src="data:image/png;base64,{{.QRKod}}" width="64" height="64" alt="QR {{.Nalog.BrojNaloga}}" style="image-rendering:pixelated;border:1px solid #ddd;border-radius:4px;flex-shrink:0;">{{end}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- uređaj koji se vraća -->
|
||
<div class="odeljak">
|
||
<div class="odeljak-naslov">Uređaj koji se preuzima</div>
|
||
<div class="podaci-grid" style="margin-bottom:10px;">
|
||
<div>
|
||
<div class="polje-labela">Naziv uređaja</div>
|
||
<div class="polje-vrednost">{{.Nalog.Uredjaj}}</div>
|
||
</div>
|
||
<div>
|
||
<div class="polje-labela">Serijski broj</div>
|
||
<div class="polje-vrednost-mono">{{if .Nalog.SerijskiBroj}}{{.Nalog.SerijskiBroj}}{{else}}<span class="prazno">—</span>{{end}}</div>
|
||
</div>
|
||
{{if .TehnicarNaziv}}
|
||
<div>
|
||
<div class="polje-labela">Serviser</div>
|
||
<div class="polje-vrednost">{{.TehnicarNaziv}}</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{if .Nalog.Pribor}}
|
||
<div style="margin-top:8px;">
|
||
<div class="polje-labela">Pribor i oprema</div>
|
||
<div class="polje-tekst">{{.Nalog.Pribor}}</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
<!-- opis izvršenih radova -->
|
||
<div class="odeljak">
|
||
<div class="odeljak-naslov">Opis izvršenih radova</div>
|
||
{{if .Nalog.PopravkaOdbijena}}
|
||
<div class="polje-tekst">Izvršena je samo dijagnostika — klijent nije prihvatio ponuđenu popravku.</div>
|
||
{{else}}
|
||
<div class="polje-tekst">{{if .Nalog.Uradjeno}}{{.Nalog.Uradjeno}}{{else}}<span class="prazno">—</span>{{end}}</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
<!-- radovi — samo ako nije odbijena popravka -->
|
||
{{if and .Radovi (not .Nalog.PopravkaOdbijena)}}
|
||
<div class="odeljak">
|
||
<div class="odeljak-naslov">Izvršeni radovi</div>
|
||
<table class="tabela">
|
||
<thead>
|
||
<tr>
|
||
<th>Opis rada</th>
|
||
<th class="desno" style="width:70px;">Kol.</th>
|
||
<th class="desno" style="width:120px;">Cena/kom{{if index .Moduli "pdv"}} sa PDV{{end}}</th>
|
||
<th class="desno" style="width:120px;">Ukupno{{if index .Moduli "pdv"}} sa PDV{{end}}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{{range .Radovi}}
|
||
<tr>
|
||
<td>{{.Naziv}}</td>
|
||
<td class="desno">{{printf "%.0f" .Kolicina}}</td>
|
||
<td class="desno">{{if index $.Moduli "pdv"}}{{dinari .CenaSaPdv}}{{else}}{{dinari .CenaKomada}}{{end}} din</td>
|
||
<td class="desno">{{if index $.Moduli "pdv"}}{{dinari .UkupnoSaPdv}}{{else}}{{dinari .Ukupno}}{{end}} din</td>
|
||
</tr>
|
||
{{end}}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{{end}}
|
||
|
||
<!-- ugrađeni delovi — samo ako nije odbijena popravka -->
|
||
{{if and .ServisniDelovi (not .Nalog.PopravkaOdbijena)}}
|
||
<div class="odeljak">
|
||
<div class="odeljak-naslov">Ugrađeni delovi i materijal</div>
|
||
<table class="tabela">
|
||
<thead>
|
||
<tr>
|
||
<th>Artikal</th>
|
||
<th class="desno" style="width:70px;">Kol.</th>
|
||
<th class="desno" style="width:120px;">Cena/kom{{if index .Moduli "pdv"}} sa PDV{{end}}</th>
|
||
<th class="desno" style="width:120px;">Ukupno{{if index .Moduli "pdv"}} sa PDV{{end}}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{{range .ServisniDelovi}}
|
||
<tr>
|
||
<td>{{.ArtikalNaziv}}</td>
|
||
<td class="desno">{{.Kolicina}}</td>
|
||
<td class="desno">{{if index $.Moduli "pdv"}}{{dinari .CenaSaPdv}}{{else}}{{dinari .CenaKomada}}{{end}} din</td>
|
||
<td class="desno">{{if index $.Moduli "pdv"}}{{dinari .UkupnoSaPdv}}{{else}}{{dinari .Ukupno}}{{end}} din</td>
|
||
</tr>
|
||
{{end}}
|
||
<tr class="ukupno-red">
|
||
<td colspan="3">Ukupno delovi</td>
|
||
<td class="desno">{{if index .Moduli "pdv"}}{{dinari .UkupnoDeloviSaPdv}}{{else}}{{dinari .UkupnoDelovi}}{{end}} din</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{{end}}
|
||
|
||
<!-- iznos za naplatu -->
|
||
{{if .Nalog.PopravkaOdbijena}}
|
||
<div class="odeljak">
|
||
<div class="odeljak-naslov">Obračun</div>
|
||
<table class="tabela" style="margin-bottom:10px;">
|
||
<tbody>
|
||
<tr>
|
||
<td>Dijagnostika (popravka odbijena)</td>
|
||
<td class="desno" style="width:160px;">{{.Nalog.CenaDijagnostikeStr}} din</td>
|
||
</tr>
|
||
{{if .ImaAvans}}
|
||
<tr>
|
||
<td>Avans (plaćeno)</td>
|
||
<td class="desno">− {{.Nalog.AvansStr}} din</td>
|
||
</tr>
|
||
{{end}}
|
||
</tbody>
|
||
</table>
|
||
<div class="naplata-blok">
|
||
<div class="naplata-labela">Za naplatu pri preuzimanju:</div>
|
||
<div class="naplata-iznos">{{if index .Moduli "pdv"}}{{dinari .PreostaloSveSaPdv}}{{else}}{{dinari .PreostaloSve}}{{end}} din</div>
|
||
</div>
|
||
</div>
|
||
{{else if .Nalog.CenaKonacna}}
|
||
<div class="odeljak">
|
||
<div class="odeljak-naslov">Obračun</div>
|
||
<table class="tabela" style="margin-bottom:10px;">
|
||
<tbody>
|
||
<tr>
|
||
<td>Cena rada</td>
|
||
<td class="desno" style="width:160px;">{{.Nalog.CenaKonacnaStr}} din</td>
|
||
</tr>
|
||
{{if gt .UkupnoDelovi 0.0}}
|
||
<tr>
|
||
<td>Ugrađeni delovi i materijal</td>
|
||
<td class="desno">{{if index .Moduli "pdv"}}{{dinari .UkupnoDeloviSaPdv}}{{else}}{{dinari .UkupnoDelovi}}{{end}} din</td>
|
||
</tr>
|
||
{{end}}
|
||
{{if .ImaAvans}}
|
||
<tr>
|
||
<td>Avans (plaćeno)</td>
|
||
<td class="desno">− {{.Nalog.AvansStr}} din</td>
|
||
</tr>
|
||
{{end}}
|
||
</tbody>
|
||
</table>
|
||
<div class="naplata-blok">
|
||
<div class="naplata-labela">Za naplatu pri preuzimanju:</div>
|
||
<div class="naplata-iznos">{{if index .Moduli "pdv"}}{{dinari .PreostaloSveSaPdv}}{{else}}{{dinari .PreostaloSve}}{{end}} din</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
<!-- garancija -->
|
||
{{if .Nalog.GarancijaDo}}
|
||
<div class="odeljak">
|
||
<div class="garancija-blok">
|
||
<div class="garancija-tekst">Garancija na izvršeni servis važi do:</div>
|
||
<div class="garancija-datum">{{.Nalog.GarancijaDo.Format "02.01.2006."}}</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
{{if .Nalog.Napomena}}
|
||
<div class="napomena-dno"><strong>Napomena:</strong> {{.Nalog.Napomena}}</div>
|
||
{{end}}
|
||
|
||
<!-- potpisi -->
|
||
<div class="potpisi">
|
||
<div>
|
||
<div class="potpis-linija">Predao (serviser / firma)</div>
|
||
</div>
|
||
<div>
|
||
<div class="potpis-linija">Preuzeo (klijent)</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<button class="dugme-stampa" onclick="window.print()">Štampaj</button>
|
||
|
||
</body>
|
||
</html>
|