From 74ef270367e4b111576c803f7728a7d17f0c7c62 Mon Sep 17 00:00:00 2001
From: Hariprasath S <113695067+Hariprasath4022@users.noreply.github.com>
Date: Tue, 6 Oct 2026 19:42:32 +0530
Subject: [PATCH] added street images in roadwar and roadworks dashboards

---
 .../service/RoadWarService.java               |  22 +-
 .../service/WorksService.java                 |  21 ++
 .../roadwarweb/roadwarregisterdashboard.html  | 225 ++++++++++++++++++
 .../modules/works/roadworksdetails.html       | 203 +++++++++++++++-
 4 files changed, 464 insertions(+), 7 deletions(-)

diff --git a/src/main/java/com/gcc/commissionerreview/service/RoadWarService.java b/src/main/java/com/gcc/commissionerreview/service/RoadWarService.java
index ee23089..87726f9 100644
--- a/src/main/java/com/gcc/commissionerreview/service/RoadWarService.java
+++ b/src/main/java/com/gcc/commissionerreview/service/RoadWarService.java
@@ -959,7 +959,27 @@ public class RoadWarService {
 	        }
 
 	        result.put("geolocdetails", geolocdetails);
+	        
+	        List<Map<String,Object>> inspectiondetails=roadwarjdbcTemplate.queryForList(
+	        		"select ssd.road_id,ssd.start_latitude,ssd.start_longitude, CONCAT('" + fileBaseUrl + "/gccofficialapp/files',ssd.start_img) as start_img,  "
+	        		+ "CONCAT('" + fileBaseUrl + "/gccofficialapp/files',csd.centre_img) as centre_img,  "
+	        		+ "CONCAT('" + fileBaseUrl + "/gccofficialapp/files',esd.end_img) as end_img "
+	        		+ "from start_street_details ssd "
+	        		+ "left join centre_street_details csd on ssd.road_id = csd.road_id "
+	        		+ "left join end_street_details esd on ssd.road_id = esd.road_id "
+	        		+ "where ssd.road_id = ? and ssd.isactive = 1 and ssd.isdelete = 0 limit 1 ",
+	        		roadId
+	        );
 
+	        for (Map<String, Object> row : inspectiondetails) {
+	            for (Map.Entry<String, Object> entry : row.entrySet()) {
+	                if (entry.getValue() == null) {
+	                    entry.setValue("");
+	                }
+	            }
+	        }
+	        
+	        result.put("inspectiondetails", inspectiondetails);
 	        
 	        result.put("message", "Fetched Details Successfully");
 	        result.put("status", true);
