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.
 
 
 
 

1900 lines
74 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" 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>
</head>
<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*/
#googleMap {
height: 300px;
width: 100%;
position: relative;
overflow: hidden;
max-width: 100%;
}
#pac-input {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 300px;
z-index: 5;
padding: 10px;
border: 1px solid #ccc;
background-color: white;
border-radius: 4px;
}
#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 */
}
.row {
display: flex;
flex-wrap: wrap;
margin-bottom: 15px;
gap: 15px;
}
.col-md-6 {
flex: 0 0 48%;
max-width: 48%;
display: flex;
flex-direction: column;
}
.col-md-6 label {
font-weight: 600;
margin-bottom: 5px;
}
.col-md-6 select,
.col-md-6 input {
height: 38px;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
@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="/gcc/index"><i class="ik ik-home"></i></a></li>
<li class="breadcrumb-item" aria-current="page">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"
> <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="mapContainer" style="position: relative; height: 500px;">
<input id="pac-input" class="controls" type="text" placeholder="Search location">
<div id="googleMap" style="height: 100%; width: 100%;"></div>
</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"> -->
<label for="streetName">Street:</label>
<select id="streetName" name="streetName"></select>
<!-- <label for="streetName">Street:</label>
<input type="text" class="form-control" id="streetName"> -->
</div>
<div class="col-md-6">
<!-- <label for="longitude_field">Longtitude</label>
<input type="text" class="form-control" id="longitude_field" name="longtitude"> -->
<label for="longitude_field">Longtitude</label>
<input type="text" class="form-control" id="longitude_field" readonly>
</div>
<div class="col-md-6">
<!-- <label for="latitude_field">Latitide</label>
<input type="text" class="form-control" id="latitude_field"> -->
<label for="latitude_field">Latitude</label>
<input type="text" class="form-control" id="latitude_field" readonly>
</div>
<div class="col-md-6">
<!-- <label for="street_id">Street Id</label>
<input type="text" class="form-control" id="street_id"> -->
<label for="streetId">Street Id</label>
<input type="text" class="form-control" id="streetId" readonly>
</div>
<div class="col-md-6">
<!-- <label for="landmark">Landmark</label>
<input type="text" class="form-control" id="landmark"> -->
<label for="landmark">Landmark</label>
<input type="text" class="form-control" id="landmark" readonly>
</div>
<!-- <div class="col-md-6">
<label for="zone">Zone</label>
<input type="text" class="form-control" id="zone" readonly>
</div>
<div class="col-md-6">
<label for="ward">Ward</label>
<input type="text" class="form-control" id="ward" readonly>
</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:&nbsp;<span>(Please Select Complaint Type from Below...)</span></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 Type">
</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:&nbsp;<span style="color: orange;">
Less than 1 MB.</span></label>
<input type="file" class="form-control" id="complaint-image" name="Comp_Image">
</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"
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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCi7N6uW5MZaSkd50Kzw7ax2GkMN1vjE-E&callback=myMap&libraries=places">
</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) {
console.log("step 1");
const mobileNo = $('#mobileNo').val().trim();
const gender = $('input[name="gender"]:checked').val();
const name = $('#name').val().trim();
let email = $('#email').val().trim();
console.log("mobileNo"+mobileNo);
console.log("gender="+gender);
console.log("name="+name);
console.log("email="+email);
// Validate mobile number
if (mobileNo === '' || !/^\d{10}$/.test(mobileNo)) {
isValid = false;
showSnackbar("Please enter a valid 10-digit mobile number.");
return false;
}
// Validate name
if (!name) {
isValid = false;
showSnackbar("Please enter your name.");
return false;
}
// Validate gender
if (!gender) {
showSnackbar("Please select your gender.");
return false;
}
// 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.");
return false;
}
} else if (step === 2) {
const streets = $('#streetName option:selected').val();
console.log("streets="+streets);
const longitude = $('#longitude_field').val();
const latitude = $('#latitude_field').val();
const streetId = $('#streetId').val();
const landmark = $('#landmark').val();
// Validate street
if (!streets) {
isValid = false;
showSnackbar("Please enter the street.");
return false;
}
// Validate longitude and latitude
if (longitude === '' || isNaN(longitude)) {
isValid = false;
showSnackbar("Please enter a valid longitude.");
return false;
}
if (latitude === '' || isNaN(latitude)) {
isValid = false;
showSnackbar("Please enter a valid latitude.");
return false;
}
// Validate street ID
if (streetId === '') {
isValid = false;
showSnackbar("Please enter the street ID.");
return false;
}
// Validate landmark
if (landmark === '') {
isValid = false;
showSnackbar("Please enter the landmark.");
return false;
}
}
return isValid;
}
function populateSummary() {
const name = $('#name').val();
const street = $('#streetName option:selected').text();
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 streetid = $('#streetId').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';
}
});
} */
$('#complaint-image, #uploadothers').on('change', function () {
const file = this.files[0];
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
if (file) {
// Check file type
if (!allowedTypes.includes(file.type)) {
Swal.fire({
icon: 'error',
title: 'Invalid File Format',
text: 'Only JPG, JPEG, and PNG image formats are allowed.',
confirmButtonText: 'OK'
});
$(this).val(''); // Clear the input
return;
}
// Check file size
if (file.size > 1024 * 1024) {
Swal.fire({
icon: 'error',
title: 'File Too Large',
text: 'File size exceeds 1MB. Please upload an image less than 1MB.',
confirmButtonText: 'OK'
});
$(this).val(''); // Clear the input
return;
}
}
});
//Script For Map
function myMap() {
const defaultCenter = { lat: 13.0827, lng: 80.2707 };
const map = new google.maps.Map(document.getElementById("googleMap"), {
center: defaultCenter,
zoom: 14
});
let marker = null;
let streetsList = []; // ✅ Define globally inside myMap
const infowindow = new google.maps.InfoWindow();
// 🔍 Initialize the SearchBox
const input = document.getElementById('pac-input');
const searchBox = new google.maps.places.SearchBox(input);
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
searchBox.addListener('places_changed', function () {
const places = searchBox.getPlaces();
if (places.length === 0) return;
if (marker) marker.setMap(null);
const place = places[0];
if (!place.geometry) return;
marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
const lat = place.geometry.location.lat().toFixed(6);
const lng = place.geometry.location.lng().toFixed(6);
document.getElementById("latitude_field").value = lat;
document.getElementById("longitude_field").value = lng;
map.setCenter(place.geometry.location);
map.setZoom(15);
infowindow.setContent(`Latitude: ${lat}<br>Longitude: ${lng}`);
infowindow.open(map, marker);
fetchStreets(lat, lng);
});
map.addListener("click", function (event) {
const clickedLatLng = event.latLng;
if (marker) marker.setMap(null);
marker = new google.maps.Marker({
position: clickedLatLng,
map: map
});
const lat = clickedLatLng.lat().toFixed(6);
const lng = clickedLatLng.lng().toFixed(6);
document.getElementById("latitude_field").value = lat;
document.getElementById("longitude_field").value = lng;
infowindow.setContent(`Latitude: ${lat}<br>Longitude: ${lng}`);
infowindow.open(map, marker);
fetchStreets(lat, lng);
});
// ✅ Move fetchStreets here inside myMap, and use local streetsList
function fetchStreets(lat, lng) {
const encodedGeometry = encodeURIComponent(JSON.stringify({ y: lat, x: lng }));
const streetURL = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/EDPMobile2025/FeatureServer/0/query?` +
`where=&objectIds=&time=&geometry=${encodedGeometry}` +
`&geometryType=esriGeometryPoint&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25` +
`&units=esriSRUnit_Meter&relationParam=&outFields=region%2Cnew_zone%2C+new_ward%2Croad_id%2C+road_name%2Cgis_id%2Ctype` +
`&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&returnExceededLimitFeatures=false&quantizationParameters=&returnCentroid=false` +
`&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&featureEncoding=esriDefault` +
`&datumTransformation=&f=geojson`;
const streetSelect = document.getElementById("streetName");
streetSelect.innerHTML = "";
const defaultOption = document.createElement("option");
defaultOption.value = "";
defaultOption.text = "-- Select Street --";
streetSelect.appendChild(defaultOption);
document.getElementById("streetId").value = "";
document.getElementById("landmark").value = "";
fetch(streetURL)
.then(res => res.json())
.then(data => {
const features = data.features;
if (!features || features.length === 0) {
Swal.fire({
icon: 'warning',
title: 'No Street Found',
text: 'Please select the nearby street.',
});
return;
}
streetsList = features.map(f => f.properties); // ✅ Save for use in dropdown
streetsList.forEach((props, index) => {
const option = document.createElement("option");
option.value = index;
option.text = props.road_name;
streetSelect.appendChild(option);
});
})
.catch(err => {
console.error("Error fetching street:", err);
Swal.fire("Failed to load street data", '', 'error');
});
}
document.getElementById("streetName").addEventListener("change", function () {
const selectedIndex = this.value;
if (selectedIndex !== "") {
const selectedStreet = streetsList[selectedIndex];
document.getElementById("streetId").value = selectedStreet.road_id;
document.getElementById("landmark").value = selectedStreet.type;
// document.getElementById("zone").value = selectedStreet.new_zone;
// document.getElementById("ward").value = selectedStreet.new_ward;
console.log("Selected street:", selectedStreet);
} else {
document.getElementById("streetId").value = "";
document.getElementById("landmark").value = "";
// document.getElementById("zone").value = "";
// document.getElementById("ward").value = "";
}
});
}
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("streetId").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("streetId").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("streetId").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("streetId").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
$('#submitButton').prop('disabled', true).text('Processing...');
// 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) {
$('#submitButton').prop('disabled', false).text('Submit');
// 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);
}
}
let complaintNumber = response["complaintNumber"];
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) {
location.reload();
}
});
},
error: function (xhr, status, error) {
// Improved error handling
$('#submitButton').prop('disabled', false).text('Submit');
console.log('Error:', xhr.responseText, status, error);
//alert('Error: ' + xhr.status + ' ' + xhr.statusText);
Swal.fire({
title: 'Error!',
text: 'Submission failed. Please try again.',
icon: 'error'
});
}
});
});
// ✅ Step 1: Map complaint ID to complaint title
const complaintTypeMap = {
"97": "Removal of Garbage",
"98": "Overflowing of Garbage Bin",
"99": "Removal of Debris",
"100": "Absenteeism of Sweepers",
"101": "Absenteeism of Door to door garbage Collector",
"102": "Improper Sweeping",
"103": "Provison of Garbage Bin",
"104": "Broken Bin",
"105": "Shifting of Garbage Bin",
"106": "Cleaning of Water Table",
"107": "Nuisance by Garbage Tractor/Truck",
"108": "Burning of Garbage",
"109": "Garbage Lorry without Net",
"110": "Spilling of Garbage from Lorry",
"111": "Burning of Garbage at Dumping Ground",
"112": "Pot hole fill up / Repairs to the damaged surface",
"113": "Relaying of Road",
"114": "Formation of New Road",
"115": "Repairs to existing Footpath",
"116": "Request to provide Footpath",
"117": "Removal of Shops in the Footpath",
"118": "Mosquito Menace",
"119": "Street Dogs",
"120": "Stray Cattle",
"121": "Stray Pigs",
"122": "Death of Stray Animals",
"123": "Public Health / Dengue / Malaria / Gastro Enteritis",
"124": "Transfer Station Smell",
"125": "Flies Menace from Dumping Ground",
"126": "Open Defecation",
"127": "Illegal Draining of Sewage to SWD / Open Site",
"128": "Complaints regarding unhygenic Restaurants",
"129": "Complaints regarding quality of food in hotels",
"130": "Road Side Eateries",
"131": "Slaughter House related complaints",
"132": "Unauthorized Sale of Meat and Meat products",
"133": "Illegal Slaughtering",
"134": "Unhygenic and Improper Transport of Meat and Livestock",
"135": "Biomedical waste / Health hazard waste removal",
"136": "Complaints regarding Corporation Hospitals",
"137": "Complaints regarding CDH",
"138": "Stagnation of Water",
"139": "Obstruction of Water Flow",
"140": "Desilting of Drain",
"141": "Desilting of Canal",
"142": "Repairs to Storm Water Drain",
"143": "Covering Manholes of Storm Water Drain",
"144": "New Drain Construction",
"145": "Disposal of Removed Silt on the Road",
"146": "Non burning of Street lights",
"147": "Electric shock due to street light",
"148": "Damage to the Electric pole",
"149": "New Street lights",
"150": "Shifting of Street light pole",
"151": "Overhead cable wires running in a haphazard manner",
"152": "Removal of Fallen Trees",
"153": "Complaints regarding Park",
"154": "Complaints regarding Playground",
"155": "Complaints regarding Centre Median",
"156": "Complaints regarding Traffic Island",
"157": "Unauthorized Tree Cutting",
"158": "Obstruction of Trees",
"159": "Complaints regarding Public Toilets",
"160": "Complaints regarding Free Usage of Public Toilets",
"161": "Complaints regarding Cleanliness of Toilets in Theatre",
"162": "Complaints regarding Cleanliness of Toilets in Shopping Complex",
"163": "Building Plan Sanction",
"164": "Violation of DCR/Building By laws",
"165": "Unauthorized / Illegal Construction",
"166": "Complaints related to Property Tax",
"167": "Complaints related to Professional Tax",
"168": "Complaints related to Trade Licence",
"174": "Name Error (Spelling Related)",
"175": "Change of Address in Electoral Roll",
"176": "Issue of Voter ID",
"177": "Inclusion, Deletion, Correction in Voter List",
"178": "Complaints regarding Voter List",
"179": "Name not found in the Electoral Roll",
"180": "Issue of Birth and Death Certificate",
"181": "Encroachment on the Public Property",
"182": " Complaints related to Schools",
"183": "Sanction of Financial Assistance under Moovalaur Thirumana Thittam",
"184": "Complaints related to issue of all types of Registration Certificate",
"185": "Slow Progress of Work",
"186": "Poor Quality of Work",
"187": "Unauthorized Advertisement Boards",
"188": "Complaints regarding Bridges / Flyovers / Subways",
"189": "Complaints related Shopping Complex",
"190": "Complaints regarding Community Hall",
"191": "Complaints regarding Burial Ground",
"192": "Complaints regarding any other CoC building",
"193": "Parking Issue",
"195": "Complaints Regarding Plastics",
"196": "No electricity in public toilet",
"197": "No water supply in public toilet",
"198": "Public toilet blockage",
"199": "Public toilet cleaning",
"200": "Burning of street light in daytime",
"201": "Illegal Parking on foot path",
"202": "Complaints regarding non availability of Doctors",
"203": "Complaints regarding non availability of medicines",
"204": "Complaints regarding laboratory issues",
"205": "Issues regarding amma baby care kits (After Delivery)",
"206": "Issues regarding Amma nutrition kit for pregnant woman",
"207": "Issues regarding Muthulakshmi Reddy Maternity Benefit Scheme (MRMBS)",
"208": "Issues regarding janani suraksha yojana scheme (JSY)",
"209": "Travel pass related complaints",
"210": "Food related complaints",
"212": "Covid Health Related Queries",
"213": "Hospital and Covid care centre(CCC) Related Queries",
"214": "Medical Emergencies",
"215": "Essentials and Medicines",
"216": "PSYCHO-SOCIO support",
"218": "Quarantine and isolation Related Queries",
"219": "General Health Queries",
"220": "Disinfection request",
"221": "Non Covid Health Related Queries",
"222": "Milling/Scraping of Road before Relaying of Road",
"226": "Food Requirement",
"227": "Relief Center Requirement",
"228": "Covid19 Ambulance Service",
"229": "Air Quality",
"230": "Online Payment Issue",
"231": "General Revision Objection",
"232": "Water Mixed with Sewarage",
"233": "Sewerage Overflow",
"234": "Drinking water supply",
"235": "Electricity Shock",
"236": "Electricity Unavailability",
"237": "Insufficient Barricading",
"238": "Fallen poles/towers/hoardings/other infra",
"239": "Fallen EB cables",
"240": "Project information not provided (Thiruvotriyur High Road)",
"241": "Project information not provided (Arunachaleshwar Road)",
"242": "Project information not provided (MC Road)",
"243": "Project information not provided (Washermenpet Metro)",
"244": "Project information not provided (Khadar Nawas Khan Road)",
"245": "Project information not provided (Race Course road + Guindy MMI)",
"246": "Advance information on consultation not provided (Thiruvotriyur High Road)",
"247": "Advance information on consultation not provided (Arunachaleshwar Road)",
"248": "Advance information on consultation not provided (MC Road)",
"249": "Advance information on consultation not provided (Washermenpet Metro)",
"250": "Advance information on consultation not provided (Khadar Nawas Khan Road)",
"251": "Advance information on consultation not provided (Race Course road + Guindy MMI)",
"252": "Location and area of consultation not provided (Thiruvotriyur High Road)",
"253": "Location and area of consultation not provided (Arunachaleshwar Road)",
"254": "Location and area of consultation not provided (MC Road)",
"255": "Location and area of consultation not provided (Washermenpet Metro)",
"256": "Location and area of consultation not provided (Khadar Nawas Khan Road)",
"257": "Location and area of consultation not provided (Race Course road + Guindy MMI)",
"258": "Information on detailed work plan not provided (Thiruvotriyur High Road)",
"259": "Information on detailed work plan not provided (Arunachaleshwar Road)",
"260": "Information on detailed work plan not provided (MC Road)",
"261": "Information on detailed work plan not provided (Washermenpet Metro)",
"262": "Information on detailed work plan not provided (Khadar Nawas Khan Road)",
"263": "Information on detailed work plan not provided (Race Course road + Guindy MMI)",
"264": "Others (Thiruvotriyur High Road)",
"265": "Others (Arunachaleshwar Road)",
"266": "Others (MC Road)",
"267": "Others (Washermenpet Metro)",
"268": "Others (Khadar Nawas Khan Road)",
"269": "Others (Race Course road + Guindy MMI)",
"270": "No information in advance provided on the date and time of civil works (Thiruvotriyur High Road)",
"271": "No information in advance provided on the date and time of civil works (Arunachaleshwar Road)",
"272": "No information in advance provided on the date and time of civil works (MC Road)",
"273": "No information in advance provided on the date and time of civil works (Washermenpet Metro)",
"274": "No information in advance provided on the date and time of civil works (Khadar Nawas Khan Road)",
"275": "No information in advance provided on the date and time of civil works (Race Course road + Guindy MMI)",
"276": "No information provided on the nature and schedule of civil work (Thiruvotriyur High Road)",
"277": "No information provided on the nature and schedule of civil work (Arunachaleshwar Road)",
"278": "No information provided on the nature and schedule of civil work (MC Road)",
"279": "No information provided on the nature and schedule of civil work (Washermenpet Metro)",
"280": "No information provided on the nature and schedule of civil work (Khadar Nawas Khan Road)",
"281": "No information provided on the nature and schedule of civil work (Race Course road + Guindy MMI)",
"282": "No consultation carried out with the people affected by the civil works (Thiruvotriyur High Road)",
"283": "No consultation carried out with the people affected by the civil works (Arunachaleshwar Road)",
"284": "No consultation carried out with the people affected by the civil works (MC Road)",
"285": "No consultation carried out with the people affected by the civil works (Washermenpet Metro)",
"286": "No consultation carried out with the people affected by the civil works (Khadar Nawas Khan Road)",
"287": "No consultation carried out with the people affected by the civil works (Race Course road + Guindy MMI)",
"288": "No arrangement made for temporary displacement (Thiruvotriyur High Road)",
"289": "No arrangement made for temporary displacement (Arunachaleshwar Road)",
"290": "No arrangement made for temporary displacement (MC Road)",
"291": "No arrangement made for temporary displacement (Washermenpet Metro)",
"292": "No arrangement made for temporary displacement (Khadar Nawas Khan Road)",
"293": "No arrangement made for temporary displacement (Race Course road + Guindy MMI)",
"294": "No display board on the project installed at work site (Thiruvotriyur High Road)",
"295": "No display board on the project installed at work site (Arunachaleshwar Road)",
"296": "No display board on the project installed at work site (MC Road)",
"297": "No display board on the project installed at work site (Washermenpet Metro)",
"298": "No display board on the project installed at work site (Khadar Nawas Khan Road)",
"299": "No display board on the project installed at work site (Race Course road + Guindy MMI)",
"300": "Temporary access to structures not provided and or not adequate (Thiruvotriyur High Road)",
"301": "Temporary access to structures not provided and or not adequate (Arunachaleshwar Road)",
"302": "Temporary access to structures not provided and or not adequate (MC Road)",
"303": "Temporary access to structures not provided and or not adequate (Washermenpet Metro)",
"304": "Temporary access to structures not provided and or not adequate (Khadar Nawas Khan Road)",
"305": "Temporary access to structures not provided and or not adequate (Race Course road + Guindy MMI)",
"306": "No safety measures taken at worksite (Thiruvotriyur High Road)",
"307": "No safety measures taken at worksite (Arunachaleshwar Road)",
"308": "No safety measures taken at worksite (MC Road)",
"309": "No safety measures taken at worksite (Washermenpet Metro)",
"310": "No safety measures taken at worksite (Khadar Nawas Khan Road)",
"311": "No safety measures taken at worksite (Race Course road + Guindy MMI)",
"312": "Water supply disrupted and alternate arrangement not provided (Thiruvotriyur High Road)",
"313": "Water supply disrupted and alternate arrangement not provided (Arunachaleshwar Road)",
"314": "Water supply disrupted and alternate arrangement not provided (MC Road)",
"315": "Water supply disrupted and alternate arrangement not provided (Washermenpet Metro)",
"316": "Water supply disrupted and alternate arrangement not provided (Khadar Nawas Khan Road)",
"317": "Water supply disrupted and alternate arrangement not provided (Race Course road + Guindy MMI)",
"318": "Electricity supply disrupted and alternate arrangement not provided (Thiruvotriyur High Road)",
"319": "Electricity supply disrupted and alternate arrangement not provided (Arunachaleshwar Road)",
"320": "Electricity supply disrupted and alternate arrangement not provided (MC Road)",
"321": "Electricity supply disrupted and alternate arrangement not provided (Washermenpet Metro)",
"322": "Electricity supply disrupted and alternate arrangement not provided (Khadar Nawas Khan Road)",
"323": "Electricity supply disrupted and alternate arrangement not provided (Race Course road + Guindy MMI)",
"324": "Disposal of debris not appropriately managed (Thiruvotriyur High Road)",
"325": "Disposal of debris not appropriately managed (Arunachaleshwar Road)",
"326": "Disposal of debris not appropriately managed (MC Road)",
"327": "Disposal of debris not appropriately managed (Washermenpet Metro)",
"328": "Disposal of debris not appropriately managed (Khadar Nawas Khan Road)",
"329": "Disposal of debris not appropriately managed (Race Course road + Guindy MMI)",
"330": " Temporary arrangement for parking not provided (Thiruvotriyur High Road)",
"331": " Temporary arrangement for parking not provided (Arunachaleshwar Road)",
"332": " Temporary arrangement for parking not provided (MC Road)",
"333": " Temporary arrangement for parking not provided (Washermenpet Metro)",
"334": " Temporary arrangement for parking not provided (Khadar Nawas Khan Road)",
"335": " Temporary arrangement for parking not provided (Race Course road + Guindy MMI)",
"336": "GRM and helpline numbers not displayed at worksite (Thiruvotriyur High Road)",
"337": "GRM and helpline numbers not displayed at worksite (Arunachaleshwar Road)",
"338": "GRM and helpline numbers not displayed at worksite (MC Road)",
"339": "GRM and helpline numbers not displayed at worksite (Washermenpet Metro)",
"340": "GRM and helpline numbers not displayed at worksite (Khadar Nawas Khan Road)",
"341": "GRM and helpline numbers not displayed at worksite (Race Course road + Guindy MMI)",
"342": "Drinking water/ other basic needs for Labour not available at worksite (Thiruvotriyur High Road)",
"343": "Drinking water/ other basic needs for Labour not available at worksite (Arunachaleshwar Road)",
"344": "Drinking water/ other basic needs for Labour not available at worksite (MC Road)",
"345": "Drinking water/ other basic needs for Labour not available at worksite (Washermenpet Metro)",
"346": "Drinking water/ other basic needs for Labour not available at worksite (Khadar Nawas Khan Road)",
"347": "Drinking water/ other basic needs for Labour not available at worksite (Race Course road + Guindy MMI)",
"348": "Noise levels are very high (Thiruvotriyur High Road)",
"349": "Noise levels are very high (Arunachaleshwar Road)",
"350": "Noise levels are very high (MC Road)",
"351": "Noise levels are very high (Washermenpet Metro)",
"352": "Noise levels are very high (Khadar Nawas Khan Road)",
"353": "Noise levels are very high (Race Course road + Guindy MMI)",
"354": " Sprinkling of water at worksite not carried out (Thiruvotriyur High Road)",
"355": " Sprinkling of water at worksite not carried out (Arunachaleshwar Road)",
"356": " Sprinkling of water at worksite not carried out (MC Road)",
"357": " Sprinkling of water at worksite not carried out (Washermenpet Metro)",
"358": " Sprinkling of water at worksite not carried out (Khadar Nawas Khan Road)",
"359": " Sprinkling of water at worksite not carried out (Race Course road + Guindy MMI)",
"360": "The worksite is not barricaded; (Thiruvotriyur High Road)",
"361": "The worksite is not barricaded; (Arunachaleshwar Road)",
"362": "The worksite is not barricaded; (MC Road)",
"363": "The worksite is not barricaded; (Washermenpet Metro)",
"364": "The worksite is not barricaded; (Khadar Nawas Khan Road)",
"365": "The worksite is not barricaded; (Race Course road + Guindy MMI)",
"366": " No information on number of labour working at the site (Thiruvotriyur High Road)",
"367": " No information on number of labour working at the site (Arunachaleshwar Road)",
"368": " No information on number of labour working at the site (MC Road)",
"369": " No information on number of labour working at the site (Washermenpet Metro)",
"370": " No information on number of labour working at the site (Khadar Nawas Khan Road)",
"371": " No information on number of labour working at the site (Race Course road + Guindy MMI)",
"372": "Labourer not using the safety equipment (Thiruvotriyur High Road)",
"373": "Labourer not using the safety equipment (Arunachaleshwar Road)",
"374": "Labourer not using the safety equipment (MC Road)",
"375": "Labourer not using the safety equipment (Washermenpet Metro)",
"376": "Labourer not using the safety equipment (Khadar Nawas Khan Road)",
"377": "Labourer not using the safety equipment (Race Course road + Guindy MMI)",
"378": "Sewerage pipe is damaged (Thiruvotriyur High Road)",
"379": "Sewerage pipe is damaged (Arunachaleshwar Road)",
"380": "Sewerage pipe is damaged (MC Road)",
"381": "Sewerage pipe is damaged (Washermenpet Metro)",
"382": "Sewerage pipe is damaged (Khadar Nawas Khan Road)",
"383": "Sewerage pipe is damaged (Race Course road + Guindy MMI)",
"384": "Others (Thiruvotriyur High Road)",
"385": "Others (Arunachaleshwar Road)",
"386": "Others (MC Road)",
"387": "Others (Washermenpet Metro)",
"388": "Others (Khadar Nawas Khan Road)",
"389": "Others (Race Course road + Guindy MMI)",
"390": "Insufficient Barricading (Thiruvotriyur High Road)",
"391": "Insufficient Barricading (Arunachaleshwar Road)",
"392": "Insufficient Barricading (MC Road)",
"393": "Insufficient Barricading (Washermenpet Metro)",
"394": "Insufficient Barricading (Khadar Nawas Khan Road)",
"395": "Insufficient Barricading (Race Course road + Guindy MMI)",
"396": "Non Removal of Debris (Thiruvotriyur High Road)",
"397": "Non Removal of Debris (Arunachaleshwar Road)",
"398": "Non Removal of Debris (MC Road)",
"399": "Non Removal of Debris (Washermenpet Metro)",
"400": "Non Removal of Debris (Khadar Nawas Khan Road)",
"401": "Non Removal of Debris (Race Course road + Guindy MMI)",
"402": "Potholes fill up (Thiruvotriyur High Road)",
"403": "Potholes fill up (Arunachaleshwar Road)",
"404": "Potholes fill up (MC Road)",
"405": "Potholes fill up (Washermenpet Metro)",
"406": "Potholes fill up (Khadar Nawas Khan Road)",
"407": "Potholes fill up (Race Course road + Guindy MMI)",
"408": "Damage to utilities (TNEB, CMWSSB, BSNL) (Thiruvotriyur High Road)",
"409": "Damage to utilities (TNEB, CMWSSB, BSNL) (Arunachaleshwar Road)",
"410": "Damage to utilities (TNEB, CMWSSB, BSNL) (MC Road)",
"411": "Damage to utilities (TNEB, CMWSSB, BSNL) (Washermenpet Metro)",
"412": "Damage to utilities (TNEB, CMWSSB, BSNL) (Khadar Nawas Khan Road)",
"413": "Damage to utilities (TNEB, CMWSSB, BSNL) (Race Course road + Guindy MMI)",
"414": "Encroaching Public Space (Thiruvotriyur High Road)",
"415": "Encroaching Public Space (Arunachaleshwar Road)",
"416": "Encroaching Public Space (MC Road)",
"417": "Encroaching Public Space (Washermenpet Metro)",
"418": "Encroaching Public Space (Khadar Nawas Khan Road)",
"419": "Encroaching Public Space (Race Course road + Guindy MMI)",
"420": "Need Pathway ramp (Thiruvotriyur High Road)",
"421": "Need Pathway ramp (Arunachaleshwar Road)",
"422": "Need Pathway ramp (MC Road)",
"423": "Need Pathway ramp (Washermenpet Metro)",
"424": "Need Pathway ramp (Khadar Nawas Khan Road)",
"425": "Need Pathway ramp (Race Course road + Guindy MMI)",
"426": "Cleanliness in Parks",
"427": "Greenary in Parks",
"428": "Play Equipment",
"429": "Opening and closing hours",
"430": "Toilets in parks",
"431": "Non functional lights/ no lights in parks",
"432": "Safety in parks/playgrounds",
"433": "Women related safety issues in parks",
"434": "Availability or cleanliness of dustbins in public toilets",
"435": "Cleanliness/ water supply in toilets",
"436": "Broken sinks, toilets or urinals and doors",
"437": "Request for new toilet",
"438": "Illegal activities in toilet",
"439": "Toilets not in use/ closed",
"440": "Inadequate lighting in and around the toilet",
"441": "Safety in public toilets",
"442": "Cleanliness in footpath",
"443": "Electrical wires/obstruction on footpath",
"444": "Unsafe dark spots/ corners",
"445": "Public defecation/urination",
"446": "Women related safety issues ",
"447": "Inadequate light in a particular location or spot/ dark spots",
};
$('#nextStep3').off('click').on('click', function (e) {
e.preventDefault();
//const complaint_Title = $('#complaint-title').val().trim();
const complaint_Type = $('#complaint-id').val();
if (!complaint_Type) {
Swal.fire({
icon: 'warning',
title: 'Missing Information',
text: 'Please Select Complaint Type.',
confirmButtonText: 'OK'
});
return; // Stop further execution
}
const shareMobile = $('input[name="shareMobile"]:checked').val();
const mobileNo = $('#mobileNo').val().trim();
const streetName = $('#streetName option:selected').text().trim().toLowerCase();
if (shareMobile === 'no' || mobileNo === '') {
nextStep(); // Skip duplicate check if mobile not shared
return;
}
let complaintId = '';
let complaintTitle = '';
if ($('#specific-fields').hasClass('active')) {
complaintId = $('#complaint-id').val().trim();
complaintTitle = complaintTypeMap[complaintId] || "Selected complaint";
} else if ($('#others-fields').hasClass('active')) {
console.log("other fields...");
complaintId = $('#sub-type option:selected').val().trim(); // ✅ send ID
console.log("complaintId... "+complaintId);
//complaintId = $('#sub-type').val().trim(); // ✅ send ID
complaintTitle = $('#sub-type option:selected').text().trim(); // readable for alert
}
console.log("Checking for duplicate:", { complaintId, complaintTitle, streetName });
const backendUrl = `/gcc/api/callcenterqaqc/pgrcomplaint/checktypeforduplicate?mobileNo=${mobileNo}&complaintId=${complaintId}&streetName=${encodeURIComponent(streetName)}`;
$.get(backendUrl, function (response) {
if (response.duplicate) {
Swal.fire({
icon: 'warning',
title: 'Duplicate Complaint Found',
text: `A similar complaint like "${complaintTitle}" already exists for this street within the last 7 days.`,
confirmButtonText: 'OK',
allowOutsideClick: false
}).then(() => {
location.reload();
});
} else {
nextStep();
}
}).fail(function () {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Could not verify for duplicate complaints. Please try again.'
});
});
});
});
/* 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>