import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema'; import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline } from '../../core/utils'; import { setupTableSorting, SortState } from '../../core/tableHandler'; import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler'; import { state } from '../../core/state'; import { IMAGE_LOCATIONS } from '../../components/Modal/SharedData'; export interface ColumnDef { header: string; sortKey?: string; width?: string; align?: 'left' | 'center' | 'right'; className?: string; render: (asset: any) => string; } export interface ListViewConfig { title: string; dataSource: () => any[]; searchKeys: string[]; filterOptions: { keywordLabel: string; showCorp?: boolean; showDept?: boolean; showLoc?: boolean; showField?: boolean; showType?: boolean; }; columns: ColumnDef[]; onRowClick?: (asset: any) => void; emptyMessage?: string; persistentSortState?: SortState; } export function createListView(container: HTMLElement, config: ListViewConfig) { // 1. 컨테이너 초기화 및 헤더 렌더링 container.innerHTML = ''; renderPageHeader(container, config.title); const fullList = config.dataSource(); let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' }; let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '' }; // 강제로 기본 뷰 모드를 'system' (자산 현황)으로 설정 (state as any).currentViewMode = 'system'; // 2. 뷰 전환 토글 버튼 생성 (명칭 변경) const toggleWrapper = document.createElement('div'); toggleWrapper.className = 'view-toggle-container'; toggleWrapper.innerHTML = `
`; container.appendChild(toggleWrapper); // 3. 필터 바 생성 (자산 목록에서만 사용) const filterBar = document.createElement('div'); filterBar.className = 'search-bar'; container.appendChild(filterBar); // 4. 컨텐츠 영역 생성 const contentWrapper = document.createElement('div'); contentWrapper.className = 'view-content-wrapper'; container.appendChild(contentWrapper); // --- 내부 상태 --- let selectedLocation: string | null = '기술개발센터'; let selectedDetailLocation: string | null = null; let dynamicMapConfig: Record = {}; // 맵 설정 미리 로드 const fetchMapConfig = async () => { try { const res = await fetch(`http://${location.hostname}:3000/api/maps`); dynamicMapConfig = await res.json(); } catch (err) { console.error('Failed to fetch map config:', err); } }; fetchMapConfig(); // [자산 현황] 대시보드 렌더러 const renderSystemStatus = () => { const isPcView = config.title === 'PC'; const locationCounts: Record = {}; const pcTypeCounts = { public: 0, server: 0, personal: 0 }; // 동적 통계 수집 객체 (Hardcoding 제거) const extStats = { total: 0, locCounts: {} as Record, typeCounts: {} as Record, typeLocMap: {} as Record>, // 유형별 위치 분포 locWarning: 0, typeWarning: 0 }; const intStats = { total: 0, locCounts: {} as Record, typeCounts: {} as Record, typeLocMap: {} as Record> }; // 중앙화된 경고 감지 로직 const checkAnomaly = (serviceType: string, loc: string, type: string) => { if (serviceType !== '외부') return { isWarning: false, isLocWarning: false, isTypeWarning: false, reason: '' }; const isLocWarning = loc !== 'IDC' && loc !== '미지정' && loc !== ''; const isTypeWarning = type.toLowerCase().replace(/\s/g, '').includes('서버pc'); const isWarning = isLocWarning || isTypeWarning; let reason = ''; if (isLocWarning && isTypeWarning) reason = '위치/형식 부적절'; else if (isLocWarning) reason = '위치 부적절'; else if (isTypeWarning) reason = '형식 부적절'; return { isWarning, isLocWarning, isTypeWarning, reason }; }; fullList.forEach(asset => { const loc = asset[ASSET_SCHEMA.LOCATION.key] || '미지정'; const serviceTypeKey = (ASSET_SCHEMA as any).SERVICE_TYPE?.key || 'service_type'; const serviceType = asset[serviceTypeKey] || '외부'; const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || ''; locationCounts[loc] = (locationCounts[loc] || 0) + 1; if (isPcView) { if (type.includes('공용')) pcTypeCounts.public++; else if (type.includes('서버')) pcTypeCounts.server++; else pcTypeCounts.personal++; } const targetStat = serviceType === '내부' ? intStats : extStats; targetStat.total++; if (loc) targetStat.locCounts[loc] = (targetStat.locCounts[loc] || 0) + 1; if (type) { targetStat.typeCounts[type] = (targetStat.typeCounts[type] || 0) + 1; // 유형별 위치 분포 수집 if (!targetStat.typeLocMap[type]) targetStat.typeLocMap[type] = {}; targetStat.typeLocMap[type][loc] = (targetStat.typeLocMap[type][loc] || 0) + 1; } if (serviceType === '외부') { const anomaly = checkAnomaly(serviceType, loc, type); if (anomaly.isLocWarning) extStats.locWarning++; if (anomaly.isTypeWarning) extStats.typeWarning++; } }); // 템플릿 제너레이터 함수 (HTML 중복 제거) const generateDetailStatHTML = (title: string, stats: any) => `
${title}
${stats.locWarning ? `위치부적절: ${stats.locWarning}` : ''} ${stats.typeWarning ? `형식부적절: ${stats.typeWarning}` : ''}
${Object.entries(stats.locCounts as Record).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([l, c]) => `${l}: ${c}`).join('')}
${Object.entries(stats.typeCounts as Record).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([t, c]) => { const isTypeWarning = title.includes('외부') && t.toLowerCase().replace(/\s/g, '').includes('서버pc'); // 위치별 상세 정보 생성 (툴팁용) const locDist = stats.typeLocMap[t] || {}; const locHint = Object.entries(locDist) .sort((a: any, b: any) => b[1] - a[1]) .map(([l, count]) => `${l}: ${count}대`) .join('\n'); return `${t}: ${c}`; }).join('')}
`; contentWrapper.innerHTML = `
총 보유 자산
${fullList.length}대
외부: ${extStats.total} 내부: ${intStats.total}
${isPcView ? `
PC 유형별 현황
공용: ${pcTypeCounts.public} 서버: ${pcTypeCounts.server} 개인: ${pcTypeCounts.personal}
` : generateDetailStatHTML('외부 (운영) 상세', extStats)}
${isPcView ? '' : generateDetailStatHTML('내부 (테스트) 상세', intStats as any)}

자산 현황 목록

위치: 상세:
분류 용도/자산명 관리자(정) 관리자(부) 상세위치

목록에서 자산을 선택하면
상세 정보와 배치도가 표시됩니다.

`; // 상세 정보 패널 업데이트 함수 const updateDetailPanel = (asset: any) => { const emptyState = document.getElementById('detail-empty-state'); const content = document.getElementById('detail-content'); if (!emptyState || !content) return; emptyState.style.display = 'none'; content.style.display = 'flex'; // 텍스트 정보 업데이트 const codeEl = document.getElementById('detail-asset-code'); const typeEl = document.getElementById('detail-asset-type'); const memoEl = document.getElementById('detail-memo'); const viewBtn = document.getElementById('btn-view-full-detail') as HTMLButtonElement; if (codeEl) codeEl.textContent = asset.asset_code || '미지정'; if (typeEl) typeEl.textContent = asset.asset_type || '-'; if (memoEl) memoEl.textContent = asset.memo || '-'; if (viewBtn) { viewBtn.onclick = () => config.onRowClick && config.onRowClick(asset); } // 위치 및 사진 정보 업데이트 const photo = document.getElementById('detail-photo') as HTMLImageElement; const marker = document.getElementById('detail-marker'); const overlayLayer = document.getElementById('detail-overlay-layer'); const noPhoto = document.getElementById('detail-no-photo'); const photoWrapper = document.getElementById('detail-photo-wrapper'); const bldg = asset.location || ''; const detail = asset.location_detail || ''; // 숫자 0도 유효한 좌표이므로 정확한 체크 필요 const x = asset.loc_x; const y = asset.loc_y; const hasCoords = (x !== null && x !== undefined && x !== '' && x !== 'null') && (y !== null && y !== undefined && y !== '' && y !== 'null'); const savedImg = asset.location_photo || asset.loc_img; const locImgs = IMAGE_LOCATIONS[bldg.trim()]?.[detail.trim()] || null; const imgPath = (savedImg && locImgs?.includes(savedImg)) ? savedImg : (locImgs ? locImgs[0] : null); // 좌표가 없으면 사진이 있어도 '정보 없음' 상태로 유도 (사용자 요청) if (imgPath && hasCoords) { photo.src = imgPath; photo.style.display = 'block'; if (noPhoto) noPhoto.style.display = 'none'; photo.onload = () => { const updateMarkerPos = () => { const imgW = photo.clientWidth; const imgH = photo.clientHeight; if (marker) { marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(x as string) * imgW) / 100 }px)`; marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(y as string) * imgH) / 100 }px)`; marker.style.display = 'block'; } if (overlayLayer) { overlayLayer.style.width = `${imgW}px`; overlayLayer.style.height = `${imgH}px`; overlayLayer.style.left = `calc(50% - ${imgW/2}px)`; overlayLayer.style.top = `calc(50% - ${imgH/2}px)`; const boxes = dynamicMapConfig[imgPath] || []; if (boxes.length > 0) { overlayLayer.innerHTML = ` ${boxes.map((b, i) => { const isSelected = b.x === x && b.y === y; const fill = isSelected ? 'rgba(255, 61, 0, 0.4)' : 'rgba(30, 81, 73, 0.02)'; const stroke = isSelected ? '#FF3D00' : 'rgba(30, 81, 73, 0.15)'; const strokeWidth = isSelected ? '0.8' : '0.2'; if (isSelected && marker) { marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(b.x) + parseFloat(b.w)/2) * imgW / 100 }px)`; marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(b.y) + parseFloat(b.h)/2) * imgH / 100 }px)`; } return ``; }).join('')} `; } else { overlayLayer.innerHTML = ''; } } }; updateMarkerPos(); window.addEventListener('resize', updateMarkerPos); }; } else { photo.style.display = 'none'; if (marker) marker.style.display = 'none'; if (overlayLayer) overlayLayer.innerHTML = ''; if (noPhoto) { noPhoto.style.display = 'flex'; const msg = noPhoto.querySelector('span'); if (msg) msg.textContent = !hasCoords ? '등록된 위치 좌표 정보가 없습니다.' : '등록된 배치도가 없습니다.'; } } }; const updateTableOnly = () => { let filtered = selectedLocation ? fullList.filter(a => (a[ASSET_SCHEMA.LOCATION.key] || '미지정') === selectedLocation) : fullList; const currentDetailLocs = Array.from(new Set(filtered.map(a => a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정'))).sort(); if (selectedDetailLocation) filtered = filtered.filter(a => (a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정') === selectedDetailLocation); const finalDisplayList = (!selectedLocation && !selectedDetailLocation) ? filtered.slice(0, 10) : filtered; const titleEl = document.getElementById('list-section-title'); if (titleEl) titleEl.textContent = selectedLocation ? `${selectedLocation} 자산 현황 (${finalDisplayList.length}대)` : '위치별 자산등록현황 (최근 등록)'; const selectEl = document.getElementById('select-detail-loc') as HTMLSelectElement; if (selectEl && !selectedDetailLocation) { selectEl.innerHTML = `` + currentDetailLocs.map(dl => ``).join(''); } const tbody = document.getElementById('system-status-tbody'); if (tbody) { tbody.innerHTML = finalDisplayList.length === 0 ? `조회된 자산이 없습니다.` : finalDisplayList.map(asset => { const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || ''; const serviceTypeKey = (ASSET_SCHEMA as any).SERVICE_TYPE?.key || 'service_type'; const serviceType = asset[serviceTypeKey] || '외부'; const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || ''; const loc = asset[ASSET_SCHEMA.LOCATION.key] || ''; const labelColor = serviceType === '내부' ? '#94A3B8' : '#35635C'; const managerMain = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'; const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-'; // [경고 로직] 외부 운영인데 서버PC이거나 IDC가 아닌 경우 const isLocWarning = serviceType === '외부' && loc !== 'IDC'; const isTypeWarning = serviceType === '외부' && type.toLowerCase().replace(/\s/g, '').includes('서버pc'); const isWarning = isLocWarning || isTypeWarning; const warningStyle = isWarning ? 'background-color: #FFF1F2; border-left: 3px solid #E11D48;' : ''; let warningReason = ''; if (isLocWarning && isTypeWarning) warningReason = '위치/형식 부적절'; else if (isLocWarning) warningReason = '위치 부적절'; else if (isTypeWarning) warningReason = '형식 부적절'; return `
${serviceType} ${isWarning ? `${warningReason}` : ''}
${purpose || '-'} ${managerMain} ${managerSub} ${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'} `; }).join(''); tbody.querySelectorAll('.mini-row').forEach(row => { row.addEventListener('click', () => { tbody.querySelectorAll('.mini-row').forEach(r => { const rIsWarning = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)'; // E11D48 (r as HTMLElement).style.backgroundColor = rIsWarning ? '#FFF1F2' : 'transparent'; }); (row as HTMLElement).style.backgroundColor = '#EBF2F1'; // 선택 하이라이트 const id = (row as HTMLElement).getAttribute('data-id'); const asset = fullList.find(a => a.id === id); if (asset) updateDetailPanel(asset); }); row.addEventListener('mouseenter', () => { if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') { (row as HTMLElement).style.backgroundColor = '#F8FAFA'; } }); row.addEventListener('mouseleave', () => { const isWarning = (row as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)'; if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') { (row as HTMLElement).style.backgroundColor = isWarning ? '#FFF1F2' : 'transparent'; } }); }); } }; (window as any).dispatchLocFilter = (loc: string) => { if (isPcView) return; selectedLocation = loc; selectedDetailLocation = null; renderSystemStatus(); }; setTimeout(() => { const selectLoc = document.getElementById('select-loc') as HTMLSelectElement; const selectDetailLoc = document.getElementById('select-detail-loc') as HTMLSelectElement; selectLoc?.addEventListener('change', (e) => { selectedLocation = (e.target as HTMLSelectElement).value || null; selectedDetailLocation = null; updateTableOnly(); }); selectDetailLoc?.addEventListener('change', (e) => { selectedDetailLocation = (e.target as HTMLSelectElement).value || null; updateTableOnly(); }); updateTableOnly(); }, 50); }; // [자산 목록] 테이블 렌더러 const tableWrapper = document.createElement('div'); tableWrapper.className = 'table-container'; const table = document.createElement('table'); const thead = document.createElement('thead'); const tbody = document.createElement('tbody'); tbody.id = 'dynamic-tbody'; table.appendChild(thead); table.appendChild(tbody); tableWrapper.appendChild(table); const updateTable = () => { if ((state as any).currentViewMode !== 'asset') return; let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]); if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction); thead.innerHTML = `${config.columns.map(col => ` ${col.header}`).join('')}`; tbody.innerHTML = filtered.length === 0 ? `${config.emptyMessage || UI_TEXT.MESSAGES.NO_DATA}` : filtered.map(asset => ` ${config.columns.map(col => `${col.render(asset)}`).join('')} `).join(''); tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); }); setupTableSorting(table, sortState, (key, dir) => { sortState = { key, direction: dir }; if (config.persistentSortState) { config.persistentSortState.key = key; config.persistentSortState.direction = dir; } updateTable(); }); // createIcons call removed as icons are no longer needed in dashboard }; // --- 뷰 전환 로직 --- const switchView = () => { contentWrapper.innerHTML = ''; if ((state as any).currentViewMode === 'asset') { filterBar.style.display = 'flex'; contentWrapper.style.overflowY = 'auto'; contentWrapper.appendChild(tableWrapper); updateTable(); } else { filterBar.style.display = 'none'; contentWrapper.style.overflowY = 'hidden'; renderSystemStatus(); } }; // 토글 버튼 이벤트 toggleWrapper.addEventListener('click', (e) => { const btn = (e.target as HTMLElement).closest('.toggle-btn') as HTMLButtonElement; if (!btn) return; toggleWrapper.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); (state as any).currentViewMode = btn.getAttribute('data-mode') as 'asset' | 'system'; switchView(); }); // 필터 바 초기화 renderFilterBar(filterBar, { ...config.filterOptions, onFilterChange: (filters) => { currentFilters = { ...currentFilters, ...filters }; updateTable(); } }); // 셀렉트 박스 채우기 const populateSelect = (selector: string, dataKey: string) => { const select = container.querySelector(selector) as HTMLSelectElement; if (select) { const getVal = (a: any) => dataKey === ASSET_SCHEMA.CURRENT_DEPT.key ? (a[dataKey] || a['현사용부서'] || a['현사용조직']) : a[dataKey]; const uniqueValues = Array.from(new Set(fullList.map(getVal))).filter(Boolean).sort(); uniqueValues.forEach(val => { const opt = document.createElement('option'); opt.value = String(val); opt.textContent = String(val); select.appendChild(opt); }); } }; if (config.filterOptions.showLoc) populateSelect('#filter-loc', ASSET_SCHEMA.LOCATION.key); if (config.filterOptions.showDept) populateSelect('#filter-dept', ASSET_SCHEMA.CURRENT_DEPT.key); if (config.filterOptions.showCorp) populateSelect('#filter-corp', ASSET_SCHEMA.PURCHASE_CORP.key); if (config.filterOptions.showType) populateSelect('#filter-type', ASSET_SCHEMA.ASSET_TYPE.key); // 초기 실행 switchView(); }