Added the ability to download the map in PDF.

1 files changed, 160 insertions, 0 deletions

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]);
+	};
+})();