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
701 lines
33 KiB
<!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>Pending 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">Pending 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>
|