list vehicle

This commit is contained in:
Pringgosutono
2025-12-01 19:29:25 +07:00
parent 0fcb81a1a4
commit fd5a88205c
4 changed files with 108 additions and 24 deletions

View File

@ -114,7 +114,13 @@
color: white;
border-color: #212529;
}
</style>@endsection
/* Utility to remove whitespace around inline-block wrapper */
.font-zero {
font-size: 0;
}
</style>
@endsection
@section('content')
<div class="container-fluid">
@ -195,12 +201,18 @@
<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-transparent border-0 shadow-none">
<div class="modal-body p-0 text-center position-relative">
<button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3 z-3" data-bs-dismiss="modal" aria-label="Close"></button>
<img src="" id="modalImage" class="img-fluid rounded shadow-lg" style="max-height: 90vh;" alt="Preview">
</div>
<!-- <div class="modal-body p-0 text-center">
<div class="d-inline-block position-relative font-zero">
<button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2 z-3" data-bs-dismiss="modal" aria-label="Close"></button>
<img src="" id="modalImage" class="img-fluid rounded shadow-lg" style="max-height: 90vh;" alt="Preview">
</div>
</div> -->
</div>
</div>
</div>
@ -326,8 +338,8 @@
// $('#imageModal').modal('show');
const imgUrl = $(this).find('img').attr('src');
// const bigImgUrl = imgUrl.replace('w=500', 'w=1200');
$('#modalImage').attr('src', imgUrl);
const bigImgUrl = imgUrl.replace('w=500', 'w=1200');
$('#modalImage').attr('src', bigImgUrl);
$('#imageModal').modal('show');
});
// $('.gallery-card').click(function() {

View File

@ -32,7 +32,7 @@
</div> --}}
@endif
<div class="col-auto text-end ps-0">
{{-- <button class="btn btn-sm btn-danger">Download</button> --}}
<button id="btnDownload" class="btn btn-sm btn-danger">Download</button>
</div>
</div>
</div>
@ -45,11 +45,12 @@
<th class="text-center">Action</th>
<th class="">Vehicle</th>
<th class="">Name</th>
<th class="">Tax Exp</th>
<!-- <th class="">Tax Exp</th> -->
{{-- <th class="">Kir Exp</th> --}}
<th class="">Service Start</th>
@if ($user_role != \App\Models\Users::ROLE_VENDOR)
<th class="">Device ID</th>
<th class="">Last Update</th>
@endif
<th class="">Type</th>
<th class="">Manufacture Year</th>
@ -604,6 +605,10 @@
@section('customjs')
<script src="{{ asset('assets/js/load-image.all.min.js') }}"></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 = {
@ -673,6 +678,9 @@
$('#edt-vendor_id').select2({
dropdownParent: $('#mdlEdtVhc'),
});
$('#btnDownload').on('click', function() {
DTable.table.button('.buttons-excel').trigger();
});
},
};
@ -681,16 +689,17 @@
DTable.reload();
},
reload: function() {
let table
// $('#tVehicles').DataTable();
// if (Driver.Table.firstInitDataTable == 1) { loadTableSkeletonLoading() } else { Driver.Table.firstInitDataTable = 1; }
$('#tVehicles').DataTable({
DTable.table = $('#tVehicles').DataTable({
processing: true,
serverSide: false,
bLengthChange: true,
deferRender: true,
destroy: true,
ajax: {
url: "{{ route('api_list_vehicles') }}?cptid=" + AppState.current_company,
url: "{{ route('api_list_vehicles1') }}?cptid=" + AppState.current_company,
type: 'GET',
complete: function() {
// removeTableSkeletonLoading()
@ -752,23 +761,23 @@
// 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') || '-'}
// `;
// <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: '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',
@ -797,9 +806,20 @@
orderable: true,
searchable: true,
render: function(data, type, row, meta) {
return `<span class="d-none">${data}</span>` + Helper.splitEvery4Char(`${data}`);
return Helper.splitEvery4Char(data);
// return `<span class="d-none">${data}</span>` + Helper.splitEvery4Char(`${data}`);
},
},
{
data: 'crt_d',
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');
},
},
@endif
// {
// data: 'dc_fullname',
@ -1009,6 +1029,18 @@
// }
// },
],
buttons: [
{
extend: 'excelHtml5',
title: () => {
return `Vehicle list export - ${moment().format('YYYYMMDD-HHmmss')}`;
},
className: 'd-none', // hide default button
exportOptions: {
columns: ':visible:not(:eq(1))'
}
}
]
});
},
};