trip report
This commit is contained in:
Pringgosutono
@ -18,7 +18,7 @@
|
||||
<div class="card-header">
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-3">
|
||||
<p class="card-title text-bold mb-0">Vehicle Trips Report</p>
|
||||
<p class="card-title text-bold mb-0">Vehicle Trip Report</p>
|
||||
</div>
|
||||
@if ($user_role == \App\Models\Users::ROLE_VENDOR || $user_role == \App\Models\Users::ROLE_ADMIN)
|
||||
@can('vehicle.create')
|
||||
@ -42,23 +42,22 @@
|
||||
<div class="col-2">
|
||||
<div class="form-group">
|
||||
<label class="text-muted">From</label>
|
||||
<input type="date" class="form-control"id="tgl0" value="2025-08-01">
|
||||
<!-- default today -->
|
||||
<input type="date" class="form-control" id="tgl0" value="{{ date('Y-m-d') }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="form-group">
|
||||
<label class="text-muted">To</label>
|
||||
<input type="date" class="form-control" id="tgl1" value="2025-08-28">
|
||||
<input type="date" class="form-control" id="tgl1" value="{{ date('Y-m-d') }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 d-flex align-items-end">
|
||||
<!-- <button class="btn btn-sm btn-danger">Filter</button> -->
|
||||
<button class="btn btn-sm btn-danger">Download</button>
|
||||
<div class="col-8 d-flex align-items-end">
|
||||
<button class="btn btn-sm btn-danger ms-auto" id="btnDownloadReport">Download Report</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive p-2">
|
||||
<div class="table-responsive p-3">
|
||||
<table id="tVehicleTrips" class="table table-hover dataTable ">
|
||||
<thead>
|
||||
<tr class="">
|
||||
@ -66,11 +65,11 @@
|
||||
<!-- <th class="text-center">Action</th> -->
|
||||
<th class="">Vehicle Name</th>
|
||||
<th class="">License Plate Number</th>
|
||||
<th class="">Number of Trips</th>
|
||||
<th class="">Number of Trip</th>
|
||||
<th class="">Total Milage (km)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <tbody>
|
||||
<tr>
|
||||
<td>24-679</td>
|
||||
<td>24-679</td>
|
||||
@ -137,7 +136,7 @@
|
||||
<td>26</td>
|
||||
<td>508.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tbody> -->
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@ -150,7 +149,11 @@
|
||||
|
||||
@section('customjs')
|
||||
<script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
|
||||
<script>
|
||||
<!-- DataTables Buttons + JSZip (for Excel export) -->
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
const State = {
|
||||
file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
|
||||
@ -165,387 +168,83 @@
|
||||
activate: function() {
|
||||
Wrapper.event();
|
||||
DTable.activate();
|
||||
},
|
||||
event: function() {
|
||||
$('#add-device_id').select2({
|
||||
dropdownParent: $('#mdlNewVhc'),
|
||||
});
|
||||
$('#add-brand').select2({
|
||||
dropdownParent: $('#mdlNewVhc'),
|
||||
});
|
||||
$('#add-type').select2({
|
||||
dropdownParent: $('#mdlNewVhc'),
|
||||
});
|
||||
$('#add-model').select2({
|
||||
dropdownParent: $('#mdlNewVhc'),
|
||||
});
|
||||
$('#add-dcurrent').select2({
|
||||
dropdownParent: $('#mdlNewVhc'),
|
||||
});
|
||||
$('#add-dassign').select2({
|
||||
dropdownParent: $('#mdlNewVhc'),
|
||||
});
|
||||
$('#add-vendor_id').select2({
|
||||
dropdownParent: $('#mdlNewVhc'),
|
||||
});
|
||||
|
||||
$('#edt-device_id').select2({
|
||||
dropdownParent: $('#mdlEdtVhc'),
|
||||
});
|
||||
$('#edt-brand').select2({
|
||||
dropdownParent: $('#mdlEdtVhc'),
|
||||
});
|
||||
$('#edt-type').select2({
|
||||
dropdownParent: $('#mdlEdtVhc'),
|
||||
});
|
||||
$('#edt-model').select2({
|
||||
dropdownParent: $('#mdlEdtVhc'),
|
||||
});
|
||||
$('#edt-dcurrent').select2({
|
||||
dropdownParent: $('#mdlEdtVhc'),
|
||||
});
|
||||
$('#edt-dassign').select2({
|
||||
dropdownParent: $('#mdlEdtVhc'),
|
||||
});
|
||||
$('#edt-vendor_id').select2({
|
||||
dropdownParent: $('#mdlEdtVhc'),
|
||||
});
|
||||
},
|
||||
event: function() {
|
||||
$('#tgl0, #tgl1').on('change', function() {
|
||||
DTable.reload();
|
||||
});
|
||||
// Trigger export on external button click
|
||||
$('#btnDownloadReport').on('click', function() {
|
||||
DTable.table.button('.buttons-excel').trigger();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const DTable = {
|
||||
table: null,
|
||||
activate: function() {
|
||||
DTable.reload();
|
||||
},
|
||||
reload: function() {
|
||||
$('#tVehicleTrips').DataTable();
|
||||
// if (Driver.Table.firstInitDataTable == 1) { loadTableSkeletonLoading() } else { Driver.Table.firstInitDataTable = 1; }
|
||||
// $('#tVehicles').DataTable({
|
||||
// processing: true,
|
||||
// serverSide: false,
|
||||
// bLengthChange: true,
|
||||
// deferRender: true,
|
||||
// destroy: true,
|
||||
// ajax: {
|
||||
// url: "{{ route('api_report_vehicle_trips_list') }}?cptid=" + AppState.current_company,
|
||||
// type: 'GET',
|
||||
// complete: function() {
|
||||
// // removeTableSkeletonLoading()
|
||||
// },
|
||||
// },
|
||||
// deferRender: true,
|
||||
// columns: [{
|
||||
// data: 'DT_RowIndex',
|
||||
// className: 'text-end',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// },
|
||||
// {
|
||||
// data: 'action',
|
||||
// className: 'text-center',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// let action = `
|
||||
// <a href="#" class="text-decoration-none me-1 btnEdtVhc">
|
||||
// <span class="icon ion-eye fz-16"></span>
|
||||
// </a>
|
||||
// `;
|
||||
// // <a href="#" class="text-decoration-none text-danger btnDelVhc">
|
||||
// // <span class="icon ion-trash-b fz-16"></span>
|
||||
// // </a>
|
||||
// return action;
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// data: 'name',
|
||||
// className: 'text-start text-nowrap',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// return `
|
||||
// <img src="${State.storage_lara}${row.fvhc_img}" class="img-fluid thumb-img-table" /><br>
|
||||
// ${row.nopol1} ${row.nopol2} ${row.nopol3}
|
||||
// `;
|
||||
// },
|
||||
// createdCell: function(td, cellData, rowData, row, col) {
|
||||
// $(td).attr('data-vid', rowData.vid);
|
||||
// $(td).attr('data-name', rowData.name);
|
||||
// $(td).attr('data-nopol1', rowData.nopol1);
|
||||
// $(td).attr('data-nopol2', rowData.nopol2);
|
||||
// $(td).attr('data-nopol3', rowData.nopol3);
|
||||
// },
|
||||
// },
|
||||
// // {
|
||||
// // data: 'stnk_img',
|
||||
// // className: 'text-start text-nowrap',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // // exp: ${row.stnk_exp?.split('-').reverse().join('-') || ''}
|
||||
// // return `
|
||||
// // <img src="${State.storage_lara}${data}" class="img-fluid thumb-img-table" /><br>
|
||||
// // ${row.nopol1} ${row.nopol2} ${row.nopol3}<br>
|
||||
// // exp: ${moment(row.stnk_exp).format('DD MMM YYYY') || '-'}
|
||||
// // `;
|
||||
// // },
|
||||
// // },
|
||||
// {
|
||||
// data: 'tax_exp',
|
||||
// className: 'text-end text-nowrap',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// // return (`${data?.split('-').reverse().join('-') || '-'}`);
|
||||
// return (`${moment(data).format('DD MMM YYYY') || '-'}`);
|
||||
// },
|
||||
// },
|
||||
// // {
|
||||
// // data: 'kir_exp',
|
||||
// // className: 'text-end text-nowrap',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (`${moment(data).format('DD MMM YYYY') || '-'}`);
|
||||
// // },
|
||||
// // },
|
||||
// {
|
||||
// data: 'crt',
|
||||
// className: 'text-end text-nowrap',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// return moment.unix(data).format('DD MMM YYYY');
|
||||
// },
|
||||
// },
|
||||
// @if ($user_role != \App\Models\Users::ROLE_VENDOR)
|
||||
// {
|
||||
// data: 'device_id',
|
||||
// className: 'text-end text-nowrap',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// return `<span class="d-none">${data}</span>` + Helper.splitEvery4Char(`${data}`);
|
||||
// },
|
||||
// },
|
||||
// @endif
|
||||
// // {
|
||||
// // data: 'dc_fullname',
|
||||
// // className: 'text-start text-nowrap',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (
|
||||
// // `${data}<br>` +
|
||||
// // `<a href="tel:0${row.dc_phone}">${Helper.splitEvery4Char('0'+row.dc_phone)}</a>` +
|
||||
// // ` || ` +
|
||||
// // `<a href="https://api.whatsapp.com/send/?phone=62${row.dc_phone}&text=Halo&app_absent=0" class="bg-light" target="_blank"><i class="text-success ion-social-whatsapp"></i></a>`
|
||||
// // );
|
||||
// // },
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'da_fullname',
|
||||
// // className: 'text-start text-nowrap',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (
|
||||
// // `${data}<br>` +
|
||||
// // `<a href="tel:0${row.da_phone}">${Helper.splitEvery4Char('0'+row.da_phone)}</a>` +
|
||||
// // ` || ` +
|
||||
// // `<a href="https://api.whatsapp.com/send/?phone=62${row.da_phone}&text=Halo&app_absent=0" class="bg-light" target="_blank"><i class="text-success ion-social-whatsapp"></i></a>`
|
||||
// // );
|
||||
// // },
|
||||
// // },
|
||||
// {
|
||||
// data: 'type_name',
|
||||
// className: 'text-start text-nowrap',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// // return (`${row.brand_name}<br>-<br>${data}`);
|
||||
// return data;
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// data: 'vyear',
|
||||
// className: 'text-end',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// return (`${(data || '-')}`);
|
||||
// },
|
||||
// },
|
||||
// // {
|
||||
// // data: 'cc',
|
||||
// // className: 'text-start',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (`${(data || '0')} CC`);
|
||||
// // },
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'vin',
|
||||
// // className: 'text-start text-nowrap',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (`${Helper.splitEvery4Char(data || '-')}`);
|
||||
// // },
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'en',
|
||||
// // className: 'text-start text-nowrap',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (`${Helper.splitEvery4Char(data || '-')}`);
|
||||
// // },
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'vcolor',
|
||||
// // className: 'text-start',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (`${(data || '-')}`);
|
||||
// // },
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'fuel_type',
|
||||
// // className: 'text-start',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (`${(data || '-')}`);
|
||||
// // },
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'tnkb_color',
|
||||
// // className: 'text-start text-nowrap',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (`${(data || '-')}`);
|
||||
// // },
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'regis_year',
|
||||
// // className: 'text-end',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return (`${(data || '-')}`);
|
||||
// // },
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'speed_limit',
|
||||
// // className: 'text-end',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'fuel_capacity',
|
||||
// // className: 'text-end',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'fuel_drop_treshold',
|
||||
// // className: 'text-end',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'max_pressure',
|
||||
// // className: 'text-end',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'alert_zones',
|
||||
// // className: 'text-start',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'is_track_holiday_text',
|
||||
// // className: 'text-start',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // },
|
||||
// // {
|
||||
// // data: 'track_schedule',
|
||||
// // className: 'text-end',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // },
|
||||
// {
|
||||
// data: 'sum_milleage',
|
||||
// className: 'text-end',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// return Number(data).toFixed(2);
|
||||
// }
|
||||
// },
|
||||
// // {
|
||||
// // data: 'cameras',
|
||||
// // className: 'text-start',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // },
|
||||
// {
|
||||
// data: 'company_name',
|
||||
// className: 'text-start text-nowrap',
|
||||
// visible: true,
|
||||
// orderable: true,
|
||||
// searchable: true,
|
||||
// render: function(data, type, row, meta) {
|
||||
// return data || '-';
|
||||
// }
|
||||
// },
|
||||
// // {
|
||||
// // data: 'group_name',
|
||||
// // className: 'text-start text-nowrap',
|
||||
// // visible: true,
|
||||
// // orderable: true,
|
||||
// // searchable: true,
|
||||
// // render: function(data, type, row, meta) {
|
||||
// // return data || 'All Group';
|
||||
// // }
|
||||
// // },
|
||||
// ],
|
||||
// });
|
||||
DTable.table = $('#tVehicleTrips').DataTable({
|
||||
processing: true,
|
||||
serverSide: false,
|
||||
bLengthChange: true,
|
||||
deferRender: true,
|
||||
destroy: true,
|
||||
ajax: {
|
||||
url: `{{ route('api_report_vehicle_trips_list') }}?
|
||||
cptid=${AppState.current_company}
|
||||
&from_date=${moment(safeVal('#tgl0')).startOf('day').unix()}
|
||||
&to_date=${moment(safeVal('#tgl1')).endOf('day').unix()}`,
|
||||
type: 'GET',
|
||||
complete: function() {
|
||||
// removeTableSkeletonLoading()
|
||||
},
|
||||
},
|
||||
deferRender: true,
|
||||
columns: [
|
||||
{
|
||||
data: 'name',
|
||||
className: 'text-start text-nowrap',
|
||||
visible: true,
|
||||
orderable: true,
|
||||
searchable: true,
|
||||
},
|
||||
{
|
||||
data: 'nopol1',
|
||||
className: 'text-start',
|
||||
visible: true,
|
||||
orderable: true,
|
||||
searchable: true,
|
||||
},
|
||||
{
|
||||
data: 'numOfTrip',
|
||||
className: 'text-end',
|
||||
visible: true,
|
||||
orderable: true,
|
||||
searchable: true,
|
||||
},
|
||||
{
|
||||
data: 'total_milleage',
|
||||
className: 'text-end',
|
||||
visible: true,
|
||||
orderable: true,
|
||||
searchable: false,
|
||||
render: function(data, type, row, meta) {
|
||||
return (data === null) ? '0' : parseFloat(data).toFixed(2);
|
||||
}
|
||||
},
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
extend: 'excelHtml5',
|
||||
title: 'Trip Report',
|
||||
className: 'd-none' // hide default button
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user