This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1362 lines
45 KiB

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