list vehicle

app/Http/Controllers/VehiclesController.php

@@ -60,6 +60,45 @@ class VehiclesController extends Controller
         }
     }
 
+    public function api_list_vehicles1(Request $req)
+    {
+        try {
+            $now = time();
+            $input = [];
+            $rulesInput = [];
+
+            $filter = [];
+            if ($req->cptid) {
+                $filter["company"] = $req->cptid;
+            }
+            $list = DB::select("SELECT
+					v.id, v.name, v.device_id, nopol1, nopol2, nopol3, v.sum_milleage, 
+					fvhc_img, vyear, t.`desc` type_name, c_name company_name, crt_d, dvc.crt
+				FROM t_vehicles as v
+				INNER JOIN t_vehicles_detail AS vd ON v.id = vd.vid
+				LEFT JOIN t_vehicles_types AS t ON v.type_id = t.id
+				LEFT JOIN t_users AS vdr ON v.vendor_id = vdr.id
+				LEFT JOIN t_clients AS client ON vdr.client_group_id = client.id
+				LEFT JOIN t_devices AS dvc ON v.device_id = dvc.device_id
+				left join t_gps_tracks_rltm rltm on rltm.vhc_id = v.id
+				WHERE v.dlt is null
+				ORDER BY v.id ASC			
+			");
+
+            foreach ($list as $key => $row) {
+                $list[$key]->DT_RowIndex = $key + 1;
+                $list[$key]->action = "-";
+            }
+
+            $apiResp = Responses::success("success list vehicles");
+            $apiResp["data"] = $list;
+            return new Response($apiResp, $apiResp["meta"]["code"]);
+        } catch (\Exception $e) {
+            $apiResp = Responses::error($e->getMessage());
+            return new Response($apiResp, $apiResp["meta"]["code"]);
+        }
+    }
+
     public function api_show_vehicle(Request $req, $vid)
     {
         try {

resources/views/menu_v1/media.blade.php

@@ -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');
+					const bigImgUrl = imgUrl.replace('w=500', 'w=1200');
-					$('#modalImage').attr('src', imgUrl);
+					$('#modalImage').attr('src', bigImgUrl);
 					$('#imageModal').modal('show');
 				});
 				// $('.gallery-card').click(function() {

resources/views/menu_v1/vehicles.blade.php

@@ -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>
+						//             <img src="${State.storage_lara}${data}" class="img-fluid thumb-img-table" /><br>
-                    //             ${row.nopol1} ${row.nopol2} ${row.nopol3}<br>
+						//             ${row.nopol1} ${row.nopol2} ${row.nopol3}<br>
-                    //             exp: ${moment(row.stnk_exp).format('DD MMM YYYY') || '-'}
+						//             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))' 
+							}
+						}
+					]
                 });
             },
         };

routes/web.php

@@ -319,6 +319,7 @@ Route::middleware(["auth", "auth.user"])->group(function () {
     )->name("api_reset_login_driver");
 
     Route::get("/api/vehicles", "VehiclesController@api_list_vehicles")->name("api_list_vehicles");
+    Route::get("/api/vehicles1", "VehiclesController@api_list_vehicles1")->name("api_list_vehicles1");
     Route::get("/api/vehicles/{vid}", "VehiclesController@api_show_vehicle")->name("api_show_vehicle");
     Route::post("/api/vehicles", "VehiclesController@api_add_vehicle")->name("api_add_vehicle");
     Route::put("/api/vehicles/{vid}", "VehiclesController@api_edit_vehicle")->name("api_edit_vehicle");