update feature
This commit is contained in:
Pringgosutono
614
resources/views/menu_v1/reports/vehicle_trips.blade.php
Normal file
614
resources/views/menu_v1/reports/vehicle_trips.blade.php
Normal file
@ -0,0 +1,614 @@
|
||||
@php
|
||||
$user_role = Auth::user()->role;
|
||||
@endphp
|
||||
|
||||
@extends('app.app')
|
||||
|
||||
@section('title')
|
||||
Vehicles
|
||||
@endsection
|
||||
|
||||
@section('customcss')
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<div class="card">
|
||||
<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>
|
||||
</div>
|
||||
@if ($user_role == \App\Models\Users::ROLE_VENDOR || $user_role == \App\Models\Users::ROLE_ADMIN)
|
||||
@can('vehicle.create')
|
||||
<!-- <div class="col text-end">
|
||||
<button id="btnMdlNewVhc" class="btn btn-sm btn-danger">Add New Vehicle</button>
|
||||
</div> -->
|
||||
@endcan
|
||||
|
||||
{{-- <div class="col-auto text-end ps-0">
|
||||
<button class="btn btn-sm btn-danger">Upload</button>
|
||||
</div> --}}
|
||||
@endif
|
||||
<div class="col-auto text-end ps-0">
|
||||
<!-- <button class="btn btn-sm btn-danger">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- filter -->
|
||||
<div class="row">
|
||||
<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">
|
||||
</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">
|
||||
</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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive p-2">
|
||||
<table id="tVehicleTrips" class="table table-hover dataTable ">
|
||||
<thead>
|
||||
<tr class="">
|
||||
<!-- <th class="">#</th> -->
|
||||
<!-- <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="">Total Milage (km)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>24-679</td>
|
||||
<td>24-679</td>
|
||||
<td>26</td>
|
||||
<td>442.3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24-682</td>
|
||||
<td>24-682</td>
|
||||
<td>28</td>
|
||||
<td>312.7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24-877</td>
|
||||
<td>24-877</td>
|
||||
<td>15</td>
|
||||
<td>276.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A.16-347</td>
|
||||
<td>A.16-347</td>
|
||||
<td>37</td>
|
||||
<td>543.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>AL2025-B21</td>
|
||||
<td>AL2025-B21</td>
|
||||
<td>18</td>
|
||||
<td>295.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>B.16-542</td>
|
||||
<td>B.16-542</td>
|
||||
<td>32</td>
|
||||
<td>478.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>B.24-264</td>
|
||||
<td>B.24-264</td>
|
||||
<td>24</td>
|
||||
<td>188.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>B.24-274</td>
|
||||
<td>B.24-274</td>
|
||||
<td>33</td>
|
||||
<td>440.1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ford Ranger</td>
|
||||
<td>26-199</td>
|
||||
<td>30</td>
|
||||
<td>631.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nissan AD</td>
|
||||
<td>B.10-517</td>
|
||||
<td>27</td>
|
||||
<td>375.9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Triton</td>
|
||||
<td>A.29-127</td>
|
||||
<td>26</td>
|
||||
<td>508.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal -->
|
||||
@endsection
|
||||
|
||||
@section('customjs')
|
||||
<script src="{{ asset('assets/js/load-image.all.min.js') }}"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
const State = {
|
||||
file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
|
||||
storage_lara: "{{ asset('storage') }}/",
|
||||
dvc_type: {
|
||||
built_in: "{{ \App\Models\Devices::TYPE_BUILT_IN }}",
|
||||
portable: "{{ \App\Models\Devices::TYPE_PORTABLE }}",
|
||||
},
|
||||
};
|
||||
|
||||
const Wrapper = {
|
||||
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'),
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const DTable = {
|
||||
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';
|
||||
// // }
|
||||
// // },
|
||||
// ],
|
||||
// });
|
||||
},
|
||||
};
|
||||
|
||||
function safeVal(selector) {
|
||||
const val = $(selector).val();
|
||||
return (val === undefined || val === null || val === '') ? null : val;
|
||||
}
|
||||
|
||||
const Filter = {
|
||||
activate: function() {
|
||||
Filter.event();
|
||||
},
|
||||
event: function() {},
|
||||
triggerFilterCompany: function() {
|
||||
DTable.reload();
|
||||
},
|
||||
}
|
||||
|
||||
async function convertImgHtmlToFile(imgHtml, imgWidth, imgHeight, mimeType, fileName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
let canvas = document.createElement("canvas")
|
||||
|
||||
// Draw image to canvas.
|
||||
canvas.width = imgWidth
|
||||
canvas.height = imgHeight
|
||||
let ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(imgHtml, 0, 0)
|
||||
|
||||
// Convert canvas to ImageState.
|
||||
let imageData = ctx.getImageData(0, 0, imgWidth, imgHeight)
|
||||
// console.log(imageState.data.byteLength + ' bytes.')
|
||||
|
||||
// Convert canvas to Blob
|
||||
canvas.toBlob((blob) => {
|
||||
let newReader = new FileReader();
|
||||
newReader.addEventListener('loadend', () => {
|
||||
// Convert canvas to ArrayBuffer
|
||||
let arrayBuffer = newReader.result
|
||||
// console.log(arrayBuffer.byteLength + ' bytes.')
|
||||
|
||||
// Convert ArrayBuffer to Blob
|
||||
// let blob = new Blob([arrayBuffer], {type: mimeType})
|
||||
|
||||
// Dispay Blob content in an Image.
|
||||
// console.log(URL.createObjectURL(blob))
|
||||
|
||||
// Generate as file
|
||||
let newFile = new File([arrayBuffer], fileName, {
|
||||
type: mimeType,
|
||||
lastModified: new Date(),
|
||||
size: arrayBuffer.byteLength,
|
||||
})
|
||||
resolve(newFile)
|
||||
});
|
||||
newReader.readAsArrayBuffer(blob);
|
||||
}, mimeType);
|
||||
} catch (e) {
|
||||
reject(e.message)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Wrapper.activate();
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user