diff options
Diffstat (limited to 'src/scripts/functionality/sheet-map')
4 files changed, 220 insertions, 0 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 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> |