Files
tk-factory-services/system1-factory/web/js/my-monthly-confirm.js
Hyungi Ahn 798ccc62ad feat(monthly-confirm): 캘린더 UI + 연차 API 수정 + 요약 카드
- 테이블 → 7열 캘린더 그리드 (모바일 최적화)
- 8h=정시, >8h=+연장h, 연차/반차/휴무 텍스트 표시
- 요약 카드: 근무일/연장근로/연차일수
- vacation-balance API → vacation-balances/worker API (sp_vacation_balances 기반)
- "신규" → "부여" 라벨 변경
- 셀 탭 시 하단 상세 표시

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 07:28:14 +09:00

291 lines
11 KiB
JavaScript

/**
* my-monthly-confirm.js — 작업자 월간 근무 확인 (모바일 캘린더)
*/
var DAYS_KR = ['일', '월', '화', '수', '목', '금', '토'];
var currentYear, currentMonth;
var isProcessing = false;
var selectedCell = null;
// ===== Init =====
document.addEventListener('DOMContentLoaded', function() {
var now = new Date();
currentYear = now.getFullYear();
currentMonth = now.getMonth() + 1;
var params = new URLSearchParams(location.search);
if (params.get('year')) currentYear = parseInt(params.get('year'));
if (params.get('month')) currentMonth = parseInt(params.get('month'));
setTimeout(function() {
var user = typeof getCurrentUser === 'function' ? getCurrentUser() : window.currentUser;
if (!user) return;
window._mmcUser = user;
updateMonthLabel();
loadData();
}, 500);
});
function updateMonthLabel() {
document.getElementById('monthLabel').textContent = currentYear + '년 ' + currentMonth + '월';
}
function changeMonth(delta) {
currentMonth += delta;
if (currentMonth > 12) { currentMonth = 1; currentYear++; }
if (currentMonth < 1) { currentMonth = 12; currentYear--; }
selectedCell = null;
updateMonthLabel();
loadData();
}
// ===== Data Load =====
async function loadData() {
var calWrap = document.getElementById('tableWrap');
calWrap.innerHTML = '<div class="mmc-skeleton"></div><div class="mmc-skeleton"></div>';
try {
var user = window._mmcUser || (typeof getCurrentUser === 'function' ? getCurrentUser() : null) || {};
var userId = user.user_id || user.id;
var [recordsRes, balanceRes] = await Promise.all([
window.apiCall('/monthly-comparison/my-records?year=' + currentYear + '&month=' + currentMonth),
window.apiCall('/vacation-balances/worker/' + userId + '/year/' + currentYear).catch(function() { return { success: true, data: [] }; })
]);
if (!recordsRes || !recordsRes.success) {
calWrap.innerHTML = '<div class="mmc-empty"><i class="fas fa-calendar-xmark text-2xl text-gray-300"></i><p>데이터가 없습니다</p></div>';
document.getElementById('bottomActions').classList.add('hidden');
return;
}
var data = recordsRes.data;
renderUserInfo(data.user);
renderCalendar(data.daily_records || []);
renderSummaryCards(data.daily_records || []);
renderVacationBalance(balanceRes.data || []);
renderConfirmStatus(data.confirmation);
} catch (e) {
calWrap.innerHTML = '<div class="mmc-empty"><i class="fas fa-exclamation-triangle text-2xl text-red-300"></i><p>네트워크 오류</p></div>';
}
}
// ===== Render =====
function renderUserInfo(user) {
if (!user) return;
document.getElementById('userName').textContent = user.worker_name || user.name || '-';
document.getElementById('userDept').textContent =
(user.job_type ? user.job_type + ' · ' : '') + (user.department_name || '');
}
// 셀 텍스트 판정
// 8h 기준 고정 (scheduled_hours 미존재 — 단축근무 미대응)
function getCellInfo(r) {
var hrs = r.attendance ? parseFloat(r.attendance.total_work_hours) || 0 : 0;
var vacType = r.attendance ? r.attendance.vacation_type : null;
var isHoliday = r.is_holiday;
if (vacType) return { text: vacType, cls: 'vac', detail: vacType };
if (isHoliday && hrs <= 0) return { text: '휴무', cls: 'off', detail: r.holiday_name || '휴무' };
if (isHoliday && hrs > 0) return { text: '특 ' + hrs + 'h', cls: 'special', detail: '특근 ' + hrs + '시간' };
if (hrs === 8) return { text: '정시', cls: 'normal', detail: '정시근로 8시간' };
if (hrs > 8) return { text: '+' + (hrs - 8) + 'h', cls: 'overtime', detail: '연장근로 ' + hrs + '시간 (+' + (hrs - 8) + ')' };
if (hrs > 0) return { text: hrs + 'h', cls: 'partial', detail: hrs + '시간 근무' };
return { text: '-', cls: 'none', detail: '미입력' };
}
function renderCalendar(records) {
var el = document.getElementById('tableWrap');
if (!records.length) {
el.innerHTML = '<div class="mmc-empty"><p>해당 월 데이터가 없습니다</p></div>';
return;
}
// 날짜별 맵
var recMap = {};
records.forEach(function(r) { recMap[parseInt(r.date.substring(8))] = r; });
var firstDay = new Date(currentYear, currentMonth - 1, 1).getDay();
var daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
// 헤더
var html = '<div class="cal-grid">';
html += '<div class="cal-header">';
DAYS_KR.forEach(function(d, i) {
var cls = i === 0 ? ' sun' : i === 6 ? ' sat' : '';
html += '<div class="cal-dow' + cls + '">' + d + '</div>';
});
html += '</div>';
// 셀
html += '<div class="cal-body">';
// 빈 셀 (월 시작 전)
for (var i = 0; i < firstDay; i++) {
html += '<div class="cal-cell empty"></div>';
}
for (var day = 1; day <= daysInMonth; day++) {
var r = recMap[day];
var info = r ? getCellInfo(r) : { text: '-', cls: 'none', detail: '데이터 없음' };
var dow = (firstDay + day - 1) % 7;
var dowCls = dow === 0 ? ' sun' : dow === 6 ? ' sat' : '';
html += '<div class="cal-cell ' + info.cls + dowCls + '" onclick="selectDay(' + day + ')">';
html += '<span class="cal-day">' + day + '</span>';
html += '<span class="cal-val">' + escHtml(info.text) + '</span>';
html += '</div>';
}
html += '</div></div>';
// 상세 영역
html += '<div class="cal-detail" id="calDetail"></div>';
el.innerHTML = html;
}
function selectDay(day) {
selectedCell = day;
var el = document.getElementById('calDetail');
var cells = document.querySelectorAll('.cal-cell');
cells.forEach(function(c) { c.classList.remove('selected'); });
// 해당 셀 찾기
var allCells = document.querySelectorAll('.cal-cell:not(.empty)');
if (allCells[day - 1]) allCells[day - 1].classList.add('selected');
var dateStr = currentYear + '-' + String(currentMonth).padStart(2, '0') + '-' + String(day).padStart(2, '0');
var d = new Date(currentYear, currentMonth - 1, day);
var dow = DAYS_KR[d.getDay()];
// 현재 로드된 데이터에서 찾기
var calWrap = document.getElementById('tableWrap');
var cellEl = allCells[day - 1];
if (!cellEl) return;
var info = cellEl.querySelector('.cal-val').textContent;
el.innerHTML = '<div class="cal-detail-inner">' +
'<strong>' + currentMonth + '/' + day + ' (' + dow + ')</strong> — ' + info +
'</div>';
el.style.display = 'block';
}
function renderSummaryCards(records) {
var workDays = 0, overtimeHours = 0, vacDays = 0;
records.forEach(function(r) {
var hrs = r.attendance ? parseFloat(r.attendance.total_work_hours) || 0 : 0;
var vacType = r.attendance ? r.attendance.vacation_type : null;
var isHoliday = r.is_holiday;
if (!isHoliday && (hrs > 0 || vacType)) workDays++;
if (hrs > 8) overtimeHours += (hrs - 8);
if (vacType) {
var vd = r.attendance.vacation_days ? parseFloat(r.attendance.vacation_days) : 0;
if (vd > 0) vacDays += vd;
else vacDays += 1; // fallback
}
});
var el = document.getElementById('summaryCards');
if (!el) return;
el.innerHTML =
'<div class="mmc-sum-card"><div class="mmc-sum-num">' + workDays + '</div><div class="mmc-sum-label">근무일</div></div>' +
'<div class="mmc-sum-card"><div class="mmc-sum-num ot">' + fmtNum(overtimeHours) + 'h</div><div class="mmc-sum-label">연장근로</div></div>' +
'<div class="mmc-sum-card"><div class="mmc-sum-num vac">' + fmtNum(vacDays) + '일</div><div class="mmc-sum-label">연차</div></div>';
}
function renderVacationBalance(balances) {
var el = document.getElementById('vacationCards');
var total = 0, used = 0;
if (Array.isArray(balances)) {
balances.forEach(function(b) {
total += parseFloat(b.total_days || 0);
used += parseFloat(b.used_days || 0);
});
}
var remaining = total - used;
el.innerHTML =
'<div class="mmc-vac-title">연차 현황</div>' +
'<div class="mmc-vac-grid">' +
'<div class="mmc-vac-card"><div class="mmc-vac-num">' + fmtNum(total) + '</div><div class="mmc-vac-label">부여</div></div>' +
'<div class="mmc-vac-card"><div class="mmc-vac-num used">' + fmtNum(used) + '</div><div class="mmc-vac-label">사용</div></div>' +
'<div class="mmc-vac-card"><div class="mmc-vac-num remain">' + fmtNum(remaining) + '</div><div class="mmc-vac-label">잔여</div></div>' +
'</div>';
}
function renderConfirmStatus(conf) {
var actions = document.getElementById('bottomActions');
var statusEl = document.getElementById('confirmedStatus');
var badge = document.getElementById('statusBadge');
if (!conf || conf.status === 'pending') {
actions.classList.remove('hidden');
statusEl.classList.add('hidden');
badge.textContent = '미확인';
badge.className = 'mmc-status-badge pending';
return;
}
if (conf.status === 'confirmed') {
actions.classList.add('hidden');
statusEl.classList.remove('hidden');
badge.textContent = '확인완료';
badge.className = 'mmc-status-badge confirmed';
var dt = conf.confirmed_at ? new Date(conf.confirmed_at).toLocaleDateString('ko') : '';
document.getElementById('confirmedText').textContent = dt + ' 확인 완료';
} else if (conf.status === 'rejected') {
actions.classList.remove('hidden');
statusEl.classList.add('hidden');
badge.textContent = '반려';
badge.className = 'mmc-status-badge rejected';
}
}
// ===== Actions =====
async function confirmMonth() {
if (isProcessing) return;
if (!confirm(currentYear + '년 ' + currentMonth + '월 근무 내역을 확인하시겠습니까?')) return;
isProcessing = true;
try {
var res = await window.apiCall('/monthly-comparison/confirm', 'POST', {
year: currentYear, month: currentMonth, status: 'confirmed'
});
if (res && res.success) { showToast(res.message || '확인 완료', 'success'); loadData(); }
else { showToast(res && res.message || '처리 실패', 'error'); }
} catch (e) { showToast('네트워크 오류', 'error'); }
finally { isProcessing = false; }
}
function openRejectModal() {
document.getElementById('rejectReason').value = '';
document.getElementById('rejectModal').classList.remove('hidden');
}
function closeRejectModal() { document.getElementById('rejectModal').classList.add('hidden'); }
async function submitReject() {
if (isProcessing) return;
var reason = document.getElementById('rejectReason').value.trim();
if (!reason) { showToast('반려 사유를 입력해주세요', 'error'); return; }
isProcessing = true;
try {
var res = await window.apiCall('/monthly-comparison/confirm', 'POST', {
year: currentYear, month: currentMonth, status: 'rejected', reject_reason: reason
});
if (res && res.success) { showToast(res.message || '반려 제출 완료', 'success'); closeRejectModal(); loadData(); }
else { showToast(res && res.message || '처리 실패', 'error'); }
} catch (e) { showToast('네트워크 오류', 'error'); }
finally { isProcessing = false; }
}
// ===== Helpers =====
function fmtNum(v) { var n = parseFloat(v) || 0; return n % 1 === 0 ? n.toString() : n.toFixed(1); }
function escHtml(s) { return (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }
function showToast(msg, type) {
if (window.showToast) { window.showToast(msg, type); return; }
var c = document.getElementById('toastContainer');
var t = document.createElement('div');
t.className = 'toast toast-' + (type || 'info');
t.textContent = msg; c.appendChild(t);
setTimeout(function() { t.remove(); }, 3000);
}
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeRejectModal(); });