feat: svg2pdf render

2026-06-19 14:31:05 +00:00 · 2022-12-19 22:09:44 +01:00 · 2022-12-19 22:09:44 +01:00 · 219128e938
commit 219128e938
parent 7f6042843d
3 changed files with 171 additions and 0 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -50,6 +50,8 @@
 		"swiper": "^8.4.6",
 		"tippy.js": "^6.3.7",
 		"typesafe-i18n": "^5.20.0",
+		"jspdf": "^2.5.1",
+		"svg2pdf.js": "^2.2.1",
 		"yup": "^0.32.11"
 	}
 }
--- a/frontend/src/lib/components/admin/CreateCandidateModal.svelte
+++ b/frontend/src/lib/components/admin/CreateCandidateModal.svelte
@ -0,0 +1,83 @@
+<script lang="ts">
+	import { apiCreateCandidate } from '$lib/@api/admin';
+	import type { CreateCandidate, CreateCandidateLogin } from '$lib/stores/candidate';
+	import { createEventDispatcher } from 'svelte';
+	import Modal from '../Modal.svelte';
+	import IdField from '../textfield/IdField.svelte';
+	import NumberField from '../textfield/NumberField.svelte';
+	import { jsPDF } from 'jspdf'
+	import 'svg2pdf.js'
+
+	let isOpened = true;
+
+	let applicationId: string = '';
+	let personalId: string = '';
+
+	let login: CreateCandidateLogin;
+
+	const dispatch = createEventDispatcher();
+
+	const createCandidate = async () => {
+		const data: CreateCandidate = {
+			applicationId: Number(applicationId),
+			personalIdNumber: personalId
+		};
+		try {
+			login = await apiCreateCandidate(data);
+			generatePdf();
+			dispatch('created');
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
+	const generatePdf = async () => {
+		const template = await fetch("/drawing.svg");
+		const blob = await template.blob();
+		const blobText = await blob.text();
+		const svg = blobText.replace("${APPLICATION}", login.applicationId.toString()).replace("${CODE}", login.password);
+		
+		const element = document.getElementById("svg-element")!;
+		element.innerHTML = svg;
+
+		const doc = new jsPDF('p', 'mm', [210, 297]);
+
+		await doc.svg(element);
+
+		doc.save('PRIHLASOVACI_UDAJE_' + login.applicationId.toString());
+	}
+
+	const close = () => {
+		isOpened = false;
+		dispatch('close');
+	};
+</script>
+
+{#if isOpened}
+<Modal on:close={close}>
+	<div class="p-20">
+			<!-- <div class="fixed -top-32 bg-gray-400"> -->
+				<svg width=210mm height=297mm class="w-[210mm] h-[297mm] hidden" id="svg-element"></svg>
+			<!-- </div> -->
+			{#if login}
+				<h1 class="text-sspsBlue text-3xl font-semibold">{applicationId}</h1>
+				<h1 class="text-sspsBlue text-3xl font-semibold">{login.password}</h1>
+			{:else}
+				<h1 class="text-sspsBlue text-3xl font-semibold">Registrace nového uchazeče</h1>
+				<h3 class="my-4">Evidenčni číslo přihlášky</h3>
+				<NumberField bind:value={applicationId} />
+				<h3 class="my-4">Rodné číslo</h3>
+				<IdField bind:value={personalId} />
+				<input
+					on:click={createCandidate}
+					class="bg-sspsBlue hover:bg-sspsBlueDark mt-6 w-full rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
+					type="submit"
+					value="Vytvořit"
+				/>
+			{/if}
+		</div>
+	</Modal>
+{/if}
+
+<style>
+</style>
--- a/frontend/static/drawing.svg
+++ b/frontend/static/drawing.svg
@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="drawing.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.54488788"
+     inkscape:cx="376.22419"
+     inkscape:cy="548.73675"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#0000ff;stroke-width:0.264583"
+       id="rect788"
+       width="65.580345"
+       height="76.91098"
+       x="41.545662"
+       y="78.284393" />
+    <text
+       xml:space="preserve"
+       style="font-size:9.87777px;fill:#0000ff;stroke-width:0.264583"
+       x="33.648552"
+       y="187.12717"
+       id="text844"><tspan
+         sodipodi:role="line"
+         id="tspan842"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono';stroke-width:0.264583"
+         x="33.648552"
+         y="187.12717">${APPLICATION}</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:9.87777px;fill:#0000ff;stroke-width:0.264583"
+       x="35.021965"
+       y="202.23468"
+       id="text898"><tspan
+         sodipodi:role="line"
+         id="tspan896"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'JetBrains Mono';-inkscape-font-specification:'JetBrains Mono';stroke-width:0.264583"
+         x="35.021965"
+         y="202.23468">${CODE}</tspan></text>
+    <rect
+       style="fill:#00ff00;stroke-width:0.264583"
+       id="rect6059"
+       width="82.061272"
+       height="65.236992"
+       x="97.168785"
+       y="39.48555" />
+    <ellipse
+       style="fill:#ff0000;stroke-width:0.264583"
+       id="path6327"
+       cx="129.95895"
+       cy="136.1393"
+       rx="58.884972"
+       ry="44.464161" />
+  </g>
+</svg>