|
|
<!DOCTYPE html><html lang="en" dir=""><html xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"></head> <body> <!--[if lt IE 8]>
<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> <![endif]-->
<div class="wrapper"> <!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end -->
<div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================--> <div class="main-content"> <div class="container-fluid"> <div class="page-header"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <i class="fas fa-shipping-fast bg-success"></i> <div class="d-inline"> <h5>Completed Request List</h5> <span>Garbage Collection</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="/index"><i class="ik ik-home"></i></a> </li> <li class="breadcrumb-item">Garbage Collection</li> <li class="breadcrumb-item active" aria-current="page">Completed Request List</li> </ol> </nav> </div> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-block"> <div> <table id="garbageDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%"> <thead class="thead-dark"> <tr role="row"> <th class="text-center no-sort" width="1%">S.No</th> <th class="text-center" width="20%">Name</th> <th class="text-center" width="10%">Mobile No</th> <th class="text-center" width="10%">Email ID</th> <th class="text-center" width="10%">Address</th> <th class="text-center" width="20%">Request Type</th> <th class="text-center" width="20%">Garbage Type</th> <th class="text-center" width="20%">Zone</th> <th class="text-center" width="10%">Division</th> <!--<th class="text-center" width="10%">Area</th>
<th class="text-center" width="10%">Location</th> <th class="text-center" width="10%">Street</th>--> <th class="text-center no-sort" style="width:50px;">Action</th> </tr> </theadclass="thead-dark"> <tbody> <tr th:each="requestlist, i : ${requestlist}" class="requestlist"> <td th:utext="${i.count}">0</td> <td th:utext="${requestlist.name}"></td> <td th:utext="${requestlist.mobile}"></td> <td th:utext="${requestlist.email}"></td> <td th:utext="${requestlist.address}"></td> <td th:utext="${requestlist.requestType}"></td> <td th:utext="${requestlist.garbageCategory}"></td> <td th:utext="${requestlist.zone}"></td> <td th:utext="${requestlist.division}"></td> <!--<td th:utext="${requestlist.area}"></td>
<td th:utext="${requestlist.locality}"></td> <td th:utext="${requestlist.street}"></td>--> <td class="text-center"> <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> </td> </tr> </tbody> <tfoot class="thead-dark"> <tr> <th class="text-center">S.No</th> <th class="text-center" width="20%">Name</th> <th class="text-center" width="10%">Mobile No</th> <th class="text-center" width="10%">Email ID</th> <th class="text-center" width="10%">Address</th> <th class="text-center" width="20%">Request Type</th> <th class="text-center" width="20%">Garbage Type</th> <th class="text-center" width="20%">Zone</th> <th class="text-center" width="10%">Division</th> <!--<th class="text-center" width="10%">Area</th>
<th class="text-center" width="10%">Location</th> <th class="text-center" width="10%">Street</th>--> <th class="text-center">Action</th> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </div> </div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div> <div class="modal fade" id="garbageRequestDetailsView" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-xl" role="document"> <div class="modal-content"> <div class="modal-header thead-dark"> <h5 class="modal-title" id="modal-title">Garbage Request Details</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="row"> <div class="col-xl-6 col-md-6" id="garbageRequestDetails"> </div> <div class="col-xl-6 col-md-6 bg-light" style="border-left: 1px solid #dee2e6;" id="requestActionDetails"> </div> </div> </div> <!--<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div>--> </div> </div> </div> <div class="modal fade" id="garbageRequestStatusForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header thead-dark"> <h5 class="modal-title" id="modal-title">Garbage Request Status Update Form</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="row"> <div class="col-xl-12 col-md-12 bg-light" id="requestActionUpdateHTML"> </div> </div> </div> <!--<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div>--> </div> </div> </div> <div class="modal fade" id="statusHistory" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header thead-dark"> <h5 class="modal-title" id="modal-title">Status Timeline</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body pb-0 pt-0"> <div class="row"> <div class="card mb-0" style=""> <div class="card-body timeline p-0" id="timelineHTML"> </div> </div> </div> </div> <!--<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div>--> </div> </div> </div> <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> <script th:replace="~{fragments/modules/base/script :: script}"></script> <script> $(document).ready(function() { // DataTables buttons configuration var buttons = [ { extend: 'pageLength', className: 'btn btn-warning' }, { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary', id: 'copyBtn', exportOptions: { columns: ':visible' } }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn', exportOptions: { columns: ':visible' } }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn', exportOptions: { columns: ':visible' } }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn', exportOptions: { columns: ':visible' } }, // Additional button /* { text: '<i class="far fa-plus-square"></i> Add New Asset', className: 'btn btn-warning', action: function () { callAdd(); } }*/ 'colvis' ]; $('#garbageDatatable').DataTable( { dom: 'Bftip', columnDefs: [ { targets: 'no-sort', orderable: false } ], lengthMenu: [ [ 50, 100, 200, 500, -1 ], [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ] ], scrollY: '50vh', fixedColumns: { left: 1, right: 1 }, buttons: [buttons], fixedHeader: true, autoWidth: true, responsive: true, searching: false, select: false, processing: false, } ); } ); function callUpdateForm(requestid,statusid){ $('#garbageRequestStatusForm').modal({ backdrop: 'static', keyboard: false }) var requestid = requestid; var apiUrl = '/api/garbagecollection/getStatusById?statusid='+statusid; $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', success: function(jsonResponse) { // Handle the API response data here console.log('Data from API:', jsonResponse); // Parse the JSON response into a JavaScript object // Check if jsonResponse is not empty or null if (jsonResponse && jsonResponse.length > 0) { var data = jsonResponse[0]; // Now you can use 'data' as needed var data = jsonResponse[0]; var status = data.status; } else { console.log('No data available.'); var status = 'Open'; } var requestActionDetails = `<form action="#" id="request_action_save" method="post" enctype="multipart/form-data" onsubmit="return savestatus();"> <input type="hidden" name="request_id" id="request_id" value="${requestid}"/> <div class="row"> <div class="col-xl-12 col-md-12"> <strong>Action Status</strong> <p class="text-muted"> <select class="form-control select2" name="status" id="status" required> <option value="">---Select---</option> <option value="Open">Open</option> <option value="Inprogress">Inprogress</option> <option value="Pending">Pending</option> <option value="Close">Close</option> <option value="Out Of Scope">Out Of Scope</option> </select> </p> </div> <div class="col-xl-12 col-md-12"> <strong>Action Comments</strong> <p class="text-muted"> <textarea class="form-control" name="comments" id="comments" rows="5" required=""></textarea> </p> </div> <div class="col-xl-12 col-md-12"> <strong>Before Image</strong> <p class="text-muted"> <input type="file" accept="image/*" class="form-control" name="garbageFile2" id="garbageFile2"> </p> </div> <div class="col-xl-12 col-md-12"> <strong>After Image</strong> <p class="text-muted"> <input type="file" accept="image/*" class="form-control" name="garbageFile" id="garbageFile"> </p> </div> <div class="col-xl-12 col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-sm">Save</button> </div> </div> </form>`; $("#requestActionUpdateHTML").html(requestActionDetails); // Set the selected option" $("#status").val(status); }, error: function(xhr, status, error) { // Handle errors here console.error('Error fetching data:', status, error); } }); $('#garbageRequestStatusForm').modal('show'); return false; } function callView(requestid){ $('#garbageRequestDetailsView').modal({ backdrop: 'static', keyboard: false }) $('#garbageRequestDetailsView').modal('show'); getGarbageDetails(requestid); $('#garbageRequestStatusForm').modal('hide'); return false; } function getGarbageDetails(requestid){ var requestid = requestid; var apiUrl = '/api/garbagecollection/getGarbageDetails?requestid='+requestid; $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', success: function(jsonResponse) { // Handle the API response data here console.log('Data from API:', jsonResponse); // Parse the JSON response into a JavaScript object var data = jsonResponse[0]; var statusid = data.statusid; // HTML content var garbageDetails = `<div class="row"> <div class="col-xl-12 col-md-12"> <strong>Name</strong> <p class="text-muted form-control showInputValue">${data.name}</p> </div> <div class="col-xl-6 col-md-12"> <strong>Mobile No</strong> <p class="text-muted form-control showInputValue">${data.mobile}</p> </div> <div class="col-xl-6 col-md-12"> <strong>Email ID</strong> <p class="text-muted form-control showInputValue">${data.email}</p> </div> <div class="col-xl-12 col-md-12"> <strong>Address</strong> <p class="text-muted form-control showInputValue">${data.address}</p> </div> <div class="col-xl-12 col-md-12"> <strong>Nearest Landmark</strong> <p class="text-muted form-control showInputValue">${data.name}</p> </div> <div class="col-xl-6 col-md-12"> <strong>Request Type</strong> <p class="text-muted form-control showInputValue">${data.request_type}</p> </div> <div class="col-xl-6 col-md-12"> <strong>Garbage Type</strong> <p class="text-muted form-control showInputValue">${data.garbage_category}</p> </div> <div class="col-xl-4 col-md-12"> <strong>Zone</strong> <p class="text-muted form-control showInputValue">${data.zone}</p> </div> <div class="col-xl-4 col-md-12"> <strong>Division</strong> <p class="text-muted form-control showInputValue">${data.division}</p> </div> <div class="col-xl-4 col-md-12"> <strong>Area</strong> <p class="text-muted form-control showInputValue">${data.area}</p> </div> <div class="col-xl-6 col-md-12"> <strong>Location</strong> <p class="text-muted form-control showInputValue">${data.locality}</p> </div> <div class="col-xl-6 col-md-12"> <strong>Street</strong> <p class="text-muted form-control showInputValue">${data.street}</p> </div> </div>`; $("#garbageRequestDetails").html(garbageDetails); showActionform(requestid,statusid); }, error: function(xhr, status, error) { // Handle errors here console.error('Error fetching data:', status, error); } }); } function showActionform(requestid,statusid){ if(statusid>0) { getStatus(requestid,statusid); } else{ getActionFormData(requestid,statusid); } } function getActionFormData(requestid,statusid){ var requestid = requestid; var apiUrl = '/api/garbagecollection/getStatusById?statusid='+statusid; $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', success: function(jsonResponse) { // Handle the API response data here console.log('Data from API:', jsonResponse); // Parse the JSON response into a JavaScript object // Check if jsonResponse is not empty or null if (jsonResponse && jsonResponse.length > 0) { var data = jsonResponse[0]; // Now you can use 'data' as needed var data = jsonResponse[0]; var status = data.status; } else { console.log('No data available.'); var status = 'Open'; } var requestActionDetails = `<form action="#" id="request_action_save" method="post" enctype="multipart/form-data" onsubmit="return savestatus();"> <input type="hidden" name="request_id" id="request_id" value="${requestid}"/> <div class="row"> <div class="col-xl-12 col-md-12"> <strong>Action Status</strong> <p class="text-muted"> <select class="form-control select2" name="status" id="status" required> <option value="">---Select---</option> <option value="Open">Open</option> <option value="Inprogress">Inprogress</option> <option value="Pending">Pending</option> <option value="Close">Close</option> <option value="Out Of Scope">Out Of Scope</option> </select> </p> </div> <div class="col-xl-12 col-md-12"> <strong>Action Comments</strong> <p class="text-muted"> <textarea class="form-control" name="comments" id="comments" rows="5" required=""></textarea> </p> </div> <div class="col-xl-12 col-md-12"> <strong>Before Image</strong> <p class="text-muted"> <input type="file" accept="image/*" class="form-control" name="garbageFile2" id="garbageFile2"> </p> </div> <div class="col-xl-12 col-md-12"> <strong>After Image</strong> <p class="text-muted"> <input type="file" accept="image/*" class="form-control" name="garbageFile" id="garbageFile"> </p> </div> <div class="col-xl-12 col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-sm">Save</button> </div> </div> </form>`; $("#requestActionDetails").html(requestActionDetails); // Set the selected option" $("#status").val(status); }, error: function(xhr, status, error) { // Handle errors here console.error('Error fetching data:', status, error); } }); } function getStatus(requestid,statusid){ var apiUrl = '/api/garbagecollection/getStatusById?statusid='+statusid; $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', success: function(jsonResponse) { // Handle the API response data here console.log('Data from API:', jsonResponse); // Parse the JSON response into a JavaScript object // Check if jsonResponse is not empty or null if (jsonResponse && jsonResponse.length > 0) { var data = jsonResponse[0]; // Now you can use 'data' as needed var data = jsonResponse[0]; var status = data.status; } else { var status = 'Open'; console.log('No data available.'); } var requestActionDetails = `<div class="row"> <div class="col-xl-12 col-md-12 text-center"> <a href="#" class="btn btn-info" onclick="return callUpdateForm(${requestid},${statusid});"}>Edit / Update Current Status</a> <a href="#" class="btn btn-warning" onclick="return callStatusHistory(${requestid},${statusid});"}>View Full Status History</a> </div> <div class="col-xl-12 col-md-12"> <strong>Status</strong> <p class="text-muted form-control showInputValue">${data.status}</p> </div> <div class="col-xl-12 col-md-12"> <strong>Officer Comments</strong> <p class="text-muted form-control showInputValue">${data.comments}</p> </div> <div class="col-xl-12 col-md-12"> <strong>Status Date</strong> <p class="text-muted form-control showInputValue">${data.cDate}</p> </div> </div> `; $("#requestActionDetails").html(requestActionDetails); // Set the selected option" $("#status").val(status); }, error: function(xhr, status, error) { // Handle errors here console.error('Error fetching data:', status, error); } }); } function savestatus(){ var apiUrl = '/api/garbagecollection/saveStatus'; // Create a FormData object to hold your form data var formData = new FormData(); //formData.append('file', fileInput.files[0]); // Replace 'file' with your actual file input name var requestid = $('#request_id').val(); // Add other form fields as needed formData.append('status', $('#status').val()); formData.append('comments', $('#comments').val()); formData.append('request_id', requestid); // ... other fields
$.ajax({ url: apiUrl, type: 'POST', data: formData, contentType: false, // Set content type to false for multipart form data processData: false, // Disable processing of data for multipart form data success: function(response) { alert(response); // Handle the API response data here console.log('Data from API:', response); // Parse the JSON response into a JavaScript object callView(requestid); }, error: function(xhr, status, error) { // Handle errors here console.error('Error fetching data:', status, error); } }); return false; } function callStatusHistory(requestid, statusid){ $('#statusHistory').modal({ backdrop: 'static', keyboard: false }) $('#statusHistory').modal('show'); var apiUrl = '/api/garbagecollection/getStatus?requestid='+requestid; $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', success: function(jsonResponse) { // Handle the API response data here console.log('Data from API:', jsonResponse); // Parse the JSON response into a JavaScript object // Check if jsonResponse is not empty or null if (jsonResponse && jsonResponse.length > 0) { var data = jsonResponse[0]; // Now you can use 'data' as needed var data = jsonResponse[0]; // For Request Created Date// var cdate = datetotext(data.request.cDate); var cdate_parts = cdate.split("-"); // format -> 14-Monday-AUGUST-2023-16:10:22 var day = cdate_parts[0]; var dayName = cdate_parts[1]; var monthName = cdate_parts[2]; var year = cdate_parts[3]; var time = cdate_parts[4]; ///////////////// var status = data.status; var statusListHTML=""; for(var i=0; i<jsonResponse.length; i++){ var statusdata = jsonResponse[i]; var cdate_parts = statusdata.cDate.split(" "); 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>`; statusListHTML += `<li> <div class="bullet bg-green"></div> <div class="time">${cdate_parts[1]}</div> <div class="desc"> <div class="row p-0 m-0">${status}</div> Comments: <p class="form-control showInputValue">${statusdata.comments}</p> </div> </li>`; } } else { var status = 'Open'; console.log('No data available.'); } var statusHTML=`<div class="header bg-theme" style="background-image: url('/assets/images/placeimg_400_200_nature.jpg')"> <div class="text-center">Request Created</div> <div class="color-overlay d-flex align-items-center"> <div class="col-4 text-center day-number">${day}</div> <div class="col-4 text-center date-right"> <div class="day-name">${dayName}</div> <div class="month">${monthName} ${year}</div> </div> <div class="col-4 text-center date-right pr-1"> <div class="day-name">${time}</div> </div> </div> </div> <ul> ${statusListHTML} </ul>`; $("#timelineHTML").html(statusHTML); }, error: function(xhr, status, error) { // Handle errors here console.error('Error fetching data:', status, error); } }); return false; } function datetotext(dateval){ var date = new Date(dateval); var day = date.getDate(); // Get the day of the month (e.g., 8) var dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()]; // Get the day name (e.g., Monday) var monthName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][date.getMonth()]; // Get the month name (e.g., February) var year = date.getFullYear(); // Get the year (e.g., 2018) var time = date.toLocaleTimeString(); // Get the time (e.g., 12:00:00 AM) var formattedDate = day + '-' + dayName + '-' + monthName.toUpperCase() + '-' + year + '-' + time; return formattedDate; } </script> </body></html>
|