- 실시간 작업장 현황을 지도로 시각화 - 작업장 관리 페이지에서 정의한 구역 정보 활용 - 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>
235 lines
6.4 KiB
JavaScript
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);
|
|
});
|
|
}
|