Improved the functionality of the Download PDF button and reduced bundle size manyfold.

2 files changed, 172 insertions, 2 deletions

diff --git a/src/scripts/functionality/view-khatian.ts b/src/scripts/functionality/view-khatian/index.ts
index e81613b..baf6d8e 100644
--- a/src/scripts/functionality/view-khatian.ts
+++ b/src/scripts/functionality/view-khatian/index.ts
@@ -1,4 +1,5 @@
 import { downloadPDF } from "@/shared/download-pdf";
+import getKhatinDetailsPDFPageData from "@/scripts/functionality/view-khatian/khatian-download-document";
 
 declare function loadKhatian(): void;
 
@@ -17,8 +18,18 @@ document.addEventListener("DOMContentLoaded", () => {
 			""
 		);
 
+	const getValueOfSelectElement = (selector: string) => {
+		const element = document.querySelector(selector) as HTMLSelectElement;
+		return element.options[element.selectedIndex].text;
+	};
+
 	const downloadKhatianInformationPDF = () => {
-		downloadPDF(document.querySelector("html") as HTMLElement, "khatian-details.pdf");
+		const documentStringContent = getKhatinDetailsPDFPageData(document.querySelector("#khdetails")!.innerHTML, {
+			district: getValueOfSelectElement("#lstDistrictCode1"),
+			block: getValueOfSelectElement("#lstBlockCode1"),
+			mouza: getValueOfSelectElement("#lstMouzaList")
+		});
+		downloadPDF(`<div id="content">${documentStringContent}</div>`, "khatian-details.pdf");
 	};
 
 	$.post = function() {
@@ -41,7 +52,6 @@ document.addEventListener("DOMContentLoaded", () => {
 						formElement.insertBefore(downloadPDFButton, separatorElement);
 					}
 				} else if (downloadPDFButton) {
-					downloadPDFButton.removeEventListener("click", downloadKhatianInformationPDF);
 					formElement.removeChild(downloadPDFButton);
 					downloadPDFButton = null;
 				}
diff --git a/src/scripts/functionality/view-khatian/khatian-download-document.ts b/src/scripts/functionality/view-khatian/khatian-download-document.ts
new file mode 100644
index 0000000..c13d0dd
--- /dev/null
+++ b/src/scripts/functionality/view-khatian/khatian-download-document.ts
@@ -0,0 +1,160 @@
+// TODO: Use the local static asset
+const sanghaFacilitationCentreBannerUrl = /* chrome.runtime.getURL("/sangha-facilitation-centre-banner.jpg") */ "https://raw.githubusercontent.com/arpitchakladar/banglar-bhumi-utils/master/static/sangha-facilitation-centre-banner.jpg";
+
+export default (khatianDetails: string, { district, block, mouza }: { district: string, block: string, mouza: string }) => `
+<style>
+	* {
+		box-sizing: border-box !important;
+		text-decoration: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	body {
+		width: 100%;
+		height: 100%;
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+
+	#content {
+		width: 100%;
+		margin: 0;
+		padding: 0;
+	}
+
+	.banner {
+		width: 100%;
+	}
+
+	.khatian-details {
+		padding: 1rem;
+	}
+
+	.khatian-details > table {
+		width: 100% !important;
+		border-spacing: 0;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) {
+		width: 100% !important;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(2) {
+		display: none;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(1),
+	.khatian-details > table > tbody > tr > td:nth-child(1) > p:nth-child(4) {
+		text-align: center;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) {
+		width: 100% !important;
+		position: initial !important;
+		left: 0 !important;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table,
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table {
+		width: 100% !important;
+		border: none !important;
+	}
+
+	.khatian-details table tbody tr tr,
+	.khatian-details table tbody tr th,
+	.khatian-details table tbody tr td {
+		border: none !important;
+		background-color: transparent;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) td,
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) th {
+		text-align: left;
+	}
+
+	.khatian-details > table > tbody > tr > td > div > table > tbody > tr > th,
+	.khatian-details > table > tbody > tr > td > div > table > tbody > tr > td {
+		padding: 0 0.2rem 0 0.2rem;
+	}
+
+	.khatian-details table tbody tr tr {
+		border-bottom: 1px solid #808080 !important;
+	}
+
+	.khatian-details table tbody tr tr:last-child {
+		border: none;
+	}
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th {
+		font-weight: 500;
+	}
+
+	.khatian-details table tbody tr th, .khatian-details table tbody tr td {
+		border-right: 1px solid #808080 !important;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1),
+	#headertitle > tr {
+		border-top: 1px solid #808080 !important;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(5) > table > tbody > tr:last-child {
+		border: none !important;
+	}
+
+	.khatian-details > table tbody tr tr th:last-child, .khatian-details table tbody tr tr td:last-child {
+		border-right: none !important;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > p:nth-child(4) {
+		margin-top: 1rem !important;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(5) {
+		position: initial !important;
+		left: 0 !important;
+		top: 0 !important;
+		margin: 0 !important;
+		width: 100% !important;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > p:nth-child(3) {
+		display: none;
+	}
+
+	.khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody > tr:nth-child(1) > th {
+		width: 50%;
+	}
+
+	.footer {
+		width: 100%;
+		margin-top: 1rem;
+	}
+</style>
+<img class="banner" src="https://banglarbhumi.gov.in/BanglarBhumi/images/bl.png">
+<div class="khatian-details">${khatianDetails}</div>
+<img class="footer" src="${sanghaFacilitationCentreBannerUrl}">
+<script>
+	const tableBodyElement = document.querySelector(".khatian-details > table > tbody > tr > td:nth-child(1) > div:nth-child(2) > table > tbody");
+	const headerLabelElement = tableBodyElement.querySelector("tr:nth-child(1) > th:nth-child(1)");
+	const headerValueElement = tableBodyElement.querySelector("tr:nth-child(1) > th:nth-child(2)");
+	const khatianNumberText = headerLabelElement.innerHTML;
+	const khatianNumberValue = headerValueElement.innerHTML;
+	headerLabelElement.innerHTML = "\u{99C}\u{9C7}\u{9B2}\u{9BE} (District):"
+	headerValueElement.innerHTML = "${district}";
+	const nextElement = tableBodyElement.querySelector("tr:nth-child(2)");
+	const createTableEntry = (label, value) => {
+		const tableRowElement = document.createElement("tr");
+		const tableLabelColumnElement = document.createElement("td");
+		tableLabelColumnElement.innerHTML = label;
+		const tableValueColumnElement = document.createElement("td");
+		tableValueColumnElement.innerHTML = value;
+		tableRowElement.appendChild(tableLabelColumnElement);
+		tableRowElement.appendChild(tableValueColumnElement);
+		tableBodyElement.insertBefore(tableRowElement, nextElement);
+	}
+	createTableEntry("\u{9AC}\u{9CD}\u{9B2}\u{995} (Block):", "${block}");
+	createTableEntry("\u{9AE}\u{9CC}\u{99C}\u{9BE} (Mouza):", "${mouza}");
+	createTableEntry(khatianNumberText, khatianNumberValue);
+</script>
+`;