4388628788
- 공통 유틸리티 추출 (common/utils.js, common/base-state.js) - TBM 모바일 인라인 JS/CSS 외부 파일로 분리 (tbm-mobile.js, tbm-mobile.css) - 미사용 코드 삭제 (index.js, work-report-*.js 등 5개 파일) - TBM/작업보고 state.js, utils.js를 공통 모듈 기반으로 전환 - 작업보고서 SSO 인증 호환 수정 (token/user 함수) - tbmModel.js: incomplete-reports 쿼리에서 users→sso_users 조인 수정, leader_name 조인 추가 - docker-compose.yml: system1-web 볼륨 마운트 추가 - 모바일 인계(handover) 기능 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
393 lines
15 KiB
HTML
393 lines
15 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/api-base.js?v=2"></script>
|
|
<script src="/js/app-init.js?v=9" defer></script>
|
|
<script src="https://instant.page/5.2.0" type="module"></script>
|
|
</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">일일 출퇴근 입력</h1>
|
|
<p class="page-description">오늘 출근한 작업자들의 출퇴근 기록을 입력합니다</p>
|
|
</div>
|
|
|
|
<div class="page-actions">
|
|
<input type="date" id="selectedDate" class="form-control" style="width: auto;">
|
|
<button class="btn btn-primary" onclick="loadAttendanceRecords()">
|
|
새로고침
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 출퇴근 입력 폼 -->
|
|
<div class="content-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">작업자 출퇴근 기록</h2>
|
|
<p class="text-muted">근태 구분을 선택하면 근무시간이 자동 입력됩니다. 연장근로는 별도로 입력 가능합니다. (조퇴: 2시간, 반반차: 6시간, 반차: 4시간, 정시: 8시간, 주말근무: 0시간)</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="attendanceList" class="data-table-container">
|
|
<!-- 출퇴근 기록 목록이 여기에 동적으로 렌더링됩니다 -->
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 2rem;">
|
|
<button class="btn btn-primary" onclick="saveAllAttendance()" style="padding: 1rem 3rem; font-size: 1.1rem;">
|
|
전체 저장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></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('sso_token');
|
|
if (token) {
|
|
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
|
}
|
|
|
|
axios.interceptors.request.use(
|
|
config => {
|
|
const token = localStorage.getItem('sso_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 workers = [];
|
|
let attendanceRecords = [];
|
|
|
|
// 근태 구분 옵션 (근무시간 자동 설정, 연장근로는 별도 입력)
|
|
const attendanceTypes = [
|
|
{ value: 'on_time', label: '정시', hours: 8 },
|
|
{ value: 'half_leave', label: '반차', hours: 4 },
|
|
{ value: 'quarter_leave', label: '반반차', hours: 6 },
|
|
{ value: 'early_leave', label: '조퇴', hours: 2 },
|
|
{ value: 'weekend_work', label: '주말근무', hours: 0 },
|
|
{ value: 'annual_leave', label: '연차', hours: 0 },
|
|
{ value: 'custom', label: '특이사항', hours: 0 }
|
|
];
|
|
|
|
// 페이지 로드 시 초기화
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await waitForAxiosConfig();
|
|
initializePage();
|
|
});
|
|
|
|
function waitForAxiosConfig() {
|
|
return new Promise((resolve) => {
|
|
const check = setInterval(() => {
|
|
if (axios.defaults.baseURL) {
|
|
clearInterval(check);
|
|
resolve();
|
|
}
|
|
}, 50);
|
|
setTimeout(() => {
|
|
clearInterval(check);
|
|
resolve();
|
|
}, 5000);
|
|
});
|
|
}
|
|
|
|
async function initializePage() {
|
|
// 오늘 날짜 설정
|
|
const today = new Date().toISOString().split('T')[0];
|
|
document.getElementById('selectedDate').value = today;
|
|
|
|
try {
|
|
await loadWorkers();
|
|
await loadAttendanceRecords();
|
|
} catch (error) {
|
|
console.error('초기화 오류:', error);
|
|
alert('페이지 초기화 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
|
|
async function loadWorkers() {
|
|
try {
|
|
const response = await axios.get('/workers?limit=100');
|
|
if (response.data.success) {
|
|
workers = response.data.data.filter(w => w.employment_status === 'employed');
|
|
}
|
|
} catch (error) {
|
|
console.error('작업자 목록 로드 오류:', error);
|
|
}
|
|
}
|
|
|
|
async function loadAttendanceRecords() {
|
|
const selectedDate = document.getElementById('selectedDate').value;
|
|
if (!selectedDate) {
|
|
alert('날짜를 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 출퇴근 기록과 체크인 목록(휴가 정보 포함)을 동시에 가져오기
|
|
const [recordsResponse, checkinResponse] = await Promise.all([
|
|
axios.get(`/attendance/records?date=${selectedDate}`).catch(() => ({ data: { success: false, data: [] } })),
|
|
axios.get(`/attendance/checkin-list?date=${selectedDate}`).catch(() => ({ data: { success: false, data: [] } }))
|
|
]);
|
|
|
|
const existingRecords = recordsResponse.data.success ? recordsResponse.data.data : [];
|
|
const checkinList = checkinResponse.data.success ? checkinResponse.data.data : [];
|
|
|
|
// 체크인 목록을 기준으로 출퇴근 기록 생성 (연차 정보 포함)
|
|
attendanceRecords = checkinList.map(worker => {
|
|
const existingRecord = existingRecords.find(r => r.worker_id === worker.worker_id);
|
|
const isOnVacation = worker.vacation_status === 'approved';
|
|
|
|
// 기존 기록이 있으면 사용, 없으면 초기화
|
|
if (existingRecord) {
|
|
return existingRecord;
|
|
} else {
|
|
return {
|
|
worker_id: worker.worker_id,
|
|
worker_name: worker.worker_name,
|
|
attendance_date: selectedDate,
|
|
total_hours: isOnVacation ? 0 : 8,
|
|
overtime_hours: 0,
|
|
attendance_type: isOnVacation ? 'annual_leave' : 'on_time',
|
|
is_custom: false,
|
|
is_new: true,
|
|
is_on_vacation: isOnVacation,
|
|
vacation_type_name: worker.vacation_type_name
|
|
};
|
|
}
|
|
});
|
|
|
|
renderAttendanceList();
|
|
} catch (error) {
|
|
console.error('출퇴근 기록 로드 오류:', error);
|
|
alert('출퇴근 기록 조회 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
|
|
function initializeAttendanceRecords() {
|
|
const selectedDate = document.getElementById('selectedDate').value;
|
|
attendanceRecords = workers.map(worker => ({
|
|
worker_id: worker.worker_id,
|
|
worker_name: worker.worker_name,
|
|
attendance_date: selectedDate,
|
|
total_hours: 8,
|
|
overtime_hours: 0,
|
|
attendance_type: 'on_time',
|
|
is_custom: false,
|
|
is_new: true
|
|
}));
|
|
renderAttendanceList();
|
|
}
|
|
|
|
function renderAttendanceList() {
|
|
const container = document.getElementById('attendanceList');
|
|
|
|
if (attendanceRecords.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<p>등록된 작업자가 없거나 출퇴근 기록이 없습니다.</p>
|
|
<button class="btn btn-primary" onclick="initializeAttendanceRecords()">
|
|
작업자 목록으로 초기화
|
|
</button>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const tableHTML = `
|
|
<table class="data-table" style="font-size: 0.95rem;">
|
|
<thead style="background-color: #f8f9fa;">
|
|
<tr>
|
|
<th style="width: 120px;">작업자</th>
|
|
<th style="width: 180px;">근태 구분</th>
|
|
<th style="width: 100px;">근무시간</th>
|
|
<th style="width: 120px;">연장근로</th>
|
|
<th style="width: 100px;">특이사항</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${attendanceRecords.map((record, index) => {
|
|
const isCustom = record.is_custom || record.attendance_type === 'custom';
|
|
const isHoursReadonly = !isCustom; // 특이사항이 아니면 근무시간은 읽기 전용
|
|
|
|
const isOnVacation = record.is_on_vacation || false;
|
|
const vacationLabel = record.vacation_type_name ? ` (${record.vacation_type_name})` : '';
|
|
|
|
return `
|
|
<tr style="border-bottom: 1px solid #e5e7eb; ${isOnVacation ? 'background-color: #f0f9ff;' : ''}">
|
|
<td style="padding: 0.75rem; font-weight: 600;">
|
|
${record.worker_name}
|
|
${isOnVacation ? `<span style="margin-left: 0.5rem; display: inline-block; padding: 0.125rem 0.5rem; background-color: #dbeafe; color: #1e40af; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500;">연차${vacationLabel}</span>` : ''}
|
|
</td>
|
|
<td style="padding: 0.75rem;">
|
|
<select class="form-control"
|
|
onchange="updateAttendanceType(${index}, this.value)"
|
|
style="width: 160px; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;">
|
|
${attendanceTypes.map(type => `
|
|
<option value="${type.value}" ${record.attendance_type === type.value ? 'selected' : ''}>
|
|
${type.label}
|
|
</option>
|
|
`).join('')}
|
|
</select>
|
|
</td>
|
|
<td style="padding: 0.75rem;">
|
|
<input type="number" class="form-control"
|
|
id="hours_${index}"
|
|
value="${record.total_hours || 0}"
|
|
min="0" max="24" step="0.5"
|
|
${isHoursReadonly ? 'readonly' : ''}
|
|
onchange="updateTotalHours(${index}, this.value)"
|
|
style="width: 90px; padding: 0.5rem; border: 1px solid ${isHoursReadonly ? '#e5e7eb' : '#d1d5db'};
|
|
border-radius: 0.375rem; background-color: ${isHoursReadonly ? '#f9fafb' : 'white'}; text-align: center;">
|
|
</td>
|
|
<td style="padding: 0.75rem;">
|
|
<input type="number" class="form-control"
|
|
id="overtime_${index}"
|
|
value="${record.overtime_hours || 0}"
|
|
min="0" max="12" step="0.5"
|
|
onchange="updateOvertimeHours(${index}, this.value)"
|
|
style="width: 90px; padding: 0.5rem; border: 1px solid #d1d5db;
|
|
border-radius: 0.375rem; background-color: white; text-align: center;">
|
|
</td>
|
|
<td style="padding: 0.75rem; text-align: center;">
|
|
${isCustom ?
|
|
'<span style="color: #dc2626; font-weight: 600;">✓</span>' :
|
|
'<span style="color: #9ca3af;">-</span>'}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
|
|
container.innerHTML = tableHTML;
|
|
}
|
|
|
|
function updateTotalHours(index, value) {
|
|
attendanceRecords[index].total_hours = parseFloat(value) || 0;
|
|
}
|
|
|
|
function updateOvertimeHours(index, value) {
|
|
attendanceRecords[index].overtime_hours = parseFloat(value) || 0;
|
|
}
|
|
|
|
function updateAttendanceType(index, value) {
|
|
const record = attendanceRecords[index];
|
|
record.attendance_type = value;
|
|
|
|
// 근태 구분에 따라 자동으로 근무시간 설정
|
|
const attendanceType = attendanceTypes.find(t => t.value === value);
|
|
|
|
if (value === 'custom') {
|
|
// 특이사항 선택 시 수동 입력 가능
|
|
record.is_custom = true;
|
|
// 기존 값 유지, 수동 입력 가능
|
|
} else if (attendanceType) {
|
|
// 다른 근태 구분 선택 시 근무시간만 자동 설정
|
|
record.is_custom = false;
|
|
record.total_hours = attendanceType.hours;
|
|
// 연장근로는 유지 (별도 입력 가능)
|
|
}
|
|
|
|
// UI 다시 렌더링
|
|
renderAttendanceList();
|
|
}
|
|
|
|
async function saveAllAttendance() {
|
|
const selectedDate = document.getElementById('selectedDate').value;
|
|
|
|
if (!selectedDate) {
|
|
alert('날짜를 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
if (attendanceRecords.length === 0) {
|
|
alert('저장할 출퇴근 기록이 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// 모든 기록을 API 형식에 맞게 변환
|
|
const recordsToSave = attendanceRecords.map(record => ({
|
|
worker_id: record.worker_id,
|
|
attendance_date: selectedDate,
|
|
total_hours: record.total_hours || 0,
|
|
overtime_hours: record.overtime_hours || 0,
|
|
attendance_type: record.attendance_type || 'on_time',
|
|
is_custom: record.is_custom || false
|
|
}));
|
|
|
|
try {
|
|
// 각 기록을 순차적으로 저장
|
|
let successCount = 0;
|
|
let errorCount = 0;
|
|
|
|
for (const data of recordsToSave) {
|
|
try {
|
|
const response = await axios.post('/attendance/records', data);
|
|
if (response.data.success) {
|
|
successCount++;
|
|
}
|
|
} catch (error) {
|
|
console.error(`작업자 ${data.worker_id} 저장 오류:`, error);
|
|
errorCount++;
|
|
}
|
|
}
|
|
|
|
if (errorCount === 0) {
|
|
alert(`${successCount}건의 출퇴근 기록이 모두 저장되었습니다.`);
|
|
await loadAttendanceRecords(); // 저장 후 새로고침
|
|
} else {
|
|
alert(`${successCount}건 저장 완료, ${errorCount}건 저장 실패\n자세한 내용은 콘솔을 확인해주세요.`);
|
|
}
|
|
} catch (error) {
|
|
console.error('전체 저장 오류:', error);
|
|
alert('저장 중 오류가 발생했습니다.');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|