Unify manual and ZIP-exported invoice PDF styling #2
+25
-5
@@ -481,7 +481,7 @@ const buildPaymentQrPayload = (payment, total, invoiceNumber = '') => {
|
|||||||
].filter(Boolean).join('*');
|
].filter(Boolean).join('*');
|
||||||
};
|
};
|
||||||
|
|
||||||
const appendInvoicePdf = async (archive, invoice) => {
|
const renderInvoicePdf = async (document, invoice) => {
|
||||||
const data = invoice.invoice_data || {};
|
const data = invoice.invoice_data || {};
|
||||||
const supplier = data.supplier || {};
|
const supplier = data.supplier || {};
|
||||||
const customer = data.customer || {};
|
const customer = data.customer || {};
|
||||||
@@ -492,7 +492,6 @@ const appendInvoicePdf = async (archive, invoice) => {
|
|||||||
const customerName = customer.typSubjektu === 'spolecnost'
|
const customerName = customer.typSubjektu === 'spolecnost'
|
||||||
? customer.nazevSpolecnosti
|
? customer.nazevSpolecnosti
|
||||||
: [customer.jmeno, customer.prijmeni].filter(Boolean).join(' ');
|
: [customer.jmeno, customer.prijmeni].filter(Boolean).join(' ');
|
||||||
const document = new PDFDocument({ size: 'A4', margin: 50 });
|
|
||||||
const regularFont = '/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf';
|
const regularFont = '/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf';
|
||||||
const boldFont = '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf';
|
const boldFont = '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf';
|
||||||
const qrPayload = buildPaymentQrPayload(payment, data.total, invoice.invoice_number);
|
const qrPayload = buildPaymentQrPayload(payment, data.total, invoice.invoice_number);
|
||||||
@@ -503,12 +502,10 @@ const appendInvoicePdf = async (archive, invoice) => {
|
|||||||
}) : null;
|
}) : null;
|
||||||
const pageWidth = document.page.width - document.page.margins.left - document.page.margins.right;
|
const pageWidth = document.page.width - document.page.margins.left - document.page.margins.right;
|
||||||
const navy = '#183b56';
|
const navy = '#183b56';
|
||||||
const blue = '#2b6f8f';
|
|
||||||
const line = '#d8d4cc';
|
const line = '#d8d4cc';
|
||||||
const lightBlue = '#f4f7fb';
|
const lightBlue = '#f4f7fb';
|
||||||
const warm = '#fffaf0';
|
const warm = '#fffaf0';
|
||||||
const bodyText = '#17202a';
|
const bodyText = '#17202a';
|
||||||
const muted = '#65717d';
|
|
||||||
const address = (profile) => [
|
const address = (profile) => [
|
||||||
profile.uliceCp,
|
profile.uliceCp,
|
||||||
[profile.psc, profile.mesto].filter(Boolean).join(', ')
|
[profile.psc, profile.mesto].filter(Boolean).join(', ')
|
||||||
@@ -521,7 +518,6 @@ const appendInvoicePdf = async (archive, invoice) => {
|
|||||||
const partyWidth = (pageWidth - 24) / 2;
|
const partyWidth = (pageWidth - 24) / 2;
|
||||||
const customerX = document.page.margins.left + partyWidth + 24;
|
const customerX = document.page.margins.left + partyWidth + 24;
|
||||||
|
|
||||||
archive.append(document, { name: `${invoice.invoice_number}.pdf` });
|
|
||||||
const headerY = document.y;
|
const headerY = document.y;
|
||||||
document.fillColor(navy).font(boldFont).fontSize(25).text('Faktura', document.page.margins.left, headerY);
|
document.fillColor(navy).font(boldFont).fontSize(25).text('Faktura', document.page.margins.left, headerY);
|
||||||
document.fillColor(navy).font(boldFont).fontSize(16).text(invoice.invoice_number, customerX, headerY, {
|
document.fillColor(navy).font(boldFont).fontSize(16).text(invoice.invoice_number, customerX, headerY, {
|
||||||
@@ -590,6 +586,30 @@ const appendInvoicePdf = async (archive, invoice) => {
|
|||||||
document.end();
|
document.end();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const appendInvoicePdf = async (archive, invoice) => {
|
||||||
|
const document = new PDFDocument({ size: 'A4', margin: 50 });
|
||||||
|
archive.append(document, { name: `${invoice.invoice_number}.pdf` });
|
||||||
|
await renderInvoicePdf(document, invoice);
|
||||||
|
};
|
||||||
|
|
||||||
|
app.post('/api/invoices/pdf', requireAuth, async (req, res, next) => {
|
||||||
|
try {
|
||||||
|
const data = normalizeInvoiceData(req.body.data);
|
||||||
|
if (!data) {
|
||||||
|
res.status(400).json({ error: 'Neplatná data faktury.' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const invoiceNumber = String(req.body.invoiceNumber || 'Nová faktura').trim() || 'Nová faktura';
|
||||||
|
const document = new PDFDocument({ size: 'A4', margin: 50 });
|
||||||
|
res.attachment(`${invoiceNumber}.pdf`);
|
||||||
|
document.pipe(res);
|
||||||
|
await renderInvoicePdf(document, { invoice_number: invoiceNumber, invoice_data: data });
|
||||||
|
} catch (error) {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
app.get('/api/invoices/export', requireAuth, async (req, res, next) => {
|
app.get('/api/invoices/export', requireAuth, async (req, res, next) => {
|
||||||
try {
|
try {
|
||||||
const result = await pool.query(
|
const result = await pool.query(
|
||||||
|
|||||||
+24
-147
@@ -630,8 +630,6 @@ const formatCzechNumber = (value) => Number(value || 0).toLocaleString("cs-CZ",
|
|||||||
maximumFractionDigits: 2
|
maximumFractionDigits: 2
|
||||||
});
|
});
|
||||||
|
|
||||||
const getTotalValue = () => Number.parseFloat(getValue("total").replace(",", ".")) || 0;
|
|
||||||
|
|
||||||
const updateTotal = () => {
|
const updateTotal = () => {
|
||||||
const total = Array.from(itemsContainer.querySelectorAll(".invoice-item"))
|
const total = Array.from(itemsContainer.querySelectorAll(".invoice-item"))
|
||||||
.reduce((sum, item) => {
|
.reduce((sum, item) => {
|
||||||
@@ -643,153 +641,32 @@ const updateTotal = () => {
|
|||||||
document.getElementById("total").textContent = `${formatCzechNumber(total)} Kč`;
|
document.getElementById("total").textContent = `${formatCzechNumber(total)} Kč`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPersonName = (prefix) => [
|
printInvoiceButton.addEventListener("click", async () => {
|
||||||
getValue(`${prefix}Jmeno`),
|
try {
|
||||||
getValue(`${prefix}Prijmeni`)
|
const response = await fetch("/api/invoices/pdf", {
|
||||||
].filter(Boolean).join(" ");
|
method: "POST",
|
||||||
|
credentials: "same-origin",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({
|
||||||
|
data: readInvoiceData(),
|
||||||
|
invoiceNumber: invoiceNumberDisplay.textContent
|
||||||
|
})
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
throw new Error(data.error || "Generování faktury se nepodařilo.");
|
||||||
|
}
|
||||||
|
|
||||||
const getAddress = (prefix) => [
|
const blob = await response.blob();
|
||||||
getValue(`${prefix}UliceCp`),
|
const downloadUrl = URL.createObjectURL(blob);
|
||||||
[getValue(`${prefix}Psc`), getValue(`${prefix}Mesto`)].filter(Boolean).join(" ")
|
const link = document.createElement("a");
|
||||||
].filter(Boolean).join(", ");
|
link.href = downloadUrl;
|
||||||
|
link.download = `${invoiceNumberDisplay.textContent}.pdf`;
|
||||||
const renderPerson = (prefix) => [
|
link.click();
|
||||||
((prefix === "odberatel" && getValue("odberatelTypSubjektu") === "spolecnost")
|
URL.revokeObjectURL(downloadUrl);
|
||||||
|| (prefix === "dodavatel" && getValue("dodavatelTypSubjektu") === "spolecnost"))
|
} catch (error) {
|
||||||
? getValue(`${prefix}NazevSpolecnosti`)
|
window.alert(error.message);
|
||||||
: getPersonName(prefix),
|
|
||||||
getValue(`${prefix}Ico`) ? `IČO: ${getValue(`${prefix}Ico`)}` : "",
|
|
||||||
getAddress(prefix)
|
|
||||||
].filter(Boolean).map(escapeHtml).join("<br>");
|
|
||||||
|
|
||||||
const renderItems = () => Array.from(itemsContainer.querySelectorAll(".invoice-item"))
|
|
||||||
.map((item) => {
|
|
||||||
const values = Array.from(item.querySelectorAll("input")).map((input) => input.value.trim());
|
|
||||||
return `<tr class="invoice-row">
|
|
||||||
<td>${escapeHtml(values[0])}</td>
|
|
||||||
<td>${escapeHtml(values[1] ? formatCzechNumber(values[1]) : "0,00")}</td>
|
|
||||||
<td>${escapeHtml(values[2])}</td>
|
|
||||||
<td>${escapeHtml(values[3] ? formatCzechNumber(values[3]) : "0,00")} Kč</td>
|
|
||||||
</tr>`;
|
|
||||||
}).join("");
|
|
||||||
|
|
||||||
const normalizeIban = (value) => value.replace(/\s+/g, "").toUpperCase();
|
|
||||||
|
|
||||||
const domesticAccountToIban = (accountNumber) => {
|
|
||||||
const match = accountNumber.replace(/\s+/g, "")
|
|
||||||
.match(/^(?:(\d{1,6})-)?(\d{1,10})\/(\d{4})$/);
|
|
||||||
|
|
||||||
if (!match) {
|
|
||||||
return "";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const bban = `${match[3]}${(match[1] || "").padStart(6, "0")}${match[2].padStart(10, "0")}`;
|
|
||||||
const remainder = `${bban}123500`.split("").reduce(
|
|
||||||
(value, digit) => (value * 10 + Number(digit)) % 97,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const checkDigits = String(98 - remainder).padStart(2, "0");
|
|
||||||
|
|
||||||
return `CZ${checkDigits}${bban}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const buildPaymentQrPayload = (accountNumber, iban, swift, total, invoiceNumber = "") => {
|
|
||||||
const preferredAccount = normalizeIban(accountNumber);
|
|
||||||
const fallbackAccount = normalizeIban(iban);
|
|
||||||
const paymentAccount = /^([A-Z]{2})\d{2}[A-Z0-9]{10,32}$/.test(preferredAccount)
|
|
||||||
? preferredAccount
|
|
||||||
: domesticAccountToIban(accountNumber) || fallbackAccount;
|
|
||||||
|
|
||||||
if (!/^([A-Z]{2})\d{2}[A-Z0-9]{10,32}$/.test(paymentAccount)) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
"SPD*1.0",
|
|
||||||
`ACC:${paymentAccount}`,
|
|
||||||
`AM:${Number(total || 0).toFixed(2)}`,
|
|
||||||
"CC:CZK",
|
|
||||||
invoiceNumber && `X-VS:${invoiceNumber.replace(/\D/g, "").slice(-10)}`,
|
|
||||||
swift && `X-SWIFT:${normalizeIban(swift)}`
|
|
||||||
].filter(Boolean).join("*");
|
|
||||||
};
|
|
||||||
|
|
||||||
const buildInvoiceHtml = () => {
|
|
||||||
const accountNumber = getValue("cisloUctu");
|
|
||||||
const iban = getValue("iban");
|
|
||||||
const swift = getValue("swift");
|
|
||||||
const qrPayload = buildPaymentQrPayload(
|
|
||||||
accountNumber,
|
|
||||||
iban,
|
|
||||||
swift,
|
|
||||||
Number.parseFloat(getValue("total").replace(",", ".")) || 0,
|
|
||||||
invoiceNumberDisplay.textContent
|
|
||||||
);
|
|
||||||
const qrMarkup = qrPayload
|
|
||||||
? `<img class="qr-code" src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(qrPayload)}" alt="QR kód platebních údajů">`
|
|
||||||
: "<p>Platební QR kód vyžaduje platný IBAN. Číslo účtu bez IBANu nelze bezpečně převést.</p>";
|
|
||||||
const paymentDetails = [
|
|
||||||
accountNumber && `Číslo účtu: ${accountNumber}`,
|
|
||||||
iban && `IBAN: ${iban}`,
|
|
||||||
swift && `SWIFT: ${swift}`
|
|
||||||
].filter(Boolean).map(escapeHtml).join("<br>");
|
|
||||||
|
|
||||||
return `<!DOCTYPE html>
|
|
||||||
<html lang="cs">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Faktura</title>
|
|
||||||
<style>
|
|
||||||
@page { size: A4; margin: 18mm; }
|
|
||||||
* { box-sizing: border-box; }
|
|
||||||
body { color: #202124; font: 14px Arial, sans-serif; margin: 0; }
|
|
||||||
h1 { font-size: 30px; margin: 0 0 28px; }
|
|
||||||
h2 { font-size: 16px; margin: 0 0 8px; }
|
|
||||||
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 28px; }
|
|
||||||
.party, .payment { border-top: 2px solid #202124; padding-top: 10px; }
|
|
||||||
table { border-collapse: separate; border-spacing: 0; margin-top: 24px; width: 100%; }
|
|
||||||
th, td { padding: 9px 6px; text-align: left; }
|
|
||||||
th { background: #f1f1f1; border-bottom: 1px solid #aeb8c0; }
|
|
||||||
.invoice-row td { border-bottom: 1px solid #c8c8c8; }
|
|
||||||
.invoice-row:nth-child(even) { background: #f4f7fb; }
|
|
||||||
.total { font-size: 18px; font-weight: bold; margin-top: 22px; text-align: right; }
|
|
||||||
.payment-row { align-items: start; display: flex; gap: 28px; justify-content: space-between; margin-top: 36px; }
|
|
||||||
.qr-code { height: 180px; width: 180px; }
|
|
||||||
.qr-placeholder { color: #666; max-width: 220px; }
|
|
||||||
@media print { .qr-placeholder { color: #202124; } }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Faktura ${escapeHtml(invoiceNumberDisplay.textContent)}</h1>
|
|
||||||
<div class="parties">
|
|
||||||
<section class="party"><h2>Dodavatel</h2>${renderPerson("dodavatel") || "Neuvedeno"}</section>
|
|
||||||
<section class="party"><h2>Odběratel</h2>${renderPerson("odberatel") || "Neuvedeno"}</section>
|
|
||||||
</div>
|
|
||||||
<table>
|
|
||||||
<thead><tr><th>Položka</th><th>Množství</th><th>MJ</th><th>Cena za MJ</th></tr></thead>
|
|
||||||
<tbody>${renderItems() || "<tr><td colspan=\"4\">Žádné položky</td></tr>"}</tbody>
|
|
||||||
</table>
|
|
||||||
<p class="total">Celková částka: ${formatCzechNumber(getTotalValue())} Kč</p>
|
|
||||||
<div class="payment-row">
|
|
||||||
<section class="payment"><h2>Platební údaje</h2>${paymentDetails || "Neuvedeno"}</section>
|
|
||||||
<div class="qr-placeholder">${qrMarkup}</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
printInvoiceButton.addEventListener("click", () => {
|
|
||||||
const printWindow = window.open("about:blank", "_blank");
|
|
||||||
|
|
||||||
if (!printWindow) {
|
|
||||||
window.alert("Povolte prosím vyskakovací okna pro tisk faktury.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
printWindow.document.open();
|
|
||||||
printWindow.document.write(buildInvoiceHtml());
|
|
||||||
printWindow.document.close();
|
|
||||||
printWindow.addEventListener("load", () => printWindow.print(), { once: true });
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const addInvoiceItem = (values = {}) => {
|
const addInvoiceItem = (values = {}) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user