no online signature, 2 pdf versions

content/index.html

@@ -43,9 +43,6 @@
 		<script
 			src="static/js/jquery.min.js"
 		></script>
-		<script
-			src="static/js/jSignature.min.js"
-		></script>
 		<script
 			src="static/js/jspdf.umd.min.js"
 		></script>
@@ -152,13 +149,14 @@
 					<select
 						id="card-type"
 					>
+						<option>1. a 2. kolo</option>
 						<option>1. kolo</option>
 						<option>2. kolo</option>
 					</select>
 					
 					<input
 						type="submit"
-						id="create-filled-form"
+						id="finish"
 						value="Podepsat"
 					>
 					
@@ -169,41 +167,6 @@
 			</div>
 			
 			<div id="step2">
-				<h2>Podpis</h2>
-				
-				<a
-					href="#"
-					id="show-document"
-				>
-					Zobrazit dokument
-				</a>
-				
-				<div id="signature-info-wrapper">
-					V
-					<input
-						type="text"
-						id="signature-location"
-						placeholder="Místo"
-					>
-					dne <input
-						type="text"
-						id="current-date"
-						placeholder="Datum"
-					>
-				</div>
-				
-				<div id="signature-wrapper">
-					<div id="signature"></div>
-					<div id="signature-bottom">
-						<button class="button-small" id="signature-undo">Smazat</button>
-						<i>Myší nebo prstem nakresli podpis</i>
-					</div>
-				</div>
-				
-				<button id="finish">Předat úřadu</button>
-			</div>
-			
-			<div id="step3">
 				<div id="found-office">
 					<h2>Úřad jsme našli automaticky.</h2>
 					
@@ -231,15 +194,11 @@
 					demokracie!
 				</p>
 				
-				<button id="download-pdf">Stáhnout PDF</button>
+				<button id="download-paper-pdf">Stáhnout PDF (osobní předání)</button>
+				<button id="download-electronic-pdf">Stáhnout PDF (datová schránka)</button>
 			</div>
-			
+
 			<div id="canvas-wrapper">
-				<a
-					href="#"
-					id="back-to-step2"
-				>Zpět</a>
-				
 				<canvas id="page-1-canvas" width="2480" height="3507"></canvas>
 				<canvas id="page-2-canvas" width="2480" height="3507"></canvas>
 			</div>

content/static/css/base.css

@@ -26,7 +26,7 @@
 	padding-bottom:20px
 }
 
-#found-office,#not-found-office,#step3 {
+#found-office,#not-found-office,#step2 {
 	display:none
 }
 
@@ -79,18 +79,13 @@
 	max-width:600px
 }
 
-#step1,#step2,#step3,#canvas-wrapper {
+#step1,#step2,#canvas-wrapper {
 	margin-left:auto;
 	margin-right:auto;
 	max-width:1000px;
 	padding-top:40px
 }
 
