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.

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