Files
TK-FB-Project/web-ui/js/vacation-common.js
Hyungi Ahn b6485e3140 feat: 대시보드 작업장 현황 지도 구현
- 실시간 작업장 현황을 지도로 시각화
- 작업장 관리 페이지에서 정의한 구역 정보 활용
- TBM 작업자 및 방문자 현황 표시

주요 변경사항:
- dashboard.html: 작업장 현황 섹션 추가 (기존 작업 현황 테이블 제거)
- workplace-status.js: 지도 렌더링 및 데이터 통합 로직 구현
- modern-dashboard.js: 삭제된 DOM 요소 조건부 체크 추가

시각화 방식:
- 인원 없음: 회색 테두리 + 작업장 이름
- 내부 작업자: 파란색 영역 + 인원 수
- 외부 방문자: 보라색 영역 + 인원 수
- 둘 다: 초록색 영역 + 총 인원 수

기술 구현:
- Canvas API 기반 사각형 영역 렌더링
- map-regions API를 통한 데이터 일관성 보장
- 클릭 이벤트로 상세 정보 모달 표시

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-29 15:46:47 +09:00

235 lines
6.4 KiB
JavaScript

/**
* 휴가 관리 공통 함수
* 모든 휴가 관련 페이지에서 사용하는 공통 함수 모음
*/
// 전역 변수
window.VacationCommon = {
workers: [],
vacationTypes: [],
currentUser: null
};
/**
* 작업자 목록 로드
*/
async function loadWorkers() {
try {
const response = await axios.get('/workers');
if (response.data.success) {
window.VacationCommon.workers = response.data.data.filter(w => w.employment_status === 'employed');
return window.VacationCommon.workers;
}
} catch (error) {
console.error('작업자 목록 로드 오류:', error);
throw error;
}
}
/**
* 휴가 유형 목록 로드
*/
async function loadVacationTypes() {
try {
const response = await axios.get('/attendance/vacation-types');
if (response.data.success) {
window.VacationCommon.vacationTypes = response.data.data;
return window.VacationCommon.vacationTypes;
}
} catch (error) {
console.error('휴가 유형 로드 오류:', error);
throw error;
}
}
/**
* 현재 사용자 정보 가져오기
*/
function getCurrentUser() {
if (!window.VacationCommon.currentUser) {
window.VacationCommon.currentUser = JSON.parse(localStorage.getItem('user'));
}
return window.VacationCommon.currentUser;
}
/**
* 휴가 신청 목록 렌더링
*/
function renderVacationRequests(requests, containerId, showActions = false, actionType = 'approval') {
const container = document.getElementById(containerId);
if (!requests || requests.length === 0) {
container.innerHTML = `
<div class="empty-state">
<p>휴가 신청 내역이 없습니다.</p>
</div>
`;
return;
}
const tableHTML = `
<table class="data-table">
<thead>
<tr>
<th>작업자</th>
<th>휴가 유형</th>
<th>시작일</th>
<th>종료일</th>
<th>일수</th>
<th>상태</th>
<th>사유</th>
${showActions ? '<th>관리</th>' : ''}
</tr>
</thead>
<tbody>
${requests.map(request => {
const statusClass = request.status === 'pending' ? 'status-pending' :
request.status === 'approved' ? 'status-approved' : 'status-rejected';
const statusText = request.status === 'pending' ? '대기' :
request.status === 'approved' ? '승인' : '거부';
return `
<tr>
<td><strong>${request.worker_name || '알 수 없음'}</strong></td>
<td>${request.vacation_type_name || request.type_name || '알 수 없음'}</td>
<td>${request.start_date}</td>
<td>${request.end_date}</td>
<td>${request.days_used}일</td>
<td>
<span class="status-badge ${statusClass}">
${statusText}
</span>
</td>
<td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${request.reason || '-'}">
${request.reason || '-'}
</td>
${showActions ? renderActionButtons(request, actionType) : ''}
</tr>
`;
}).join('')}
</tbody>
</table>
`;
container.innerHTML = tableHTML;
}
/**
* 액션 버튼 렌더링
*/
function renderActionButtons(request, actionType) {
if (actionType === 'approval' && request.status === 'pending') {
return `
<td>
<div style="display: flex; gap: 0.5rem;">
<button class="btn-small btn-success" onclick="approveVacationRequest(${request.request_id})" title="승인">
</button>
<button class="btn-small btn-danger" onclick="rejectVacationRequest(${request.request_id})" title="거부">
</button>
</div>
</td>
`;
} else if (actionType === 'delete' && request.status === 'pending') {
return `
<td>
<button class="btn-small btn-danger" onclick="deleteVacationRequest(${request.request_id})" title="삭제">
삭제
</button>
</td>
`;
}
return '<td>-</td>';
}
/**
* 휴가 신청 승인
*/
async function approveVacationRequest(requestId) {
if (!confirm('이 휴가 신청을 승인하시겠습니까?')) {
return;
}
try {
const response = await axios.patch(`/vacation-requests/${requestId}/approve`);
if (response.data.success) {
alert('휴가 신청이 승인되었습니다.');
// 페이지 새로고침 이벤트 발생
window.dispatchEvent(new Event('vacation-updated'));
return true;
}
} catch (error) {
console.error('승인 오류:', error);
alert(error.response?.data?.message || '승인 중 오류가 발생했습니다.');
return false;
}
}
/**
* 휴가 신청 거부
*/
async function rejectVacationRequest(requestId) {
const reason = prompt('거부 사유를 입력하세요:');
if (!reason) {
return;
}
try {
const response = await axios.patch(`/vacation-requests/${requestId}/reject`, {
review_note: reason
});
if (response.data.success) {
alert('휴가 신청이 거부되었습니다.');
// 페이지 새로고침 이벤트 발생
window.dispatchEvent(new Event('vacation-updated'));
return true;
}
} catch (error) {
console.error('거부 오류:', error);
alert(error.response?.data?.message || '거부 중 오류가 발생했습니다.');
return false;
}
}
/**
* 휴가 신청 삭제
*/
async function deleteVacationRequest(requestId) {
if (!confirm('이 휴가 신청을 삭제하시겠습니까?')) {
return;
}
try {
const response = await axios.delete(`/vacation-requests/${requestId}`);
if (response.data.success) {
alert('휴가 신청이 삭제되었습니다.');
// 페이지 새로고침 이벤트 발생
window.dispatchEvent(new Event('vacation-updated'));
return true;
}
} catch (error) {
console.error('삭제 오류:', error);
alert(error.response?.data?.message || '삭제 중 오류가 발생했습니다.');
return false;
}
}
/**
* axios 설정 대기
*/
function waitForAxiosConfig() {
return new Promise((resolve) => {
const check = setInterval(() => {
if (axios.defaults.baseURL) {
clearInterval(check);
resolve();
}
}, 50);
setTimeout(() => {
clearInterval(check);
resolve();
}, 5000);
});
}