-#step2 {
-	display:none;
-	text-align:center
-}
-
 .button-small {
 	font-size:small;
 	padding:4px 7px
@@ -186,7 +181,7 @@ textarea {
 }
 
 @media screen and (max-width:1200px) {
-	#step1,#step2,#step3,#canvas-wrapper {
+	#step1,#step2,#canvas-wrapper {
 		padding-top:0
 	}
 	

content/static/js/main.js

@@ -108,27 +108,40 @@ const fillCanvas = async () => {
 	const roundCheckSharedY = firstPageCanvas.width * 0.185;
 	let electionDate = "";
 	
+	const createCheckRound1 = () => {
+		createCheck(
+			firstPageContext,
+			firstPageCanvas,
+			roundCheckSharedY,
+			firstPageCanvas.height * 0.3853
+		);
+		
+		electionDate = "13. ledna 2023 - 14. ledna 2023";
+	}
+	
+	const createCheckRound2 = () => {
+		createCheck(
+			firstPageContext,
+			firstPageCanvas,
+			roundCheckSharedY,
+			firstPageCanvas.height * 0.404
+		);
+		
+		electionDate = "27. ledna 2023 - 28. ledna 2023";
+	}
+	
 	switch ($("#card-type").val()) {
-		case "1. kolo": 
-			createCheck(
-				firstPageContext,
-				firstPageCanvas,
-				roundCheckSharedY,
-				firstPageCanvas.height * 0.3853
-			);
+		case "1. a 2. kolo":
+			createCheckRound1();
+			createCheckRound2();
 			
-			electionDate = "13. ledna 2023 - 14. ledna 2023";
+			break;
+		case "1. kolo": 
+			createCheckRound1();
 			
 			break;
 		case "2. kolo":
-			createCheck(
-				firstPageContext,
-				firstPageCanvas,
-				roundCheckSharedY,
-				firstPageCanvas.height * 0.404
-			);
-			
-			electionDate = "27. ledna 2023 - 28. ledna 2023";
+			createCheckRound2();
 			
 			break;
 	}
@@ -345,7 +358,7 @@ $(window).ready(
 			}
 		);
 		
-		$("#create-filled-form").on(
+		$("#finish").on(
 			"click",
 			async (event) => {
 				if ($("#form-wrapper")[0].checkValidity()) {
@@ -361,121 +374,8 @@ $(window).ready(
 				
 				await fillCanvas();
 				
-				await new Promise(
-					resolve => { $("#step1").fadeOut(200, resolve); }
-				);
-				$("#step1").css("display", "none");
-				
-				await new Promise(
-					resolve => { $("#step2").fadeIn(200, resolve); }
-				);
-				
-				$("#signature").jSignature();
-			}
-		);
-		
-		$("#signature-undo").on(
-			"click",
-			(event) => {
-				$("#signature").jSignature("reset");
-			}
-		);
-		
-		$("#show-document").on(
-			"click",
-			async (event) => {
-				await new Promise(
-					resolve => { $("#step2").fadeOut(200, resolve); }
-				);
-				$("#step2").css("display", "none");
-				
-				await new Promise(
-					resolve => { $("#canvas-wrapper").fadeIn(200, resolve); }
-				);
-			}
-		);
-		
-		$("#back-to-step2").on(
-			"click",
-			async (event) => {
-				await new Promise(
-					resolve => { $("#canvas-wrapper").fadeOut(200, resolve); }
-				);
-				$("#canvas-wrapper").css("display", "none");
-				
-				await new Promise(
-					resolve => { $("#step2").fadeIn(200, resolve); }
-				);
-			}
-		);
-		
-		$("#finish").on(
-			"click",
-			async (event) => {
-				// Canvas
-				
-				const secondPageCanvas = document.getElementById("page-2-canvas");
-				const secondPageContext = secondPageCanvas.getContext("2d");
-				
-				// Date
-				
-				const desiredCurrentDate = $("#current-date").val()
-				
-				setHighestPossibleFontSize(
-					secondPageContext,
-					desiredCurrentDate,
-					"Open Sans",
-					secondPageCanvas.height * 0.013,
-					secondPageCanvas.width * 0.32
-				);
-				
-				secondPageContext.fillText(
-					desiredCurrentDate,
-					secondPageCanvas.width * 0.56, secondPageCanvas.height * 0.232
-				);
-				
-				// Location
-				
-				const location = $("#signature-location").val();
-				
-				setHighestPossibleFontSize(
-					secondPageContext,
-					location,
-					"Open Sans",
-					secondPageCanvas.height * 0.013,
-					secondPageCanvas.width * 0.31
-				);
-				
-				secondPageContext.fillText(
-					location,
-					secondPageCanvas.width * 0.155, secondPageCanvas.height * 0.232
-				);
-				
-				// Signature
-				
-				const signature = await getImage($("#signature").jSignature("getData"));
-				
-				const signatureWidth = secondPageCanvas.width * 0.315;
-				const signatureHeight = (
-					signature.height
-					* (signatureWidth / signature.width)
-				);
-				
-				console.log(signatureHeight, signatureWidth, signature);
-				
-				secondPageContext.drawImage(
-					signature,
-					secondPageCanvas.width * 0.57, secondPageCanvas.height * 0.31 - signatureHeight,
-					signatureWidth, signatureHeight
-				);
-				
 				// UI
 				
-				await new Promise(
-					resolve => { $("#step2").fadeOut(200, resolve); }
-				);
-				$("#step2").css("display", "none");
-				
 				const city = $("#city").val();
 				
 				if (city in OFFICES) {
@@ -497,37 +397,64 @@ $(window).ready(
 				}
 				
 				await new Promise(
-					resolve => { $("#step3").fadeIn(200, resolve); }
+					resolve => { $("#step1").fadeOut(200, resolve); }
+				);
+				$("#step1").css("display", "none");
+				
+				await new Promise(
+					resolve => { $("#step2").fadeIn(200, resolve); }
 				);
 			}
 		);
 		
-		$("#download-pdf").on(
+		const createPdf = () => {
+			const pdfDocument = new jsPDF({
+				orientation: "portrait",
+				unit: "pt",
+				format: "a4"
+			});
+			
+			pdfDocument.addImage(
+				document.getElementById("page-1-canvas"),
+				"JPEG",
+				0, 0,
+				595.28, 841.89
+			);
+			
+			pdfDocument.addPage();
+			
+			pdfDocument.addImage(
+				document.getElementById("page-2-canvas"),
+				"JPEG",
+				0, 0,
+				595.28, 841.89
+			);
+			
+			pdfDocument.save("Přihláška k volebnímu průkazu.pdf");
+		}
+		
+		$("#download-paper-pdf").on(
 			"click",
 			() => {
-				const pdfDocument = new jsPDF({
-					orientation: "portrait",
-					unit: "pt",
-					format: "a4"
-				});
-				
-				pdfDocument.addImage(
-					document.getElementById("page-1-canvas"),
-					"JPEG",
-					0, 0,
-					595.28, 841.89
-				);
+				createPdf();
+			}
+		);
+		
+		$("#download-electronic-pdf").on(
+			"click",
+			() => {
+				const secondPageCanvas = document.getElementById("page-2-canvas");
+				const secondPageContext = secondPageCanvas.getContext("2d");
+				const canvasHeight = secondPageCanvas.height * 0.8;
 				
-				pdfDocument.addPage();
+				secondPageContext.fillStyle = "#ffffff";
 				
-				pdfDocument.addImage(
-					document.getElementById("page-2-canvas"),
-					"JPEG",
-					0, 0,
-					595.28, 841.89
+				secondPageContext.fillRect(
+					0, secondPageCanvas.height - canvasHeight,
+					secondPageCanvas.width, canvasHeight
 				);
 				
-				pdfDocument.save("Přihláška k volebnímu průkazu.pdf");
+				createPdf();
 			}
 		);
 	}