Added the ability to download the map in PDF.

7 files changed, 221 insertions, 22 deletions

diff --git a/src/scripts.json b/src/scripts.json
index 5a821b4..43d506c 100644
--- a/src/scripts.json
+++ b/src/scripts.json
@@ -9,6 +9,6 @@
 		"functionality/view-khatian/index.ts": "KnowYourProperty.action",
 		"captcha/know-your-property.ts": "KnowYourProperty.action",
 		"captcha/application-receipt.ts": "Apprecrep.action",
-		"functionality/sheet-map.ts": "SheetMapViewAction.action?lstSheetNo=0"
+		"functionality/sheet-map/index.ts": "SheetMapViewAction.action"
 	}
 }
diff --git a/src/scripts/functionality/sheet-map.ts b/src/scripts/functionality/sheet-map.ts
deleted file mode 100644
index 4e3bc75..0000000
--- a/src/scripts/functionality/sheet-map.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-const downloadButtonContainer = document.createElement("td");
-const downloadButton = document.createElement("button");
-downloadButton.innerHTML = "DOWNLOAD";
-downloadButtonContainer.appendChild(downloadButton);
-const svgElement = document.querySelector("svg");
-(document.querySelector("#headerTable > tbody > tr") as any).appendChild(downloadButtonContainer);
-downloadButton.addEventListener("click", e => {
-	e.preventDefault();
-	(document.querySelector("#btnResetZoom") as any).click()
-	function download(filename: string, text: string) {
-		const element = document.createElement("a");
-		element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
-		element.setAttribute("download", filename);
-		element.style.display = "none";
-		document.body.appendChild(element);
-		element.click();
-		document.body.removeChild(element);
-	}
-	download("map.svg", $("#OpenLayers_Layer_Vector_RootContainer_35").html());
-});
diff --git a/src/scripts/functionality/sheet-map/download-map-pdf-page-content.html b/src/scripts/functionality/sheet-map/download-map-pdf-page-content.html
new file mode 100644
index 0000000..a07a316
--- /dev/null
+++ b/src/scripts/functionality/sheet-map/download-map-pdf-page-content.html
@@ -0,0 +1,46 @@
+<style>
+	body {
+		margin: 0;
+		padding: 0;
+	}
+	svg {
+		display: block;
+		max-width: 100%;
+		max-height: 100%;
+	}
+</style>
+<svg>
+	$mapContent$
+</svg>
+<script>
+	let minx = Infinity;
+	let miny = Infinity;
+	let maxx = 0;
+	let maxy = 0;
+
+	for (const p of document.querySelectorAll("path")) {
+		const b = p.getBBox();
+		if (b.x < minx) {
+			minx = b.x;
+		}
+		if (b.y < miny) {
+			miny = b.y;
+		}
+		if (maxx < b.x + b.width) {
+			maxx = b.x + b.width;
+		}
+		if (maxy < b.y + b.height) {
+			maxy = b.y + b.height;
+		}
+	}
+
+	const viewBoxWidth = maxx - minx;
+	const viewBoxHeight = maxy - miny;
+
+	document.querySelectorAll("text").forEach(e => {
+		e.setAttribute("font-size", (Math.min(viewBoxWidth, viewBoxHeight)/200).toString())
+	});
+	document.querySelector("svg").setAttribute("viewBox", [minx, miny, viewBoxWidth, viewBoxHeight].map(e => e.toString()).join(" "));
+	window.addEventListener("afterprint", window.close);
+	window.print();
+</script>
diff --git a/src/scripts/functionality/sheet-map/index.ts b/src/scripts/functionality/sheet-map/index.ts
new file mode 100644
index 0000000..341c39b
--- /dev/null
+++ b/src/scripts/functionality/sheet-map/index.ts
@@ -0,0 +1,160 @@
+import { generateWebPage } from "@/shared/generate-web-page";
+import getDownloadMapPDFPageContent from "@/scripts/functionality/sheet-map/download-map-pdf-page-content.html";
+import getMapSVGPathElementContent from "@/scripts/functionality/sheet-map/map-svg-path-element.html";
+import getMapPlotLabelElementContent from "@/scripts/functionality/sheet-map/map-svg-plot-label-element.html";
+
+interface PlotDetail {
+	plotArea: number;
+	plotno: string;
+	polygon: string;
+};
+
+interface PlotLabel {
+	plotno: string;
+	point: string;
+}
+
+const downloadSVGButtonContainer = document.createElement("td");
+const downloadSVGButton = document.createElement("button");
+const downloadPDFButtonContainer = document.createElement("td");
+const downloadPDFButton = document.createElement("button");
+const downloadPDFWithOutLabelButtonContainer = document.createElement("td");
+const downloadPDFWithOutLabelButton = document.createElement("button");
+downloadSVGButton.innerHTML = "DOWNLOAD SVG";
+downloadPDFButton.innerHTML = "DOWNLOAD PDF";
+downloadPDFWithOutLabelButton.innerHTML = "DOWNLOAD PDF (NO LABELS)";
+downloadSVGButtonContainer.appendChild(downloadSVGButton);
+downloadPDFButtonContainer.appendChild(downloadPDFButton);
+downloadPDFWithOutLabelButtonContainer.appendChild(downloadPDFWithOutLabelButton);
+const svgElement = document.querySelector("svg");
+document.querySelector("#headerTable > tbody > tr")!.appendChild(downloadSVGButtonContainer);
+document.querySelector("#headerTable > tbody > tr")!.appendChild(downloadPDFButtonContainer);
+document.querySelector("#headerTable > tbody > tr")!.appendChild(downloadPDFWithOutLabelButtonContainer);
+const resetZoomButton = document.querySelector<HTMLButtonElement>("#btnResetZoom")!;
+const plotNumberInput = document.querySelector<HTMLInputElement>("#txtPlotNo")!;
+const plotInformation = document.createElement("div") as HTMLDivElement;
+document.body.appendChild(plotInformation);
+
+const setPlotInformation = (plotDetail: PlotDetail | null | undefined = null) => {
+	if (plotDetail) {
+		plotInformation.innerHTML = "<div>Plot Number: " + plotDetail.plotno + "</div><div>Area: " + (plotDetail.plotArea/1000).toFixed(3) + " acres</div>";
+	} else {
+		plotInformation.innerHTML = "<div>Plot Number: </div><div>Area: 0.000 acres</div>";
+	}
+};
+setPlotInformation();
+
+let plotDetailContent = "";
+let plotLabelContent = "";
+
+downloadSVGButton.addEventListener("click", e => {
+	e.preventDefault();
+	const element = document.createElement("a");
+	element.setAttribute(
+		"href",
+		"data:text/plain;charset=utf-8," + encodeURIComponent(plotDetailContent + plotLabelContent)
+	);
+	element.setAttribute("download", "map.svg");
+	element.style.display = "none";
+	document.body.appendChild(element);
+	element.click();
+	document.body.removeChild(element);
+});
+
+const downloadPDF = (labelPoints: boolean = true) => {
+	generateWebPage(
+		getDownloadMapPDFPageContent({
+			mapContent: plotDetailContent + (labelPoints ? plotLabelContent : "")
+		}),
+		"map"
+	);
+};
+
+downloadPDFButton.addEventListener("click", e => {
+	e.preventDefault();
+	downloadPDF();
+});
+
+downloadPDFWithOutLabelButton.addEventListener("click", e => {
+	e.preventDefault();
+	downloadPDF(false);
+});
+
+(async () => {
+	const searchParams = new URLSearchParams(window.location.search);
+	const response1 = await fetch(
+		"/BanglarBhumi/sheetMap_populateLayerData?lstSheetNo=" + searchParams.get("lstSheetNo"),
+		{
+			method: "POST"
+		});
+	const plotDetailList: PlotDetail[] = (await response1.json()).features;
+	const response2 = await fetch(
+		"/BanglarBhumi/sheetMap_populateCentroidData?lstSheetNo=" + searchParams.get("lstSheetNo"),
+		{
+			method: "POST"
+		});
+	const plotLabelList: PlotLabel[] = (await response2.json()).features;
+	let plotDetails: { [key: string]: PlotDetail } = {};
+
+	for (const plotDetail of plotDetailList) {
+		const plotPolygonPoints = plotDetail.polygon.split("(((")[1].split(")))")[0];
+		plotDetailContent += getMapSVGPathElementContent({
+			polygonData: plotPolygonPoints
+		});
+	}
+
+	for (const plotLabel of plotLabelList) {
+		const plotLabelPoint = plotLabel.point.split("(")[1].split(")")[0].split(" ");
+		plotLabelContent += getMapPlotLabelElementContent({
+			plotLabelX: plotLabelPoint[0],
+			plotLabelY: plotLabelPoint[1],
+			plotNumber: plotLabel.plotno
+		});
+	}
+
+	document.querySelector("#btnSearch")!.addEventListener("click", () => {
+		let plotDetail;
+		for (const p of plotDetailList) {
+			if (p.plotno === plotNumberInput.value) {
+				plotDetail = p;
+				break;
+			}
+		}
+		setPlotInformation(plotDetail);
+	});
+
+	await new Promise<void>((resolve, reject) => {
+		const plotElementIdsControl = setInterval(() => {
+			let i = 0;
+			let plotElements = document.querySelector("#OpenLayers_Layer_Vector_25_vroot")?.children || [];
+			if (plotElements.length) {
+				clearInterval(plotElementIdsControl);
+				for (let i = 0; i < plotElements.length; i++) {
+					plotDetails[plotElements[i].id] = plotDetailList[i];
+				}
+				resolve();
+			}
+		}, 300);
+	});
+
+	setInterval(() => {
+		for (const plotElementId in plotDetails) {
+			const e = document.getElementById(plotElementId);
+			if (e) {
+				e.removeEventListener("click", handlePlotClick);
+				e.addEventListener("click", handlePlotClick);
+			}
+		}
+	}, 300);
+
+	const handlePlotClick = (e: MouseEvent) => {
+		document.querySelectorAll("path").forEach(e => {
+			e.setAttribute("fill", "#ffcc66");
+		});
+
+		const target = e.target as SVGPathElement;
+
+		target.setAttribute("fill", "#8aeeef");
+		setPlotInformation(plotDetails[target.id]);
+	};
+})();
diff --git a/src/scripts/functionality/sheet-map/map-svg-path-element.html b/src/scripts/functionality/sheet-map/map-svg-path-element.html
new file mode 100644
index 0000000..673707e
--- /dev/null
+++ b/src/scripts/functionality/sheet-map/map-svg-path-element.html
@@ -0,0 +1,11 @@
+<path
+	d="M $polygonData$"
+	fill-rule="evenodd"
+	fill="#ffcc66"
+	fill-opacity="0.8"
+	stroke="#cc6633"
+	stroke-opacity="0.8"
+	stroke-width="1"
+	stroke-linecap="round"
+	stroke-linejoin="round">
+</path>
diff --git a/src/scripts/functionality/sheet-map/map-svg-plot-label-element.html b/src/scripts/functionality/sheet-map/map-svg-plot-label-element.html
new file mode 100644
index 0000000..b4eefec
--- /dev/null
+++ b/src/scripts/functionality/sheet-map/map-svg-plot-label-element.html
@@ -0,0 +1,3 @@
+<text x="$plotLabelX$" y="$plotLabelY$" fill="blue" font-family="BNB-TTBidisha" font-weight="bold" text-anchor="middle">
+	<tspan baseline-shift="-35%" x="$plotLabelX$" dy="0em">$plotNumber$</tspan>
+</text>
diff --git a/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html b/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html
index 668c36a..5b26469 100644
--- a/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html
+++ b/src/scripts/functionality/view-khatian/download-information-pdf-page-content.html
@@ -211,7 +211,6 @@
 		}
 	</style>
 	<img class="banner" src="https://banglarbhumi.gov.in/BanglarBhumi/images/bl.png">
-	<!--<button id="print-button">Print</button>-->
 	<div class="details">$details$</div>
 	<footer>
 		<img class="footer" src="$sanghaFacilitationCentreBannerUrl$">