Added some final touches and organised codebase.

8 files changed, 121 insertions, 95 deletions

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
index a07a316..4d698ef 100644
--- a/src/scripts/functionality/sheet-map/download-map-pdf-page-content.html
+++ b/src/scripts/functionality/sheet-map/download-map-pdf-page-content.html
@@ -8,6 +8,23 @@
 		max-width: 100%;
 		max-height: 100%;
 	}
+	text {
+		font-family: "BNB-TTBidisha", sans-serif;
+		font-weight: bold;
+		font-size: 2;
+		fill: blue;
+		text-anchor: middle;
+	}
+	path {
+		fill-rule: evenodd;
+		fill: #ffcc66;
+		fill-opacity: 0.8;
+		stroke: #cc6633;
+		stroke-opacity: 0.8;
+		stroke-width: 0.2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
 </style>
 <svg>
 	$mapContent$
@@ -17,30 +34,34 @@
 	let miny = Infinity;
 	let maxx = 0;
 	let maxy = 0;
+	const paths = document.querySelectorAll("path");
 
-	for (const p of document.querySelectorAll("path")) {
+	for (const p of paths) {
 		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;
-		}
+		minx = b.x < minx ? b.x : minx;
+		miny = b.y < miny ? b.y : miny;
+		maxx = maxx < b.x + b.width ? b.x + b.width : maxx;
+		maxy = maxy < b.y + b.height ? b.y + b.height : maxy;
 	}
 
-	const viewBoxWidth = maxx - minx;
-	const viewBoxHeight = maxy - miny;
+	for (const p of paths) {
+		const m = "M " + p.getAttribute("d").substr(2).split(",").map(cood => {
+			cood = cood.trim().split(" ");
+			return cood[0] + " " + (miny + maxy - parseFloat(cood[1])).toString();
+		}).join(", ");
+		p.setAttribute("d", m);
+	}
+
+	for (const t of document.querySelectorAll("text")) {
+		t.setAttribute("y", (miny + maxy - parseFloat(t.getAttribute("y"))).toString());
+	}
 
-	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(" "));
+	document.querySelector("svg")
+		.setAttribute(
+			"viewBox",
+			[minx, miny, maxx - minx, maxy - miny]
+				.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
index 341c39b..e76650e 100644
--- a/src/scripts/functionality/sheet-map/index.ts
+++ b/src/scripts/functionality/sheet-map/index.ts
@@ -1,58 +1,71 @@
 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";
+import getMapPlotPolygonPathElement from "@/scripts/functionality/sheet-map/map-plot-polygon-path-element.html";
+import getMapPlotNumberLabelTextElement from "@/scripts/functionality/sheet-map/map-plot-number-label-text-element.html";
+import getPlotInformationElement from "@/scripts/functionality/sheet-map/plot-information-element.html";
 
-interface PlotDetail {
+interface PlotPolygon {
 	plotArea: number;
 	plotno: string;
 	polygon: string;
 };
 
-interface PlotLabel {
+interface PlotNumberLabel {
 	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 headerElement = document.querySelector("#headerTable > tbody > tr")!;
 const plotNumberInput = document.querySelector<HTMLInputElement>("#txtPlotNo")!;
 const plotInformation = document.createElement("div") as HTMLDivElement;
+let plotPolygonPathElements = "";
+let plotNumberLabelTextElements = "";
+
 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>";
+const createHeaderButton = (text: string) => {
+	const buttonContainer = document.createElement("td");
+	const button = document.createElement("button");
+	button.innerHTML = text;
+	button.style.display = "none";
+	buttonContainer.appendChild(button);
+	headerElement.appendChild(buttonContainer);
+	return button;
+};
+
+const setPlotInformation = (plotPolygon: PlotPolygon | null | undefined = null) => {
+	if (plotPolygon) {
+		plotInformation.innerHTML = getPlotInformationElement({
+			area: (plotPolygon.plotArea/1000).toFixed(3),
+			plotNumber: plotPolygon.plotno
+		});
 	} else {
-		plotInformation.innerHTML = "<div>Plot Number: </div><div>Area: 0.000 acres</div>";
+		plotInformation.innerHTML = getPlotInformationElement({
+			area: "0.000",
+			plotNumber: ""
+		});
 	}
 };
-setPlotInformation();
 
-let plotDetailContent = "";
-let plotLabelContent = "";
+const downloadPDF = (labelPoints: boolean = true) => {
+	generateWebPage(
+		getDownloadMapPDFPageContent({
+			mapContent: plotPolygonPathElements + (labelPoints ? plotNumberLabelTextElements : "")
+		}),
+		"map"
+	);
+};
+
+const downloadSVGButton = createHeaderButton("SAVE SVG");
+const downloadPDFButton = createHeaderButton("SAVE PDF");
+const downloadPDFNoLabelButton = createHeaderButton("SAVE PDF (NO LABEL)");
 
 downloadSVGButton.addEventListener("click", e => {
 	e.preventDefault();
 	const element = document.createElement("a");
 	element.setAttribute(
 		"href",
-		"data:text/plain;charset=utf-8," + encodeURIComponent(plotDetailContent + plotLabelContent)
+		"data:text/plain;charset=utf-8," + encodeURIComponent(plotPolygonPathElements + plotNumberLabelTextElements)
 	);
 	element.setAttribute("download", "map.svg");
 	element.style.display = "none";
@@ -61,25 +74,18 @@ downloadSVGButton.addEventListener("click", e => {
 	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 => {
+downloadPDFNoLabelButton.addEventListener("click", e => {
 	e.preventDefault();
 	downloadPDF(false);
 });
 
+setPlotInformation();
+
 (async () => {
 	const searchParams = new URLSearchParams(window.location.search);
 	const response1 = await fetch(
@@ -87,40 +93,44 @@ downloadPDFWithOutLabelButton.addEventListener("click", e => {
 		{
 			method: "POST"
 		});
-	const plotDetailList: PlotDetail[] = (await response1.json()).features;
+	const plotPolygonList: PlotPolygon[] = (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 } = {};
+	const plotNumberLabelList: PlotNumberLabel[] = (await response2.json()).features;
+	let plotPolygons: { [key: string]: PlotPolygon } = {};
 
-	for (const plotDetail of plotDetailList) {
-		const plotPolygonPoints = plotDetail.polygon.split("(((")[1].split(")))")[0];
-		plotDetailContent += getMapSVGPathElementContent({
-			polygonData: plotPolygonPoints
+	for (const plotPolygon of plotPolygonList) {
+		const plotPolygonPoints = plotPolygon.polygon.split("(((")[1].split(")))")[0];
+		plotPolygonPathElements += getMapPlotPolygonPathElement({
+			polygonVertices: 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
+	for (const plotNumberLabel of plotNumberLabelList) {
+		const plotNumberLabelPoint = plotNumberLabel.point.split("(")[1].split(")")[0].split(" ");
+		plotNumberLabelTextElements += getMapPlotNumberLabelTextElement({
+			x: plotNumberLabelPoint[0],
+			y: plotNumberLabelPoint[1],
+			plotNumber: plotNumberLabel.plotno
 		});
 	}
 
+	downloadSVGButton.style.display = "inherit";
+	downloadPDFButton.style.display = "inherit";
+	downloadPDFNoLabelButton.style.display = "inherit";
+
 	document.querySelector("#btnSearch")!.addEventListener("click", () => {
-		let plotDetail;
-		for (const p of plotDetailList) {
+		let plotPolygon;
+		for (const p of plotPolygonList) {
 			if (p.plotno === plotNumberInput.value) {
-				plotDetail = p;
+				plotPolygon = p;
 				break;
 			}
 		}
-		setPlotInformation(plotDetail);
+		setPlotInformation(plotPolygon);
 	});
 
 	await new Promise<void>((resolve, reject) => {
@@ -130,15 +140,15 @@ downloadPDFWithOutLabelButton.addEventListener("click", e => {
 			if (plotElements.length) {
 				clearInterval(plotElementIdsControl);
 				for (let i = 0; i < plotElements.length; i++) {
-					plotDetails[plotElements[i].id] = plotDetailList[i];
+					plotPolygons[plotElements[i].id] = plotPolygonList[i];
 				}
 				resolve();
 			}
-		}, 300);
+		}, 50);
 	});
 
 	setInterval(() => {
-		for (const plotElementId in plotDetails) {
+		for (const plotElementId in plotPolygons) {
 			const e = document.getElementById(plotElementId);
 			if (e) {
 				e.removeEventListener("click", handlePlotClick);
@@ -155,6 +165,6 @@ downloadPDFWithOutLabelButton.addEventListener("click", e => {
 		const target = e.target as SVGPathElement;
 
 		target.setAttribute("fill", "#8aeeef");
-		setPlotInformation(plotDetails[target.id]);
+		setPlotInformation(plotPolygons[target.id]);
 	};
 })();
diff --git a/src/scripts/functionality/sheet-map/map-plot-number-label-text-element.html b/src/scripts/functionality/sheet-map/map-plot-number-label-text-element.html
new file mode 100644
index 0000000..d220367
--- /dev/null
+++ b/src/scripts/functionality/sheet-map/map-plot-number-label-text-element.html
@@ -0,0 +1,3 @@
+<text x="$x$" y="$y$">
+	<tspan baseline-shift="-35%" x="$x$" dy="0em">$plotNumber$</tspan>
+</text>
diff --git a/src/scripts/functionality/sheet-map/map-plot-polygon-path-element.html b/src/scripts/functionality/sheet-map/map-plot-polygon-path-element.html
new file mode 100644
index 0000000..d4d38a6
--- /dev/null
+++ b/src/scripts/functionality/sheet-map/map-plot-polygon-path-element.html
@@ -0,0 +1 @@
+<path d="M $polygonVertices$"></path>
diff --git a/src/scripts/functionality/sheet-map/map-svg-path-element.html b/src/scripts/functionality/sheet-map/map-svg-path-element.html
deleted file mode 100644
index 673707e..0000000
--- a/src/scripts/functionality/sheet-map/map-svg-path-element.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<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
deleted file mode 100644
index b4eefec..0000000
--- a/src/scripts/functionality/sheet-map/map-svg-plot-label-element.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<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/sheet-map/plot-information-element.html b/src/scripts/functionality/sheet-map/plot-information-element.html
new file mode 100644
index 0000000..fd740a8
--- /dev/null
+++ b/src/scripts/functionality/sheet-map/plot-information-element.html
@@ -0,0 +1,6 @@
+<div>
+	Plot Number: $plotNumber$
+</div>
+<div>
+	Area: $area$ acres
+</div>
diff --git a/src/scripts/login.ts b/src/scripts/login.ts
index a09eb0a..0fe5239 100644
--- a/src/scripts/login.ts
+++ b/src/scripts/login.ts
@@ -104,9 +104,8 @@ document.addEventListener("DOMContentLoaded", () => {
 				"json"
 			);
 		}
-
 	};
 
 	login();
-	setInterval(login, 1000 * 60 * 5);
+	setInterval(login, 1000 * 60);
 });