|
|
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"></head><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet"><!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">--><link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>.required { color: red;}/* Mobile screens - targeting devices with a max width of 767px */@media ( max-width : 767px) { #complaintform label { margin-top: 10px; }}
.form-row { margin-bottom: 20px;}
.form-step { display: none;}
.form-step.active { display: block;}
.container { max-width: 100%;}
/*css for step 3*/.complaint-icons { display: flex; justify-content: space-around; margin-bottom: 20px;}
.complaint-icon { text-align: center; cursor: pointer;}
.complaint-icon img { width: 50px; height: 50px;}
.complaint-fields { display: none;}
.complaint-fields.active { display: block;}
/*for radio button style*/.radio-group { display: flex; align-items: center; /* Ensures all items are aligned to the center */}
.radio-item { display: flex; align-items: center; margin-right: 20px; /* Adds space between each radio item */}
.radio-item input[type="radio"] { margin-right: 10px; /* Adds space between the radio button and its label */ vertical-align: middle; /* Ensures vertical alignment */}
.radio-item label { margin: 0; /* Removes any default margins that might affect alignment */}
.back-button { background: none; border: none; color: #000; font-size: 16px; cursor: pointer; padding: 0; margin-right: auto; /* Align the button to the left */}
.title { text-align: center; flex-grow: 1; font-size: 24px; font-weight: bold; margin: 0;}
/*css for map in step2*/#map { height: 300px; width: 100%; position: relative; overflow: hidden; max-width: 100%;}
#search-container { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; width: 500px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); background-color: white; border-radius: 4px; padding: 0; /* Removed extra padding to match the input width */}
#search-box { width: 100%; /* Ensures the input takes up the entire width of the container */ padding: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; /* Rounded corners matching the container */ box-sizing: border-box; /* Makes sure padding is considered in width */}
#suggestions { border: 1px solid #ccc; border-radius: 4px; max-height: 200px; overflow-y: auto; margin-top: 5px; background-color: white; display: none; width: 100%; /* Matches the width of the container and input */ box-sizing: border-box; /* Ensures the width includes borders and padding */}
#suggestions ul { list-style: none; padding: 0; margin: 0;}
#suggestions ul li { padding: 5px; cursor: pointer;}
#suggestions ul li:hover { background-color: #f0f0f0;}
#reader-btn, #invertColorBtn { padding: 5px 10px; font-size: 14px; cursor: pointer;}
.loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -100px; /* Center the loader */ z-index: 9999; /* Ensure it's on top of everything */ display: none; /* Initially hidden */}
@keyframes spin { 0% { transform: rotate(0deg);}
100%{transform:rotate(360deg);}}
#snackbar { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; transform: translateX(-50%); }
#snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@-webkit-keyframes fadein {from { bottom:0; opacity: 0;}
to { bottom: 30px; opacity: 1;}
}@keyframes fadein {from { bottom:0; opacity: 0;}
to { bottom: 30px; opacity: 1;}
}@-webkit-keyframes fadeout {from { bottom:30px; opacity: 1;}
to { bottom: 0; opacity: 0;}
}@keyframes fadeout {from { bottom:30px; opacity: 1;}
to { bottom: 0; opacity: 0;}}
/*for snack bar*/</style><body><div id="snackbar"></div>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
<div class="wrapper"> <!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end -->
<div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================--> <div class="main-content"> <div class="container-fluid"> <div class="page-header mb-2"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <i class="fas fa-ticket-alt bg-blue"></i> <div class="d-inline"> <h5>PGR Complaint Registration</h5> <span>1913 PGR Complaint Registration</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="index"><i class="ik ik-home"></i></a></li> <li class="breadcrumb-item" aria-current="page">PGR Register Complaint</li> <li class="breadcrumb-item active" aria-current="page">Complaint Registration</li> </ol> </nav> </div> </div> </div>
<div class="row inside mt-4">
<div class="col-md-12"> <div class="card" style="margin-top: 0px;">
<div class="card-body">
<!-- Step 1 --> <!-- Step 1 --> <div class=" form-step active" id="step-1"> <!-- <div class="card-body"> --> <h5 class="card-title">1. Complaining Person's Details:</h5> <div class="form-row"> <div class="col-md-4"> <label for="mobile">Mobile Number:<span class="required">*</span></label> <div class="input-group"> <input type="text" id="mobileNo" name="mobileNo" class="form-control mb-1" placeholder="Enter Mobile Number" maxlength="10" minlength="10" required> </div> </div> </div> <div class="form-row"> <div class="col-md-4"> <label for="name">Name:<span class="required">*</span></label> <input type="text" class="form-control" id="name" placeholder="Enter your name" required> </div> <div class="col-md-4"> <label for="gender" class="ml-4">Gender/பாலினம்:<span class="required">*</span></label> <div class="radio-group mt-2 ml-4"> <div class="radio-item"> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">Male</label> </div> <div class="radio-item"> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <div class="radio-item"> <input type="radio" id="transgender" name="gender" value="transgender"> <label for="transgender">Transgender</label> </div> </div> </div>
<div class="col-md-4"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter your email"> </div> </div> <button id="nextStep1" class="btn btn-primary float-right" onclick="nextStep('nextStep1')" style="background-color: #414f69;">Next</button> <!-- </div> --> </div> <!--step-2--> <div class=" form-step readable" id="step-2"> <!-- <div class="card-body"> --> <h5 class="card-title">2. Complaint Location Details:</h5> <div class="form-row">
<!-- loader section --> <div id="loader" class="loader" style="display: none;"></div>
<!--map fields-->
<div class="col-md-12"> <div id="map"></div> <div id="search-container"> <input type="text" id="search-box" placeholder="Search for a location..."> <div id="suggestions"></div> </div> <div class="row"> <div class="col-md-6"> <label for="street">Street:</label> <input type="text" class="form-control" id="street"> </div>
<div class="col-md-6"> <label for="longitude_field">Longtitude</label> <input type="text" class="form-control" id="longitude_field" name="longtitude"> </div> <div class="col-md-6"> <label for="latitude_field">Latitide</label> <input type="text" class="form-control" id="latitude_field"> </div> <div class="col-md-6"> <label for="street_id">Street Id</label> <input type="text" class="form-control" id="street_id"> </div> <div class="col-md-6"> <label for="landmark">Landmark</label> <input type="text" class="form-control" id="landmark"> </div> </div> </div> </div> <button id="prevStep2" class="btn btn-secondary" onclick="prevStep('prevStep2')">Previous</button> <button id="nextStep2" class="btn btn-primary float-right" onclick="nextStep('nextStep2')" style="background-color: #414f69;">Next</button> <!-- </div> --> </div> <!-- Step 3 --> <div class=" form-step active readable" id="step-3"> <div class="card-body"> <h5 class="card-title">3. Complaint Type:</h5>
<!-- Icons --> <div class="complaint-icons"> <div class="complaint-icon" data-type="specific" data-id="112"> <img src="/gcc/assets/images/road.png" alt="Pothole"> <p>Pothole</p> </div> <div class="complaint-icon" data-type="specific" data-id="97"> <img src="/gcc/assets/images/recycle.png" alt="garbage"> <p>Garbage</p> </div> <div class="complaint-icon" data-type="specific" data-id="104"> <img src="/gcc/assets/images/waste-bin.png" alt="broken-bin"> <p>Broken-Bin</p> </div> <div class="complaint-icon" data-type="specific" data-id="146"> <img src="/gcc/assets/images/street-lamp.png" alt="StreetLight"> <p>StreetLight</p> </div> <div class="complaint-icon" data-type="specific" data-id="199"> <img src="/gcc/assets/images/portable-bathroom.png" alt="public-toilet"> <p>Public Toilet</p> </div> <div class="complaint-icon" data-type="specific" data-id="118"> <img src="/gcc/assets/images/mosquito.png" alt="mosquito"> <p>Mosquito Menace</p> </div> <div class="complaint-icon" data-type="specific" data-id="138"> <img src="/gcc/assets/images/tsunami.png" alt="waterstag"> <p>WaterStagnation</p> </div> <div class="complaint-icon" data-type="specific" data-id="142"> <img src="/gcc/assets/images/sewage.png" alt="sewage"> <p>Storm Water Drains</p> </div> <div class="complaint-icon" data-type="specific" data-id="119"> <img src="/gcc/assets/images/dog.png" alt="dog"> <p>Street Dog</p> </div> <!--<div class="complaint-icon" data-type="specific" data-id="">
<img src="images/bad-weather.png" alt="weather"> <p>Tree Fallen</p> </div>-->
<div class="complaint-icon" data-type="others"> <img src="/gcc/assets/images/menu.png" alt="Others"> <p>Others</p> </div> </div>
<!-- Specific Complaint Fields --> <div class="complaint-fields active" id="specific-fields"> <div class="form-row"> <div class="col-md-6"> <label for="complaint-title">Complaint Title:</label> <input type="text" class="form-control" id="complaint-title" placeholder="Enter complaint title"> </div> <div class="col-md-6"> <label for="complaint-id">Complaint Type:</label> <input type="text" class="form-control" id="complaint-id" disabled> </div>
</div> <div class="form-row"> <div class="col-md-6"> <label for="othercomplaint-details">Details of Complaint:</label> <textarea class="form-control" id="othercomplaint-details" rows="3" placeholder="Enter complaint details" maxlength="400"></textarea> </div> <div class="col-md-6"> <label for="complaint-image">Upload Photo:</label> <input type="file" class="form-control" id="complaint-image" name="Comp_Image"> <span style="color: red;"> <p>Upload Photo Less Than 1mb*.</p> </span> </div>
</div> </div>
<!-- Others Complaint Fields --> <div class="complaint-fields" id="others-fields"> <div class="form-row"> <div class="col-md-4"> <label for="type">Type:</label> <select class="form-control" id="type"> <option value="">Please Select</option> </select> </div> <div class="col-md-4"> <label for="sub-type">Sub-Type:</label> <select class="form-control" id="sub-type"> <option value="">Select complaint</option> </select> </div> <div class="col-md-4"> <label for="uploadothers">Upload Photo:</label> <input type="file" class="form-control" id="uploadothers" accept="image/*"> <span style="color: red;"> <p>Upload Photo Less Than 1mb*.</p> </span> </div> </div> <div class="form-row"> <div class="col-md-6"> <label for="othercomplaintdetailsss">Details of Complaint:</label> <textarea class="form-control" id="othercomplaintdetailsss" rows="3" placeholder="Enter complaint details" maxlength="400"></textarea> </div> </div> </div>
<button id="prevStep3" class="btn btn-secondary" onclick="prevStep('prevStep3')">Previous</button> <button id="nextStep3" class="btn btn-primary float-right" onclick="nextStep('nextStep3')" style="background-color: #414f69;">Next</button> </div> </div>
<!-- Step 4 --> <div class=" form-step readable" id="step-4"> <div class="card-body"> <h5 class="card-title">4. Complaint Details:</h5> <table class="table"> <tbody> <tr> <td><strong>Name</strong></td> <td>: <span id="summaryName"></span></td> <td><strong>Complaint Location</strong></td> <td>: <span id="summaryStreet"></span></td> </tr> <tr> <td><strong>Mobile Number</strong></td> <td>: <span id="summaryMobile"></span></td> <td><strong>Email Address</strong></td> <td>: <span id="summaryEmail"></span></td> </tr> <tr> <td><strong>Complaint Type</strong></td> <td>: <span id="summaryComplaintType"></span></td> <td><strong>Complaint Title</strong></td> <td>: <span id="summaryComplaintTitle"></span></td> </tr> <tr> <td><strong>Description</strong></td> <td>: <span id="summaryDescription"></span></td> <td><strong>Street Id</strong></td> <td>: <span id="summaryStreetId"></span></td> </tr> <tr> <td><strong>Landmark</strong></td> <td>: <span id="summaryLandmark"></span></td> <td><strong>Latitude</strong></td> <td>: <span id="summaryLatitude"></span></td> </tr> <tr> <td><strong>Longitude</strong></td> <td>: <span id="summaryLongitude"></span></td> <td><strong>Gender</strong></td> <td>: <span id="summaryGender"></span></td> </tr> <tr> <td><strong>Image / Video</strong></td> <td>: <img id="summaryImage" src="#" alt="Uploaded Image/Video" width="100" style="display: none;"> </td> </tr> </tbody> </table>
<button id="prevStep4" class="btn btn-secondary" onclick="prevStep('prevStep4')">Previous</button>
<button id="submitButton" class="btn btn-success float-right">Submit</button>
</div> </div>
</div> </div> </div>
</div> </div>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div>
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<script th:replace="~{fragments/modules/base/script :: script}"></script> <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script th:src="@{/js/screenreader.js}"></script>
<script type="text/javascript">
//for snackbar script function showSnackbar(message) { var snackbar = document.getElementById("snackbar"); snackbar.innerHTML = message; snackbar.className = "show"; setTimeout(function () {snackbar.className = snackbar.className.replace("show", "");}, 3000); }
//for snackbar script
let currentStep = 1; let mapInitialized = false;
function showStep(step) { $('.form-step').removeClass('active'); $('#step-' + step).addClass('active'); /* updateProgressBar(step); */
if (step === 2 && !mapInitialized) { document.getElementById('loader').style.display = 'block'; // Show loader before map initialization setTimeout(initializeMap, 3000); // Load the map after 3 seconds mapInitialized = true; // Ensure the map is only initialized once }
// If we're on step 4, populate the summary fields if (step === 4) { populateSummary(); } }
function nextStep() { if (currentStep < 4) { // Perform validation for the current step if (validateStep(currentStep)) { currentStep++; showStep(currentStep); } } }
function prevStep() { if (currentStep > 1) { currentStep--; showStep(currentStep); } }
/* function updateProgressBar(step) { const progress = (step / 4) * 100; $('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress); } */
function validateStep(step) { let isValid = true;
if (step === 1) { const mobileNo = $('#mobileNo').val().trim(); const name = $('#name').val().trim(); let email = $('#email').val().trim();
// Validate mobile number if (mobileNo === '' || !/^\d{10}$/.test(mobileNo)) { isValid = false; showSnackbar("Please enter a valid 10-digit mobile number."); }
// Validate name if (name === '') { isValid = false; showSnackbar("Please enter your name."); }
// Check email if (email === '') { email = 'N/A'; // Set N/A if empty $('#email').val(email); // Update the input field with N/A } else if (!/^\S+@\S+\.\S+$/.test(email)) { isValid = false; showSnackbar("Please enter a valid email address."); } } else if (step === 2) { const street = $('#street').val().trim(); const longitude = $('#longitude_field').val().trim(); const latitude = $('#latitude_field').val().trim(); const streetId = $('#street_id').val().trim(); const landmark = $('#landmark').val().trim();
// Validate street if (street === '') { isValid = false; showSnackbar("Please enter the street."); }
// Validate longitude and latitude if (longitude === '' || isNaN(longitude)) { isValid = false; showSnackbar("Please enter a valid longitude."); } if (latitude === '' || isNaN(latitude)) { isValid = false; showSnackbar("Please enter a valid latitude."); }
// Validate street ID if (streetId === '') { isValid = false; showSnackbar("Please enter the street ID."); }
// Validate landmark if (landmark === '') { isValid = false; showSnackbar("Please enter the landmark."); } }
return isValid; }
function populateSummary() { const name = $('#name').val(); const street = $('#street').val(); const mobileNo = $('#mobileNo').val(); const gender = $('input[name="gender"]:checked').val(); const email = $('#email').val();
// Check if 'specific-fields' is active and use its values if ($('#specific-fields').hasClass('active')) { const complaintTitle = $('#complaint-title').val(); const complaintid = $('#complaint-id').val(); const complaintDetails = $('#othercomplaint-details').val(); // Specific complaint details
$('#summaryComplaintTitle').text(complaintTitle); $('#summaryComplaintType').text(complaintid); $('#summaryDescription').text(complaintDetails);
} else if ($('#others-fields').hasClass('active')) { const complaintTitle = $('#type').find('option:selected').text(); const complaintSubType = $('#sub-type').find('option:selected').text(); const complaintDetails = $('#othercomplaintdetailsss').val(); // Others complaint details
$('#summaryComplaintTitle').text(complaintTitle + ' - ' + complaintSubType); $('#summaryComplaintType').text('Other Complaint'); $('#summaryDescription').text(complaintDetails); }
const streetid = $('#street_id').val(); const landmark = $('#landmark').val(); const latitude = $('#latitude_field').val(); const longtitude = $('#longitude_field').val();
$('#summaryName').text(name); $('#summaryStreet').text(street); $('#summaryMobile').text(mobileNo); $('#summaryGender').text(gender); $('#summaryEmail').text(email); $('#summaryStreetId').text(streetid); $('#summaryLandmark').text(landmark); $('#summaryLatitude').text(latitude); $('#summaryLongitude').text(longtitude);
// Handle image preview /* const fileInput = $('#complaint-image')[0]; // Assuming this is for the "Others" section if (fileInput.files && fileInput.files[0]) { const reader = new FileReader(); reader.onload = function (e) { $('#summaryImage').attr('src', e.target.result).show(); } reader.readAsDataURL(fileInput.files[0]); } else { $('#summaryImage').hide(); }*/
// If there's a separate image input for the specific form, handle it similarly: // Check if specific fields section is active if ($('#specific-fields').hasClass('active')) { const specificFileInput = $('#complaint-image')[0]; // Example ID for specific form if (specificFileInput.files && specificFileInput.files[0]) { const reader = new FileReader(); reader.onload = function (e) { $('#summaryImage').attr('src', e.target.result).show(); }; reader.readAsDataURL(specificFileInput.files[0]); } else { $('#summaryImage').hide(); // Hide the image if no file is selected } } // Check if "Others" section is active else if ($('#others-fields').hasClass('active')) { const fileInput = $('#uploadothers')[0]; // Assuming this is for the "Others" section if (fileInput.files && fileInput.files[0]) { const reader = new FileReader(); reader.onload = function (e) { $('#summaryImage').attr('src', e.target.result).show(); }; reader.readAsDataURL(fileInput.files[0]); } else { $('#summaryImage').hide(); // Hide the image if no file is selected } } else { $('#summaryImage').hide(); // Default hide if no section is active }
}
$(document).ready(function () { showStep(currentStep); });
$(document).ready(function () { showStep(currentStep); });
//for step3 onclick function $(document).ready(function () { // On icon click $('.complaint-icon').click(function () { const type = $(this).data('type'); // Get the type (specific or others) const title = $(this).find('p').text().trim(); // Get the icon name (complaint title) const complaintId = $(this).data('id'); // Get the complaint ID
// Toggle complaint fields based on type $('.complaint-fields').removeClass('active');
if (type === 'specific') { $('#specific-fields').addClass('active'); // Show specific fields form $('#others-fields').removeClass('active'); // Hide others form $('#complaint-title').val(title); // Set the complaint title to the icon name $('#complaint-id').val(complaintId); // Set the complaint ID to the corresponding ID } else if (type === 'others') { $('#others-fields').addClass('active'); // Show others form $('#specific-fields').removeClass('active'); // Hide specific fields form $('#complaint-title').val(''); // Clear the complaint title for 'Others' $('#complaint-id').val(''); // Clear the complaint ID for 'Others' } }); });
//for complaint group and complainttype wise options dropdown api $(document).ready(function () { const $type = $('#type'); const $subType = $('#sub-type');
$subType.prop('disabled', true);
// Fetch and populate the Type dropdown $.ajax({ url: '/gcc/api/callcenterqaqc/pgrcomplaint/getComplaintCategories', method: 'GET', success: function (response) {
const data = typeof response === 'string' ? JSON.parse(response) : response; //console.log('Response:', response); // Log the response to verify let optionsHtml = '<option value="">Please Select</option>'; data.ComplaintCategoryListResult.forEach(function (group) { optionsHtml += `<option value="${group.groupid}">${group.groupname}</option>`; }); $type.html(optionsHtml); }, error: function (error) { console.error('Error fetching complaint categories:', error); } });
// Handle Type dropdown change $type.change(function () { const selectedType = $(this).val(); $subType.empty().append('<option value="">Select complaint</option>');
if (selectedType) {
$.ajax({ url: `/gcc/api/callcenterqaqc/pgrcomplaint/getComplaintSubTypes?groupId=${selectedType}`, method: 'GET', success: function (response) { const data = typeof response === 'string' ? JSON.parse(response) : response; const selectedGroup = data.ComplaintCategoryListResult[0];
//console.log(data);
if (selectedGroup && selectedGroup.group) { $subType.prop('disabled', false); selectedGroup.group.forEach(function (complaint) { $subType.append(`<option value="${complaint.id}">${complaint.complaintname}</option>`); }); } else { $subType.prop('disabled', true); } }, error: function (error) { console.error('Error fetching sub-types:', error); $subType.prop('disabled', true); } }); } else { $subType.prop('disabled', true); } }); });
//api for saving //for sweet alert /* function showSuccessAlert() { Swal.fire({ icon: 'success', title: 'Complaint Registration Success', text: 'Complaint Number 123456. Use this Number for Complaint Status Check.', confirmButtonText: 'Back to Home', confirmButtonColor: '#3085d6', }).then((result) => { if (result.isConfirmed) { window.location.href = 'home'; } }); } */
//Script For Map
var suggestedRoadName; var suggestedWard; var suggestedZone; var suggestedRoadId;
function initializeMap() { // Create the map var map = L.map('map', {attributionControl: false}).setView([13.0827, 80.2707], 9);
// Add tile layer and track loading status var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attributionControl: false, }).addTo(map);
// Hide loader once the map tiles are fully loaded tileLayer.on('load', function () { document.getElementById('loader').style.display = 'none'; document.getElementById('map').style.visibility = 'visible'; // Ensure map is visible });
var currentMarker = null;
// Handle map click events map.on('click', function (e) { var lat = e.latlng.lat; var lng = e.latlng.lng;
if (currentMarker) { map.removeLayer(currentMarker); }
currentMarker = L.marker([lat, lng]).addTo(map);
fetchLocationInfoByMap(lat, lng, currentMarker); });
// Handle input events in the search box document.getElementById('search-box').addEventListener('input', function () { var query = this.value.trim(); if (query.length > 2) { fetchSuggestions(query); } else { document.getElementById('suggestions').style.display = 'none'; } });
// Handle click events on suggestions document.getElementById('suggestions').addEventListener('click', function (e) { if (e.target.tagName === 'LI') { var latlngArray = JSON.parse(e.target.dataset.latlng);
suggestedRoadId = e.target.dataset.roadId; suggestedRoadName = e.target.dataset.roadName; suggestedWard = e.target.dataset.ward; suggestedZone = e.target.dataset.zone;
// Check if the data is in the correct format if (Array.isArray(latlngArray) && latlngArray.every(item => Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number')) {
// Calculate the average latitude and longitude var totalLat = 0; var totalLng = 0; latlngArray.forEach(function (coords) { totalLat += coords[1]; // Latitude totalLng += coords[0]; // Longitude });
var avgLat = totalLat / latlngArray.length; var avgLng = totalLng / latlngArray.length;
var latlng = [avgLat, avgLng]; map.setView(latlng, 14);
if (currentMarker) { map.removeLayer(currentMarker); }
currentMarker = L.marker(latlng).addTo(map);
fetchLocationInfoBySuggestions(latlng[0], latlng[1], currentMarker);
// Clear the search box value document.getElementById('search-box').value = '';
// Hide the suggestions document.getElementById('suggestions').style.display = 'none'; } else { // Convert the incorrect format into the correct format const flattenCoordinates = (data) => { return data.reduce((acc, item) => { if (Array.isArray(item) && Array.isArray(item[0])) { // If item is a nested array, flatten it acc.push(...flattenCoordinates(item)); } else if (Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number') { // If item is a coordinate pair, add it to the list acc.push(item); } return acc; }, []); };
// Flatten the nested latlngArray var flattenedLatlngArray = flattenCoordinates(latlngArray);
// Now, continue with the same logic as before var totalLat = 0; var totalLng = 0; flattenedLatlngArray.forEach(function (coords) { totalLat += coords[1]; // Latitude totalLng += coords[0]; // Longitude });
var avgLat = totalLat / flattenedLatlngArray.length; var avgLng = totalLng / flattenedLatlngArray.length;
var latlng = [avgLat, avgLng]; map.setView(latlng, 14);
if (currentMarker) { map.removeLayer(currentMarker); }
currentMarker = L.marker(latlng).addTo(map);
fetchLocationInfoBySuggestions(latlng[0], latlng[1], currentMarker);
// Clear the search box value document.getElementById('search-box').value = '';
// Hide the suggestions document.getElementById('suggestions').style.display = 'none'; } } }); }
function fetchSuggestions(query) { // ArcGIS API URL to fetch suggestions based on the input query const arcgisSuggestionUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=UPPER(road_name)%20LIKE%20'%25${query.toUpperCase()}%25'&outFields=road_name,zone,ward,road_id&returnGeometry=true&f=geojson`;
fetch(arcgisSuggestionUrl) .then(response => response.json()) .then(data => { var suggestions = document.getElementById('suggestions'); suggestions.innerHTML = '';
if (data.features && data.features.length > 0) { suggestions.style.display = 'block'; var ul = document.createElement('ul'); data.features.forEach(function (result) { var lat = result.geometry.coordinates[1]; var lng = result.geometry.coordinates[0]; var roadName = result.properties.road_name || 'Unknown Road'; var zone = result.properties.zone || 'Unknown Zone'; var ward = result.properties.ward || 'Unknown Ward'; var roadId = result.properties.road_id || 'Unknown Road ID'
// Creating the suggestion item with road name, zone, and ward var li = document.createElement('li'); li.textContent = `${roadName} - Zone: ${zone}, Ward: ${ward}`; li.dataset.latlng = JSON.stringify([lat, lng]); li.dataset.roadName = roadName; li.dataset.roadId = roadId; li.dataset.zone = zone; li.dataset.ward = ward; ul.appendChild(li); }); suggestions.appendChild(ul); } else { suggestions.style.display = 'none'; } }) .catch(error => console.error('Error fetching suggestions:', error)); }
function fetchLocationInfoByMap(lat, lng, marker) { const arcgisUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=&objectIds=&time=&geometry=%7B%22y%22%3A${lat}%2C%22x%22%3A${lng}%7D&geometryType=esriGeometryEnvelope&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25&units=esriSRUnit_Meter&relationParam=&outFields=zone%2Cward%2Croad_id%2Croad_name&returnGeometry=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=&resultRecordCount=&returnTrueCurves=false&returnCentroid=false&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&datumTransformation=&lodType=geohash&lod=&lodSR=&f=geojson`;
fetch(arcgisUrl) .then(response => response.json()) .then(data => { console.log(data); let info; if (data.features && data.features.length > 0) { const properties = data.features[0].properties; const roadName = properties.road_name || 'N/A'; const zone = properties.zone || 'N/A'; const ward = properties.ward || 'N/A'; const roadId = properties.road_id || 'N/A';
info = `Road Name: ${roadName}<br>Zone: ${zone}<br>Ward: ${ward}<br>Latitude: ${lat}<br>Longitude: ${lng}`; document.getElementById("street").value = roadName; document.getElementById("latitude_field").value = lat; document.getElementById("longitude_field").value = lng; document.getElementById("street_id").value = roadId; document.getElementById("landmark").value = roadName; marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip(); } else { document.getElementById("street").value = "No road data found for this location"; document.getElementById("latitude_field").value = "No latitude data found for this location"; document.getElementById("longitude_field").value = "No latitude data found for this location"; document.getElementById("street_id").value = "No street id data found for this location"; document.getElementById("landmark").value = "No landmark data found for this location"; info = `No road data found for this location` marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip(); } }) .catch(error => { console.error('Error fetching road data:', error); marker.bindTooltip(`Error fetching road data.<br>Latitude: ${lat}<br>Longitude: ${lng}`, {permanent: false, direction: 'top'}).openTooltip(); }); }
function fetchLocationInfoBySuggestions(lat, lng, marker) { const arcgisUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=&objectIds=&time=&geometry=%7B%22y%22%3A${lat}%2C%22x%22%3A${lng}%7D&geometryType=esriGeometryEnvelope&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25&units=esriSRUnit_Meter&relationParam=&outFields=zone%2Cward%2Croad_id%2Croad_name&returnGeometry=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=&resultRecordCount=&returnTrueCurves=false&returnCentroid=false&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&datumTransformation=&lodType=geohash&lod=&lodSR=&f=geojson`;
fetch(arcgisUrl) .then(response => response.json()) .then(data => { console.log(data); let info; if (data.features && data.features.length > 0) { const properties = data.features[0].properties; const roadName = properties.road_name || 'N/A'; const zone = properties.zone || 'N/A'; const ward = properties.ward || 'N/A'; const roadId = properties.road_id || 'N/A';
info = `Road Name: ${roadName}<br>Zone: ${zone}<br>Ward: ${ward}<br>Latitude: ${lat}<br>Longitude: ${lng}`; document.getElementById("street").value = roadName; document.getElementById("latitude_field").value = lat; document.getElementById("longitude_field").value = lng; document.getElementById("street_id").value = roadId; document.getElementById("landmark").value = roadName; marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip(); } else { document.getElementById("street").value = suggestedRoadName; document.getElementById("latitude_field").value = lat; document.getElementById("longitude_field").value = lng; document.getElementById("street_id").value = suggestedRoadId; document.getElementById("landmark").value = suggestedRoadName; info = `Road Name: ${suggestedRoadName}<br>Zone: ${suggestedZone}<br>Ward: ${suggestedWard}<br>Latitude: ${lat}<br>Longitude: ${lng}` marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip(); } }) .catch(error => { console.error('Error fetching road data:', error); marker.bindTooltip(`Error fetching road data.<br>Latitude: ${lat}<br>Longitude: ${lng}`, {permanent: false, direction: 'top'}).openTooltip(); }); } $(document).ready(function () { $('#submitButton').click(function (e) { e.preventDefault(); // Prevent the default form submission
// Collect data from the form fields var complainantName = $('#summaryName').text().trim(); var complainantAddr = $('#summaryStreet').text().trim(); var mobileNo = $('#summaryMobile').text().trim(); var email = $('#summaryEmail').text().trim(); var complaintType = $('#summaryComplaintType').text().trim(); var complaintTitle = $('#summaryComplaintTitle').text().trim(); var complaintDetails = $('#summaryDescription').text().trim(); var streetId = $('#summaryStreetId').text().trim(); var landmark = $('#summaryLandmark').text().trim(); var latitude = $('#summaryLatitude').text().trim(); var longtitude = $('#summaryLongitude').text().trim(); // Note the misspelling var gender = $('#summaryGender').text().trim(); var imageSrc = $('#summaryImage').attr('src');
/* console.log({ ComplainantName: complainantName, ComplainantAddr: complainantAddr, MobileNo: mobileNo, Email: email, ComplaintType: complaintType, ComplaintTitle: complaintTitle, ComplaintDetails: complaintDetails, StreetId: streetId, Comp_Image: imageSrc, latitude: latitude, longtitude: longtitude, Landmark: landmark, gender: gender }); */
// AJAX call to your backend controller $.ajax({ url: '/gcc/api/callcenterqaqc/pgrcomplaint/register', // Update to your Spring Boot endpoint type: 'POST', data: { ComplainantName: complainantName, ComplainantAddr: complainantAddr, MobileNo: mobileNo, Email: email, ComplaintType: complaintType, ComplaintTitle: complaintTitle, ComplaintDetails: complaintDetails, StreetId: streetId, Comp_Image: imageSrc, latitude: latitude, longtitude: longtitude, Landmark: landmark, gender: gender }, success: function (response) { // SweetAlert upon success //console.log("API Response:", response); // Ensure response is a JavaScript object if (typeof response === "string") { try { response = JSON.parse(response); } catch (error) { console.error("Failed to parse response:", error); } } // Access the Complaint Number safely let complaintNumber = response["Complaint Number"]; if (!complaintNumber || complaintNumber === "null" || complaintNumber === null) { complaintNumber = "N/A"; } Swal.fire({ title: 'Success!', text: `Your complaint has been submitted successfully. Your Complaint Number is ${complaintNumber}. It will be sent to your mobile number.`, icon: 'success', allowOutsideClick: false, // Disable clicking outside the modal to close it allowEscapeKey: false, // Disable escape key to close the modal allowEnterKey: false, // Disable enter key to close the modal showConfirmButton: true, // Ensure the confirm button is visible confirmButtonText: 'OK' }).then((result) => { if (result.isConfirmed) { window.location.href = '/gcc/callcenterqaqc/pgrcomplaint'; } }); }, error: function (xhr, status, error) { // Improved error handling console.log('Error:', xhr.responseText, status, error); alert('Error: ' + xhr.status + ' ' + xhr.statusText); } }); }); });
/* html: `Your complaint has been submitted successfully. Your Complaint Number is <strong>${complaintNumber}</strong>. It will be sent to your mobile number.`, */ </script></body></html>
|