318 lines
15 KiB
PHP
318 lines
15 KiB
PHP
<?php
|
||
session_start();
|
||
if (!isset($_SESSION['login_admin'])) {
|
||
header('Location: http://localhost/rfidcam/'); // Redirect ke halaman login jika bukan admin
|
||
exit;
|
||
}
|
||
?>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="description" content="">
|
||
<meta name="author" content="">
|
||
<title>Dashboard R-collection</title>
|
||
<link href="../src/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
||
rel="stylesheet">
|
||
<link href="../src/css/sb-admin-2.min.css" rel="stylesheet">
|
||
<link href="../src/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
|
||
<script src="../src/vendor/jquery/jquery.min.js"></script>
|
||
<script src="../src/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function () {
|
||
// Fungsi untuk mengambil dan memperbarui tabel
|
||
function fetchAndUpdateTable(query = '') {
|
||
$.ajax({
|
||
url: 'data_absen_ajax.php',
|
||
method: 'GET',
|
||
data: {search: query},
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
let tableBody = '';
|
||
data.forEach(row => {
|
||
tableBody += `<tr>
|
||
<td>${row.tgl}</td>
|
||
<td>${row.idrfid}</td>
|
||
<td>${row.nama}</td>
|
||
<td class='jam-masuk'>${row.jam_masuk}</td>
|
||
<td class='jam-keluar'>${row.jam_keluar}</td>
|
||
<td class='action-cell'></td>
|
||
</tr>`;
|
||
});
|
||
$('tbody').html(tableBody);
|
||
highlightLateTimes(); // Sorot setelah mengambil data
|
||
}
|
||
});
|
||
}
|
||
|
||
// Event listener untuk input pencarian saat menekan tombol Enter
|
||
$('#searchInput').on('keyup', function () {
|
||
let searchQuery = this.value.trim();
|
||
fetchAndUpdateTable(searchQuery);
|
||
});
|
||
|
||
// Fungsi untuk menyoroti waktu yang terlambat
|
||
function highlightLateTimes() {
|
||
let jamMasukLimit = localStorage.getItem('jamMasukLimit') || '09:00';
|
||
let jamKeluarLimit = localStorage.getItem('jamKeluarLimit') || '16:00';
|
||
|
||
document.querySelectorAll('.jam-masuk').forEach(function (element) {
|
||
if (element.textContent > jamMasukLimit) {
|
||
element.style.color = 'red';
|
||
} else {
|
||
element.style.color = 'black';
|
||
}
|
||
});
|
||
|
||
document.querySelectorAll('.jam-keluar').forEach(function (element) {
|
||
if (element.textContent < jamKeluarLimit) {
|
||
element.style.color = 'red';
|
||
} else {
|
||
element.style.color = 'black';
|
||
}
|
||
});
|
||
|
||
document.querySelectorAll('tr').forEach(function (row) {
|
||
let jamMasuk = row.querySelector('.jam-masuk');
|
||
let jamKeluar = row.querySelector('.jam-keluar');
|
||
let actionCell = row.querySelector('.action-cell');
|
||
|
||
if (jamMasuk && jamKeluar && actionCell) {
|
||
let terlambat = jamMasuk.style.color === 'red';
|
||
let pulangDulu = jamKeluar.style.color === 'red';
|
||
|
||
if (terlambat && pulangDulu) {
|
||
actionCell.textContent = 'Terlambat dan Pulang Dulu';
|
||
} else if (terlambat) {
|
||
actionCell.textContent = 'Terlambat';
|
||
} else if (pulangDulu) {
|
||
actionCell.textContent = 'Pulang Dulu';
|
||
} else {
|
||
actionCell.textContent = 'Tidak Terlambat';
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Event listener untuk tombol atur batas jam
|
||
$('#setLimitBtn').on('click', function () {
|
||
let jamMasukLimit = document.getElementById('jamMasukLimit').value;
|
||
let jamKeluarLimit = document.getElementById('jamKeluarLimit').value;
|
||
|
||
localStorage.setItem('jamMasukLimit', jamMasukLimit);
|
||
localStorage.setItem('jamKeluarLimit', jamKeluarLimit);
|
||
|
||
highlightLateTimes();
|
||
});
|
||
|
||
// Set nilai batas jam dari Local Storage saat halaman dimuat
|
||
if (localStorage.getItem('jamMasukLimit')) {
|
||
document.getElementById('jamMasukLimit').value = localStorage.getItem('jamMasukLimit');
|
||
}
|
||
if (localStorage.getItem('jamKeluarLimit')) {
|
||
document.getElementById('jamKeluarLimit').value = localStorage.getItem('jamKeluarLimit');
|
||
}
|
||
|
||
// Panggil fungsi untuk pertama kali untuk menampilkan data awal
|
||
fetchAndUpdateTable();
|
||
});
|
||
</script>
|
||
</head>
|
||
<body id="page-top">
|
||
<!-- Page Wrapper -->
|
||
<div id="wrapper">
|
||
<!-- Sidebar -->
|
||
<?php include 'partial_sidebar.php'; ?>
|
||
<!-- End of Sidebar -->
|
||
|
||
<!-- Content Wrapper -->
|
||
<div id="content-wrapper" class="d-flex flex-column">
|
||
<!-- Main Content -->
|
||
<div id="content">
|
||
<!-- Topbar -->
|
||
<?php include 'partial_topbar.php'; ?>
|
||
<!-- End of Topbar -->
|
||
|
||
<!-- Begin Page Content -->
|
||
<div class="container-fluid">
|
||
<!-- Page Heading -->
|
||
<h1 class="h3 mb-2 text-gray-800">Data Absensi</h1>
|
||
<!-- DataTales Example -->
|
||
<div class="card shadow mb-4">
|
||
<div class="card-header py-3">
|
||
<h6 class="m-0 font-weight-bold text-primary">Data Absensi Harian</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="col-md-12">
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-6">
|
||
<form action="data_absen-index.php" method="get">
|
||
<div class="col">
|
||
<input type="text" class="form-control" placeholder="Pencarian data karyawan" name="search" id="searchInput">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<br>
|
||
<!-- Form untuk mengatur waktu masuk dan keluar -->
|
||
<div class="row mb-4 justify-content-center">
|
||
<div class="col-md-6">
|
||
<label for="jamMasukLimit">Jam Masuk Batas:</label>
|
||
<input type="time" id="jamMasukLimit" class="form-control" value="09:00">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="jamKeluarLimit">Jam Keluar Batas:</label>
|
||
<input type="time" id="jamKeluarLimit" class="form-control" value="16:00">
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<button id="setLimitBtn" class="btn btn-primary mb-4">Atur Batas Jam</button>
|
||
</div>
|
||
<!-- Sisa kode Anda -->
|
||
</div>
|
||
</div>
|
||
<?php
|
||
require_once "config.php";
|
||
|
||
if (isset($_GET['pageno'])) {
|
||
$pageno = $_GET['pageno'];
|
||
} else {
|
||
$pageno = 1;
|
||
}
|
||
$no_of_records_per_page = 10;
|
||
$offset = ($pageno - 1) * $no_of_records_per_page;
|
||
|
||
$total_pages_sql = "SELECT COUNT(*) FROM data_absen";
|
||
$result = mysqli_query($link, $total_pages_sql);
|
||
$total_rows = mysqli_fetch_array($result)[0];
|
||
$total_pages = ceil($total_rows / $no_of_records_per_page);
|
||
|
||
$orderBy = array('tgl', 'idrfid', 'nama');
|
||
$order = 'tgl'; // Ubah order menjadi 'tgl' untuk mengambil data berdasarkan tanggal absensi
|
||
$sort = 'desc';
|
||
if (isset($_GET['order']) && in_array($_GET['order'], $orderBy)) {
|
||
$order = $_GET['order'];
|
||
}
|
||
|
||
$sortBy = array('asc', 'desc');
|
||
$sort = 'desc';
|
||
if (isset($_GET['sort']) && in_array($_GET['sort'], $sortBy)) {
|
||
if ($_GET['sort'] == 'asc') {
|
||
$sort = 'desc';
|
||
} else {
|
||
$sort = 'asc';
|
||
}
|
||
}
|
||
|
||
$sql = "SELECT data_absen.idrfid, tgl, nama, division,
|
||
rekap_masuk AS jam_masuk,
|
||
rekap_keluar AS jam_keluar
|
||
FROM data_absen
|
||
JOIN data_karyawan ON data_absen.idrfid=data_karyawan.idrfid";
|
||
if (!empty($searchQuery)) {
|
||
$sql .= " WHERE tgl LIKE '%$searchQuery%' OR data_absen.idrfid LIKE '%$searchQuery%' OR nama LIKE '%$searchQuery%'";
|
||
}
|
||
$sql .= " ORDER BY $order $sort LIMIT $offset, $no_of_records_per_page";
|
||
|
||
$result = mysqli_query($link, $sql);
|
||
?>
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
|
||
<thead>
|
||
<tr>
|
||
<th><a href="?search=<?php echo $searchQuery; ?>&sort=<?php echo $sort ?>&order=tgl">Tanggal</a></th>
|
||
<th><a href="?search=<?php echo $searchQuery; ?>&sort=<?php echo $sort ?>&order=idrfid">ID RFID</a></th>
|
||
<th><a href="?search=<?php echo $searchQuery; ?>&sort=<?php echo $sort ?>&order=nama">Nama</a></th>
|
||
<th>Jam Masuk</th>
|
||
<th>Jam Keluar</th>
|
||
<th>Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php
|
||
while ($row = mysqli_fetch_assoc($result)) {
|
||
echo "<tr>";
|
||
echo "<td>" . $row['tgl'] . "</td>";
|
||
echo "<td>" . $row['idrfid'] . "</td>";
|
||
echo "<td>" . $row['nama'] . "</td>";
|
||
echo "<td class='jam-masuk'>" . $row['jam_masuk'] . "</td>";
|
||
echo "<td class='jam-keluar'>" . $row['jam_keluar'] . "</td>";
|
||
echo "<td class='action-cell'></td>";
|
||
echo "</tr>";
|
||
}
|
||
?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<nav aria-label="Page navigation example">
|
||
<ul class="pagination">
|
||
<li class="page-item"><a class="page-link" href="?pageno=1">First</a></li>
|
||
<li class="page-item <?php if($pageno <= 1){ echo 'disabled'; } ?>">
|
||
<a class="page-link" href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
|
||
</li>
|
||
<li class="page-item <?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
|
||
<a class="page-link" href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Next</a>
|
||
</li>
|
||
<li class="page-item"><a class="page-link" href="?pageno=<?php echo $total_pages; ?>">Last</a></li>
|
||
</ul>
|
||
</nav>
|
||
<?php
|
||
mysqli_free_result($result);
|
||
mysqli_close($link);
|
||
?>
|
||
</div>
|
||
</div>
|
||
<!-- /.container-fluid -->
|
||
</div>
|
||
<!-- End of Main Content -->
|
||
|
||
<!-- Footer -->
|
||
<footer class="sticky-footer bg-white">
|
||
<div class="container my-auto">
|
||
<div class="copyright text-center my-auto">
|
||
<span>Copyright © Your Website 2024</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- End of Footer -->
|
||
</div>
|
||
<!-- End of Content Wrapper -->
|
||
</div>
|
||
<!-- End of Page Wrapper -->
|
||
|
||
<!-- Scroll to Top Button-->
|
||
<a class="scroll-to-top rounded" href="#page-top">
|
||
<i class="fas fa-angle-up"></i>
|
||
</a>
|
||
|
||
<!-- Logout Modal-->
|
||
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||
aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||
<a class="btn btn-primary" href="login.html">Logout</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../src/vendor/jquery-easing/jquery.easing.min.js"></script>
|
||
<script src="../src/js/sb-admin-2.min.js"></script>
|
||
<script src="../src/vendor/datatables/jquery.dataTables.min.js"></script>
|
||
<script src="../src/vendor/datatables/dataTables.bootstrap4.min.js"></script>
|
||
</body>
|
||
</html>
|