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.

710 lines
33 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" dir="">
  3. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  5. <body>
  6. <!--[if lt IE 8]>
  7. <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  8. <![endif]-->
  9. <div class="wrapper">
  10. <!-- header top menu Start -->
  11. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  12. <!-- header top menu end -->
  13. <div class="page-wrap">
  14. <!--=============== Left Menu side Start ================-->
  15. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  16. <!--=============== Left side End ================-->
  17. <div class="main-content">
  18. <div class="container-fluid">
  19. <div class="page-header">
  20. <div class="row align-items-end">
  21. <div class="col-lg-8">
  22. <div class="page-header-title">
  23. <i class="fas fa-recycle bg-success"></i>
  24. <div class="d-inline">
  25. <h5>New Request List</h5>
  26. <span>Garbage Collection</span>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="col-lg-4">
  31. <nav class="breadcrumb-container" aria-label="breadcrumb">
  32. <ol class="breadcrumb">
  33. <li class="breadcrumb-item">
  34. <a href="/index"><i class="ik ik-home"></i></a>
  35. </li>
  36. <li class="breadcrumb-item">Garbage Collection</li>
  37. <li class="breadcrumb-item active" aria-current="page">New Request List</li>
  38. </ol>
  39. </nav>
  40. </div>
  41. </div>
  42. </div>
  43. <hr>
  44. <div class="row">
  45. <div class="col-md-12">
  46. <div class="card">
  47. <div class="card-block">
  48. <div>
  49. <table id="garbageDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
  50. <thead class="thead-dark">
  51. <tr role="row">
  52. <th class="text-center no-sort" width="1%">S.No</th>
  53. <th class="text-center">Name</th>
  54. <th class="text-center">Mobile No</th>
  55. <th class="text-center">Email ID</th>
  56. <th class="text-center">Address</th>
  57. <th class="text-center">Request Type</th>
  58. <th class="text-center">Garbage Type</th>
  59. <th class="text-center">Zone</th>
  60. <th class="text-center">Division</th>
  61. <th class="text-center">Status</th>
  62. <!--<th class="text-center" width="10%">Area</th>
  63. <th class="text-center" width="10%">Location</th>
  64. <th class="text-center" width="10%">Street</th>-->
  65. <th class="text-center no-sort" style="width:50px;">Action</th>
  66. </tr>
  67. </theadclass="thead-dark">
  68. <tbody>
  69. <tr th:each="requestlist, i : ${requestlist}" class="requestlist">
  70. <td th:utext="${i.count}" width="1%">0</td>
  71. <td th:utext="${requestlist.name}"></td>
  72. <td th:utext="${requestlist.mobile}"></td>
  73. <td th:utext="${requestlist.email}"></td>
  74. <td th:utext="${requestlist.address}"></td>
  75. <td th:utext="${requestlist.requestType}"></td>
  76. <td th:utext="${requestlist.garbageCategory}"></td>
  77. <td th:utext="${requestlist.zone}"></td>
  78. <td th:utext="${requestlist.division}"></td>
  79. <td th:utext="${requestlist.status}"></td>
  80. <!--<td th:utext="${requestlist.area}"></td>
  81. <td th:utext="${requestlist.locality}"></td>
  82. <td th:utext="${requestlist.street}"></td>-->
  83. <td class="text-center" style="width:50px;">
  84. <a th:href="@{#}" th:onclick="return callView([[${requestlist.requestId}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Garbage Request Details" data-original-title="View Garbage Request Details"><i class="ik ik-eye f-16 text-blue"></i></a>&nbsp;&nbsp;
  85. </td>
  86. </tr>
  87. </tbody>
  88. <tfoot class="thead-dark">
  89. <tr>
  90. <th class="text-center no-sort" width="1%">S.No</th>
  91. <th class="text-center">Name</th>
  92. <th class="text-center">Mobile No</th>
  93. <th class="text-center">Email ID</th>
  94. <th class="text-center">Address</th>
  95. <th class="text-center">Request Type</th>
  96. <th class="text-center">Garbage Type</th>
  97. <th class="text-center">Zone</th>
  98. <th class="text-center">Division</th>
  99. <th class="text-center">Status</th>
  100. <!--<th class="text-center" width="10%">Area</th>
  101. <th class="text-center" width="10%">Location</th>
  102. <th class="text-center" width="10%">Street</th>-->
  103. <th class="text-center no-sort" style="width:50px;">Action</th>
  104. </tr>
  105. </tfoot>
  106. </table>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  115. </div>
  116. </div>
  117. <div class="modal fade" id="garbageRequestDetailsView" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
  118. <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
  119. <div class="modal-content">
  120. <div class="modal-header thead-dark">
  121. <h5 class="modal-title" id="modal-title">Garbage Request Details</h5>
  122. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  123. </div>
  124. <div class="modal-body">
  125. <div class="row">
  126. <div class="col-xl-6 col-md-6" id="garbageRequestDetails">
  127. &nbsp;
  128. </div>
  129. <div class="col-xl-6 col-md-6 bg-light" style="border-left: 1px solid #dee2e6;" id="requestActionDetails">
  130. &nbsp;
  131. </div>
  132. </div>
  133. </div>
  134. <!--<div class="modal-footer">
  135. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  136. </div>-->
  137. </div>
  138. </div>
  139. </div>
  140. <div class="modal fade" id="garbageRequestStatusForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
  141. <div class="modal-dialog modal-dialog-centered" role="document">
  142. <div class="modal-content">
  143. <div class="modal-header thead-dark">
  144. <h5 class="modal-title" id="modal-title">Garbage Request Status Update Form</h5>
  145. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  146. </div>
  147. <div class="modal-body">
  148. <div class="row">
  149. <div class="col-xl-12 col-md-12 bg-light" id="requestActionUpdateHTML">
  150. &nbsp;
  151. </div>
  152. </div>
  153. </div>
  154. <!--<div class="modal-footer">
  155. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  156. </div>-->
  157. </div>
  158. </div>
  159. </div>
  160. <div class="modal fade" id="statusHistory" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
  161. <div class="modal-dialog modal-dialog-centered" role="document">
  162. <div class="modal-content">
  163. <div class="modal-header thead-dark">
  164. <h5 class="modal-title" id="modal-title">Status Timeline</h5>
  165. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  166. </div>
  167. <div class="modal-body pb-0 pt-0">
  168. <div class="row">
  169. <div class="card mb-0" style="">
  170. <div class="card-body timeline p-0" id="timelineHTML">
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. <!--<div class="modal-footer">
  176. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  177. </div>-->
  178. </div>
  179. </div>
  180. </div>
  181. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  182. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  183. <script>
  184. $(document).ready(function() {
  185. // DataTables buttons configuration
  186. var buttons = [
  187. {
  188. extend: 'pageLength',
  189. className: 'btn btn-warning'
  190. },
  191. {
  192. title: 'Data export',
  193. extend: 'copyHtml5',
  194. text: 'Copy',
  195. className: 'btn btn-secondary',
  196. id: 'copyBtn',
  197. exportOptions: {
  198. columns: ':visible'
  199. }
  200. },
  201. {
  202. extend: 'excelHtml5',
  203. text: 'Excel',
  204. className: 'btn btn-secondary',
  205. id: 'excelBtn',
  206. exportOptions: {
  207. columns: ':visible'
  208. }
  209. },
  210. {
  211. extend: 'csvHtml5',
  212. text: 'CSV',
  213. className: 'btn btn-secondary',
  214. id: 'csvBtn',
  215. exportOptions: {
  216. columns: ':visible'
  217. }
  218. },
  219. {
  220. extend: 'pdfHtml5',
  221. text: 'PDF',
  222. className: 'btn btn-secondary',
  223. id: 'pdfBtn',
  224. exportOptions: {
  225. columns: ':visible'
  226. }
  227. },
  228. {
  229. extend: 'colvis',
  230. text: 'Column visibility',
  231. className: 'btn btn-warning',
  232. id: 'colvisBtn'
  233. },
  234. // Additional button
  235. /*
  236. {
  237. text: '<i class="far fa-plus-square"></i> Add New Asset',
  238. className: 'btn btn-warning',
  239. action: function () {
  240. callAdd();
  241. }
  242. }*/
  243. //'colvis'
  244. ];
  245. $('#garbageDatatable').DataTable( {
  246. dom: 'Bftip',
  247. columnDefs: [
  248. { targets: 'no-sort', orderable: false }
  249. ],
  250. lengthMenu: [
  251. [ 50, 100, 200, 500, -1 ],
  252. [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
  253. ],
  254. scrollY: '50vh',
  255. scrollX: true,
  256. fixedColumns: {
  257. left: 1,
  258. right: 1
  259. },
  260. buttons: [buttons],
  261. fixedHeader: true,
  262. autoWidth: true,
  263. responsive: true,
  264. searching: false,
  265. select: false,
  266. processing: false,
  267. } );
  268. } );
  269. function callUpdateForm(requestid,statusid){
  270. $('#garbageRequestStatusForm').modal({
  271. backdrop: 'static',
  272. keyboard: false
  273. })
  274. var requestid = requestid;
  275. var apiUrl = '/api/garbagecollection/getStatusById?statusid='+statusid;
  276. $.ajax({
  277. url: apiUrl,
  278. type: 'GET',
  279. dataType: 'json',
  280. success: function(jsonResponse) {
  281. // Handle the API response data here
  282. console.log('Data from API:', jsonResponse);
  283. // Parse the JSON response into a JavaScript object
  284. // Check if jsonResponse is not empty or null
  285. if (jsonResponse && jsonResponse.length > 0) {
  286. var data = jsonResponse[0];
  287. // Now you can use 'data' as needed
  288. var data = jsonResponse[0];
  289. var status = data.status;
  290. } else {
  291. console.log('No data available.');
  292. var status = 'Open';
  293. }
  294. var requestActionDetails = `<form action="#" id="request_action_save" method="post" enctype="multipart/form-data" onsubmit="return savestatus();">
  295. <input type="hidden" name="request_id" id="request_id" value="${requestid}"/>
  296. <div class="row">
  297. <div class="col-xl-12 col-md-12"> <strong>Action Status</strong>
  298. <p class="text-muted">
  299. <select class="form-control select2" name="status" id="status" required>
  300. <option value="">---Select---</option>
  301. <option value="Open">Open</option>
  302. <option value="Inprogress">Inprogress</option>
  303. <option value="Pending">Pending</option>
  304. <option value="Close">Close</option>
  305. <option value="Out Of Scope">Out Of Scope</option>
  306. </select>
  307. </p>
  308. </div>
  309. <div class="col-xl-12 col-md-12"> <strong>Action Comments</strong>
  310. <p class="text-muted">
  311. <textarea class="form-control" name="comments" id="comments" rows="5" required=""></textarea>
  312. </p>
  313. </div>
  314. <div class="col-xl-12 col-md-12"> <strong>Before Image</strong>
  315. <p class="text-muted">
  316. <input type="file" accept="image/*" class="form-control" name="garbageFile2" id="garbageFile2">
  317. </p>
  318. </div>
  319. <div class="col-xl-12 col-md-12"> <strong>After Image</strong>
  320. <p class="text-muted">
  321. <input type="file" accept="image/*" class="form-control" name="garbageFile" id="garbageFile">
  322. </p>
  323. </div>
  324. <div class="col-xl-12 col-md-12 text-right">
  325. <button type="submit" class="btn btn-primary btn-sm">Save</button>
  326. </div>
  327. </div>
  328. </form>`;
  329. $("#requestActionUpdateHTML").html(requestActionDetails);
  330. // Set the selected option"
  331. $("#status").val(status);
  332. },
  333. error: function(xhr, status, error) {
  334. // Handle errors here
  335. console.error('Error fetching data:', status, error);
  336. }
  337. });
  338. $('#garbageRequestStatusForm').modal('show');
  339. return false;
  340. }
  341. function callView(requestid){
  342. $('#garbageRequestDetailsView').modal({
  343. backdrop: 'static',
  344. keyboard: false
  345. })
  346. $('#garbageRequestDetailsView').modal('show');
  347. getGarbageDetails(requestid);
  348. $('#garbageRequestStatusForm').modal('hide');
  349. return false;
  350. }
  351. function getGarbageDetails(requestid){
  352. var requestid = requestid;
  353. var apiUrl = '/api/garbagecollection/getGarbageDetails?requestid='+requestid;
  354. $.ajax({
  355. url: apiUrl,
  356. type: 'GET',
  357. dataType: 'json',
  358. success: function(jsonResponse) {
  359. // Handle the API response data here
  360. console.log('Data from API:', jsonResponse);
  361. // Parse the JSON response into a JavaScript object
  362. var data = jsonResponse[0];
  363. var statusid = data.statusid;
  364. // HTML content
  365. var garbageDetails = `<div class="row">
  366. <div class="col-xl-12 col-md-12"> <strong>Name</strong>
  367. <p class="text-muted form-control showInputValue">${data.name}</p>
  368. </div>
  369. <div class="col-xl-6 col-md-12"> <strong>Mobile No</strong>
  370. <p class="text-muted form-control showInputValue">${data.mobile}</p>
  371. </div>
  372. <div class="col-xl-6 col-md-12"> <strong>Email ID</strong>
  373. <p class="text-muted form-control showInputValue">${data.email}</p>
  374. </div>
  375. <div class="col-xl-12 col-md-12"> <strong>Address</strong>
  376. <p class="text-muted form-control showInputValue">${data.address}</p>
  377. </div>
  378. <div class="col-xl-12 col-md-12"> <strong>Nearest Landmark</strong>
  379. <p class="text-muted form-control showInputValue">${data.name}</p>
  380. </div>
  381. <div class="col-xl-6 col-md-12"> <strong>Request Type</strong>
  382. <p class="text-muted form-control showInputValue">${data.request_type}</p>
  383. </div>
  384. <div class="col-xl-6 col-md-12"> <strong>Garbage Type</strong>
  385. <p class="text-muted form-control showInputValue">${data.garbage_category}</p>
  386. </div>
  387. <div class="col-xl-4 col-md-12"> <strong>Zone</strong>
  388. <p class="text-muted form-control showInputValue">${data.zone}</p>
  389. </div>
  390. <div class="col-xl-4 col-md-12"> <strong>Division</strong>
  391. <p class="text-muted form-control showInputValue">${data.division}</p>
  392. </div>
  393. <div class="col-xl-4 col-md-12"> <strong>Area</strong>
  394. <p class="text-muted form-control showInputValue">${data.area}</p>
  395. </div>
  396. <div class="col-xl-6 col-md-12"> <strong>Location</strong>
  397. <p class="text-muted form-control showInputValue">${data.locality}</p>
  398. </div>
  399. <div class="col-xl-6 col-md-12"> <strong>Street</strong>
  400. <p class="text-muted form-control showInputValue">${data.street}</p>
  401. </div>
  402. </div>`;
  403. $("#garbageRequestDetails").html(garbageDetails);
  404. showActionform(requestid,statusid);
  405. },
  406. error: function(xhr, status, error) {
  407. // Handle errors here
  408. console.error('Error fetching data:', status, error);
  409. }
  410. });
  411. }
  412. function showActionform(requestid,statusid){
  413. if(statusid>0)
  414. {
  415. getStatus(requestid,statusid);
  416. }
  417. else{
  418. getActionFormData(requestid,statusid);
  419. }
  420. }
  421. function getActionFormData(requestid,statusid){
  422. var requestid = requestid;
  423. var apiUrl = '/api/garbagecollection/getStatusById?statusid='+statusid;
  424. $.ajax({
  425. url: apiUrl,
  426. type: 'GET',
  427. dataType: 'json',
  428. success: function(jsonResponse) {
  429. // Handle the API response data here
  430. console.log('Data from API:', jsonResponse);
  431. // Parse the JSON response into a JavaScript object
  432. // Check if jsonResponse is not empty or null
  433. if (jsonResponse && jsonResponse.length > 0) {
  434. var data = jsonResponse[0];
  435. // Now you can use 'data' as needed
  436. var data = jsonResponse[0];
  437. var status = data.status;
  438. } else {
  439. console.log('No data available.');
  440. var status = 'Open';
  441. }
  442. var requestActionDetails = `<form action="#" id="request_action_save" method="post" enctype="multipart/form-data" onsubmit="return savestatus();">
  443. <input type="hidden" name="request_id" id="request_id" value="${requestid}"/>
  444. <div class="row">
  445. <div class="col-xl-12 col-md-12"> <strong>Action Status</strong>
  446. <p class="text-muted">
  447. <select class="form-control select2" name="status" id="status" required>
  448. <option value="">---Select---</option>
  449. <option value="Open">Open</option>
  450. <option value="Inprogress">Inprogress</option>
  451. <option value="Pending">Pending</option>
  452. <option value="Close">Close</option>
  453. <option value="Out Of Scope">Out Of Scope</option>
  454. </select>
  455. </p>
  456. </div>
  457. <div class="col-xl-12 col-md-12"> <strong>Action Comments</strong>
  458. <p class="text-muted">
  459. <textarea class="form-control" name="comments" id="comments" rows="5" required=""></textarea>
  460. </p>
  461. </div>
  462. <div class="col-xl-12 col-md-12"> <strong>Before Image</strong>
  463. <p class="text-muted">
  464. <input type="file" accept="image/*" class="form-control" name="garbageFile2" id="garbageFile2">
  465. </p>
  466. </div>
  467. <div class="col-xl-12 col-md-12"> <strong>After Image</strong>
  468. <p class="text-muted">
  469. <input type="file" accept="image/*" class="form-control" name="garbageFile" id="garbageFile">
  470. </p>
  471. </div>
  472. <div class="col-xl-12 col-md-12 text-right">
  473. <button type="submit" class="btn btn-primary btn-sm">Save</button>
  474. </div>
  475. </div>
  476. </form>`;
  477. $("#requestActionDetails").html(requestActionDetails);
  478. // Set the selected option"
  479. $("#status").val(status);
  480. },
  481. error: function(xhr, status, error) {
  482. // Handle errors here
  483. console.error('Error fetching data:', status, error);
  484. }
  485. });
  486. }
  487. function getStatus(requestid,statusid){
  488. var apiUrl = '/api/garbagecollection/getStatusById?statusid='+statusid;
  489. $.ajax({
  490. url: apiUrl,
  491. type: 'GET',
  492. dataType: 'json',
  493. success: function(jsonResponse) {
  494. // Handle the API response data here
  495. console.log('Data from API:', jsonResponse);
  496. // Parse the JSON response into a JavaScript object
  497. // Check if jsonResponse is not empty or null
  498. if (jsonResponse && jsonResponse.length > 0) {
  499. var data = jsonResponse[0];
  500. // Now you can use 'data' as needed
  501. var data = jsonResponse[0];
  502. var status = data.status;
  503. } else {
  504. var status = 'Open';
  505. console.log('No data available.');
  506. }
  507. var requestActionDetails = `<div class="row">
  508. <div class="col-xl-12 col-md-12 text-center">
  509. <a href="#" class="btn btn-info" onclick="return callUpdateForm(${requestid},${statusid});"}>Edit / Update Current Status</a>
  510. <a href="#" class="btn btn-warning" onclick="return callStatusHistory(${requestid},${statusid});"}>View Full Status History</a>
  511. </div>
  512. <div class="col-xl-12 col-md-12"> <strong>Status</strong>
  513. <p class="text-muted form-control showInputValue">${data.status}</p>
  514. </div>
  515. <div class="col-xl-12 col-md-12"> <strong>Officer Comments</strong>
  516. <p class="text-muted form-control showInputValue">${data.comments}</p>
  517. </div>
  518. <div class="col-xl-12 col-md-12"> <strong>Status Date</strong>
  519. <p class="text-muted form-control showInputValue">${data.cDate}</p>
  520. </div>
  521. </div>
  522. `;
  523. $("#requestActionDetails").html(requestActionDetails);
  524. // Set the selected option"
  525. $("#status").val(status);
  526. },
  527. error: function(xhr, status, error) {
  528. // Handle errors here
  529. console.error('Error fetching data:', status, error);
  530. }
  531. });
  532. }
  533. function savestatus(){
  534. var apiUrl = '/api/garbagecollection/saveStatus';
  535. // Create a FormData object to hold your form data
  536. var formData = new FormData();
  537. //formData.append('file', fileInput.files[0]); // Replace 'file' with your actual file input name
  538. var requestid = $('#request_id').val();
  539. // Add other form fields as needed
  540. formData.append('status', $('#status').val());
  541. formData.append('comments', $('#comments').val());
  542. formData.append('request_id', requestid);
  543. // ... other fields
  544. $.ajax({
  545. url: apiUrl,
  546. type: 'POST',
  547. data: formData,
  548. contentType: false, // Set content type to false for multipart form data
  549. processData: false, // Disable processing of data for multipart form data
  550. success: function(response) {
  551. alert(response);
  552. // Handle the API response data here
  553. console.log('Data from API:', response);
  554. // Parse the JSON response into a JavaScript object
  555. callView(requestid);
  556. },
  557. error: function(xhr, status, error) {
  558. // Handle errors here
  559. console.error('Error fetching data:', status, error);
  560. }
  561. });
  562. return false;
  563. }
  564. function callStatusHistory(requestid, statusid){
  565. $('#statusHistory').modal({
  566. backdrop: 'static',
  567. keyboard: false
  568. })
  569. $('#statusHistory').modal('show');
  570. var apiUrl = '/api/garbagecollection/getStatus?requestid='+requestid;
  571. $.ajax({
  572. url: apiUrl,
  573. type: 'GET',
  574. dataType: 'json',
  575. success: function(jsonResponse) {
  576. // Handle the API response data here
  577. console.log('Data from API:', jsonResponse);
  578. // Parse the JSON response into a JavaScript object
  579. // Check if jsonResponse is not empty or null
  580. if (jsonResponse && jsonResponse.length > 0) {
  581. var data = jsonResponse[0];
  582. // Now you can use 'data' as needed
  583. var data = jsonResponse[0];
  584. // For Request Created Date//
  585. var cdate = datetotext(data.request.cDate);
  586. var cdate_parts = cdate.split("-"); // format -> 14-Monday-AUGUST-2023-16:10:22
  587. var day = cdate_parts[0];
  588. var dayName = cdate_parts[1];
  589. var monthName = cdate_parts[2];
  590. var year = cdate_parts[3];
  591. var time = cdate_parts[4];
  592. /////////////////
  593. var status = data.status;
  594. var statusListHTML="";
  595. for(var i=0; i<jsonResponse.length; i++){
  596. var statusdata = jsonResponse[i];
  597. var cdate_parts = statusdata.cDate.split(" ");
  598. var status = `<div class="col-6 pl-0">Status: <label class="text-success mb-1"><b>${statusdata.status}</b></div><div class="col-6 pr-0 text-right"></label> Date: <label class="text-warning mb-1"><b>${cdate_parts[0]}</b></label></div>`;
  599. statusListHTML += `<li>
  600. <div class="bullet bg-green"></div>
  601. <div class="time">${cdate_parts[1]}</div>
  602. <div class="desc">
  603. <div class="row p-0 m-0">${status}</div>
  604. Comments:
  605. <p class="form-control showInputValue">${statusdata.comments}</p>
  606. </div>
  607. </li>`;
  608. }
  609. } else {
  610. var status = 'Open';
  611. console.log('No data available.');
  612. }
  613. var statusHTML=`<div class="header bg-theme" style="background-image: url('/assets/images/placeimg_400_200_nature.jpg')">
  614. <div class="text-center">Request Created</div>
  615. <div class="color-overlay d-flex align-items-center">
  616. <div class="col-4 text-center day-number">${day}</div>
  617. <div class="col-4 text-center date-right">
  618. <div class="day-name">${dayName}</div>
  619. <div class="month">${monthName} ${year}</div>
  620. </div>
  621. <div class="col-4 text-center date-right pr-1">
  622. <div class="day-name">${time}</div>
  623. </div>
  624. </div>
  625. </div>
  626. <ul>
  627. ${statusListHTML}
  628. </ul>`;
  629. $("#timelineHTML").html(statusHTML);
  630. },
  631. error: function(xhr, status, error) {
  632. // Handle errors here
  633. console.error('Error fetching data:', status, error);
  634. }
  635. });
  636. return false;
  637. }
  638. function datetotext(dateval){
  639. var date = new Date(dateval);
  640. var day = date.getDate(); // Get the day of the month (e.g., 8)
  641. var dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()]; // Get the day name (e.g., Monday)
  642. var monthName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][date.getMonth()]; // Get the month name (e.g., February)
  643. var year = date.getFullYear(); // Get the year (e.g., 2018)
  644. var time = date.toLocaleTimeString(); // Get the time (e.g., 12:00:00 AM)
  645. var formattedDate = day + '-' + dayName + '-' + monthName.toUpperCase() + '-' + year + '-' + time;
  646. return formattedDate;
  647. }
  648. </script>
  649. </body>
  650. </html>