Penambahan FrontEnd All-New-Manufacture
This commit is contained in:
pand03
216
public/js/verify.js
Normal file
216
public/js/verify.js
Normal file
@@ -0,0 +1,216 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
var table = $('#verify-table').DataTable ({
|
||||
processing: false,
|
||||
serverSide: false,
|
||||
paging: false,
|
||||
order: [],
|
||||
searching: false,
|
||||
lengthMenu: [20],
|
||||
ajax: $('#verify-table').data('url'),
|
||||
columns: [
|
||||
{ data: 'DT_RowIndex',
|
||||
name: 'DT_RowIndex',
|
||||
orderable: false
|
||||
},
|
||||
{
|
||||
data: 'id',
|
||||
name: 'id',
|
||||
class: 'text-center'
|
||||
},
|
||||
{
|
||||
data: 'no_pol',
|
||||
name: 'no_pol',
|
||||
class: 'text-center',
|
||||
},
|
||||
{
|
||||
data: 'jenis_mobil',
|
||||
name: 'jenis_mobil',
|
||||
class: 'text-center',
|
||||
},
|
||||
{
|
||||
data: 'waktu_masuk',
|
||||
name: 'waktu_masuk',
|
||||
class: 'text-center',
|
||||
render: function(data, type, row) {
|
||||
return moment(data).format("DD-MM-YYYY HH:mm:ss")
|
||||
}
|
||||
},
|
||||
{
|
||||
data: 'waktu_keluar',
|
||||
name: 'waktu_keluar',
|
||||
class: 'text-center',
|
||||
render: function(data, type, row) {
|
||||
return moment(data).format("DD-MM-YYYY HH:mm:ss")
|
||||
}
|
||||
},
|
||||
{
|
||||
data: 'id_pintu_masuk',
|
||||
name: 'id_pintu_masuk',
|
||||
class: 'text-center'
|
||||
},
|
||||
{
|
||||
data: 'out_gate',
|
||||
name: 'out_gate',
|
||||
class: 'text-center'
|
||||
},
|
||||
{
|
||||
data: 'status',
|
||||
name: 'status',
|
||||
render: function (data, type, row) {
|
||||
if (data === 1) {
|
||||
return '<span class="badge badge-secondary light badge-danger">Pending</span></td>';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
class: 'text-center',
|
||||
},
|
||||
// { data: 'id', name: 'id' },
|
||||
{
|
||||
data: 'id',
|
||||
render: function(data, type, row) {
|
||||
return `
|
||||
<div class="action-buttons d-flex justify-content-end">
|
||||
<a href="javascript:void(0);" class="btn btn-light view-images light mr-2" data-id="${data}" data-no_pol="${row.no_pol}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="svg-main-icon" width="24px" height="24px" viewBox="0 0 32 32" x="0px" y="0px">
|
||||
<g data-name="Layer 21">
|
||||
<path d="M29,14.47A15,15,0,0,0,3,14.47a3.07,3.07,0,0,0,0,3.06,15,15,0,0,0,26,0A3.07,3.07,0,0,0,29,14.47ZM16,21a5,5,0,1,1,5-5A5,5,0,0,1,16,21Z" fill="#000000" fill-rule="nonzero"></path>
|
||||
<circle cx="16" cy="16" r="3" fill="#000000" fill-rule="nonzero"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="btn btn-secondary verify-data light mr-2" data-id="${data}" data-no_pol="${row.no_pol}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="btn btn-danger remove-item light mr-2" data-id="${data}" data-no_pol="${row.no_pol}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>`;
|
||||
// <button class="btn btn-primary btn-xs view-images" data-id="${data}">View</button>
|
||||
// <button class="btn btn-secondary btn-xs" edit-nopol data-id="${data}">Verify</button>
|
||||
},
|
||||
class: 'text-center'
|
||||
}
|
||||
],
|
||||
columnDefs: [
|
||||
{
|
||||
targets: '_all', // Mengatur semua kolom
|
||||
orderable: false // Tidak bisa diurutkan
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('#verify-table tbody').on('click', '.view-images', function() {
|
||||
var id = $(this).data('id');
|
||||
var no_pol = $(this).data('no_pol');
|
||||
console.log(no_pol);
|
||||
$.ajax({
|
||||
// url: '/verify/' + id,
|
||||
url: '/verify/show',
|
||||
type: 'POST',
|
||||
data: {
|
||||
id: id,
|
||||
no_pol: no_pol,
|
||||
_token: $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function(response) {
|
||||
console.log(response);
|
||||
if (response.pic_masuk && response.pic_masuk !== '') {
|
||||
$('#pic_body_masuk').attr('src', 'data:image/jpeg;base64,' + response.pic_masuk).show();
|
||||
} else {
|
||||
$('#pic_body_masuk').attr('src', '/images/no-image.jpeg').show();
|
||||
}
|
||||
if (response.driver_masuk && response.driver_masuk !== '') {
|
||||
$('#pic_driver_masuk').attr('src', 'data:image/jpeg;base64,' + response.driver_masuk).show();
|
||||
} else {
|
||||
$('#pic_driver_masuk').attr('src', '/images/no-image.jpeg').show();
|
||||
}
|
||||
if (response.pic_keluar && response.pic_keluar !== '') {
|
||||
$('#pic_body_keluar').attr('src', 'data:image/jpeg;base64,' + response.pic_keluar).show();
|
||||
// $('#pic_body_keluar').attr('src', imgData).show();
|
||||
} else {
|
||||
$('#pic_body_keluar').attr('src', '/images/no-image.jpeg').show();
|
||||
}
|
||||
if (response.driver_keluar && response.driver_keluar !== '') {
|
||||
$('#pic_driver_keluar').attr('src', 'data:image/jpeg;base64,' + response.driver_keluar).show();
|
||||
} else {
|
||||
$('#pic_driver_keluar').attr('src', '/images/no-image.jpeg').show();
|
||||
}
|
||||
// $('#pic_body_masuk').attr('src', 'data:image/jpeg;base64,' + response.pic_masuk).show();
|
||||
// $('#time-in').text('Jam masuk : ' + data.waktu_masuk).show();
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.log(status, error);
|
||||
alert('Gagal mengambil data gambar');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// $('#verify-table tbody').on('click', '.verify-data', function() {
|
||||
$('#verify-table tbody').on('click', '.verify-data, .remove-item', function() {
|
||||
|
||||
var id = $(this).data('id');
|
||||
var no_pol = $(this).data('no_pol');
|
||||
// var veriCheckValue = $(this).hasClass('verify-data') ? 2 : 0;
|
||||
var veriCheckValue;
|
||||
if ($(this).hasClass('verify-data')) {
|
||||
veriCheckValue = 2;
|
||||
} else if ($(this).hasClass('remove-item')) {
|
||||
veriCheckValue = 0;
|
||||
}
|
||||
|
||||
console.log(id, no_pol, veriCheckValue);
|
||||
$.ajax({
|
||||
url: '/verify/' + id,
|
||||
type: 'PUT', // Sesuaikan dengan metode HTTP yang Anda gunakan untuk update
|
||||
data: {
|
||||
// Data yang dikirim untuk update, sesuaikan dengan kebutuhan Anda
|
||||
// Misalnya:
|
||||
// status: 'verified',
|
||||
// veri_check: 2,
|
||||
veri_check: veriCheckValue,
|
||||
no_pol: no_pol,
|
||||
// _token: '{{ csrf_token() }}' // Token CSRF untuk keamanan
|
||||
_token: $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function(data) {
|
||||
var message = veriCheckValue === 2 ? 'Data berhasil diverifikasi' : 'Kendaran tidak sesuai';
|
||||
// alert(message);
|
||||
// alert('Data berhasil diverifikasi');
|
||||
// Bisa tambahkan logika untuk refresh tabel atau mengupdate tampilan
|
||||
table.ajax.reload(null, false); // Reload data table tanpa mereset pagination
|
||||
},
|
||||
error: function() {
|
||||
alert('Gagal memverifikasi data');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function refreshTable() {
|
||||
table.ajax.reload(null, false); // Mengambil data baru tanpa reset paging
|
||||
}
|
||||
|
||||
setInterval(refreshTable, 5000);
|
||||
// Menambahkan event listener untuk row click
|
||||
// $('#verify-table tbody').on('click', 'tr', function() {
|
||||
// var data = table.row(this).data();
|
||||
// console.log (data);
|
||||
// if (data) {
|
||||
// $.ajax({
|
||||
// url: '/verify/' + data.id,
|
||||
// // type: 'GET',
|
||||
// success: function(response) {
|
||||
// // Menampilkan card-body saat data ditemukan
|
||||
// $('.card-body').slideDown();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
});
|
||||
Reference in New Issue
Block a user