238 lines
12 KiB
JavaScript
238 lines
12 KiB
JavaScript
/**
|
|
* Project Master Overseas Dashboard JS
|
|
* 기능: 데이터 로드, 활성도 분석, 인증 모달 제어, 크롤링 동기화 및 중단
|
|
*/
|
|
|
|
// --- 글로벌 상태 관리 ---
|
|
let rawData = [];
|
|
let projectActivityDetails = [];
|
|
let isCrawling = false;
|
|
|
|
const CONTINENT_ORDER = { "아시아": 1, "아프리카": 2, "아메리카": 3, "지사": 4 };
|
|
|
|
// --- 초기화 ---
|
|
async function init() {
|
|
console.log("Dashboard Initializing...");
|
|
if (!document.getElementById('projectAccordion')) return;
|
|
|
|
await loadAvailableDates();
|
|
await loadDataByDate();
|
|
}
|
|
|
|
// --- 데이터 통신 및 로드 ---
|
|
async function loadAvailableDates() {
|
|
try {
|
|
const response = await fetch(API.AVAILABLE_DATES);
|
|
const dates = await response.json();
|
|
if (dates?.length > 0) {
|
|
const selectHtml = `
|
|
<select id="dateSelector" onchange="loadDataByDate(this.value)"
|
|
style="margin-left:10px; border:none; background:none; font-weight:700; cursor:pointer; font-family:inherit; color:inherit;">
|
|
${dates.map(d => `<option value="${d}">${d}</option>`).join('')}
|
|
</select>`;
|
|
const baseDateStrong = document.getElementById('baseDate');
|
|
if (baseDateStrong) baseDateStrong.innerHTML = selectHtml;
|
|
}
|
|
} catch (e) { console.error("날짜 로드 실패:", e); }
|
|
}
|
|
|
|
async function loadDataByDate(selectedDate = "") {
|
|
try {
|
|
await loadActivityAnalysis(selectedDate);
|
|
const url = selectedDate ? `${API.PROJECT_DATA}?date=${selectedDate}` : `${API.PROJECT_DATA}?t=${Date.now()}`;
|
|
const response = await fetch(url);
|
|
const data = await response.json();
|
|
if (data.error) throw new Error(data.error);
|
|
rawData = data.projects || [];
|
|
renderDashboard(rawData);
|
|
} catch (e) {
|
|
console.error("데이터 로드 실패:", e);
|
|
alert("데이터를 가져오는 데 실패했습니다.");
|
|
}
|
|
}
|
|
|
|
async function loadActivityAnalysis(date = "") {
|
|
const dashboard = document.getElementById('activityDashboard');
|
|
if (!dashboard) return;
|
|
try {
|
|
const url = date ? `${API.PROJECT_ACTIVITY}?date=${date}` : API.PROJECT_ACTIVITY;
|
|
const response = await fetch(url);
|
|
const data = await response.json();
|
|
if (data.error) return;
|
|
const { summary, details } = data;
|
|
projectActivityDetails = details;
|
|
dashboard.innerHTML = `
|
|
<div class="activity-card active" onclick="showActivityDetails('active')">
|
|
<div class="label">정상 (7일 이내)</div><div class="count">${summary.active}</div>
|
|
</div>
|
|
<div class="activity-card warning" onclick="showActivityDetails('warning')">
|
|
<div class="label">주의 (14일 이내)</div><div class="count">${summary.warning}</div>
|
|
</div>
|
|
<div class="activity-card stale" onclick="showActivityDetails('stale')">
|
|
<div class="label">방치 (14일 초과 / 폴더자동삭제)</div><div class="count">${summary.stale}</div>
|
|
</div>
|
|
<div class="activity-card unknown" onclick="showActivityDetails('unknown')">
|
|
<div class="label">데이터 없음 (파일 0개)</div><div class="count">${summary.unknown}</div>
|
|
</div>`;
|
|
} catch (e) { console.error("분석 로드 실패:", e); }
|
|
}
|
|
|
|
// --- 렌더링 엔진 ---
|
|
function renderDashboard(data) {
|
|
const container = document.getElementById('projectAccordion');
|
|
container.innerHTML = '';
|
|
const grouped = groupData(data);
|
|
Object.keys(grouped).sort((a, b) => (CONTINENT_ORDER[a] || 99) - (CONTINENT_ORDER[b] || 99)).forEach(continent => {
|
|
const continentDiv = document.createElement('div');
|
|
continentDiv.className = 'continent-group active';
|
|
let html = `<div class="continent-header" onclick="toggleGroup(this)"><span>${continent}</span><span class="toggle-icon">▼</span></div><div class="continent-body">`;
|
|
Object.keys(grouped[continent]).sort().forEach(country => {
|
|
html += `<div class="country-group active"><div class="country-header" onclick="toggleGroup(this)"><span>${country}</span><span class="toggle-icon">▼</span></div><div class="country-body"><div class="accordion-container">
|
|
<div class="accordion-list-header"><div>프로젝트명</div><div>담당부서</div><div>담당자</div><div style="text-align:center;">파일수</div><div>최근로그</div></div>
|
|
${grouped[continent][country].sort((a, b) => a[0].localeCompare(b[0])).map(p => createProjectHtml(p)).join('')}</div></div></div>`;
|
|
});
|
|
html += `</div>`;
|
|
continentDiv.innerHTML = html;
|
|
container.appendChild(continentDiv);
|
|
});
|
|
}
|
|
|
|
function groupData(data) {
|
|
const res = {};
|
|
data.forEach(item => {
|
|
const c1 = item[5] || "기타", c2 = item[6] || "미분류";
|
|
if (!res[c1]) res[c1] = {};
|
|
if (!res[c1][c2]) res[c1][c2] = [];
|
|
res[c1][c2].push(item);
|
|
});
|
|
return res;
|
|
}
|
|
|
|
function createProjectHtml(p) {
|
|
const [name, dept, admin, logRaw, files] = p;
|
|
const recentLog = (!logRaw || logRaw === "X" || logRaw === "데이터 없음") ? "기록 없음" : logRaw;
|
|
const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
|
|
|
|
const isStaleLog = recentLog.replace(/\s/g, "").includes("폴더자동삭제");
|
|
const isNoFiles = (files === 0 || files === null);
|
|
const statusClass = isNoFiles ? "status-error" : "";
|
|
|
|
let logStyleClass = "";
|
|
if (isStaleLog) logStyleClass = "error-text";
|
|
else if (recentLog === "기록 없음") logStyleClass = "warning-text";
|
|
|
|
const logBoldStyle = isStaleLog ? 'font-weight: 800;' : '';
|
|
|
|
return `
|
|
<div class="accordion-item ${statusClass}">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<div class="repo-title" title="${name}">${name}</div><div class="repo-dept">${dept}</div><div class="repo-admin">${admin}</div><div class="repo-files ${isNoFiles ? 'error-text' : ''}">${files || 0}</div><div class="repo-log ${logStyleClass}" style="${logBoldStyle}" title="${recentLog}">${recentLog}</div>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<div class="detail-grid">
|
|
<div class="detail-section">
|
|
<h4>참여 인원 상세</h4>
|
|
<table class="data-table">
|
|
<thead><tr><th>이름</th><th>소속</th><th>권한</th></tr></thead>
|
|
<tbody><tr><td>${admin}</td><td>${dept}</td><td>관리자</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>최근 활동</h4>
|
|
<table class="data-table">
|
|
<thead><tr><th>유형</th><th>내용</th><th>일시</th></tr></thead>
|
|
<tbody><tr><td><span class="badge">로그</span></td><td>동기화 완료</td><td>${logTime}</td></tr></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
// --- 이벤트 핸들러 ---
|
|
function toggleGroup(h) { h.parentElement.classList.toggle('active'); }
|
|
function toggleAccordion(h) {
|
|
const item = h.parentElement;
|
|
item.parentElement.querySelectorAll('.accordion-item').forEach(el => { if (el !== item) el.classList.remove('active'); });
|
|
item.classList.toggle('active');
|
|
}
|
|
|
|
function showActivityDetails(status) {
|
|
const names = { active: '정상', warning: '주의', stale: '방치', unknown: '데이터 없음' };
|
|
const filtered = (projectActivityDetails || []).filter(d => d.status === status);
|
|
document.getElementById('modalTitle').innerText = `${names[status]} 목록 (${filtered.length}개)`;
|
|
document.getElementById('modalTableBody').innerHTML = filtered.map(p => {
|
|
const o = rawData.find(r => r[0] === p.name);
|
|
return `<tr class="modal-row" onclick="scrollToProject('${p.name}')"><td><strong>${p.name}</strong></td><td>${o ? o[1] : "-"}</td><td>${o ? o[2] : "-"}</td></tr>`;
|
|
}).join('');
|
|
ModalManager.open('activityDetailModal');
|
|
}
|
|
|
|
function scrollToProject(name) {
|
|
ModalManager.close('activityDetailModal');
|
|
const target = Array.from(document.querySelectorAll('.repo-title')).find(t => t.innerText.trim() === name.trim())?.closest('.accordion-header');
|
|
if (target) {
|
|
let p = target.parentElement;
|
|
while (p && p !== document.body) {
|
|
if (p.classList.contains('continent-group') || p.classList.contains('country-group')) p.classList.add('active');
|
|
p = p.parentElement;
|
|
}
|
|
target.parentElement.classList.add('active');
|
|
const pos = target.getBoundingClientRect().top + window.pageYOffset - 260;
|
|
window.scrollTo({ top: pos, behavior: 'smooth' });
|
|
target.style.backgroundColor = 'var(--primary-lv-1)';
|
|
setTimeout(() => target.style.backgroundColor = '', 2000);
|
|
}
|
|
}
|
|
|
|
// --- 크롤링 및 인증 제어 ---
|
|
async function syncData() {
|
|
if (isCrawling) {
|
|
if (confirm("크롤링을 중단하시겠습니까?")) {
|
|
const res = await fetch(API.STOP_SYNC);
|
|
if ((await res.json()).success) document.getElementById('syncBtn').innerText = "중단 요청 중...";
|
|
}
|
|
return;
|
|
}
|
|
document.getElementById('authId').value = '';
|
|
document.getElementById('authPw').value = '';
|
|
document.getElementById('authErrorMessage').style.display = 'none';
|
|
ModalManager.open('authModal');
|
|
}
|
|
|
|
async function submitAuth() {
|
|
const id = document.getElementById('authId').value, pw = document.getElementById('authPw').value, err = document.getElementById('authErrorMessage');
|
|
try {
|
|
const res = await fetch(API.AUTH_CRAWL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user_id: id, password: pw }) });
|
|
const data = await res.json();
|
|
if (data.success) { ModalManager.close('authModal'); startCrawlProcess(); }
|
|
else { err.innerText = "크롤링을 할 수 없습니다."; err.style.display = 'block'; }
|
|
} catch { err.innerText = "서버 연결 실패"; err.style.display = 'block'; }
|
|
}
|
|
|
|
async function startCrawlProcess() {
|
|
isCrawling = true;
|
|
const btn = document.getElementById('syncBtn'), logC = document.getElementById('logConsole'), logB = document.getElementById('logBody');
|
|
btn.classList.add('loading'); btn.style.backgroundColor = 'var(--error-color)'; btn.innerHTML = `<span class="spinner"></span> 크롤링 중단`;
|
|
logC.style.display = 'block'; logB.innerHTML = '<div style="color:#aaa; margin-bottom:10px;">>>> 엔진 초기화 중...</div>';
|
|
try {
|
|
const res = await fetch(API.SYNC);
|
|
const reader = res.body.getReader(), decoder = new TextDecoder();
|
|
while (true) {
|
|
const { done, value } = await reader.read(); if (done) break;
|
|
decoder.decode(value).split('\n').forEach(line => {
|
|
if (line.startsWith('data: ')) {
|
|
const p = JSON.parse(line.substring(6));
|
|
if (p.type === 'log') {
|
|
const div = document.createElement('div'); div.innerText = `[${new Date().toLocaleTimeString()}] ${p.message}`;
|
|
logB.appendChild(div); logC.scrollTop = logC.scrollHeight;
|
|
} else if (p.type === 'done') { init(); alert(`동기화 종료`); logC.style.display = 'none'; }
|
|
}
|
|
});
|
|
}
|
|
} catch { alert("스트림 끊김"); }
|
|
finally { isCrawling = false; btn.classList.remove('loading'); btn.style.backgroundColor = ''; btn.innerHTML = `<span class="spinner"></span> 데이터 동기화 (크롤링)`; }
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init);
|