Skip to content
Snippets Groups Projects
Commit 3ef42e24 authored by Tomáš Hozman's avatar Tomáš Hozman
Browse files

no online signature, 2 pdf versions

parent 7454e5bb
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
content/index.html
+ 5
− 46
View file @ 3ef42e24
......@@ -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
+ 3
− 8
View file @ 3ef42e24
......@@ -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/jSignature.min.js deleted 100644 → 0
+ 0
− 81
View file @ 7454e5bb
This diff is collapsed.
content/static/js/main.js
+ 78
− 151
View file @ 3ef42e24
......@@ -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();
}
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft