Add dispatch timer to list of all JOs view #768

This commit is contained in:
Ramon Gutierrez 2023-11-09 06:10:51 +08:00
parent b20371cd1f
commit ac5683f7f1
3 changed files with 114 additions and 50 deletions

View file

@ -200,6 +200,8 @@ class CMBJobOrderHandler implements JobOrderHandlerInterface
$row['car_model'] = $car_model;
$row['rider_name'] = $rider_name;
$row['rider_plate_number'] = $rider_plate_number;
$row['date_assign'] = !empty($orow->getDateAssign()) ? $orow->getDateAssign()->format("c") : null;
$row['date_fulfill'] = !empty($orow->getDateFulfill()) ? $orow->getDateFulfill()->format("c") : null;
$processor = $orow->getProcessedBy();
if ($processor == null)

View file

@ -228,6 +228,8 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
$row['is_mobile'] = $orow->getSource() == TransactionOrigin::MOBILE_APP;
$row['is_vip'] = $is_vip;
$row['is_emergency'] = $is_emergency;
$row['date_assign'] = !empty($orow->getDateAssign()) ? $orow->getDateAssign()->format("c") : null;
$row['date_fulfill'] = !empty($orow->getDateFulfill()) ? $orow->getDateFulfill()->format("c") : null;
$processor = $orow->getProcessedBy();
if ($processor == null)

View file

@ -97,64 +97,113 @@
if (data.flag_advance) {
$(row).addClass('m-table__row--danger');
}
}
},
afterTemplate: function (row, data, index) {
// if this row has an incrementing timer, handle the behavior
const timer = row.find('[data-incrementing]')[0];
if (timer) {
setInterval(() => {
const dateStart = new moment(data.date_assign, moment.ISO_8601);
const dateEnd = moment();
timer.innerHTML = timeDiff(dateStart, dateEnd);
}, 1000)
}
},
},
columns: [
{
field: 'id',
title: 'JO Number'
},
{
field: 'plate_number',
title: 'Plate #'
},
{
field: 'customer_name',
title: 'Customer'
},
{
field: 'delivery_address',
title: 'Customer Area'
},
{
field: 'hub_facilitated',
title: 'Battery Facilitated By'
},
{
field: 'type',
title: 'Schedule'
},
{
field: 'date_schedule',
title: 'Scheduled Date'
},
{
field: 'status',
title: 'Status'
},
{
field: 'processor',
title: 'Dispatcher'
},
{
field: 'Actions',
width: 110,
title: 'Actions',
sortable: false,
overflow: 'visible',
template: function (row, index, datatable) {
var actions = '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View"><i class="la la-edit"></i></a>';
actions += '<a href="' + row.meta.pdf_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="PDF" target="_blank"><i class="la la-file-o"></i></a>';
return actions;
{
field: 'id',
title: 'JO Number'
},
}
{
field: 'plate_number',
title: 'Plate #'
},
{
field: 'customer_name',
title: 'Customer'
},
{
field: 'delivery_address',
title: 'Customer Area'
},
{
field: 'hub_facilitated',
title: 'Battery Facilitated By'
},
{
field: 'type',
title: 'Schedule'
},
{
field: 'date_schedule',
title: 'Scheduled Date'
},
{
field: 'status',
title: 'Status'
},
{
field: 'processor',
title: 'Dispatcher'
},
{
field: '',
title: 'Dispatch Time',
sortable: false,
searchable: false,
textAlign: 'right',
template: function (row, index, datatable) {
let dateAssign;
let dateEnd;
let incrementing = false;
// only display timer for these statuses
const statusesWithTimer = [
'Assigned',
'In Transit',
'In Progress',
'Completed', // NOTE: completed would be based off the fulfillment time
];
if (row.date_assign && statusesWithTimer.includes(row.status)) {
dateAssign = new moment(row.date_assign, moment.ISO_8601);
// on completed jos, use date_fulfill as end date and do not increment
if (row.status == 'Completed') {
if (row.date_fulfill) {
dateEnd = new moment(row.date_fulfill, moment.ISO_8601);
}
} else {
dateEnd = moment();
incrementing = true;
}
}
return dateEnd ? '<span class="m-badge m-badge--wide m--font-boldest ' + (incrementing ? 'm-badge--warning" data-incrementing="1"' : 'm-badge--success"') + '>' + timeDiff(dateAssign, dateEnd) + '</span>' : '-';
}
},
{
field: 'Actions',
width: 110,
title: 'Actions',
sortable: false,
overflow: 'visible',
template: function (row, index, datatable) {
var actions = '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="View"><i class="la la-edit"></i></a>';
actions += '<a href="' + row.meta.pdf_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" title="PDF" target="_blank"><i class="la la-file-o"></i></a>';
return actions;
},
}
],
search: {
onEnter: false,
input: $('#data-rows-search'),
delay: 400
}
},
};
var table = $("#data-rows").mDatatable(options);
@ -186,5 +235,16 @@
table.search(date_array, "schedule_date");
});
});
// get difference in hh:mm:ss format
const timeDiff = (startDate, endDate) => {
const seconds = Math.abs(startDate.diff(endDate, 'seconds'));
const hh = Math.floor(seconds / 3600).toString().padStart(2, "0");
const mm = Math.floor((seconds % 3600) / 60).toString().padStart(2, "0");
const ss = (seconds % 60).toString().padStart(2, "0");
return [hh, mm, ss].join(':');
}
</script>
{% endblock %}