This commit is contained in:
Bastian Wagner
@@ -131,166 +131,180 @@ export class PdfService {
|
|||||||
private buildHtml(dto: KeyHandoverDto): string {
|
private buildHtml(dto: KeyHandoverDto): string {
|
||||||
return `
|
return `
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Übergabeprotokoll</title>
|
<title>Übergabeprotokoll</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #222;
|
color: #222;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 0 24px 0;
|
margin: 0 0 24px 0;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 170px;
|
width: 170px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-box {
|
.note-box {
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.declaration {
|
.declaration {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.signature-wrapper {
|
.signature-wrapper {
|
||||||
margin-top: 60px;
|
margin-top: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
gap: 40px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.signature-block {
|
.signature-block {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.signature-line {
|
.signature-line {
|
||||||
border-top: 1px solid #000;
|
border-top: 1px solid #000;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Übergabeprotokoll</h1>
|
|
||||||
|
|
||||||
<div class="section">
|
.return-section {
|
||||||
<div class="section-title">Übergabedaten</div>
|
margin-top: 50px;
|
||||||
<div class="row">
|
padding-top: 20px;
|
||||||
<span class="label">Datum der Übergabe:</span>
|
border-top: 1px dashed #999;
|
||||||
<span class="value">${this.escapeHtml(new Date(dto.handoverDate).toLocaleDateString("de-DE"))}</span>
|
}
|
||||||
</div>
|
</style>
|
||||||
<div class="row" style="display: none">
|
</head>
|
||||||
<span class="label">Ort:</span>
|
<body>
|
||||||
<span class="value">${this.escapeHtml(dto.place)}</span>
|
<h1>Übergabeprotokoll</h1>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Übergeber</div>
|
<div class="section-title">Übergabedaten</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Name:</span>
|
<span class="label">Datum der Übergabe:</span>
|
||||||
<span class="value">${this.escapeHtml(dto.giverName)}</span>
|
<span class="value">${this.escapeHtml(new Date(dto.handoverDate).toLocaleDateString("de-DE"))}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row" style="display: none">
|
||||||
<span class="label">Adresse:</span>
|
<span class="label">Ort:</span>
|
||||||
<span class="value">${this.escapeHtml(dto.giverAddress ?? '-')}</span>
|
<span class="value">${this.escapeHtml(dto.place)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Empfänger</div>
|
<div class="section-title">Übergeber</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Name:</span>
|
<span class="label">Name:</span>
|
||||||
<span class="value">${this.escapeHtml(dto.receiverName)}</span>
|
<span class="value">${this.escapeHtml(dto.giverName)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Adresse:</span>
|
<span class="label">Adresse:</span>
|
||||||
<span class="value">${this.escapeHtml(dto.receiverAddress ?? '-')}</span>
|
<span class="value">${this.escapeHtml(dto.giverAddress ?? "-")}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Schlüsselangaben</div>
|
<div class="section-title">Empfänger</div>
|
||||||
<div class="row" style="display: none;">
|
<div class="row">
|
||||||
<span class="label">Schlüsselart:</span>
|
<span class="label">Name:</span>
|
||||||
<span class="value">${this.escapeHtml(dto.keyType)}</span>
|
<span class="value">${this.escapeHtml(dto.receiverName)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="label">Schlüsselnummer:</span>
|
<span class="label">Adresse:</span>
|
||||||
<span class="value">${this.escapeHtml(dto.keyNumber ?? '-')}</span>
|
<span class="value">${this.escapeHtml(dto.receiverAddress ?? "-")}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" style="display: none;">
|
</div>
|
||||||
<span class="label">Anzahl:</span>
|
|
||||||
<span class="value">${dto.quantity}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="label">Objekt / Raum:</span>
|
|
||||||
<span class="value">${this.escapeHtml(dto.objectDescription ?? '-')}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span class="label">Bemerkungen:</span>
|
|
||||||
</div>
|
|
||||||
<div class="note-box">${this.escapeHtml(dto.notes ?? '-')}</div>
|
|
||||||
|
|
||||||
</div>
|
<div class="section">
|
||||||
|
<div class="section-title">Schlüsselangaben</div>
|
||||||
|
<div class="row" style="display: none;">
|
||||||
|
<span class="label">Schlüsselart:</span>
|
||||||
|
<span class="value">${this.escapeHtml(dto.keyType)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="label">Schlüsselnummer:</span>
|
||||||
|
<span class="value">${this.escapeHtml(dto.keyNumber ?? "-")}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="display: none;">
|
||||||
|
<span class="label">Anzahl:</span>
|
||||||
|
<span class="value">${dto.quantity}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="label">Objekt / Raum:</span>
|
||||||
|
<span class="value">${this.escapeHtml(dto.objectDescription ?? "-")}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="label">Bemerkungen:</span>
|
||||||
|
</div>
|
||||||
|
<div class="note-box">${this.escapeHtml(dto.notes ?? "-")}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="declaration">
|
<div class="declaration">
|
||||||
Hiermit bestätigt der Empfänger den Erhalt der oben aufgeführten Schlüssel.
|
Hiermit bestätigt der Empfänger den Erhalt der oben aufgeführten Schlüssel.
|
||||||
<br />
|
</div>
|
||||||
Mit ihrer Unterschrift bestätigen beide Parteien die ordnungsgemäße Übergabe.
|
|
||||||
</div>
|
<div class="signature-wrapper">
|
||||||
|
<div class="signature-block">
|
||||||
|
<div class="signature-line">Unterschrift Empfänger</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="return-section">
|
||||||
|
<div class="section-title">Rückgabe des Schlüssels</div>
|
||||||
|
|
||||||
|
<div class="declaration">
|
||||||
|
Hiermit wird bestätigt, dass der oben aufgeführte Schlüssel zurückgegeben wurde.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="signature-wrapper">
|
||||||
|
<div class="signature-block">
|
||||||
|
<div class="signature-line">Unterschrift Rücknahme</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
<div class="signature-wrapper">
|
|
||||||
<div class="signature-block">
|
|
||||||
<div class="signature-line">Unterschrift Übergeber</div>
|
|
||||||
</div>
|
|
||||||
<div class="signature-block">
|
|
||||||
<div class="signature-line">Unterschrift Empfänger</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user