@@ -2217,7 +2237,7 @@ public class RoadWarService {
 				result.putAll(road);
 
 				String road_ref_Id = String.valueOf(road.get("ref_id"));
-				System.out.println("road_ref_Id>>>>>>."+road_ref_Id);
+				//System.out.println("road_ref_Id>>>>>>."+road_ref_Id);
 
 				List<Map<String, Object>> relayingDetails =
 						jdbcTemplate.queryForList(
diff --git a/src/main/java/com/gcc/commissionerreview/service/WorksService.java b/src/main/java/com/gcc/commissionerreview/service/WorksService.java
index 03ff862..40a4161 100644
--- a/src/main/java/com/gcc/commissionerreview/service/WorksService.java
+++ b/src/main/java/com/gcc/commissionerreview/service/WorksService.java
@@ -1696,6 +1696,27 @@ public class WorksService {
 			}
 
 			result.put("geolocdetails", geolocdetails);
+			
+			List<Map<String,Object>> inspectiondetails=jdbcRoadWarTemplate.queryForList(
+	        		"select ssd.road_id,ssd.start_latitude,ssd.start_longitude, CONCAT('" + fileBaseUrl + "/gccofficialapp/files',ssd.start_img) as start_img,  "
+	        		+ "CONCAT('" + fileBaseUrl + "/gccofficialapp/files',csd.centre_img) as centre_img,  "
+	        		+ "CONCAT('" + fileBaseUrl + "/gccofficialapp/files',esd.end_img) as end_img "
+	        		+ "from start_street_details ssd "
+	        		+ "left join centre_street_details csd on ssd.road_id = csd.road_id "
+	        		+ "left join end_street_details esd on ssd.road_id = esd.road_id "
+	        		+ "where ssd.road_id = ? and ssd.isactive = 1 and ssd.isdelete = 0 limit 1 ",
+	        		roadId
+	        );
+
+	        for (Map<String, Object> row : inspectiondetails) {
+	            for (Map.Entry<String, Object> entry : row.entrySet()) {
+	                if (entry.getValue() == null) {
+	                    entry.setValue("");
+	                }
+	            }
+	        }
+	        
+	        result.put("inspectiondetails", inspectiondetails);
 
 
 			result.put("message", "Fetched Details Successfully");
diff --git a/src/main/resources/templates/modules/roadwarweb/roadwarregisterdashboard.html b/src/main/resources/templates/modules/roadwarweb/roadwarregisterdashboard.html
index ddcf2ce..ef7496c 100644
--- a/src/main/resources/templates/modules/roadwarweb/roadwarregisterdashboard.html
+++ b/src/main/resources/templates/modules/roadwarweb/roadwarregisterdashboard.html
@@ -541,6 +541,28 @@
 .timeline-clickable:hover {
     text-decoration: underline;
 }
+
+.pdf-file-box{
+		    height:60px;
+		    display:flex;
+		    align-items:center;
+		    justify-content:center;
+		    border:1px solid #ced4da;
+		    border-radius:5px;
+		    background:#f8f9fa;
+		    color:#495057;
+		    font-weight:bold;
+		    cursor:pointer;
+		    transition:all .3s ease;
+		}
+
+		.pdf-file-box:hover{
+		    background:#007bff;
+		    color:#fff;
+		    border-color:#007bff;
+		    transform:scale(1.03);
+		    box-shadow:0 4px 10px rgba(0,0,0,.2);
+		}
     </style>
 <body>
 
@@ -997,6 +1019,14 @@
                             <!-- Dynamically populated -->
 
                         </div>
+                        
+                        <div class="details-section-title" id="viewFileContainer">
+                        
+                        </div>
+                        
+                        <div class="details-section-title" id="InspectionFileContainer">
+                        
+                        </div>
 
                     </div>
 
@@ -1082,7 +1112,30 @@
 	</div>
 
 
+	<div class="modal fade" id="imagePreviewModal" tabindex="-1">
+    <div class="modal-dialog modal-xl modal-dialog-centered">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h5 class="modal-title">File Preview</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
 
+            <div class="modal-body text-center">
+
+                <img id="previewImage"
+                     class="img-fluid rounded"
+                     style="max-height:80vh; display:none;">
+
+                <iframe id="previewPdf"
+                        style="width:100%;height:80vh;border:none;display:none;">
+                </iframe>
+
+            </div>
+
+        </div>
+    </div>
+</div>
 
 
 
@@ -2014,7 +2067,179 @@ function populateRoadDetails(data) {
     renderRelayingDetails(
         data.relayingDetails
     );
+    
+    renderWebFileDetails(data.fileDetails);
+    
+    renderInspectionDetails(data.inspectiondetails);
+
+}
+
+function renderInspectionDetails(data) {
+
+    let container = $("#InspectionFileContainer");
+    container.empty();
+
+    if (data && data.length > 0) {
+
+        let inspection = data[0];
+
+        let html = `
+            <h5 class="mt-4 mb-3">STREET IMAGES</h5>
+            <div class="row">
+        `;
+
+        let url = inspection.start_img;
+        
+        // Get latitude and longitude
+        let latitude = inspection.start_latitude;
+        let longitude = inspection.start_longitude;
+
+        // Google Maps Embed URL
+        let mapUrl = '';
+
+        if (latitude && longitude) {
+
+           /*  mapUrl =
+                'https://www.google.com/maps/embed/v1/view' +
+                '?key=AIzaSyCi7N6uW5MZaSkd50Kzw7ax2GkMN1vjE-E' +
+                '&center=' + latitude + ',' + longitude +
+                '&zoom=16'; */
+            
+            mapUrl =
+		        "https://maps.google.com/maps?q=" +
+		        latitude + "," + longitude +
+		        "&z=18&output=embed";
+        }
+        
+
+        if (url) {
+
+            let extension = url.split('?')[0].split('.').pop().toLowerCase();
+
+            if (extension === "pdf") {
+
+                html += `
+                    <div class="col-md-2 col-4 mb-3 text-center">
+                        <div class="pdf-file-box"
+                             onclick="showPreview('${url}')">
+                            PDF File
+                        </div>
+                    </div>
+                `;
+
+            } else {
+
+                html += `
+                    <div class="col-md-4 col-4 mb-3 text-center">
+                        <img src="${url}"
+                             class="img-thumbnail"
+                             style="height:200px;width:100%;object-fit:cover;cursor:pointer;"
+                             onclick="showPreview('${url}')">
+                    </div>
+                `;
+            }
+        }
+        
+
+        if (mapUrl) {
+
+            html += `
+                <div class="col-md-4 col-12 mb-3">
+
+                    <iframe
+                        src="${mapUrl}"
+                        width="100%"
+                        height="200"
+                        style="border:0;"
+                        allowfullscreen=""
+                        loading="lazy"
+                        referrerpolicy="no-referrer-when-downgrade">
+                    </iframe>
+
+                </div>
+            `;
+        }
+
+        html += `</div>`;
+
+        container.html(html);
+    }
+}
+
+function renderWebFileDetails(data) {
+
+    let container =$("#viewFileContainer");
+
+    container.empty();
+	
+	if (data && data.length > 0) {
+
+	            let html = `
+	                <h5 class="mt-4 mb-3">ROADWAR REGISTER FILES</h5>
+	                <div class="row">
+	            `;
+
+	            $.each(data, function(index, file) {
+
+	                let url = file.file_url;
+	                let extension = url.split('.').pop().toLowerCase();
+
+	                if (extension === "pdf") {
+
+	                    html += `
+	                        <div class="col-md-2 col-4 mb-3 text-center">
+	                    
+		                    	<div class="pdf-file-box" onclick="showPreview('${url}')">
+	
+		                       		PDF File ${index + 1}
+	
+		                  		 </div>        
+	                    
+	                        </div>
+	                    `;
+
+	                } else {
+
+	                    html += `
+	                        <div class="col-md-2 col-4 mb-3 text-center">
+
+	                            <img src="${url}"
+	                                 class="img-thumbnail"
+	                                 style="height:120px;width:100%;object-fit:cover;cursor:pointer;"
+	                                 onclick="showPreview('${url}')">
+
+	                        </div>
+	                    `;
+	                }
+
+	            });
+
+	            html += "</div>";
+
+	            container.html(html);
+	        }
+
+}
+function showPreview(fileUrl) {
+
+    let extension = fileUrl.split('.').pop().toLowerCase();
+
+    if (extension === "pdf") {
+
+        $("#previewImage").hide();
+        $("#previewPdf").show();
+
+        $("#previewPdf").attr("src", fileUrl);
+
+    } else {
+
+        $("#previewPdf").hide();
+        $("#previewImage").show();
+
+        $("#previewImage").attr("src", fileUrl);
+    }
 
+    $("#imagePreviewModal").modal("show");
 }
 function valueOrDash(value, defaultValue = "-") {
 
diff --git a/src/main/resources/templates/modules/works/roadworksdetails.html b/src/main/resources/templates/modules/works/roadworksdetails.html
index 54c9600..9392840 100644
--- a/src/main/resources/templates/modules/works/roadworksdetails.html
+++ b/src/main/resources/templates/modules/works/roadworksdetails.html
@@ -609,27 +609,40 @@ font-weight: bold;
 
 .road-image-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 15px;
+     width: 100%;
 }
 
-.road-image-card {
+.road-image-card,.road-map-card {
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     overflow: hidden;
     background: #f8f9fa;
-    height: 180px;
-    position: relative;
+    min-height: 180px;
+    /* position: relative; */
+}
+
+.road-image-card {
+    display: flex;
+    flex-direction: column;
 }
 
 .road-war-image {
     width: 100%;
-    height: 100%;
+    height: 180px;
     object-fit: cover;
     display: block;
     cursor: pointer;
 }
 
+/* .road-image-label {
+    padding: 8px;
+    text-align: center;
+    font-size: 13px;
+    font-weight: 600;
+} */
+
 .road-pdf-container {
     width: 100%;
     height: 100%;
@@ -658,6 +671,16 @@ font-weight: bold;
     margin-top: 8px;
     font-size: 12px;
 }
+.road-map-card {
+    min-width: 0;
+}
+
+.road-war-map {
+    width: 100%;
+    height: 180px;
+    display: block;
+    border: 0;
+}
 </style>
 
 <body>
@@ -1578,6 +1601,9 @@ font-weight: bold;
 
         const fileDetails =
             response.fileDetails || [];
+        
+        const inspectiondetails =
+            response.inspectiondetails || [];
 
 
         let html = `
@@ -1871,6 +1897,10 @@ font-weight: bold;
         html += renderRoadWarImages(
             fileDetails
         );
+        
+        html += renderInspectionImages(
+        		inspectiondetails
+            );
 
 
         $('#roadWarContainer').html(html);
@@ -2027,7 +2057,7 @@ font-weight: bold;
             <div class="road-war-section">
 
                 <div class="road-war-section-title">
-                  UPLOADED IMAGES / DOCUMENTS
+                ROADWAR REGISTER FILES
                 </div>
         `;
 
@@ -2148,6 +2178,167 @@ font-weight: bold;
 
         return html;
     }
+    
+    function renderInspectionImages(inspectiondetails) {
+
+        let html = `
+            <div class="road-war-section">
+
+                <div class="road-war-section-title">
+                    STREET IMAGES
+                </div>
+        `;
+
+        // Check inspection details
+        if (!inspectiondetails || inspectiondetails.length === 0) {
+
+            html += `
+                <div class="no-data">
+                    No image
+                </div>
+            `;
+
+            html += `</div>`;
+
+            return html;
+        }
+
+        // Get single inspection object
+        const inspection = inspectiondetails[0];
+
+        // Only take start_img
+        const fileUrl = inspection.start_img;
+        
+     // Get latitude and longitude
+        let latitude = inspection.start_latitude;
+        let longitude = inspection.start_longitude;
+        
+        let mapUrl = '';
+
+        if (latitude && longitude) {
+            
+            mapUrl =
+		        "https://maps.google.com/maps?q=" +
+		        latitude + "," + longitude +
+		        "&z=18&output=embed";
+        }
+
+        // Check start image
+        if (!fileUrl || fileUrl.trim() === "") {
+
+            html += `
+                <div class="no-data">
+                    No image
+                </div>
+            `;
+
+            html += `</div>`;
+
+            return html;
+        }
+
+        // Remove query parameters before checking extension
+        const cleanUrl = fileUrl.split('?')[0].toLowerCase();
+
+        const isPdf = cleanUrl.endsWith('.pdf');
+
+        const isImage =
+            cleanUrl.endsWith('.jpg') ||
+            cleanUrl.endsWith('.jpeg') ||
+            cleanUrl.endsWith('.png');
+
+        html += `
+            <div class="road-image-grid">
+        `;
+
+
+        // =========================
+        // IMAGE
+        // =========================
+
+        if (isImage) {
+
+            html += `
+
+                <div class="road-image-card">
+
+                    <img
+                        src="${fileUrl}"
+                        alt="Start Image"
+                        class="road-war-image"
+                        onclick="window.open('${fileUrl}', '_blank')"
+                        onerror="this.style.display='none';"
+                    >                   
+
+                </div>
+
+            `;
+        }
+
+
+        // =========================
+        // PDF
+        // =========================
+
+        else if (isPdf) {
+
+            html += `
+
+                <div class="road-image-card">
+
+                    <div class="road-pdf-container">
+
+                        <i class="fa-solid fa-file-pdf road-pdf-icon"></i>
+
+                        <div class="road-pdf-text">
+                            Start Image
+                        </div>
+
+                        <a
+                            href="${fileUrl}"
+                            target="_blank"
+                            class="btn btn-sm btn-outline-danger road-pdf-button">
+
+                            <i class="fa-solid fa-eye"></i>
+                            View PDF
+
+                        </a>
+
+                    </div>
+
+                </div>
+
+            `;
+        }
+        
+        if (mapUrl) {
+
+            html += `
+                <div class="road-map-card">
+
+                    <iframe
+                        src="${mapUrl}"
+                        class="road-war-map"
+                        allowfullscreen
+                        loading="lazy"
+                        referrerpolicy="no-referrer-when-downgrade">
+                    </iframe>
+
+                </div>
+            `;
+        }
+
+
+        html += `
+            </div>
+        `;
+
+        html += `
+            </div>
+        `;
+
+        return html;
+    }
 
 </script>