From 36252ce59f83913478fc717209f0f4079f516a89 Mon Sep 17 00:00:00 2001 From: Arpit Chakladar <54011232+arpitchakladar@users.noreply.github.com> Date: Tue, 30 Jul 2024 12:20:42 +0530 Subject: Added some final touches and organised codebase. --- .../sheet-map/download-map-pdf-page-content.html | 59 +++++++--- src/scripts/functionality/sheet-map/index.ts | 130 +++++++++++---------- .../map-plot-number-label-text-element.html | 3 + .../sheet-map/map-plot-polygon-path-element.html | 1 + .../sheet-map/map-svg-path-element.html | 11 -- .../sheet-map/map-svg-plot-label-element.html | 3 - .../sheet-map/plot-information-element.html | 6 + src/scripts/login.ts | 3 +- 8 files changed, 121 insertions(+), 95 deletions(-) create mode 100644 src/scripts/functionality/sheet-map/map-plot-number-label-text-element.html create mode 100644 src/scripts/functionality/sheet-map/map-plot-polygon-path-element.html delete mode 100644 src/scripts/functionality/sheet-map/map-svg-path-element.html delete mode 100644 src/scripts/functionality/sheet-map/map-svg-plot-label-element.html create mode 100644 src/scripts/functionality/sheet-map/plot-information-element.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 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; + } $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(); 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("#btnResetZoom")!; +const headerElement = document.querySelector("#headerTable > tbody > tr")!; const plotNumberInput = document.querySelector("#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 = "
Plot Number: " + plotDetail.plotno + "
Area: " + (plotDetail.plotArea/1000).toFixed(3) + " acres
"; +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 = "
Plot Number:
Area: 0.000 acres
"; + 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((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 @@ + + $plotNumber$ + 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 @@ + 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 @@ - - 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 @@ - - $plotNumber$ - 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 @@ +
+ Plot Number: $plotNumber$ +
+
+ Area: $area$ acres +
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); }); -- cgit v1.2.3