115 lines
4.4 KiB
HTML
115 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>근태현황 대시보드</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container py-5">
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<h5 class="card-title">출근</h5>
|
|
<p class="card-text fs-2" id="presentCount">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<h5 class="card-title">휴가</h5>
|
|
<p class="card-text fs-2" id="leaveCount">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<h5 class="card-title">휴가요청</h5>
|
|
<p class="card-text fs-2" id="leaveCount">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<h5 class="card-title">구매요청</h5>
|
|
<p class="card-text fs-2" id="leaveCount">0</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
휴가자 현황
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>이름</th>
|
|
<th>출근 시간</th>
|
|
<th>퇴근 시간</th>
|
|
<th>상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="attendanceTable">
|
|
<!-- 데이터가 여기에 표시됩니다 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// 샘플 데이터
|
|
const attendanceData = [
|
|
{ name: '홍길동', checkIn: '09:01', checkOut: '18:00', status: '지각' },
|
|
{ name: '김철수', checkIn: '08:55', checkOut: '18:05', status: '정상' },
|
|
{ name: '이영희', checkIn: '-', checkOut: '-', status: '결근' },
|
|
{ name: '박민수', checkIn: '09:00', checkOut: '18:10', status: '정상' },
|
|
{ name: '최지우', checkIn: '09:20', checkOut: '18:00', status: '지각' }
|
|
];
|
|
|
|
function updateDashboard(data) {
|
|
let present = 0, leave = 0, late = 0, absent = 0;
|
|
let tableRows = '';
|
|
data.forEach(item => {
|
|
if (item.status === '정상' || item.status === '지각') present++;
|
|
if (item.checkOut !== '-') leave++;
|
|
if (item.status === '지각') late++;
|
|
if (item.status === '결근') absent++;
|
|
tableRows += `<tr>
|
|
<td>${item.name}</td>
|
|
<td>${item.checkIn}</td>
|
|
<td>${item.checkOut}</td>
|
|
<td>${item.status}</td>
|
|
</tr>`;
|
|
});
|
|
|
|
}
|
|
|
|
// 페이지 로드 시 대시보드 업데이트
|
|
updateDashboard(attendanceData);
|
|
|
|
// 휴가 인원 Ajax 업데이트
|
|
function updateLeaveCount() {
|
|
fetch('http://127.0.0.1:9000/Dashboard/TodayCountH')
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
// 수신된 데이터가 "1" 형태로 반환되므로, 쌍따옴표를 제거하고 숫자로 변환
|
|
const cleanData = data.replace(/"/g, '');
|
|
document.getElementById('leaveCount').textContent = parseInt(cleanData, 10);
|
|
})
|
|
.catch(error => console.error('휴가 인원 업데이트 중 오류 발생:', error));
|
|
}
|
|
|
|
// 페이지 로드 시 휴가 인원 업데이트
|
|
updateLeaveCount();
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|