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