added street images in roadwar and roadworks dashboards

1 week ago · 74ef270367
4 changed files with 464 additions and 7 deletions
--- 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(
--- 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");
--- 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 = "-") {

--- 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>