74d3a78aa3
- 페이지 폴더 재구성: safety/, attendance/ 폴더 신규 생성 - work/ → safety/: 이슈 신고, 출입 신청 관련 페이지 이동 - common/ → attendance/: 근태/휴가 관련 페이지 이동 - admin/ 정리: safety-* 파일들을 safety/로 이동 - 사이드바 네비게이션 메뉴 구현 - 카테고리별 메뉴: 작업관리, 안전관리, 근태관리, 시스템관리 - 접기/펼치기 기능 및 상태 저장 - 관리자 전용 메뉴 자동 표시/숨김 - 날씨 API 연동 (기상청 단기예보) - TBM 및 navbar에 현재 날씨 표시 - weatherService.js 추가 - 안전 체크리스트 확장 - 기본/날씨별/작업별 체크 유형 추가 - checklist-manage.html 페이지 추가 - 이슈 신고 시스템 구현 - workIssueController, workIssueModel, workIssueRoutes 추가 - DB 마이그레이션 파일 추가 (실행 대기) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
268 lines
8.9 KiB
HTML
268 lines
8.9 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 rel="stylesheet" href="/css/design-system.css">
|
|
<link rel="stylesheet" href="/css/admin-pages.css?v=7">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
<script src="/js/auth-check.js?v=1" defer></script>
|
|
<script type="module" src="/js/api-config.js?v=3"></script>
|
|
<style>
|
|
.tabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
}
|
|
.tab {
|
|
padding: 0.75rem 1.5rem;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
transition: all 0.2s;
|
|
}
|
|
.tab:hover {
|
|
color: #111827;
|
|
}
|
|
.tab.active {
|
|
color: #3b82f6;
|
|
border-bottom-color: #3b82f6;
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 네비게이션 바 -->
|
|
<div id="navbar-container"></div>
|
|
|
|
<!-- 메인 콘텐츠 -->
|
|
<main class="main-content">
|
|
<div class="dashboard-main">
|
|
<div class="page-header">
|
|
<div class="page-title-section">
|
|
<h1 class="page-title">
|
|
<span class="title-icon">✅</span>
|
|
휴가 승인 관리
|
|
</h1>
|
|
<p class="page-description">휴가 신청을 승인하거나 거부합니다</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 탭 메뉴 -->
|
|
<div class="tabs">
|
|
<button class="tab active" onclick="switchTab('pending')">승인 대기 목록</button>
|
|
<button class="tab" onclick="switchTab('all')">전체 신청 내역</button>
|
|
</div>
|
|
|
|
<!-- 승인 대기 목록 탭 -->
|
|
<div id="pendingTab" class="tab-content active">
|
|
<div class="content-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">승인 대기 목록</h2>
|
|
<p class="text-muted">대기 중인 휴가 신청을 승인하거나 거부할 수 있습니다</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="pendingRequestsList" class="data-table-container">
|
|
<!-- 승인 대기 목록이 여기에 동적으로 렌더링됩니다 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 전체 신청 내역 탭 -->
|
|
<div id="allTab" class="tab-content">
|
|
<div class="content-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">전체 신청 내역</h2>
|
|
<div class="page-actions">
|
|
<input type="date" id="filterStartDate" class="form-control" style="width: auto;">
|
|
<span style="margin: 0 0.5rem;">~</span>
|
|
<input type="date" id="filterEndDate" class="form-control" style="width: auto;">
|
|
<button class="btn btn-secondary" onclick="filterAllRequests()">
|
|
<span>🔍 조회</span>
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="resetFilter()">
|
|
<span>🔄 전체</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="allRequestsList" class="data-table-container">
|
|
<!-- 전체 신청 내역이 여기에 동적으로 렌더링됩니다 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script src="/js/vacation-common.js"></script>
|
|
<script type="module" src="/js/load-navbar.js?v=5"></script>
|
|
<script type="module">
|
|
import '/js/api-config.js?v=3';
|
|
</script>
|
|
<script>
|
|
// axios 기본 설정
|
|
(function() {
|
|
const checkApiConfig = setInterval(() => {
|
|
if (window.API_BASE_URL) {
|
|
clearInterval(checkApiConfig);
|
|
axios.defaults.baseURL = window.API_BASE_URL;
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
|
|
axios.interceptors.request.use(
|
|
config => {
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
config.headers.Authorization = `Bearer ${token}`;
|
|
}
|
|
return config;
|
|
},
|
|
error => Promise.reject(error)
|
|
);
|
|
|
|
axios.interceptors.response.use(
|
|
response => response,
|
|
error => {
|
|
if (error.response?.status === 401) {
|
|
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
|
|
window.location.href = '/pages/login.html';
|
|
}
|
|
return Promise.reject(error);
|
|
}
|
|
);
|
|
}
|
|
}, 50);
|
|
})();
|
|
</script>
|
|
<script>
|
|
let allRequestsData = [];
|
|
|
|
// 페이지 로드 시 초기화
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await waitForAxiosConfig();
|
|
initializePage();
|
|
});
|
|
|
|
async function initializePage() {
|
|
try {
|
|
const currentUser = getCurrentUser();
|
|
|
|
// 관리자 권한 체크
|
|
if (currentUser.access_level !== 'system' && currentUser.access_level !== 'admin') {
|
|
alert('관리자만 접근할 수 있습니다.');
|
|
window.location.href = '/pages/common/my-vacation.html';
|
|
return;
|
|
}
|
|
|
|
await loadPendingRequests();
|
|
await loadAllRequests();
|
|
|
|
// 휴가 업데이트 이벤트 리스너
|
|
window.addEventListener('vacation-updated', () => {
|
|
loadPendingRequests();
|
|
loadAllRequests();
|
|
});
|
|
|
|
// 날짜 필터 초기화 (최근 3개월)
|
|
const today = new Date();
|
|
const threeMonthsAgo = new Date();
|
|
threeMonthsAgo.setMonth(today.getMonth() - 3);
|
|
|
|
document.getElementById('filterStartDate').value = threeMonthsAgo.toISOString().split('T')[0];
|
|
document.getElementById('filterEndDate').value = today.toISOString().split('T')[0];
|
|
} catch (error) {
|
|
console.error('초기화 오류:', error);
|
|
alert('페이지 초기화 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
|
|
function switchTab(tabName) {
|
|
// 모든 탭과 컨텐츠 비활성화
|
|
document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
|
|
|
|
// 선택한 탭 활성화
|
|
if (tabName === 'pending') {
|
|
document.querySelector('.tab:nth-child(1)').classList.add('active');
|
|
document.getElementById('pendingTab').classList.add('active');
|
|
} else if (tabName === 'all') {
|
|
document.querySelector('.tab:nth-child(2)').classList.add('active');
|
|
document.getElementById('allTab').classList.add('active');
|
|
}
|
|
}
|
|
|
|
async function loadPendingRequests() {
|
|
try {
|
|
const response = await axios.get('/vacation-requests/pending');
|
|
if (response.data.success) {
|
|
renderVacationRequests(response.data.data, 'pendingRequestsList', true, 'approval');
|
|
}
|
|
} catch (error) {
|
|
console.error('승인 대기 목록 로드 오류:', error);
|
|
document.getElementById('pendingRequestsList').innerHTML = `
|
|
<div class="empty-state">
|
|
<p>승인 대기 중인 신청이 없습니다.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
async function loadAllRequests() {
|
|
try {
|
|
const response = await axios.get('/vacation-requests');
|
|
if (response.data.success) {
|
|
allRequestsData = response.data.data;
|
|
renderVacationRequests(allRequestsData, 'allRequestsList', false);
|
|
}
|
|
} catch (error) {
|
|
console.error('전체 신청 내역 로드 오류:', error);
|
|
document.getElementById('allRequestsList').innerHTML = `
|
|
<div class="empty-state">
|
|
<p>신청 내역이 없습니다.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function filterAllRequests() {
|
|
const startDate = document.getElementById('filterStartDate').value;
|
|
const endDate = document.getElementById('filterEndDate').value;
|
|
|
|
if (!startDate || !endDate) {
|
|
alert('시작일과 종료일을 모두 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
const filtered = allRequestsData.filter(req => {
|
|
return req.start_date >= startDate && req.start_date <= endDate;
|
|
});
|
|
|
|
renderVacationRequests(filtered, 'allRequestsList', false);
|
|
}
|
|
|
|
function resetFilter() {
|
|
renderVacationRequests(allRequestsData, 'allRequestsList', false);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|