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.
 
 
 

1461 lines
45 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<!--Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<!--Bootstrap CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script th:src="@{/js/invertcolor.js}"></script>
<style>
body {
font-family: 'Lato', sans-serif;
background-color: white;
}
body.inverted {
background-color: black;
color: white !important;
filter: invert(1);
}
.card {
border-radius: 15px;
border: none;
padding: 20px;
background-color: #f0f4ff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
}
.card-text {
color: #666;
margin-bottom: 20px;
}
.progress {
height: 20px;
border-radius: 10px;
}
.progress-bar {
background-color: #414f69;
/* New color for the progress bar */
border-radius: 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;
}
/*header css*/
.header {
background-color: #3b4858;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
}
.header .logo-left img {
height: 60px;
}
.header .title {
text-align: center;
flex-grow: 1;
}
.header .title h2 {
margin: 0;
font-size: 1.5rem;
}
.header .logos-right img {
height: 60px;
margin-left: 10px;
}
/*header buttons*/
.header {
display: flex;
align-items: center;
justify-content: space-between;
/* Space out the items within the header */
}
.header-buttons {
padding-left: 5px;
display: flex;
align-items: center;
gap: 10px;
/* Adjust spacing between buttons */
}
#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);
}
}
/*for snack bar*/
#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>
</style>
</head>
<body>
<div th:insert="~{fragments/header :: headerFragment}"></div>
<div th:insert="~{fragments/accessibility :: accessibility}"></div>
<div id="snackbar"></div>
<!-- Progress Bar Section -->
<div class="container resizable-content">
<div class="mt-1">
<div class="row align-items-center justify-content-center">
<button class="back-button" onclick="window.location.href='home';">← Back</button>
<!--<button id="invertColorBtn" onclick="invertColors()">Invert Colors</button>-->
<h2 class="title">Registration of Complaint</h2>
</div>
</div>
<div class="card ">
<h3>Instructions:</h3>
<p>Please fill your complaint details below and click the ‘Submit’ button at the bottom. You will be given a
Complaint Number upon submitting the complaint that you can use to track the complaint.</p>
</div>
<div class="card ">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Step 1 -->
<!-- Step 1 -->
<div class="card 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:</label>
<div class="input-group">
<input type="number" class="form-control" id="mobile"
placeholder="Enter your Mobile Number">
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="col-md-4">
<label for="gender">Gender/பாலினம்:<span class="required">*</span></label>
<div class="radio-group">
<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="card 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="card 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="images/road.png" alt="Pothole">
<p>Pothole</p>
</div>
<div class="complaint-icon" data-type="specific" data-id="97">
<img src="images/recycle.png" alt="garbage">
<p>Garbage</p>
</div>
<div class="complaint-icon" data-type="specific" data-id="104">
<img src="images/waste-bin.png" alt="broken-bin">
<p>Broken-Bin</p>
</div>
<div class="complaint-icon" data-type="specific" data-id="146">
<img src="images/street-lamp.png" alt="StreetLight">
<p>StreetLight</p>
</div>
<div class="complaint-icon" data-type="specific" data-id="199">
<img src="images/portable-bathroom.png" alt="public-toilet">
<p>Public Toilet</p>
</div>
<div class="complaint-icon" data-type="specific" data-id="118">
<img src="images/mosquito.png" alt="mosquito">
<p>Mosquito Menace</p>
</div>
<div class="complaint-icon" data-type="specific" data-id="138">
<img src="images/tsunami.png" alt="waterstag">
<p>WaterStagnation</p>
</div>
<div class="complaint-icon" data-type="specific" data-id="142">
<img src="images/sewage.png" alt="sewage">
<p>Storm Water Drains</p>
</div>
<div class="complaint-icon" data-type="specific" data-id="119">
<img src="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="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 Or Video:</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 or Video:</label>
<input type="file" class="form-control" id="uploadothers" accept="image/*,video/*">
</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="card 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>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Font Awesome for Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- Progress Bar Script -->
<script>
//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 mobile = $('#mobile').val().trim();
const name = $('#name').val().trim();
const email = $('#email').val().trim();
// Validate mobile number
if (mobile === '' || !/^\d{10}$/.test(mobile)) {
isValid = false;
showSnackbar("Please enter a valid 10-digit mobile number.");
}
// Validate name
if (name === '') {
isValid = false;
showSnackbar("Please enter your name.");
}
// Validate email
if (email === '' || !/^\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 mobile = $('#mobile').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(mobile);
$('#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: '/api/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: `/api/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);
}
});
});
//script for reader
// Script for reader functionality
let readerActive = false;
function toggleReader() {
const readerBtn = document.getElementById('reader-btn');
readerActive = !readerActive;
if (readerActive) {
readerBtn.classList.add('active');
readerBtn.textContent = 'Disable Reader';
enableReading();
} else {
readerBtn.classList.remove('active');
readerBtn.textContent = 'Enable Reader';
disableReading();
}
}
function enableReading() {
document.querySelectorAll('.readable').forEach(element => {
element.addEventListener('mouseenter', speakText);
element.addEventListener('click', speakText);
});
}
function disableReading() {
document.querySelectorAll('.readable').forEach(element => {
element.removeEventListener('mouseenter', speakText);
element.removeEventListener('click', speakText);
});
}
function speakText(event) {
if (readerActive) {
const text = event.target.textContent;
const utterance = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(utterance);
}
}
//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();
});
}
//script for map
//for saving...
/* $(document).ready(function () {
$('#submitButton').click(function (e) {
e.preventDefault(); // Prevent the default form submission
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();
var gender = $('#summaryGender').text().trim();
var imageSrc = $('#summaryImage').attr('src');
console.log({
serviceId: 'RegComplaint',
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 the API
$.ajax({
url: 'https://erp.chennaicorporation.gov.in/pgr/external/mobileservice',
type: 'POST',
data: {
serviceId: 'RegComplaint',
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) {
// Handle success response
console.log('Success:', response);
alert('Complaint registered successfully!');
// You can also redirect or reset the form here
},
error: function (xhr, status, error) {
// Improved error handling
console.log('Error:', xhr.responseText, status, error);
alert('Error: ' + xhr.status + ' ' + xhr.statusText);
}
});
});
}); */
$(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: '/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
Swal.fire({
title: 'Success!',
text: 'Your complaint has been submitted.',
icon: 'success',
confirmButtonText: 'OK'
}).then((result) => {
if (result.isConfirmed) {
// Redirect to home.html after clicking 'OK'
window.location.href = 'home';
}
});
},
error: function (xhr, status, error) {
// Improved error handling
console.log('Error:', xhr.responseText, status, error);
alert('Error: ' + xhr.status + ' ' + xhr.statusText);
}
});
});
});
</script>
</body>
</html>