root
411 lines
10 KiB
PHP
411 lines
10 KiB
PHP
<div class="container mt-4">
|
|
|
|
<div class="card modern-card shadow-sm border-0 rounded-4">
|
|
|
|
<div class="card-body p-4">
|
|
|
|
<div class="d-flex justify-content-between mb-3">
|
|
|
|
<h5 class="mb-0">
|
|
Master Shift
|
|
</h5>
|
|
|
|
<button class="btn btn-warning btn-add">
|
|
Tambah Shift
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
|
|
<table id="tableShifts"
|
|
class="table modern-table align-middle w-100">
|
|
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th width="5%">No</th>
|
|
<th>Kode</th>
|
|
<th>Nama Shift</th>
|
|
<th>Jam Masuk</th>
|
|
<th>Jam Pulang</th>
|
|
<th>Toleransi</th>
|
|
<th>Jam Kerja</th>
|
|
<th>Type</th>
|
|
<th width="15%">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody></tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- MODAL -->
|
|
<div class="modal fade" id="modalShift">
|
|
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
|
|
<div class="modal-content rounded-4">
|
|
|
|
<div class="modal-header bg-warning text-white">
|
|
|
|
<h5 class="modal-title">
|
|
Tambah Shift
|
|
</h5>
|
|
|
|
<button class="btn-close btn-close-white"
|
|
data-bs-dismiss="modal"></button>
|
|
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
<input type="hidden" id="inputId">
|
|
|
|
<label class="fw-semibold">
|
|
Kode Shift
|
|
</label>
|
|
|
|
<input type="text"
|
|
class="form-control"
|
|
id="shift_code">
|
|
|
|
<label class="fw-semibold mt-2">
|
|
Nama Shift
|
|
</label>
|
|
|
|
<input type="text"
|
|
class="form-control"
|
|
id="shift_name">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-6">
|
|
|
|
<label class="fw-semibold mt-2">
|
|
Jam Masuk
|
|
</label>
|
|
|
|
<input type="time"
|
|
class="form-control"
|
|
id="checkin_time">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<label class="fw-semibold mt-2">
|
|
Jam Pulang
|
|
</label>
|
|
|
|
<input type="time"
|
|
class="form-control"
|
|
id="checkout_time">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-6">
|
|
|
|
<label class="fw-semibold mt-2">
|
|
Toleransi Telat
|
|
</label>
|
|
|
|
<input type="number"
|
|
class="form-control"
|
|
id="late_tolerance_minutes">
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<label class="fw-semibold mt-2">
|
|
Jam Kerja
|
|
</label>
|
|
|
|
<input type="number"
|
|
step="0.1"
|
|
class="form-control"
|
|
id="work_hours">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<label class="fw-semibold mt-2">
|
|
Jenis Shift
|
|
</label>
|
|
|
|
<select class="form-control"
|
|
id="is_night_shift">
|
|
|
|
<option value="0">
|
|
Normal Shift
|
|
</option>
|
|
|
|
<option value="1">
|
|
Night Shift
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
|
|
<button class="btn btn-secondary"
|
|
data-bs-dismiss="modal">
|
|
|
|
Batal
|
|
|
|
</button>
|
|
|
|
<button class="btn btn-warning"
|
|
id="btnSimpan">
|
|
|
|
Simpan
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
$(function(){
|
|
|
|
let table = $('#tableShifts').DataTable({
|
|
processing:true,
|
|
responsive:true,
|
|
autoWidth:false,
|
|
ajax:{
|
|
url: `<?= base_url(); ?>` + 'shifts/get_data',
|
|
dataSrc:'data'
|
|
},
|
|
order:[],
|
|
columns:[
|
|
{data:0, orderable:false},
|
|
{data:1},
|
|
{data:2},
|
|
{data:3},
|
|
{data:4},
|
|
{data:5},
|
|
{data:6},
|
|
{data:7},
|
|
{data:8, orderable:false}
|
|
],
|
|
language:{
|
|
processing:`
|
|
<div class="text-center">
|
|
<div class="spinner-border text-warning"></div>
|
|
</div>
|
|
`
|
|
}
|
|
});
|
|
|
|
// =========================================
|
|
// RESET
|
|
// =========================================
|
|
function resetForm(){
|
|
|
|
$('#inputId').val('');
|
|
$('#shift_code').val('');
|
|
$('#shift_name').val('');
|
|
$('#checkin_time').val('');
|
|
$('#checkout_time').val('');
|
|
$('#late_tolerance_minutes').val(0);
|
|
$('#work_hours').val(8);
|
|
$('#is_night_shift').val(0);
|
|
|
|
$('#modalShift .modal-title')
|
|
.text('Tambah Shift');
|
|
}
|
|
|
|
// =========================================
|
|
// ADD
|
|
// =========================================
|
|
$('.btn-add').click(function(){
|
|
|
|
resetForm();
|
|
|
|
$('#btnSimpan')
|
|
.data('action','add');
|
|
|
|
$('#modalShift').modal('show');
|
|
});
|
|
|
|
// =========================================
|
|
// SAVE UPDATE
|
|
// =========================================
|
|
$('#btnSimpan').click(function(){
|
|
|
|
let action = $(this).data('action');
|
|
|
|
let data = {
|
|
id: $('#inputId').val(),
|
|
shift_code: $('#shift_code').val(),
|
|
shift_name: $('#shift_name').val(),
|
|
checkin_time: $('#checkin_time').val(),
|
|
checkout_time: $('#checkout_time').val(),
|
|
late_tolerance_minutes: $('#late_tolerance_minutes').val(),
|
|
work_hours: $('#work_hours').val(),
|
|
is_night_shift: $('#is_night_shift').val()
|
|
};
|
|
|
|
if(
|
|
!data.shift_code ||
|
|
!data.shift_name
|
|
){
|
|
Swal.fire(
|
|
'Warning',
|
|
'Kode & Nama Shift wajib diisi',
|
|
'warning'
|
|
);
|
|
|
|
return;
|
|
}
|
|
|
|
let url = action === 'add'
|
|
? `<?= base_url(); ?>` + 'shifts/save'
|
|
: `<?= base_url(); ?>` + 'shifts/update';
|
|
|
|
$.ajax({
|
|
url:url,
|
|
type:'POST',
|
|
data:data,
|
|
dataType:'json',
|
|
success:function(res){
|
|
|
|
if(res.status){
|
|
|
|
$('#modalShift').modal('hide');
|
|
|
|
table.ajax.reload(null,false);
|
|
|
|
Swal.fire(
|
|
'Sukses',
|
|
res.message,
|
|
'success'
|
|
);
|
|
|
|
} else {
|
|
|
|
Swal.fire(
|
|
'Error',
|
|
res.message,
|
|
'error'
|
|
);
|
|
}
|
|
},
|
|
error:function(){
|
|
|
|
Swal.fire(
|
|
'Error',
|
|
'Terjadi kesalahan server',
|
|
'error'
|
|
);
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
// =========================================
|
|
// EDIT
|
|
// =========================================
|
|
$(document).on('click','.btn-edit',function(){
|
|
|
|
let id = $(this).data('id');
|
|
|
|
$.get(
|
|
`<?= base_url(); ?>` + 'shifts/detail/' + id,
|
|
function(res){
|
|
|
|
$('#inputId').val(res.id);
|
|
$('#shift_code').val(res.shift_code);
|
|
$('#shift_name').val(res.shift_name);
|
|
$('#checkin_time').val(res.checkin_time);
|
|
$('#checkout_time').val(res.checkout_time);
|
|
$('#late_tolerance_minutes').val(res.late_tolerance_minutes);
|
|
$('#work_hours').val(res.work_hours);
|
|
$('#is_night_shift').val(res.is_night_shift);
|
|
|
|
$('#modalShift .modal-title')
|
|
.text('Edit Shift');
|
|
|
|
$('#btnSimpan')
|
|
.data('action','edit');
|
|
|
|
$('#modalShift').modal('show');
|
|
|
|
},
|
|
'json'
|
|
);
|
|
|
|
});
|
|
|
|
// =========================================
|
|
// DELETE
|
|
// =========================================
|
|
$(document).on('click','.btn-delete',function(){
|
|
|
|
let id = $(this).data('id');
|
|
|
|
Swal.fire({
|
|
title:'Yakin hapus?',
|
|
text:'Data tidak bisa dikembalikan!',
|
|
icon:'warning',
|
|
showCancelButton:true,
|
|
confirmButtonText:'Ya, hapus'
|
|
}).then((result)=>{
|
|
|
|
if(result.isConfirmed){
|
|
|
|
$.get(
|
|
`<?= base_url(); ?>` + 'shifts/delete/' + id,
|
|
function(res){
|
|
|
|
if(res.status){
|
|
|
|
table.ajax.reload(null,false);
|
|
|
|
Swal.fire(
|
|
'Sukses',
|
|
res.message,
|
|
'success'
|
|
);
|
|
|
|
} else {
|
|
|
|
Swal.fire(
|
|
'Error',
|
|
res.message,
|
|
'error'
|
|
);
|
|
}
|
|
|
|
},
|
|
'json'
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
</script> |