srishanmugip
/
public_grievance_updated
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
5 Commits
1 Branch
0 Tags
1.6 MiB
Tree: 6e64ff2663
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6e64ff2663'
${ noResults }
public_grievance_updated/src/main/resources/templates/User/registercomplaints.html

1460 lines
45 KiB
Raw Normal View History

first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
2 years ago
​
​
​
​
​
​
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
​
​
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
​
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
first commit
2 years ago
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
last commit
2 years ago
​
​
​
​
​
first commit
2 years ago
​
​
​
​
​
​
​
last commit
2 years ago
​
​
​
​
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
2 years ago
​
​
​
​
​
last commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
2 years ago
​
​
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
2 years ago
​
last commit
2 years ago
first commit
2 years ago
last commit
2 years ago
​
​
​
​
first commit
2 years ago
​
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
first commit
2 years ago
last commit
2 years ago
​
first commit
2 years ago
​
​
last commit
2 years ago
​
first commit
2 years ago
​
​
​
​
​
​
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
first commit
2 years ago
​
last commit
2 years ago
​
first commit
2 years ago
​
​
​
last commit
2 years ago
​
​
​
​
​
first commit
2 years ago
​
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
​
​
​
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
first commit
2 years ago
​
last commit
2 years ago
first commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
first commit
2 years ago
last commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
last commit
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
first commit
2 years ago
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Main Page</title>
  7. <!--Google Font -->
  8. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
  9. <!--Bootstrap CSS-->
  10. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  12. <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  13. <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  14. <script th:src="@{/js/invertcolor.js}"></script>
  15. <style>
  16. body {
  17. font-family: 'Lato', sans-serif;
  18. background-color: white;
  19. }
  21. body.inverted {
  22. background-color: black;
  23. color: white !important;
  24. filter: invert(1);
  25. }
  27. .card {
  28. border-radius: 15px;
  29. border: none;
  30. padding: 20px;
  31. background-color: #f0f4ff;
  32. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  33. margin-top: 20px;
  34. }
  36. .card-title {
  37. font-size: 1.2rem;
  38. font-weight: bold;
  39. }
  41. .card-text {
  42. color: #666;
  43. margin-bottom: 20px;
  44. }
  46. .progress {
  47. height: 20px;
  48. border-radius: 10px;
  49. }
  51. .progress-bar {
  52. background-color: #414f69;
  53. /* New color for the progress bar */
  54. border-radius: 10px;
  55. }
  58. .form-row {
  59. margin-bottom: 20px;
  60. }
  62. .form-step {
  63. display: none;
  64. }
  66. .form-step.active {
  67. display: block;
  68. }
  70. .container {
  71. max-width: 100%;
  72. }
  74. /*css for step 3*/
  75. .complaint-icons {
  76. display: flex;
  77. justify-content: space-around;
  78. margin-bottom: 20px;
  79. }
  81. .complaint-icon {
  82. text-align: center;
  83. cursor: pointer;
  84. }
  86. .complaint-icon img {
  87. width: 50px;
  88. height: 50px;
  89. }
  91. .complaint-fields {
  92. display: none;
  93. }
  95. .complaint-fields.active {
  96. display: block;
  97. }
  99. /*for radio button style*/
  100. .radio-group {
  101. display: flex;
  102. align-items: center;
  103. /* Ensures all items are aligned to the center */
  104. }
  106. .radio-item {
  107. display: flex;
  108. align-items: center;
  109. margin-right: 20px;
  110. /* Adds space between each radio item */
  111. }
  113. .radio-item input[type="radio"] {
  114. margin-right: 10px;
  115. /* Adds space between the radio button and its label */
  116. vertical-align: middle;
  117. /* Ensures vertical alignment */
  118. }
  120. .radio-item label {
  121. margin: 0;
  122. /* Removes any default margins that might affect alignment */
  123. }
  125. .back-button {
  126. background: none;
  127. border: none;
  128. color: #000;
  129. font-size: 16px;
  130. cursor: pointer;
  131. padding: 0;
  132. margin-right: auto;
  133. /* Align the button to the left */
  134. }
  136. .title {
  137. text-align: center;
  138. flex-grow: 1;
  139. font-size: 24px;
  140. font-weight: bold;
  141. margin: 0;
  142. }
  144. /*css for map in step2*/
  145. #map {
  146. height: 300px;
  147. width: 100%;
  148. position: relative;
  149. overflow: hidden;
  150. max-width: 100%;
  151. }
  153. #search-container {
  154. position: absolute;
  155. top: 10px;
  156. left: 50%;
  157. transform: translateX(-50%);
  158. z-index: 1000;
  159. width: 500px;
  160. box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  161. background-color: white;
  162. border-radius: 4px;
  163. padding: 0;
  164. /* Removed extra padding to match the input width */
  165. }
  167. #search-box {
  168. width: 100%;
  169. /* Ensures the input takes up the entire width of the container */
  170. padding: 5px;
  171. font-size: 16px;
  172. border: 1px solid #ccc;
  173. border-radius: 4px;
  174. /* Rounded corners matching the container */
  175. box-sizing: border-box;
  176. /* Makes sure padding is considered in width */
  177. }
  179. #suggestions {
  180. border: 1px solid #ccc;
  181. border-radius: 4px;
  182. max-height: 200px;
  183. overflow-y: auto;
  184. margin-top: 5px;
  185. background-color: white;
  186. display: none;
  187. width: 100%;
  188. /* Matches the width of the container and input */
  189. box-sizing: border-box;
  190. /* Ensures the width includes borders and padding */
  191. }
  193. #suggestions ul {
  194. list-style: none;
  195. padding: 0;
  196. margin: 0;
  197. }
  199. #suggestions ul li {
  200. padding: 5px;
  201. cursor: pointer;
  202. }
  204. #suggestions ul li:hover {
  205. background-color: #f0f0f0;
  206. }
  208. /*header css*/
  209. .header {
  210. background-color: #3b4858;
  211. padding: 10px 20px;
  212. display: flex;
  213. align-items: center;
  214. justify-content: space-between;
  215. color: white;
  216. }
  218. .header .logo-left img {
  219. height: 60px;
  220. }
  222. .header .title {
  223. text-align: center;
  224. flex-grow: 1;
  225. }
  227. .header .title h2 {
  228. margin: 0;
  229. font-size: 1.5rem;
  230. }
  232. .header .logos-right img {
  233. height: 60px;
  234. margin-left: 10px;
  235. }
  237. /*header buttons*/
  238. .header {
  239. display: flex;
  240. align-items: center;
  241. justify-content: space-between;
  242. /* Space out the items within the header */
  243. }
  245. .header-buttons {
  246. padding-left: 5px;
  247. display: flex;
  248. align-items: center;
  249. gap: 10px;
  250. /* Adjust spacing between buttons */
  251. }
  253. #reader-btn,
  254. #invertColorBtn {
  255. padding: 5px 10px;
  256. font-size: 14px;
  257. cursor: pointer;
  258. }
  260. .loader {
  261. border: 16px solid #f3f3f3;
  262. /* Light grey */
  263. border-top: 16px solid #3498db;
  264. /* Blue */
  265. border-radius: 50%;
  266. width: 120px;
  267. height: 120px;
  268. animation: spin 2s linear infinite;
  269. position: absolute;
  270. top: 50%;
  271. left: 50%;
  272. margin: -60px 0 0 -100px;
  273. /* Center the loader */
  274. z-index: 9999;
  275. /* Ensure it's on top of everything */
  276. display: none;
  277. /* Initially hidden */
  278. }
  280. @keyframes spin {
  281. 0% {
  282. transform: rotate(0deg);
  283. }
  285. 100% {
  286. transform: rotate(360deg);
  287. }
  288. }
  290. /*for snack bar*/
  291. #snackbar {
  292. visibility: hidden;
  293. min-width: 250px;
  294. background-color: #333;
  295. color: #fff;
  296. text-align: center;
  297. border-radius: 2px;
  298. padding: 16px;
  299. position: fixed;
  300. z-index: 1;
  301. left: 50%;
  302. bottom: 30px;
  303. font-size: 17px;
  304. transform: translateX(-50%);
  305. }
  307. #snackbar.show {
  308. visibility: visible;
  309. -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  310. animation: fadein 0.5s, fadeout 0.5s 2.5s;
  311. }
  313. @-webkit-keyframes fadein {
  314. from {
  315. bottom: 0;
  316. opacity: 0;
  317. }
  319. to {
  320. bottom: 30px;
  321. opacity: 1;
  322. }
  323. }
  325. @keyframes fadein {
  326. from {
  327. bottom: 0;
  328. opacity: 0;
  329. }
  331. to {
  332. bottom: 30px;
  333. opacity: 1;
  334. }
  335. }
  337. @-webkit-keyframes fadeout {
  338. from {
  339. bottom: 30px;
  340. opacity: 1;
  341. }
  343. to {
  344. bottom: 0;
  345. opacity: 0;
  346. }
  347. }
  349. @keyframes fadeout {
  350. from {
  351. bottom: 30px;
  352. opacity: 1;
  353. }
  355. to {
  356. bottom: 0;
  357. opacity: 0;
  358. }
  359. }
  361. /*for snack bar*/
  362. </style>
  363. </style>
  364. </head>
  366. <body>
  367. <div th:insert="~{fragments/header :: headerFragment}"></div>
  368. <div th:insert="~{fragments/accessibility :: accessibility}"></div>
  369. <div id="snackbar"></div>
  371. <!-- Progress Bar Section -->
  372. <div class="container resizable-content">
  374. <div class="mt-1">
  375. <div class="row align-items-center justify-content-center">
  376. <button class="back-button" onclick="window.location.href='home';">← Back</button>
  377. <!--<button id="invertColorBtn" onclick="invertColors()">Invert Colors</button>-->
  378. <h2 class="title">Registration of Complaint</h2>
  379. </div>
  380. </div>
  383. <div class="card ">
  384. <h3>Instructions:</h3>
  385. <p>Please fill your complaint details below and click the ‘Submit’ button at the bottom. You will be given a
  386. Complaint Number upon submitting the complaint that you can use to track the complaint.</p>
  387. </div>
  388. <div class="card ">
  389. <div class="progress">
  390. <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
  391. style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  392. </div>
  394. <!-- Step 1 -->
  395. <!-- Step 1 -->
  396. <div class="card form-step active " id="step-1">
  397. <div class="card-body">
  398. <h5 class="card-title">1. Complaining Person's Details:</h5>
  399. <div class="form-row">
  400. <div class="col-md-4">
  401. <label for="mobile">Mobile Number:</label>
  402. <div class="input-group">
  403. <input type="number" class="form-control" id="mobile"
  404. placeholder="Enter your Mobile Number">
  405. </div>
  406. </div>
  407. </div>
  408. <div class="form-row">
  409. <div class="col-md-4">
  410. <label for="name">Name:</label>
  411. <input type="text" class="form-control" id="name" placeholder="Enter your name">
  412. </div>
  413. <div class="col-md-4">
  414. <label for="gender">Gender/பாலினம்:<span class="required">*</span></label>
  415. <div class="radio-group">
  416. <div class="radio-item">
  417. <input type="radio" id="male" name="gender" value="male" checked>
  418. <label for="male">Male</label>
  419. </div>
  420. <div class="radio-item">
  421. <input type="radio" id="female" name="gender" value="female">
  422. <label for="female">Female</label>
  423. </div>
  424. <div class="radio-item">
  425. <input type="radio" id="transgender" name="gender" value="transgender">
  426. <label for="transgender">Transgender</label>
  427. </div>
  428. </div>
  429. </div>
  431. <div class="col-md-4">
  432. <label for="email">Email:</label>
  433. <input type="email" class="form-control" id="email" placeholder="Enter your email">
  434. </div>
  435. </div>
  436. <button id="nextStep1" class="btn btn-primary float-right" onclick="nextStep('nextStep1')"
  437. style="background-color: #414f69;">Next</button>
  438. </div>
  439. </div>
  440. <!--step-2-->
  441. <div class="card form-step readable" id="step-2">
  442. <div class="card-body">
  443. <h5 class="card-title">2. Complaint Location Details:</h5>
  444. <div class="form-row">
  446. <!-- loader section -->
  447. <div id="loader" class="loader" style="display: none;"></div>
  449. <!--map fields-->
  451. <div class="col-md-12">
  452. <div id="map"></div>
  453. <div id="search-container">
  454. <input type="text" id="search-box" placeholder="Search for a location...">
  455. <div id="suggestions"></div>
  456. </div>
  457. <div class="row">
  458. <div class="col-md-6">
  459. <label for="street">Street:</label>
  460. <input type="text" class="form-control" id="street">
  461. </div>
  463. <div class="col-md-6">
  464. <label for="longitude_field">Longtitude</label>
  465. <input type="text" class="form-control" id="longitude_field" name="longtitude">
  466. </div>
  467. <div class="col-md-6">
  468. <label for="latitude_field">Latitide</label>
  469. <input type="text" class="form-control" id="latitude_field">
  470. </div>
  471. <div class="col-md-6">
  472. <label for="street_id">Street Id</label>
  473. <input type="text" class="form-control" id="street_id">
  474. </div>
  475. <div class="col-md-6">
  476. <label for="landmark">Landmark</label>
  477. <input type="text" class="form-control" id="landmark">
  478. </div>
  479. </div>
  480. </div>
  481. </div>
  482. <button id="prevStep2" class="btn btn-secondary" onclick="prevStep('prevStep2')">Previous</button>
  483. <button id="nextStep2" class="btn btn-primary float-right" onclick="nextStep('nextStep2')"
  484. style="background-color: #414f69;">Next</button>
  485. </div>
  486. </div>
  487. <!-- Step 3 -->
  488. <div class="card form-step active readable" id="step-3">
  489. <div class="card-body">
  490. <h5 class="card-title">3. Complaint Type:</h5>
  492. <!-- Icons -->
  493. <div class="complaint-icons">
  494. <div class="complaint-icon" data-type="specific" data-id="112">
  495. <img src="images/road.png" alt="Pothole">
  496. <p>Pothole</p>
  497. </div>
  498. <div class="complaint-icon" data-type="specific" data-id="97">
  499. <img src="images/recycle.png" alt="garbage">
  500. <p>Garbage</p>
  501. </div>
  502. <div class="complaint-icon" data-type="specific" data-id="104">
  503. <img src="images/waste-bin.png" alt="broken-bin">
  504. <p>Broken-Bin</p>
  505. </div>
  506. <div class="complaint-icon" data-type="specific" data-id="146">
  507. <img src="images/street-lamp.png" alt="StreetLight">
  508. <p>StreetLight</p>
  509. </div>
  510. <div class="complaint-icon" data-type="specific" data-id="199">
  511. <img src="images/portable-bathroom.png" alt="public-toilet">
  512. <p>Public Toilet</p>
  513. </div>
  514. <div class="complaint-icon" data-type="specific" data-id="118">
  515. <img src="images/mosquito.png" alt="mosquito">
  516. <p>Mosquito Menace</p>
  517. </div>
  518. <div class="complaint-icon" data-type="specific" data-id="138">
  519. <img src="images/tsunami.png" alt="waterstag">
  520. <p>WaterStagnation</p>
  521. </div>
  522. <div class="complaint-icon" data-type="specific" data-id="142">
  523. <img src="images/sewage.png" alt="sewage">
  524. <p>Storm Water Drains</p>
  525. </div>
  526. <div class="complaint-icon" data-type="specific" data-id="119">
  527. <img src="images/dog.png" alt="dog">
  528. <p>Street Dog</p>
  529. </div>
  530. <!--<div class="complaint-icon" data-type="specific" data-id="">
  531. <img src="images/bad-weather.png" alt="weather">
  532. <p>Tree Fallen</p>
  533. </div>-->
  535. <div class="complaint-icon" data-type="others">
  536. <img src="images/menu.png" alt="Others">
  537. <p>Others</p>
  538. </div>
  539. </div>
  541. <!-- Specific Complaint Fields -->
  542. <div class="complaint-fields active" id="specific-fields">
  543. <div class="form-row">
  544. <div class="col-md-6">
  545. <label for="complaint-title">Complaint Title:</label>
  546. <input type="text" class="form-control" id="complaint-title"
  547. placeholder="Enter complaint title">
  548. </div>
  549. <div class="col-md-6">
  550. <label for="complaint-id">Complaint Type:</label>
  551. <input type="text" class="form-control" id="complaint-id" disabled>
  552. </div>
  554. </div>
  555. <div class="form-row">
  556. <div class="col-md-6">
  557. <label for="othercomplaint-details">Details of Complaint:</label>
  558. <textarea class="form-control" id="othercomplaint-details" rows="3"
  559. placeholder="Enter complaint details" maxlength="400"></textarea>
  560. </div>
  561. <div class="col-md-6">
  562. <label for="complaint-image">Upload Photo Or Video:</label>
  563. <input type="file" class="form-control" id="complaint-image" name="Comp_Image">
  564. </div>
  566. </div>
  567. </div>
  569. <!-- Others Complaint Fields -->
  570. <div class="complaint-fields" id="others-fields">
  571. <div class="form-row">
  572. <div class="col-md-4">
  573. <label for="type">Type:</label>
  574. <select class="form-control" id="type">
  575. <option value="">Please Select</option>
  576. </select>
  577. </div>
  578. <div class="col-md-4">
  579. <label for="sub-type">Sub-Type:</label>
  580. <select class="form-control" id="sub-type">
  581. <option value="">Select complaint</option>
  582. </select>
  583. </div>
  584. <div class="col-md-4">
  585. <label for="uploadothers">Upload Photo or Video:</label>
  586. <input type="file" class="form-control" id="uploadothers" accept="image/*,video/*">
  587. </div>
  588. </div>
  589. <div class="form-row">
  590. <div class="col-md-6">
  591. <label for="othercomplaintdetailsss">Details of Complaint:</label>
  592. <textarea class="form-control" id="othercomplaintdetailsss" rows="3"
  593. placeholder="Enter complaint details" maxlength="400"></textarea>
  594. </div>
  595. </div>
  596. </div>
  599. <button id="prevStep3" class="btn btn-secondary" onclick="prevStep('prevStep3')">Previous</button>
  600. <button id="nextStep3" class="btn btn-primary float-right" onclick="nextStep('nextStep3')"
  601. style="background-color: #414f69;">Next</button>
  602. </div>
  603. </div>
  605. <!-- Step 4 -->
  606. <div class="card form-step readable" id="step-4">
  607. <div class="card-body">
  608. <h5 class="card-title">4. Complaint Details:</h5>
  609. <table class="table">
  610. <tbody>
  611. <tr>
  612. <td><strong>Name</strong></td>
  613. <td>: <span id="summaryName"></span></td>
  614. <td><strong>Complaint Location</strong></td>
  615. <td>: <span id="summaryStreet"></span></td>
  616. </tr>
  617. <tr>
  618. <td><strong>Mobile Number</strong></td>
  619. <td>: <span id="summaryMobile"></span></td>
  620. <td><strong>Email Address</strong></td>
  621. <td>: <span id="summaryEmail"></span></td>
  622. </tr>
  623. <tr>
  624. <td><strong>Complaint Type</strong></td>
  625. <td>: <span id="summaryComplaintType"></span></td>
  626. <td><strong>Complaint Title</strong></td>
  627. <td>: <span id="summaryComplaintTitle"></span></td>
  628. </tr>
  629. <tr>
  630. <td><strong>Description</strong></td>
  631. <td>: <span id="summaryDescription"></span></td>
  632. <td><strong>Street Id</strong></td>
  633. <td>: <span id="summaryStreetId"></span></td>
  634. </tr>
  635. <tr>
  636. <td><strong>Landmark</strong></td>
  637. <td>: <span id="summaryLandmark"></span></td>
  638. <td><strong>Latitude</strong></td>
  639. <td>: <span id="summaryLatitude"></span></td>
  640. </tr>
  641. <tr>
  642. <td><strong>Longitude</strong></td>
  643. <td>: <span id="summaryLongitude"></span></td>
  644. <td><strong>Gender</strong></td>
  645. <td>: <span id="summaryGender"></span></td>
  646. </tr>
  647. <tr>
  648. <td><strong>Image / Video</strong></td>
  649. <td>:
  650. <img id="summaryImage" src="#" alt="Uploaded Image/Video" width="100"
  651. style="display:none;">
  652. </td>
  653. </tr>
  654. </tbody>
  655. </table>
  659. <button id="prevStep4" class="btn btn-secondary" onclick="prevStep('prevStep4')">Previous</button>
  662. <button id="submitButton" class="btn btn-success float-right">Submit</button>
  664. </div>
  665. </div>
  666. </div>
  667. </div>
  669. <!-- Bootstrap JS -->
  670. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  672. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  673. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  674. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  676. <!-- Font Awesome for Icons -->
  677. <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  679. <!-- Progress Bar Script -->
  680. <script>
  682. //for snackbar script
  683. function showSnackbar(message) {
  684. var snackbar = document.getElementById("snackbar");
  685. snackbar.innerHTML = message;
  686. snackbar.className = "show";
  687. setTimeout(function () {snackbar.className = snackbar.className.replace("show", "");}, 3000);
  688. }
  690. //for snackbar script
  694. let currentStep = 1;
  695. let mapInitialized = false;
  697. function showStep(step) {
  698. $('.form-step').removeClass('active');
  699. $('#step-' + step).addClass('active');
  700. updateProgressBar(step);
  702. if (step === 2 && !mapInitialized) {
  703. document.getElementById('loader').style.display = 'block'; // Show loader before map initialization
  704. setTimeout(initializeMap, 3000); // Load the map after 3 seconds
  705. mapInitialized = true; // Ensure the map is only initialized once
  706. }
  708. // If we're on step 4, populate the summary fields
  709. if (step === 4) {
  710. populateSummary();
  711. }
  712. }
  714. function nextStep() {
  715. if (currentStep < 4) {
  716. // Perform validation for the current step
  717. if (validateStep(currentStep)) {
  718. currentStep++;
  719. showStep(currentStep);
  720. }
  721. }
  722. }
  724. function prevStep() {
  725. if (currentStep > 1) {
  726. currentStep--;
  727. showStep(currentStep);
  728. }
  729. }
  731. function updateProgressBar(step) {
  732. const progress = (step / 4) * 100;
  733. $('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
  734. }
  736. function validateStep(step) {
  737. let isValid = true;
  739. if (step === 1) {
  740. const mobile = $('#mobile').val().trim();
  741. const name = $('#name').val().trim();
  742. const email = $('#email').val().trim();
  744. // Validate mobile number
  745. if (mobile === '' || !/^\d{10}$/.test(mobile)) {
  746. isValid = false;
  747. showSnackbar("Please enter a valid 10-digit mobile number.");
  748. }
  750. // Validate name
  751. if (name === '') {
  752. isValid = false;
  753. showSnackbar("Please enter your name.");
  754. }
  756. // Validate email
  757. if (email === '' || !/^\S+@\S+\.\S+$/.test(email)) {
  758. isValid = false;
  759. showSnackbar("Please enter a valid email address.");
  760. }
  761. } else if (step === 2) {
  762. const street = $('#street').val().trim();
  763. const longitude = $('#longitude_field').val().trim();
  764. const latitude = $('#latitude_field').val().trim();
  765. const streetId = $('#street_id').val().trim();
  766. const landmark = $('#landmark').val().trim();
  768. // Validate street
  769. if (street === '') {
  770. isValid = false;
  771. showSnackbar("Please enter the street.");
  772. }
  774. // Validate longitude and latitude
  775. if (longitude === '' || isNaN(longitude)) {
  776. isValid = false;
  777. showSnackbar("Please enter a valid longitude.");
  778. }
  779. if (latitude === '' || isNaN(latitude)) {
  780. isValid = false;
  781. showSnackbar("Please enter a valid latitude.");
  782. }
  784. // Validate street ID
  785. if (streetId === '') {
  786. isValid = false;
  787. showSnackbar("Please enter the street ID.");
  788. }
  790. // Validate landmark
  791. if (landmark === '') {
  792. isValid = false;
  793. showSnackbar("Please enter the landmark.");
  794. }
  795. }
  797. return isValid;
  798. }
  800. function populateSummary() {
  801. const name = $('#name').val();
  802. const street = $('#street').val();
  803. const mobile = $('#mobile').val();
  804. const gender = $('input[name="gender"]:checked').val();
  805. const email = $('#email').val();
  807. // Check if 'specific-fields' is active and use its values
  808. if ($('#specific-fields').hasClass('active')) {
  809. const complaintTitle = $('#complaint-title').val();
  810. const complaintid = $('#complaint-id').val();
  811. const complaintDetails = $('#othercomplaint-details').val(); // Specific complaint details
  813. $('#summaryComplaintTitle').text(complaintTitle);
  814. $('#summaryComplaintType').text(complaintid);
  815. $('#summaryDescription').text(complaintDetails);
  817. } else if ($('#others-fields').hasClass('active')) {
  818. const complaintTitle = $('#type').find('option:selected').text();
  819. const complaintSubType = $('#sub-type').find('option:selected').text();
  820. const complaintDetails = $('#othercomplaintdetailsss').val(); // Others complaint details
  822. $('#summaryComplaintTitle').text(complaintTitle + ' - ' + complaintSubType);
  823. $('#summaryComplaintType').text('Other Complaint');
  824. $('#summaryDescription').text(complaintDetails);
  825. }
  828. const streetid = $('#street_id').val();
  829. const landmark = $('#landmark').val();
  830. const latitude = $('#latitude_field').val();
  831. const longtitude = $('#longitude_field').val();
  833. $('#summaryName').text(name);
  834. $('#summaryStreet').text(street);
  835. $('#summaryMobile').text(mobile);
  836. $('#summaryGender').text(gender);
  837. $('#summaryEmail').text(email);
  838. $('#summaryStreetId').text(streetid);
  839. $('#summaryLandmark').text(landmark);
  840. $('#summaryLatitude').text(latitude);
  841. $('#summaryLongitude').text(longtitude);
  843. // Handle image preview
  844. /* const fileInput = $('#complaint-image')[0]; // Assuming this is for the "Others" section
  845. if (fileInput.files && fileInput.files[0]) {
  846. const reader = new FileReader();
  847. reader.onload = function (e) {
  848. $('#summaryImage').attr('src', e.target.result).show();
  849. }
  850. reader.readAsDataURL(fileInput.files[0]);
  851. } else {
  852. $('#summaryImage').hide();
  853. }*/
  855. // If there's a separate image input for the specific form, handle it similarly:
  856. // Check if specific fields section is active
  857. if ($('#specific-fields').hasClass('active')) {
  858. const specificFileInput = $('#complaint-image')[0]; // Example ID for specific form
  859. if (specificFileInput.files && specificFileInput.files[0]) {
  860. const reader = new FileReader();
  861. reader.onload = function (e) {
  862. $('#summaryImage').attr('src', e.target.result).show();
  863. };
  864. reader.readAsDataURL(specificFileInput.files[0]);
  865. } else {
  866. $('#summaryImage').hide(); // Hide the image if no file is selected
  867. }
  868. }
  869. // Check if "Others" section is active
  870. else if ($('#others-fields').hasClass('active')) {
  871. const fileInput = $('#uploadothers')[0]; // Assuming this is for the "Others" section
  872. if (fileInput.files && fileInput.files[0]) {
  873. const reader = new FileReader();
  874. reader.onload = function (e) {
  875. $('#summaryImage').attr('src', e.target.result).show();
  876. };
  877. reader.readAsDataURL(fileInput.files[0]);
  878. } else {
  879. $('#summaryImage').hide(); // Hide the image if no file is selected
  880. }
  881. } else {
  882. $('#summaryImage').hide(); // Default hide if no section is active
  883. }
  889. }
  892. $(document).ready(function () {
  893. showStep(currentStep);
  894. });
  900. $(document).ready(function () {
  901. showStep(currentStep);
  902. });
  905. //for step3 onclick function
  906. $(document).ready(function () {
  907. // On icon click
  908. $('.complaint-icon').click(function () {
  909. const type = $(this).data('type'); // Get the type (specific or others)
  910. const title = $(this).find('p').text().trim(); // Get the icon name (complaint title)
  911. const complaintId = $(this).data('id'); // Get the complaint ID
  913. // Toggle complaint fields based on type
  914. $('.complaint-fields').removeClass('active');
  916. if (type === 'specific') {
  917. $('#specific-fields').addClass('active'); // Show specific fields form
  918. $('#others-fields').removeClass('active'); // Hide others form
  919. $('#complaint-title').val(title); // Set the complaint title to the icon name
  920. $('#complaint-id').val(complaintId); // Set the complaint ID to the corresponding ID
  921. } else if (type === 'others') {
  922. $('#others-fields').addClass('active'); // Show others form
  923. $('#specific-fields').removeClass('active'); // Hide specific fields form
  924. $('#complaint-title').val(''); // Clear the complaint title for 'Others'
  925. $('#complaint-id').val(''); // Clear the complaint ID for 'Others'
  926. }
  927. });
  928. });
  932. //for complaint group and complainttype wise options dropdown api
  933. $(document).ready(function () {
  934. const $type = $('#type');
  935. const $subType = $('#sub-type');
  937. $subType.prop('disabled', true);
  939. // Fetch and populate the Type dropdown
  940. $.ajax({
  941. url: '/api/getComplaintCategories',
  942. method: 'GET',
  943. success: function (response) {
  945. const data = typeof response === 'string' ? JSON.parse(response) : response;
  946. console.log('Response:', response); // Log the response to verify
  947. let optionsHtml = '<option value="">Please Select</option>';
  948. data.ComplaintCategoryListResult.forEach(function (group) {
  949. optionsHtml += `<option value="${group.groupid}">${group.groupname}</option>`;
  950. });
  951. $type.html(optionsHtml);
  952. },
  953. error: function (error) {
  954. console.error('Error fetching complaint categories:', error);
  955. }
  956. });
  958. // Handle Type dropdown change
  959. $type.change(function () {
  960. const selectedType = $(this).val();
  961. $subType.empty().append('<option value="">Select complaint</option>');
  963. if (selectedType) {
  965. $.ajax({
  966. url: `/api/getComplaintSubTypes?groupId=${selectedType}`,
  967. method: 'GET',
  968. success: function (response) {
  969. const data = typeof response === 'string' ? JSON.parse(response) : response;
  970. const selectedGroup = data.ComplaintCategoryListResult[0];
  972. console.log(data);
  975. if (selectedGroup && selectedGroup.group) {
  976. $subType.prop('disabled', false);
  977. selectedGroup.group.forEach(function (complaint) {
  978. $subType.append(`<option value="${complaint.id}">${complaint.complaintname}</option>`);
  979. });
  980. } else {
  981. $subType.prop('disabled', true);
  982. }
  983. },
  984. error: function (error) {
  985. console.error('Error fetching sub-types:', error);
  986. $subType.prop('disabled', true);
  987. }
  988. });
  989. } else {
  990. $subType.prop('disabled', true);
  991. }
  992. });
  993. });
  1001. //script for reader
  1002. // Script for reader functionality
  1003. let readerActive = false;
  1005. function toggleReader() {
  1006. const readerBtn = document.getElementById('reader-btn');
  1007. readerActive = !readerActive;
  1008. if (readerActive) {
  1009. readerBtn.classList.add('active');
  1010. readerBtn.textContent = 'Disable Reader';
  1011. enableReading();
  1012. } else {
  1013. readerBtn.classList.remove('active');
  1014. readerBtn.textContent = 'Enable Reader';
  1015. disableReading();
  1016. }
  1017. }
  1019. function enableReading() {
  1020. document.querySelectorAll('.readable').forEach(element => {
  1021. element.addEventListener('mouseenter', speakText);
  1022. element.addEventListener('click', speakText);
  1023. });
  1024. }
  1026. function disableReading() {
  1027. document.querySelectorAll('.readable').forEach(element => {
  1028. element.removeEventListener('mouseenter', speakText);
  1029. element.removeEventListener('click', speakText);
  1030. });
  1031. }
  1033. function speakText(event) {
  1034. if (readerActive) {
  1035. const text = event.target.textContent;
  1036. const utterance = new SpeechSynthesisUtterance(text);
  1037. window.speechSynthesis.speak(utterance);
  1038. }
  1039. }
  1041. //api for saving
  1042. //for sweet alert
  1043. function showSuccessAlert() {
  1044. Swal.fire({
  1045. icon: 'success',
  1046. title: 'Complaint Registration Success',
  1047. text: 'Complaint Number 123456. Use this Number for Complaint Status Check.',
  1048. confirmButtonText: 'Back to Home',
  1049. confirmButtonColor: '#3085d6',
  1050. }).then((result) => {
  1051. if (result.isConfirmed) {
  1052. window.location.href = 'home';
  1053. }
  1054. });
  1055. }
  1058. //Script For Map
  1060. var suggestedRoadName;
  1061. var suggestedWard;
  1062. var suggestedZone;
  1063. var suggestedRoadId;
  1065. function initializeMap() {
  1066. // Create the map
  1067. var map = L.map('map', {attributionControl: false}).setView([13.0827, 80.2707], 9);
  1069. // Add tile layer and track loading status
  1070. var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  1071. maxZoom: 19,
  1072. attributionControl: false,
  1073. }).addTo(map);
  1075. // Hide loader once the map tiles are fully loaded
  1076. tileLayer.on('load', function () {
  1077. document.getElementById('loader').style.display = 'none';
  1078. document.getElementById('map').style.visibility = 'visible'; // Ensure map is visible
  1079. });
  1081. var currentMarker = null;
  1083. // Handle map click events
  1084. map.on('click', function (e) {
  1085. var lat = e.latlng.lat;
  1086. var lng = e.latlng.lng;
  1088. if (currentMarker) {
  1089. map.removeLayer(currentMarker);
  1090. }
  1092. currentMarker = L.marker([lat, lng]).addTo(map);
  1094. fetchLocationInfoByMap(lat, lng, currentMarker);
  1095. });
  1097. // Handle input events in the search box
  1098. document.getElementById('search-box').addEventListener('input', function () {
  1099. var query = this.value.trim();
  1100. if (query.length > 2) {
  1101. fetchSuggestions(query);
  1102. } else {
  1103. document.getElementById('suggestions').style.display = 'none';
  1104. }
  1105. });
  1107. // Handle click events on suggestions
  1108. document.getElementById('suggestions').addEventListener('click', function (e) {
  1109. if (e.target.tagName === 'LI') {
  1110. var latlngArray = JSON.parse(e.target.dataset.latlng);
  1112. suggestedRoadId = e.target.dataset.roadId;
  1113. suggestedRoadName = e.target.dataset.roadName;
  1114. suggestedWard = e.target.dataset.ward;
  1115. suggestedZone = e.target.dataset.zone;
  1117. // Check if the data is in the correct format
  1118. if (Array.isArray(latlngArray) && latlngArray.every(item => Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number')) {
  1120. // Calculate the average latitude and longitude
  1121. var totalLat = 0;
  1122. var totalLng = 0;
  1123. latlngArray.forEach(function (coords) {
  1124. totalLat += coords[1]; // Latitude
  1125. totalLng += coords[0]; // Longitude
  1126. });
  1128. var avgLat = totalLat / latlngArray.length;
  1129. var avgLng = totalLng / latlngArray.length;
  1131. var latlng = [avgLat, avgLng];
  1132. map.setView(latlng, 14);
  1134. if (currentMarker) {
  1135. map.removeLayer(currentMarker);
  1136. }
  1138. currentMarker = L.marker(latlng).addTo(map);
  1140. fetchLocationInfoBySuggestions(latlng[0], latlng[1], currentMarker);
  1142. // Clear the search box value
  1143. document.getElementById('search-box').value = '';
  1145. // Hide the suggestions
  1146. document.getElementById('suggestions').style.display = 'none';
  1147. } else {
  1148. // Convert the incorrect format into the correct format
  1149. const flattenCoordinates = (data) => {
  1150. return data.reduce((acc, item) => {
  1151. if (Array.isArray(item) && Array.isArray(item[0])) {
  1152. // If item is a nested array, flatten it
  1153. acc.push(...flattenCoordinates(item));
  1154. } else if (Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number') {
  1155. // If item is a coordinate pair, add it to the list
  1156. acc.push(item);
  1157. }
  1158. return acc;
  1159. }, []);
  1160. };
  1162. // Flatten the nested latlngArray
  1163. var flattenedLatlngArray = flattenCoordinates(latlngArray);
  1165. // Now, continue with the same logic as before
  1166. var totalLat = 0;
  1167. var totalLng = 0;
  1168. flattenedLatlngArray.forEach(function (coords) {
  1169. totalLat += coords[1]; // Latitude
  1170. totalLng += coords[0]; // Longitude
  1171. });
  1173. var avgLat = totalLat / flattenedLatlngArray.length;
  1174. var avgLng = totalLng / flattenedLatlngArray.length;
  1176. var latlng = [avgLat, avgLng];
  1177. map.setView(latlng, 14);
  1179. if (currentMarker) {
  1180. map.removeLayer(currentMarker);
  1181. }
  1183. currentMarker = L.marker(latlng).addTo(map);
  1185. fetchLocationInfoBySuggestions(latlng[0], latlng[1], currentMarker);
  1187. // Clear the search box value
  1188. document.getElementById('search-box').value = '';
  1190. // Hide the suggestions
  1191. document.getElementById('suggestions').style.display = 'none';
  1192. }
  1193. }
  1194. });
  1195. }
  1197. function fetchSuggestions(query) {
  1198. // ArcGIS API URL to fetch suggestions based on the input query
  1199. 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`;
  1201. fetch(arcgisSuggestionUrl)
  1202. .then(response => response.json())
  1203. .then(data => {
  1204. var suggestions = document.getElementById('suggestions');
  1205. suggestions.innerHTML = '';
  1207. if (data.features && data.features.length > 0) {
  1208. suggestions.style.display = 'block';
  1209. var ul = document.createElement('ul');
  1210. data.features.forEach(function (result) {
  1211. var lat = result.geometry.coordinates[1];
  1212. var lng = result.geometry.coordinates[0];
  1213. var roadName = result.properties.road_name || 'Unknown Road';
  1214. var zone = result.properties.zone || 'Unknown Zone';
  1215. var ward = result.properties.ward || 'Unknown Ward';
  1216. var roadId = result.properties.road_id || 'Unknown Road ID'
  1218. // Creating the suggestion item with road name, zone, and ward
  1219. var li = document.createElement('li');
  1220. li.textContent = `${roadName} - Zone: ${zone}, Ward: ${ward}`;
  1221. li.dataset.latlng = JSON.stringify([lat, lng]);
  1222. li.dataset.roadName = roadName;
  1223. li.dataset.roadId = roadId;
  1224. li.dataset.zone = zone;
  1225. li.dataset.ward = ward;
  1226. ul.appendChild(li);
  1227. });
  1228. suggestions.appendChild(ul);
  1229. } else {
  1230. suggestions.style.display = 'none';
  1231. }
  1232. })
  1233. .catch(error => console.error('Error fetching suggestions:', error));
  1234. }
  1236. function fetchLocationInfoByMap(lat, lng, marker) {
  1237. 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`;
  1239. fetch(arcgisUrl)
  1240. .then(response => response.json())
  1241. .then(data => {
  1242. console.log(data);
  1243. let info;
  1244. if (data.features && data.features.length > 0) {
  1245. const properties = data.features[0].properties;
  1246. const roadName = properties.road_name || 'N/A';
  1247. const zone = properties.zone || 'N/A';
  1248. const ward = properties.ward || 'N/A';
  1249. const roadId = properties.road_id || 'N/A';
  1251. info = `Road Name: ${roadName}<br>Zone: ${zone}<br>Ward: ${ward}<br>Latitude: ${lat}<br>Longitude: ${lng}`;
  1252. document.getElementById("street").value = roadName;
  1253. document.getElementById("latitude_field").value = lat;
  1254. document.getElementById("longitude_field").value = lng;
  1255. document.getElementById("street_id").value = roadId;
  1256. document.getElementById("landmark").value = roadName;
  1257. marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
  1258. } else {
  1259. document.getElementById("street").value = "No road data found for this location";
  1260. document.getElementById("latitude_field").value = "No latitude data found for this location";
  1261. document.getElementById("longitude_field").value = "No latitude data found for this location";
  1262. document.getElementById("street_id").value = "No street id data found for this location";
  1263. document.getElementById("landmark").value = "No landmark data found for this location";
  1264. info = `No road data found for this location`
  1265. marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
  1266. }
  1267. })
  1268. .catch(error => {
  1269. console.error('Error fetching road data:', error);
  1270. marker.bindTooltip(`Error fetching road data.<br>Latitude: ${lat}<br>Longitude: ${lng}`, {permanent: false, direction: 'top'}).openTooltip();
  1271. });
  1272. }
  1274. function fetchLocationInfoBySuggestions(lat, lng, marker) {
  1275. 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`;
  1277. fetch(arcgisUrl)
  1278. .then(response => response.json())
  1279. .then(data => {
  1280. console.log(data);
  1281. let info;
  1282. if (data.features && data.features.length > 0) {
  1283. const properties = data.features[0].properties;
  1284. const roadName = properties.road_name || 'N/A';
  1285. const zone = properties.zone || 'N/A';
  1286. const ward = properties.ward || 'N/A';
  1287. const roadId = properties.road_id || 'N/A';
  1289. info = `Road Name: ${roadName}<br>Zone: ${zone}<br>Ward: ${ward}<br>Latitude: ${lat}<br>Longitude: ${lng}`;
  1290. document.getElementById("street").value = roadName;
  1291. document.getElementById("latitude_field").value = lat;
  1292. document.getElementById("longitude_field").value = lng;
  1293. document.getElementById("street_id").value = roadId;
  1294. document.getElementById("landmark").value = roadName;
  1295. marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
  1296. } else {
  1297. document.getElementById("street").value = suggestedRoadName;
  1298. document.getElementById("latitude_field").value = lat;
  1299. document.getElementById("longitude_field").value = lng;
  1300. document.getElementById("street_id").value = suggestedRoadId;
  1301. document.getElementById("landmark").value = suggestedRoadName;
  1302. info = `Road Name: ${suggestedRoadName}<br>Zone: ${suggestedZone}<br>Ward: ${suggestedWard}<br>Latitude: ${lat}<br>Longitude: ${lng}`
  1303. marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
  1304. }
  1305. })
  1306. .catch(error => {
  1307. console.error('Error fetching road data:', error);
  1308. marker.bindTooltip(`Error fetching road data.<br>Latitude: ${lat}<br>Longitude: ${lng}`, {permanent: false, direction: 'top'}).openTooltip();
  1309. });
  1310. }
  1311. //script for map
  1312. //for saving...
  1313. /* $(document).ready(function () {
  1314. $('#submitButton').click(function (e) {
  1315. e.preventDefault(); // Prevent the default form submission
  1316. var complainantName = $('#summaryName').text().trim();
  1317. var complainantAddr = $('#summaryStreet').text().trim();
  1318. var mobileNo = $('#summaryMobile').text().trim();
  1319. var email = $('#summaryEmail').text().trim();
  1320. var complaintType = $('#summaryComplaintType').text().trim();
  1321. var complaintTitle = $('#summaryComplaintTitle').text().trim();
  1322. var complaintDetails = $('#summaryDescription').text().trim();
  1323. var streetId = $('#summaryStreetId').text().trim();
  1324. var landmark = $('#summaryLandmark').text().trim();
  1325. var latitude = $('#summaryLatitude').text().trim();
  1326. var longtitude = $('#summaryLongitude').text().trim();
  1327. var gender = $('#summaryGender').text().trim();
  1328. var imageSrc = $('#summaryImage').attr('src');
  1330. console.log({
  1331. serviceId: 'RegComplaint',
  1332. ComplainantName: complainantName,
  1333. ComplainantAddr: complainantAddr,
  1334. MobileNo: mobileNo,
  1335. Email: email,
  1336. ComplaintType: complaintType,
  1337. ComplaintTitle: complaintTitle,
  1338. ComplaintDetails: complaintDetails,
  1339. StreetId: streetId,
  1340. Comp_Image: imageSrc,
  1341. latitude: latitude,
  1342. longtitude: longtitude,
  1343. Landmark: landmark,
  1344. gender: gender
  1345. });
  1346. // AJAX call to the API
  1347. $.ajax({
  1348. url: 'https://erp.chennaicorporation.gov.in/pgr/external/mobileservice',
  1349. type: 'POST',
  1350. data: {
  1351. serviceId: 'RegComplaint',
  1352. ComplainantName: complainantName,
  1353. ComplainantAddr: complainantAddr,
  1354. MobileNo: mobileNo,
  1355. Email: email,
  1356. ComplaintType: complaintType,
  1357. ComplaintTitle: complaintTitle,
  1358. ComplaintDetails: complaintDetails,
  1359. StreetId: streetId,
  1360. Comp_Image: imageSrc,
  1361. latitude: latitude,
  1362. longtitude: longtitude,
  1363. Landmark: landmark,
  1364. gender: gender
  1365. },
  1366. success: function (response) {
  1367. // Handle success response
  1368. console.log('Success:', response);
  1369. alert('Complaint registered successfully!');
  1370. // You can also redirect or reset the form here
  1371. },
  1372. error: function (xhr, status, error) {
  1373. // Improved error handling
  1374. console.log('Error:', xhr.responseText, status, error);
  1375. alert('Error: ' + xhr.status + ' ' + xhr.statusText);
  1376. }
  1377. });
  1378. });
  1379. }); */
  1380. $(document).ready(function () {
  1381. $('#submitButton').click(function (e) {
  1382. e.preventDefault(); // Prevent the default form submission
  1384. // Collect data from the form fields
  1385. var complainantName = $('#summaryName').text().trim();
  1386. var complainantAddr = $('#summaryStreet').text().trim();
  1387. var mobileNo = $('#summaryMobile').text().trim();
  1388. var email = $('#summaryEmail').text().trim();
  1389. var complaintType = $('#summaryComplaintType').text().trim();
  1390. var complaintTitle = $('#summaryComplaintTitle').text().trim();
  1391. var complaintDetails = $('#summaryDescription').text().trim();
  1392. var streetId = $('#summaryStreetId').text().trim();
  1393. var landmark = $('#summaryLandmark').text().trim();
  1394. var latitude = $('#summaryLatitude').text().trim();
  1395. var longtitude = $('#summaryLongitude').text().trim(); // Note the misspelling
  1396. var gender = $('#summaryGender').text().trim();
  1397. var imageSrc = $('#summaryImage').attr('src');
  1399. console.log({
  1400. ComplainantName: complainantName,
  1401. ComplainantAddr: complainantAddr,
  1402. MobileNo: mobileNo,
  1403. Email: email,
  1404. ComplaintType: complaintType,
  1405. ComplaintTitle: complaintTitle,
  1406. ComplaintDetails: complaintDetails,
  1407. StreetId: streetId,
  1408. Comp_Image: imageSrc,
  1409. latitude: latitude,
  1410. longtitude: longtitude,
  1411. Landmark: landmark,
  1412. gender: gender
  1413. });
  1415. // AJAX call to your backend controller
  1416. $.ajax({
  1417. url: '/register', // Update to your Spring Boot endpoint
  1418. type: 'POST',
  1419. data: {
  1420. ComplainantName: complainantName,
  1421. ComplainantAddr: complainantAddr,
  1422. MobileNo: mobileNo,
  1423. Email: email,
  1424. ComplaintType: complaintType,
  1425. ComplaintTitle: complaintTitle,
  1426. ComplaintDetails: complaintDetails,
  1427. StreetId: streetId,
  1428. Comp_Image: imageSrc,
  1429. latitude: latitude,
  1430. longtitude: longtitude,
  1431. Landmark: landmark,
  1432. gender: gender
  1433. },
  1434. success: function (response) {
  1435. // SweetAlert upon success
  1436. Swal.fire({
  1437. title: 'Success!',
  1438. text: 'Your complaint has been submitted.',
  1439. icon: 'success',
  1440. confirmButtonText: 'OK'
  1441. }).then((result) => {
  1442. if (result.isConfirmed) {
  1443. // Redirect to home.html after clicking 'OK'
  1444. window.location.href = 'home';
  1445. }
  1446. });
  1447. },
  1448. error: function (xhr, status, error) {
  1449. // Improved error handling
  1450. console.log('Error:', xhr.responseText, status, error);
  1451. alert('Error: ' + xhr.status + ' ' + xhr.statusText);
  1452. }
  1453. });
  1454. });
  1455. });
  1457. </script>
  1459. </body>
  1461. </html>