446 lines
19 KiB
PHP
446 lines
19 KiB
PHP
<!doctype html>
|
|
<html class="fixed sidebar-left-collapsed">
|
|
|
|
<head>
|
|
|
|
<!-- Basic -->
|
|
<meta charset="UTF-8">
|
|
|
|
<title>DASHBOARD</title>
|
|
<meta name="keywords" content="HTML5 Admin Template" />
|
|
<meta name="description" content="Porto Admin - Responsive HTML5 Template">
|
|
<meta name="author" content="okler.net">
|
|
|
|
<!-- Mobile Metas -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
|
|
<!-- Vendor CSS -->
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/bootstrap/css/bootstrap.css" />
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/font-awesome/css/font-awesome.css" />
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/magnific-popup/magnific-popup.css" />
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
|
|
|
|
<!-- Specific Page Vendor CSS -->
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/select2/select2.css" />
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/jquery-datatables-bs3/assets/css/datatables.css" />
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/pnotify/pnotify.custom.css" />
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/vendor/base/jquery-ui.css" />
|
|
|
|
<!-- Theme CSS -->
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/stylesheets/theme.css" />
|
|
|
|
<!-- Skin CSS -->
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/stylesheets/skins/default.css" />
|
|
|
|
<!-- Theme Custom CSS -->
|
|
<link rel="stylesheet" href="<?php echo base_url('') ?>assets/stylesheets/theme-custom.css">
|
|
|
|
<!-- Head Libs -->
|
|
<script src="<?php echo base_url('') ?>assets/vendor/modernizr/modernizr.js"></script>
|
|
|
|
</head>
|
|
<script src="<?= base_url() ?>assets/bower_components/jquery/jquery-3.3.1.min.js"></script>
|
|
<script src="<?= base_url() ?>assets/bower_components/sweetalert2/sweetalert2.all.min.js"></script>
|
|
|
|
<style>
|
|
.ui-front {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.solid {
|
|
border-left-style: solid;
|
|
border-width: 5px;
|
|
border-color: darkcyan;
|
|
}
|
|
|
|
.f18 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Create a three-column layout */
|
|
.column3 {
|
|
float: left;
|
|
width: 33.33%;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
let base_url = '<?= base_url() ?>';
|
|
</script>
|
|
|
|
<body>
|
|
<section class="body">
|
|
|
|
<!-- start: header -->
|
|
<?php $this->load->view('template/header'); ?>
|
|
<!-- end: header -->
|
|
|
|
<div class="inner-wrapper">
|
|
<!-- start: sidebar -->
|
|
<?php $this->load->view('template/sidebar'); ?>
|
|
<!-- end: sidebar -->
|
|
|
|
<section role="main" class="content-body">
|
|
|
|
<?php
|
|
$id_karyawan = $this->session->userdata('id_karyawan');
|
|
$jabatan = $this->session->userdata('jabatan');
|
|
$nama_panggilan = $this->session->userdata('nama_panggilan');
|
|
$username = $this->session->userdata('username');
|
|
$tgl_now = date('d/m/Y');
|
|
?>
|
|
|
|
<header class="page-header">
|
|
<h2><b>Data Absensi | </b><b style="color:LightGreen">[<?=$nama_panggilan?>]</b></h2>
|
|
<div class="right-wrapper pull-right">
|
|
<ol class="breadcrumbs">
|
|
<li><span><b style="color:Gold">Master Data </span></b></li>
|
|
</ol>
|
|
<a class="sidebar-right-toggle" data-open="sidebar-right"><i class="fa fa-chevron-left"></i></a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- start: page -->
|
|
<section class="panel panel-featured panel-featured-dark">
|
|
<header class="panel-heading">
|
|
<div class="panel-actions">
|
|
<a href="<?php echo base_url('') ?>index.php" class="text-dark"><b>Dashboard </b><i class="fa fa-home"></i></a>
|
|
</div>
|
|
<h2 class="panel-title"><b style="color:DarkSlateGray">DATA ABSENSI <?php if ($jabatan=="ADMINISTRATOR" OR strpos($jabatan,"KADIV")!==FALSE OR strpos($jabatan,"PIMPINAN")!==FALSE) { ?>| <a href="<?php echo base_url('') ?>index.php/Menu/DA_Sub3_AbsensiKaryawan_2"><i style="color:DarkRed">Ambil Laporan Disini <i class="fa fa-search"></i></i></a> | <a href="<?php echo base_url('') ?>index.php/Menu/DA_Sub3_AbsensiKaryawan_3/0"><i style="color:Blue">Keterangan Cuti Disini <i class="fa fa-search"></i></i></a><?php } ?></b></h2>
|
|
</header>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="panel-body">
|
|
<div class="form-group">
|
|
<input type="hidden" class="form-control" id="karyawan_id">
|
|
<h4><div class="col-md-2"><b style="color:SlateBlue">Karyawan</b></div></h4>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<select data-plugin-selectTwo id="id_karyawan" class="form-control populate" onchange="isiData(value)">
|
|
<option value="" selected>Pilih Karyawan</option>
|
|
<?php if (is_array($karyawan) || is_object($karyawan)) {
|
|
foreach ($karyawan as $key) { ?>
|
|
<?php if ($id_karyawan==$key['ID_KARYAWAN']) { ?>
|
|
<option value="<?= $key['ID_KARYAWAN'] ?>" selected><?= $key['NAMA_PANGGILAN_KARYAWAN'] ?></option>
|
|
<?php } else { ?>
|
|
<option value="<?= $key['ID_KARYAWAN'] ?>" ><?= $key['NAMA_PANGGILAN_KARYAWAN'] ?></option>
|
|
<?php } ?>
|
|
<?php }
|
|
} ?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<h4><div class="col-md-2"><b style="color:SlateBlue">Periode</b></div></h4>
|
|
<div class="col-md-4">
|
|
<div class="input-daterange input-group">
|
|
<input type="date" class="form-control" id="tgl_awal" value="<?=$tgl_awal?>">
|
|
<span class="input-group-addon">to</span>
|
|
<input type="date" class="form-control" id="tgl_akhir" value="<?=$tgl_akhir?>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<h4><div class="col-md-2"><b style="color:SlateBlue">Menu</b></div></h4>
|
|
<div class="col-md-10 btn-group">
|
|
<button disabled id="lihatButton" type="button" class="btn btn-default" onclick="lihatData()" target="_blank"><b style="color:Navy">Preview <i class="fa fa-search"></i></b></button>
|
|
<button type="button" class="btn btn-default" onclick="reloadData()"><b style="color:FireBrick">Reset <i class="fa fa-rotate-left"></i></b></button>
|
|
<element id="progressRotate" hidden="hidden"><h4><div class="col-md-3"><b style="color:Red"><i class="fa fa-refresh fa-spin"></i> <i>Memuat Data<span id="wait">.</span></i></b></div><h4></element>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-md-12 text-right">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default" style="color:Green"><b>ONTIME <b id="count1">0</b>x</b></button>
|
|
<button type="button" class="btn btn-default" style="color:Red"><b>TERLAMBAT <b id="count2">0</b>x</b></button>
|
|
<button type="button" class="btn btn-default" style="color:Blue"><b>CUTI <b id="count3">0</b>x</b></button>
|
|
<button type="button" class="btn btn-default" style="color:DarkOrange"><b>SAKIT <b id="count4">0</b>x</b></button>
|
|
<button type="button" class="btn btn-default" style="color:Teal"><b>WFH <b id="count5">0</b>x</b></button>
|
|
<button type="button" class="btn btn-default" style="color:FireBrick"><b>LIBUR <b id="count9">0</b>x</b></button>
|
|
<button type="button" class="btn btn-default" style="color:HotPink"><b>TIDAK MASUK <b id="count8">0</b>x</b></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="column3">
|
|
<table class="table table-bordered table-striped mb-none">
|
|
<thead>
|
|
<th class="center default">No</th>
|
|
<th class="default">Tanggal</th>
|
|
<th class="default">Status</th>
|
|
</thead>
|
|
<tbody id="isiTabel1"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="column3">
|
|
<table class="table table-bordered table-striped mb-none">
|
|
<thead>
|
|
<th class="center default">No</th>
|
|
<th class="default">Tanggal</th>
|
|
<th class="default">Status</th>
|
|
</thead>
|
|
<tbody id="isiTabel2"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="column3">
|
|
<table class="table table-bordered table-striped mb-none">
|
|
<thead>
|
|
<th class="center default">No</th>
|
|
<th class="default">Tanggal</th>
|
|
<th class="default">Status</th>
|
|
</thead>
|
|
<tbody id="isiTabel3"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<?php
|
|
$this->load->view('template/sidebar_right');
|
|
$this->load->view('template/script_vendor');
|
|
$this->load->view('template/script_flashdata');
|
|
$this->load->view('template/notification');
|
|
?>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var baris = '';
|
|
baris += '<tr>';
|
|
baris += '<td class="text-center" colspan="9"><h5><i><b style="color:Tomato">Data belum dipilih...</b></i></h5></td>';
|
|
baris += '</tr>';
|
|
|
|
$('#isiTabel1').html(baris);
|
|
$('#isiTabel2').html(baris);
|
|
$('#isiTabel3').html(baris);
|
|
|
|
var id_karyawan = <?=$id_karyawan?>;
|
|
document.getElementById("karyawan_id").value = id_karyawan;
|
|
if (id_karyawan==1 || id_karyawan==50) {
|
|
id_karyawan = "";
|
|
} else {
|
|
document.getElementById("lihatButton").disabled = false;
|
|
}
|
|
tampilkanData(id_karyawan);
|
|
})
|
|
|
|
var dots = window.setInterval( function() {
|
|
var wait = document.getElementById("wait");
|
|
if (wait.innerHTML.length > 3) wait.innerHTML = ""; else wait.innerHTML += ".";
|
|
}, 500);
|
|
|
|
function reloadData() {
|
|
location.reload();
|
|
}
|
|
|
|
function isiData(id) {
|
|
document.getElementById("karyawan_id").value = id;
|
|
|
|
if (id=="") {
|
|
document.getElementById("lihatButton").disabled = true;
|
|
} else {
|
|
document.getElementById("lihatButton").disabled = false;
|
|
}
|
|
}
|
|
|
|
function lihatData() {
|
|
var id_karyawan = document.getElementById("karyawan_id").value;
|
|
tampilkanData(id_karyawan);
|
|
}
|
|
|
|
function tampilkanData(id) {
|
|
var awal = document.getElementById("tgl_awal").value;
|
|
var akhir = document.getElementById("tgl_akhir").value;
|
|
if (id!="") {
|
|
$.ajax({
|
|
type: 'POST',
|
|
data: {
|
|
id_karyawan : id,
|
|
awal : awal,
|
|
akhir : akhir,
|
|
},
|
|
url: '<?= base_url('') ?>index.php/Menu/DA_Ambil_Sub3_A1_DataAbsensi',
|
|
dataType: 'json',
|
|
success: function(response) {
|
|
var baris1 = '';
|
|
var baris2 = '';
|
|
var baris3 = '';
|
|
JUMLAH = response.total;
|
|
base = parseInt(JUMLAH);
|
|
mod = base % 3;
|
|
if (base==1 || base==2) {
|
|
max_div1 = 1;
|
|
max_div2 = 2;
|
|
max_div3 = 3;
|
|
max_tab = base;
|
|
} else {
|
|
if (mod==0) {
|
|
parameter = base/3;
|
|
} else if (mod==1) {
|
|
beforePara = base+2;
|
|
parameter = beforePara/3;
|
|
} else if (mod==2) {
|
|
beforePara = base+1;
|
|
parameter = beforePara/3;
|
|
}
|
|
max_div1 = parameter;
|
|
max_div2 = 2*parameter;
|
|
max_div3 = 3*parameter;
|
|
max_tab = base;
|
|
}
|
|
|
|
for (var i = 1; i <= max_div1; i++) {
|
|
var tanggal = response.data[i - 1]['TANGGAL'];
|
|
var hari = response.data[i - 1]['HARI'];
|
|
var status = response.data[i - 1]['STATUS'];
|
|
var masuk = response.data[i - 1]['MASUK'];
|
|
var lokasi = response.data[i - 1]['LOKASI'];
|
|
|
|
baris1 += '<tr>';
|
|
baris1 += '<td class="center" style="vertical-align: middle;" >' + i + '</td>';
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;" ><b style="color:DarkSlateGray">' + tanggal + '</b><br>(' + hari + ')</td>';
|
|
if (status==1) {
|
|
if (lokasi=="" || lokasi==null || lokasi=="Tanpa Lokasi") {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Green">ONTIME</b><br>(' + masuk + ')</td>';
|
|
} else {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><a onclick="bukaLokasi(`'+ lokasi +'`)"><b style="color:Green">ONTIME</b> <i class="fa fa-external-link"></i><br>(' + masuk + ')</a></td>';
|
|
}
|
|
} else if (status==2) {
|
|
if (lokasi=="" || lokasi==null || lokasi=="Tanpa Lokasi") {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Red">TERLAMBAT</b><br>(' + masuk + ')</td>';
|
|
} else {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><a onclick="bukaLokasi(`'+ lokasi +'`)"><b style="color:Red">TERLAMBAT</b> <i class="fa fa-external-link"></i><br>(' + masuk + ')</a></td>';
|
|
}
|
|
} else if (status==3) {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Blue">CUTI</b></td>';
|
|
} else if (status==4) {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><b style="color:DarkOrange">SAKIT</b></td>';
|
|
} else if (status==5) {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Teal">WFH</b><br>(' + masuk + ')</td>';
|
|
} else if (status==8) {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><b style="color:HotPink">TIDAK MASUK</b></td>';
|
|
} else if (status==9) {
|
|
baris1 += '<td class="text-left" style="vertical-align: middle;"><b style="color:FireBrick">LIBUR</b><br>(' + masuk + ')</td>';
|
|
}
|
|
baris1 += '</tr>';
|
|
}
|
|
$('#isiTabel1').html(baris1);
|
|
max_div1++;
|
|
|
|
for (var i = max_div1; i <= max_div2; i++) {
|
|
if (i <= JUMLAH) {
|
|
var tanggal = response.data[i - 1]['TANGGAL'];
|
|
var hari = response.data[i - 1]['HARI'];
|
|
var status = response.data[i - 1]['STATUS'];
|
|
var masuk = response.data[i - 1]['MASUK'];
|
|
var lokasi = response.data[i - 1]['LOKASI'];
|
|
|
|
baris2 += '<tr>';
|
|
baris2 += '<td class="center" style="vertical-align: middle;" >' + i + '</td>';
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;" ><b style="color:DarkSlateGray">' + tanggal + '</b><br>(' + hari + ')</td>';
|
|
if (status==1) {
|
|
if (lokasi=="" || lokasi==null || lokasi=="Tanpa Lokasi") {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Green">ONTIME</b><br>(' + masuk + ')</td>';
|
|
} else {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><a onclick="bukaLokasi(`'+ lokasi +'`)"><b style="color:Green">ONTIME</b> <i class="fa fa-external-link"></i><br>(' + masuk + ')</a></td>';
|
|
}
|
|
} else if (status==2) {
|
|
if (lokasi=="" || lokasi==null || lokasi=="Tanpa Lokasi") {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Red">TERLAMBAT</b><br>(' + masuk + ')</td>';
|
|
} else {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><a onclick="bukaLokasi(`'+ lokasi +'`)"><b style="color:Red">TERLAMBAT</b> <i class="fa fa-external-link"></i><br>(' + masuk + ')</a></td>';
|
|
}
|
|
} else if (status==3) {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Blue">CUTI</b></td>';
|
|
} else if (status==4) {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><b style="color:DarkOrange">SAKIT</b></td>';
|
|
} else if (status==5) {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Teal">WFH</b><br>(' + masuk + ')</td>';
|
|
} else if (status==8) {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><b style="color:HotPink">TIDAK MASUK</b></td>';
|
|
} else if (status==9) {
|
|
baris2 += '<td class="text-left" style="vertical-align: middle;"><b style="color:FireBrick">LIBUR</b><br>(' + masuk + ')</td>';
|
|
}
|
|
baris2 += '</tr>';
|
|
} else {
|
|
baris2 += '<tr>';
|
|
baris2 += '<td class="center" style="vertical-align: middle;" > <br> </td>';
|
|
baris2 += '<td class="center" style="vertical-align: middle;" > <br> </td>';
|
|
baris2 += '</tr>';
|
|
}
|
|
}
|
|
$('#isiTabel2').html(baris2);
|
|
max_div2++;
|
|
|
|
for (var i = max_div2; i <= max_div3; i++) {
|
|
if (i <= JUMLAH) {
|
|
var tanggal = response.data[i - 1]['TANGGAL'];
|
|
var hari = response.data[i - 1]['HARI'];
|
|
var status = response.data[i - 1]['STATUS'];
|
|
var masuk = response.data[i - 1]['MASUK'];
|
|
var lokasi = response.data[i - 1]['LOKASI'];
|
|
|
|
baris3 += '<tr>';
|
|
baris3 += '<td class="center" style="vertical-align: middle;" >' + i + '</td>';
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;" ><b style="color:DarkSlateGray">' + tanggal + '</b><br>(' + hari + ')</td>';
|
|
if (status==1) {
|
|
if (lokasi=="" || lokasi==null || lokasi=="Tanpa Lokasi") {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Green">ONTIME</b><br>(' + masuk + ')</td>';
|
|
} else {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><a onclick="bukaLokasi(`'+ lokasi +'`)"><b style="color:Green">ONTIME</b> <i class="fa fa-external-link"></i><br>(' + masuk + ')</a></td>';
|
|
}
|
|
} else if (status==2) {
|
|
if (lokasi=="" || lokasi==null || lokasi=="Tanpa Lokasi") {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Red">TERLAMBAT</b><br>(' + masuk + ')</td>';
|
|
} else {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><a onclick="bukaLokasi(`'+ lokasi +'`)"><b style="color:Red">TERLAMBAT</b> <i class="fa fa-external-link"></i><br>(' + masuk + ')</a></td>';
|
|
}
|
|
} else if (status==3) {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Blue">CUTI</b></td>';
|
|
} else if (status==4) {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><b style="color:DarkOrange">SAKIT</b></td>';
|
|
} else if (status==5) {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><b style="color:Teal">WFH</b><br>(' + masuk + ')</td>';
|
|
} else if (status==8) {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><b style="color:HotPink">TIDAK MASUK</b></td>';
|
|
} else if (status==9) {
|
|
baris3 += '<td class="text-left" style="vertical-align: middle;"><b style="color:FireBrick">LIBUR</b><br>(' + masuk + ')</td>';
|
|
}
|
|
baris3 += '</tr>';
|
|
} else {
|
|
baris3 += '<tr>';
|
|
baris3 += '<td class="center" style="vertical-align: middle;" > <br> </td>';
|
|
baris3 += '<td class="center" style="vertical-align: middle;" > <br> </td>';
|
|
baris3 += '</tr>';
|
|
}
|
|
}
|
|
$('#isiTabel3').html(baris3);
|
|
|
|
$('#count1').html(response.count1);
|
|
$('#count2').html(response.count2);
|
|
$('#count3').html(response.count3);
|
|
$('#count4').html(response.count4);
|
|
$('#count5').html(response.count5);
|
|
$('#count8').html(response.count8);
|
|
$('#count9').html(response.count9);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function bukaLokasi(lokasi) {
|
|
window.open(lokasi,'_blank');
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|