style: apply Vercel-inspired responsive UI & fluid scaling
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -161,11 +161,8 @@ export interface ListViewConfig {
|
||||
}
|
||||
|
||||
export function createListView(container: HTMLElement, config: ListViewConfig) {
|
||||
// 1. 컨테이너 초기화 및 헤더 렌더링 (서버 탭은 상단 공간 확보를 위해 헤더 생략)
|
||||
// 1. 컨테이너 초기화
|
||||
container.innerHTML = '';
|
||||
if (config.title !== '서버') {
|
||||
renderPageHeader(container, config.title);
|
||||
}
|
||||
|
||||
const fullList = config.dataSource();
|
||||
let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' };
|
||||
@@ -179,49 +176,40 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
||||
}
|
||||
let currentFilters: any = (state as any).listFilters[filterKey];
|
||||
|
||||
const isServer = config.title === '서버';
|
||||
|
||||
// 서버 및 PC 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드
|
||||
const isServerOrPc = config.title === '서버' || config.title === 'PC';
|
||||
if (!isServerOrPc) {
|
||||
if (!(state as any).currentViewMode || (state as any).currentViewMode === 'system') {
|
||||
(state as any).currentViewMode = 'asset';
|
||||
} else if (!(state as any).currentViewMode) {
|
||||
(state as any).currentViewMode = 'system';
|
||||
}
|
||||
|
||||
// 2. 뷰 전환 토글 바 생성 (Unified Header Style)
|
||||
const toggleWrapper = document.createElement('div');
|
||||
toggleWrapper.className = 'location-filter-bar'; // Use unified class for the bar
|
||||
// 1. 컨텐츠 영역 생성 (먼저 생성하여 참조 가능하게 함)
|
||||
const contentWrapper = document.createElement('div');
|
||||
contentWrapper.className = 'view-content-wrapper';
|
||||
|
||||
// 2. 필터 바 생성 (자산 목록에서만 사용)
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
|
||||
// 자산 추가 버튼 및 목록 보기 체크박스 추가 로직
|
||||
const showPcFlowBtn = config.title === 'PC';
|
||||
toggleWrapper.innerHTML = `
|
||||
<div class="view-toggle" style="display: ${isServerOrPc ? 'inline-flex' : 'none'};">
|
||||
${config.title === '서버' ? `<button class="toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산 위치</button>` : ''}
|
||||
<button class="toggle-btn ${(state as any).currentViewMode === 'system' && state.viewMode === 'list' ? 'active' : ''}" data-mode="system">${config.title === '서버' ? '운영 현황' : '자산 현황'}</button>
|
||||
<button class="toggle-btn ${(state as any).currentViewMode === 'asset' && state.viewMode === 'list' ? 'active' : ''}" data-mode="asset">자산 목록</button>
|
||||
</div>
|
||||
<div class="header-action-group" style="display: flex; gap: 8px;">
|
||||
const extraActionHTML = `
|
||||
<div class="header-action-group flex items-center gap-2" style="margin-left: auto; align-self: flex-end;">
|
||||
${showPcFlowBtn ? `
|
||||
<button id="btn-goto-parts-master" class="btn btn-outline btn-sm">
|
||||
<i data-lucide="settings" style="width: 14px; height: 14px;"></i> 부품 마스터
|
||||
<i data-lucide="settings" class="icon-sm"></i> 부품 마스터
|
||||
</button>
|
||||
<button id="btn-pc-flow" class="btn btn-outline btn-sm">
|
||||
PC 이동/반납
|
||||
</button>
|
||||
` : ''}
|
||||
<button id="btn-add-asset" class="btn btn-primary btn-sm">
|
||||
<span style="font-size: 16px; line-height: 1;">+</span> 자산 추가
|
||||
<button id="btn-add-asset" class="btn btn-primary">
|
||||
<i data-lucide="plus" class="icon-sm"></i> 자산 추가
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
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);
|
||||
|
||||
// --- 내부 상태 ---
|
||||
@@ -340,42 +328,42 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
||||
|
||||
<div style="display: flex; flex: 1; min-height: 0; border-top: 1px solid var(--border-color);">
|
||||
<!-- 좌측: 자산 현황 목록 (Border-based Separation) -->
|
||||
<div class="list-section" style="flex: 1.3; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.5rem 0 0; border-right: 1px solid var(--border-color);">
|
||||
<div class="list-section" style="flex: 1.3; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.5rem 0 0; border-right: 1px solid var(--hairline);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-shrink: 0;">
|
||||
<h4 id="list-section-title" style="font-size: 14px; font-weight: 700; color: var(--text-main); margin:0;">
|
||||
<h4 id="list-section-title" class="sidebar-title">
|
||||
${isPcView ? `🔄 PC 유동 이력 (${new Date().getMonth() + 1}월)` : '자산 현황 목록'}
|
||||
</h4>
|
||||
${!isPcView ? `
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 11px; font-weight: 600; color: var(--text-muted);">위치:</span>
|
||||
<select id="select-loc" style="padding: 2px 8px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-color); outline: none; background: white; cursor:pointer; font-family: 'Pretendard';">
|
||||
<div class="filter-row">
|
||||
<span class="detail-label-sm">위치:</span>
|
||||
<select id="select-loc" class="form-select-sm">
|
||||
<option value="">전체</option>
|
||||
${validLocations.map(l => `<option value="${l}" ${l === selectedLocation ? 'selected' : ''}>${l}</option>`).join('')}
|
||||
</select>
|
||||
<select id="select-detail-loc" class="filter-select select-detail-loc"></select>
|
||||
<select id="select-detail-loc" class="form-select-sm"></select>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<div style="flex: 1; overflow-y: auto;">
|
||||
<table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
|
||||
<thead style="position: sticky; top: 0; background: #fff; z-index: 10;">
|
||||
<table class="compact-table">
|
||||
<thead>
|
||||
${isPcView ? `
|
||||
<tr style="text-align: left; font-size: 11px; color: var(--text-muted);">
|
||||
<th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 120px; background: #fff; white-space: nowrap;">일자</th>
|
||||
<th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 100px; background: #fff; white-space: nowrap; text-align: center;">담당자</th>
|
||||
<th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 60px; background: #fff; white-space: nowrap; text-align: center;">구분</th>
|
||||
<th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 90px; background: #fff; white-space: nowrap; text-align: center;">사용자</th>
|
||||
<th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 90px; background: #fff; white-space: nowrap; text-align: center;">인수자</th>
|
||||
<th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 160px; background: #fff; white-space: nowrap; text-align: center;">자산번호</th>
|
||||
<th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); background: #fff; white-space: nowrap;">상세</th>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 120px;">일자</th>
|
||||
<th class="text-center" style="width: 100px;">담당자</th>
|
||||
<th class="text-center" style="width: 60px;">구분</th>
|
||||
<th class="text-center" style="width: 90px;">사용자</th>
|
||||
<th class="text-center" style="width: 90px;">인수자</th>
|
||||
<th class="text-center" style="width: 160px;">자산번호</th>
|
||||
<th class="text-center">상세</th>
|
||||
</tr>
|
||||
` : `
|
||||
<tr style="text-align: left; font-size: 11px; color: var(--text-muted);">
|
||||
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 80px; text-align:center; background: #fff;">분류</th>
|
||||
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 130px; background: #fff;">용도/자산명</th>
|
||||
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); text-align:center; width: 90px; background: #fff;">관리자(정)</th>
|
||||
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); text-align:center; width: 90px; background: #fff;">관리자(부)</th>
|
||||
<th style="padding: 10px 0; text-align: center; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 100px; background: #fff;">상세위치</th>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 80px;">분류</th>
|
||||
<th class="text-center">용도/자산명</th>
|
||||
<th class="text-center" style="width: 90px;">관리자(정)</th>
|
||||
<th class="text-center" style="width: 90px;">관리자(부)</th>
|
||||
<th class="text-center" style="width: 100px;">상세위치</th>
|
||||
</tr>
|
||||
`}
|
||||
</thead>
|
||||
@@ -386,63 +374,55 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
||||
|
||||
<!-- 우측: 상세 정보 패널 (Box-less, Line-based) -->
|
||||
<div id="system-detail-panel" style="flex: 0.7; display: flex; flex-direction: column; min-height: 0; padding: 1rem 0 0 1.5rem; overflow: hidden;">
|
||||
<div id="detail-empty-state" style="height: 100%; display: flex; flex-direction: column; color: var(--text-muted); text-align: center; overflow-y: auto; box-sizing: border-box; width: 100%; justify-content: ${isPcView ? 'flex-start' : 'center'}; align-items: ${isPcView ? 'stretch' : 'center'};">
|
||||
<div id="detail-empty-state" class="detail-empty-state" style="justify-content: ${isPcView ? 'flex-start' : 'center'}; align-items: ${isPcView ? 'stretch' : 'center'};">
|
||||
${isPcView ? `
|
||||
<div style="display: flex; flex-direction: column; min-height: 0; height: 100%; text-align: left;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-shrink: 0;">
|
||||
<h4 style="margin: 0; font-size: 14px; font-weight: 700; color: #E11D48; display: flex; align-items: center; gap: 6px; white-space: nowrap;">
|
||||
<h4 class="sidebar-title text-danger">
|
||||
⚠️ 사양 주의 장비 현황 (부족/오버스펙)
|
||||
</h4>
|
||||
</div>
|
||||
<div style="flex: 1; overflow-y: auto;">
|
||||
<table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
|
||||
<thead style="position: sticky; top: 0; background: #fff; z-index: 10;">
|
||||
<tr style="text-align: left; font-size: 11px; color: var(--text-muted);">
|
||||
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 65px; background: #fff; white-space: nowrap;">사용자</th>
|
||||
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 115px; background: #fff; white-space: nowrap;">부서 (직무)</th>
|
||||
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 65px; background: #fff; white-space: nowrap; text-align: center;">상태</th>
|
||||
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); background: #fff; white-space: nowrap;">자산코드</th>
|
||||
<table class="compact-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 65px;">사용자</th>
|
||||
<th style="width: 115px;">부서 (직무)</th>
|
||||
<th class="text-center" style="width: 65px;">상태</th>
|
||||
<th>자산코드</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="spec-mismatch-tbody" style="font-size: 12px;">
|
||||
<tr><td colspan="4" style="text-align:center; padding:1.5rem; color:#94A3B8;">사양 주의 자산이 없습니다.</td></tr>
|
||||
<tbody id="spec-mismatch-tbody">
|
||||
<tr><td colspan="4" class="empty-cell">사양 주의 자산이 없습니다.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
` : `
|
||||
<p style="font-size: 1.125rem; font-weight: 500; color: #94A3B8;">목록에서 자산을 선택하면<br>상세 정보와 배치도가 표시됩니다.</p>
|
||||
<p class="empty-list-message">목록에서 자산을 선택하면<br>상세 정보와 배치도가 표시됩니다.</p>
|
||||
`}
|
||||
</div>
|
||||
<div id="detail-content" class="detail-content hidden">
|
||||
<div class="detail-summary-header">
|
||||
<div class="summary-items">
|
||||
<div class="summary-item"><label>자산번호</label><div id="detail-asset-code" class="code-value"></div></div>
|
||||
<div class="summary-item"><label>유형</label><div id="detail-asset-type" class="type-value"></div></div>
|
||||
<div class="summary-item flex-1"><label>메모 요약</label><div id="detail-memo" class="memo-value"></div></div>
|
||||
<div id="detail-content" class="detail-content hidden" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
|
||||
<div class="detail-header-actions" style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--hairline); background: white;">
|
||||
<div class="header-identity">
|
||||
<span class="asset-code-title" id="detail-asset-code"></span>
|
||||
<span class="asset-type-label" id="detail-asset-type"></span>
|
||||
</div>
|
||||
<button id="btn-view-flow-logs" style="flex-shrink: 0; padding: 6px 16px; font-size: 12px; font-weight: 700; background: white; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 4px; cursor: pointer; transition: opacity 0.2s; margin-right: 8px;">
|
||||
${isPcView ? '목록 보기' : '이력 보기'}
|
||||
</button>
|
||||
<button id="btn-view-full-detail" style="flex-shrink: 0; padding: 6px 16px; font-size: 12px; font-weight: 700; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; transition: opacity 0.2s;">상세 보기</button>
|
||||
<button id="btn-view-full-detail" class="btn btn-primary btn-sm">상세 보기</button>
|
||||
</div>
|
||||
|
||||
<!-- 메인 배치도 영역 -->
|
||||
<div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
|
||||
<div style="margin-bottom: 0.75rem; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;">
|
||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-main); text-transform: uppercase;">설치 위치 배치도</label>
|
||||
</div>
|
||||
<div id="detail-photo-wrapper" style="width: 100%; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--border-color); background: #f0f0f0;">
|
||||
<div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 1rem;">
|
||||
<div id="detail-photo-wrapper" style="width: 100%; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--hairline); background: #f0f0f0; border-radius: 8px;">
|
||||
<div class="layout-map-container readonly" style="position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
|
||||
<img id="detail-photo" src="" style="display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none;" />
|
||||
<iframe id="detail-html-map" src="" style="display: none; width: 100%; height: 100%; border: none;"></iframe>
|
||||
<div id="detail-marker" class="layout-marker pulse-marker" style="display: none; position: absolute; z-index: 20;"></div>
|
||||
<div id="detail-overlay-layer" class="digital-overlay-layer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; align-items: center; justify-content: center;"></div>
|
||||
<div id="detail-overlay-layer" style="position: absolute; pointer-events: none;"></div>
|
||||
</div>
|
||||
<div id="detail-no-photo" style="display: none; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
|
||||
<span style="color: #94A3B8; font-size: 13px; font-weight: 500;">등록된 배치도가 없습니다.</span>
|
||||
<div id="detail-no-photo" class="no-photo-state hidden" style="padding: 3rem; text-align: center; color: var(--mute);">
|
||||
<span>등록된 배치도가 없습니다.</span>
|
||||
</div>
|
||||
<div id="detail-no-photo" class="no-photo-state hidden"><span>등록된 배치도가 없습니다.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -578,108 +558,67 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
||||
const tbody = document.getElementById('system-status-tbody');
|
||||
if (tbody) {
|
||||
tbody.querySelectorAll('.mini-row').forEach(r => {
|
||||
const rIsWarning = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)';
|
||||
(r as HTMLElement).style.backgroundColor = rIsWarning ? '#FFF1F2' : 'transparent';
|
||||
r.classList.remove('active');
|
||||
});
|
||||
}
|
||||
updateFlowLogsSection();
|
||||
if (isPcView) {
|
||||
updateTableOnly();
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// [자산 현황] 테이블 렌더러
|
||||
const updateTableOnly = () => {
|
||||
const now = new Date();
|
||||
const currentYear = now.getFullYear();
|
||||
const currentMonthNum = now.getMonth() + 1;
|
||||
const currentYearMonth = `${currentYear}-${String(currentMonthNum).padStart(2, '0')}`;
|
||||
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, 20) : filtered;
|
||||
|
||||
if (isPcView) {
|
||||
const recentTbody = document.getElementById('system-status-tbody');
|
||||
if (!recentTbody) return;
|
||||
const titleEl = document.getElementById('list-section-title');
|
||||
if (titleEl) titleEl.textContent = `🔄 PC 유동 이력 (${currentMonthNum}월)`;
|
||||
const logs = state.masterData.logs || [];
|
||||
const flowLogs = logs.filter((log: any) => {
|
||||
const details = log.details || '';
|
||||
if (details.trim().startsWith('{')) {
|
||||
try {
|
||||
const info = JSON.parse(details);
|
||||
return info && (info.type === 'checkout' || info.type === 'return' || info.type === 'move');
|
||||
} catch (e) {}
|
||||
}
|
||||
return details.includes('[불출]') || details.includes('[반납]') || details.includes('[입고]') || details.includes('[이동]') || details.includes('[이관]');
|
||||
});
|
||||
const monthlyFlowLogs = flowLogs.filter((log: any) => (log.log_date || '').startsWith(currentYearMonth));
|
||||
if (monthlyFlowLogs.length === 0) {
|
||||
recentTbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:1.5rem; color:#94A3B8;">${currentMonthNum}월 유동 이력이 없습니다.</td></tr>`;
|
||||
} else {
|
||||
recentTbody.innerHTML = monthlyFlowLogs.map((log: any) => {
|
||||
const details = log.details || '';
|
||||
let typeDisplay = '-'; let userDisplay = '-'; let targetUserDisplay = '-'; let assetCodeDisplay = '-'; let memoDisplay = '-';
|
||||
try {
|
||||
const info = JSON.parse(details);
|
||||
typeDisplay = info.type; userDisplay = info.user || '-'; targetUserDisplay = info.targetUser || '-'; assetCodeDisplay = info.assetCode || '-'; memoDisplay = info.memo || '-';
|
||||
} catch (e) {
|
||||
if (details.includes('[불출]')) typeDisplay = 'checkout';
|
||||
else if (details.includes('[반납]') || details.includes('[입고]')) typeDisplay = 'return';
|
||||
else if (details.includes('[이동]') || details.includes('[이관]')) typeDisplay = 'move';
|
||||
const codeMatch = details.match(/PC-\d{6}-\d{4}|HW-PC-\d+/i); if (codeMatch) assetCodeDisplay = codeMatch[0];
|
||||
}
|
||||
let badgeHtml = '';
|
||||
if (typeDisplay === 'checkout') badgeHtml = '<span style="background:#E0F2FE;color:#0369A1;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">불출</span>';
|
||||
else if (typeDisplay === 'return') badgeHtml = '<span style="background:#DCFCE7;color:#15803D;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">입고</span>';
|
||||
else if (typeDisplay === 'move') badgeHtml = '<span style="background:#FEF3C7;color:#B45309;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">이동</span>';
|
||||
else badgeHtml = '<span style="background:#F1F5F9;color:#475569;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">기타</span>';
|
||||
return `
|
||||
<tr style="border-bottom: 1px solid var(--border-color);">
|
||||
<td style="padding: 10px 8px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;">${log.log_date || '-'}</td>
|
||||
<td style="padding: 10px 8px; font-weight: 500; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; text-align: center;">${log.log_user || '시스템'}</td>
|
||||
<td style="padding: 10px 8px; white-space: nowrap; text-align: center;">${badgeHtml}</td>
|
||||
<td style="padding: 10px 8px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center;">${userDisplay}</td>
|
||||
<td style="padding: 10px 8px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center;">${targetUserDisplay}</td>
|
||||
<td style="padding: 10px 8px; font-family: monospace; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; text-align: center;">${assetCodeDisplay}</td>
|
||||
<td style="padding: 10px 8px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;">${memoDisplay}</td>
|
||||
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 = `<option value="">전체보기</option>` + currentDetailLocs.map(dl => `<option value="${dl}">${dl}</option>`).join('');
|
||||
}
|
||||
|
||||
const tbody = document.getElementById('system-status-tbody');
|
||||
if (tbody) {
|
||||
tbody.innerHTML = finalDisplayList.length === 0
|
||||
? `<tr><td colspan="5" class="empty-cell">조회된 자산이 없습니다.</td></tr>`
|
||||
: finalDisplayList.map(asset => {
|
||||
const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '';
|
||||
const serviceType = asset.service_type || '외부';
|
||||
const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
|
||||
const isWarning = serviceType === '외부SW' && (loc !== 'IDC' || type.toLowerCase().includes('서버pc'));
|
||||
const managerMain = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-';
|
||||
const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-';
|
||||
|
||||
return `
|
||||
<tr class="mini-row ${isWarning ? 'warning' : ''}" data-id="${asset.id}">
|
||||
<td class="text-center">
|
||||
<span class="badge ${isWarning ? 'badge-danger' : 'badge-primary'}">${serviceType}</span>
|
||||
</td>
|
||||
<td class="font-bold">${purpose || '-'}</td>
|
||||
<td class="text-center">${managerMain}</td>
|
||||
<td class="text-center">${managerSub}</td>
|
||||
<td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
} else {
|
||||
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 = `<option value="">전체보기</option>` + currentDetailLocs.map(dl => `<option value="${dl}">${dl}</option>`).join('');
|
||||
}
|
||||
const tbody = document.getElementById('system-status-tbody');
|
||||
if (tbody) {
|
||||
tbody.innerHTML = finalDisplayList.length === 0 ? `<tr><td colspan="5" style="padding: 3rem; text-align: center; color: var(--text-muted);">조회된 자산이 없습니다.</td></tr>`
|
||||
: finalDisplayList.map(asset => {
|
||||
const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '';
|
||||
const serviceType = asset.service_type || '외부';
|
||||
const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
|
||||
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
||||
const isWarning = serviceType === '외부SW' && (loc !== 'IDC' || type.toLowerCase().includes('서버pc'));
|
||||
return `
|
||||
<tr style="border-bottom: 1px solid var(--border-color); cursor: pointer; ${isWarning ? 'background-color:#FFF1F2; border-left:3px solid #E11D48;' : ''}" class="mini-row" data-id="${asset.id}">
|
||||
<td style="padding: 10px 0; text-align:center;"><span style="font-weight:800; font-size:12px; color:${isWarning ? '#E11D48' : '#35635C'}">${serviceType}</span></td>
|
||||
<td style="padding: 10px 0; font-weight: 600; font-size: 13px;">${purpose || '-'}</td>
|
||||
<td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'}</td>
|
||||
<td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-'}</td>
|
||||
<td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
tbody.querySelectorAll('.mini-row').forEach(row => {
|
||||
row.addEventListener('click', () => {
|
||||
tbody.querySelectorAll('.mini-row').forEach(r => (r as HTMLElement).style.backgroundColor = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)' ? '#FFF1F2' : 'transparent');
|
||||
(row as HTMLElement).style.backgroundColor = '#EBF2F1';
|
||||
const asset = fullList.find(a => a.id === (row as HTMLElement).getAttribute('data-id'));
|
||||
if (asset) updateDetailPanel(asset);
|
||||
});
|
||||
}).join('');
|
||||
|
||||
tbody.querySelectorAll('.mini-row').forEach(row => {
|
||||
row.addEventListener('click', () => {
|
||||
tbody.querySelectorAll('.mini-row').forEach(r => r.classList.remove('active'));
|
||||
row.classList.add('active');
|
||||
const asset = fullList.find(a => a.id === row.getAttribute('data-id'));
|
||||
if (asset) updateDetailPanel(asset);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -704,9 +643,17 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
||||
const updateTable = () => {
|
||||
let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
|
||||
if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
||||
thead.innerHTML = `<tr>${config.columns.map(col => `<th ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} style="${col.width ? `width:${col.width};` : ''}" class="${col.align ? `text-${col.align}` : ''}">${col.header}</th>`).join('')}</tr>`;
|
||||
|
||||
// Headers are naturally centered via CSS now. Only apply specific widths or sorting.
|
||||
thead.innerHTML = `<tr>${config.columns.map(col => `<th ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} style="${col.width ? `width:${col.width};` : ''}">${col.header}</th>`).join('')}</tr>`;
|
||||
|
||||
tbody.innerHTML = filtered.length === 0 ? `<tr><td colspan="${config.columns.length}" class="text-center empty-cell">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`
|
||||
: filtered.map(asset => `<tr class="asset-row clickable" data-id="${asset.id}">${config.columns.map(col => `<td class="${col.align ? `text-${col.align}` : ''}">${col.render(asset)}</td>`).join('')}</tr>`).join('');
|
||||
: filtered.map(asset => `<tr class="asset-row clickable" data-id="${asset.id}">${config.columns.map(col => {
|
||||
// Date columns should remain centered. Everything else defaults to left (via CSS).
|
||||
const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
|
||||
return `<td class="${isDateCol ? 'text-center' : ''}">${col.render(asset)}</td>`;
|
||||
}).join('')}</tr>`).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 }; updateTable(); });
|
||||
};
|
||||
@@ -722,37 +669,74 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
||||
}
|
||||
};
|
||||
|
||||
toggleWrapper.addEventListener('click', (e) => {
|
||||
const btn = (e.target as HTMLElement).closest('.toggle-btn') as HTMLButtonElement;
|
||||
if (!btn) return;
|
||||
const mode = btn.getAttribute('data-mode');
|
||||
if (mode === 'location') state.viewMode = 'location';
|
||||
else { state.viewMode = 'list'; (state as any).currentViewMode = mode; }
|
||||
window.dispatchEvent(new Event('refresh-view'));
|
||||
});
|
||||
|
||||
// 2. 필터 바 렌더링
|
||||
renderFilterBar(filterBar, {
|
||||
...config.filterOptions, initialFilters: currentFilters,
|
||||
...config.filterOptions,
|
||||
initialFilters: currentFilters,
|
||||
extraHTML: isServer ? `
|
||||
<div class="search-item">
|
||||
<label class="flex items-center gap-2 cursor-pointer font-semibold" style="color: var(--primary); height: clamp(34px, 4.5vmin, 44px); padding: 0 0.5rem;">
|
||||
<input type="checkbox" id="chk-list-view" ${(state as any).currentViewMode === 'asset' ? 'checked' : ''} style="width: 16px; height: 16px; cursor: pointer;" />
|
||||
목록보기
|
||||
</label>
|
||||
</div>
|
||||
` : '',
|
||||
onFilterChange: (filters) => { Object.assign(currentFilters, filters); updateTable(); }
|
||||
});
|
||||
|
||||
const populateSelect = (selector: string, dataKey: string, initialValue?: string) => {
|
||||
const select = container.querySelector(selector) as HTMLSelectElement;
|
||||
if (select) {
|
||||
const uniqueValues = Array.from(new Set(fullList.map(a => a[dataKey]))).filter(Boolean).sort();
|
||||
uniqueValues.forEach(val => {
|
||||
const opt = document.createElement('option'); opt.value = String(val); opt.textContent = String(val);
|
||||
if (initialValue && String(val) === initialValue) opt.selected = true;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
}
|
||||
};
|
||||
// 3. 필터 바 내 액션 버튼 배치 (자산 추가, 부품 마스터 등)
|
||||
const actionContainer = filterBar.querySelector('#filter-bar-actions');
|
||||
if (actionContainer) {
|
||||
actionContainer.innerHTML = `
|
||||
${showPcFlowBtn ? `
|
||||
<button id="btn-goto-parts-master" class="btn btn-outline">
|
||||
<i data-lucide="settings" style="width: 18px; height: 18px;"></i> 부품 마스터
|
||||
</button>
|
||||
<button id="btn-pc-flow" class="btn btn-outline">
|
||||
PC 이동/반납
|
||||
</button>
|
||||
` : ''}
|
||||
<button id="btn-add-asset" class="btn btn-primary">
|
||||
<i data-lucide="plus" style="width: 18px; height: 18px;"></i> 자산 추가
|
||||
</button>
|
||||
`;
|
||||
|
||||
// 버튼 이벤트 바인딩
|
||||
actionContainer.querySelector('#btn-add-asset')?.addEventListener('click', () => {
|
||||
const dummyAsset = { id: '', category: config.title };
|
||||
config.onRowClick && config.onRowClick(dummyAsset);
|
||||
});
|
||||
actionContainer.querySelector('#btn-pc-flow')?.addEventListener('click', () => {
|
||||
window.dispatchEvent(new CustomEvent('open-pc-flow'));
|
||||
});
|
||||
actionContainer.querySelector('#btn-goto-parts-master')?.addEventListener('click', () => {
|
||||
state.activeSubTab = '부품 마스터';
|
||||
window.dispatchEvent(new Event('refresh-view'));
|
||||
});
|
||||
}
|
||||
|
||||
if (config.filterOptions.showLoc) populateSelect('#filter-loc', ASSET_SCHEMA.LOCATION.key, currentFilters.loc);
|
||||
if (config.filterOptions.showDept) populateSelect('#filter-dept', ASSET_SCHEMA.CURRENT_DEPT.key, currentFilters.dept);
|
||||
if (config.filterOptions.showCorp) populateSelect('#filter-corp', ASSET_SCHEMA.PURCHASE_CORP.key, currentFilters.corp);
|
||||
if (config.filterOptions.showType) populateSelect('#filter-type', ASSET_SCHEMA.ASSET_TYPE.key, currentFilters.type);
|
||||
if (config.filterOptions.showStatus) populateSelect('#filter-status', ASSET_SCHEMA.HW_STATUS.key, currentFilters.status);
|
||||
// 서버 탭 전용 목록보기 체크박스 이벤트
|
||||
if (isServer) {
|
||||
const toggleBtn = filterBar.querySelector('#btn-toggle-list-view');
|
||||
const chkBox = filterBar.querySelector('#chk-list-view') as HTMLInputElement;
|
||||
|
||||
const handleToggle = () => {
|
||||
const isListMode = (state as any).currentViewMode === 'asset';
|
||||
if (isListMode) {
|
||||
state.viewMode = 'location';
|
||||
(state as any).currentViewMode = 'location';
|
||||
} else {
|
||||
state.viewMode = 'list';
|
||||
(state as any).currentViewMode = 'asset';
|
||||
}
|
||||
window.dispatchEvent(new Event('refresh-view'));
|
||||
};
|
||||
|
||||
toggleBtn?.addEventListener('click', (e) => {
|
||||
if (e.target !== chkBox) handleToggle();
|
||||
});
|
||||
chkBox?.addEventListener('change', handleToggle);
|
||||
}
|
||||
|
||||
switchView();
|
||||
}
|
||||
|
||||
@@ -22,10 +22,11 @@ export function renderServerList(container: HTMLElement) {
|
||||
onRowClick: (asset) => openHwModal(asset, 'view'),
|
||||
columns: [
|
||||
{ header: ASSET_SCHEMA.CURRENT_DEPT.ui, sortKey: ASSET_SCHEMA.CURRENT_DEPT.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_DEPT.key] || '-' },
|
||||
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, width: '15%', render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
|
||||
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, align: 'center', width: '15%', render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
|
||||
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||
{
|
||||
header: '모델/메인보드',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || a[ASSET_SCHEMA.MAINBOARD.key] || '-')
|
||||
},
|
||||
|
||||
@@ -21,7 +21,7 @@ export function renderStorageList(container: HTMLElement) {
|
||||
{ header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
|
||||
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||
{ header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },
|
||||
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
|
||||
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, align: 'center', render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
|
||||
{ header: ASSET_SCHEMA.SERIAL_NUM.ui, sortKey: ASSET_SCHEMA.SERIAL_NUM.key, align: 'center', render: a => a[ASSET_SCHEMA.SERIAL_NUM.key] || '-' },
|
||||
{
|
||||
header: ASSET_SCHEMA.LOCATION.ui,
|
||||
|
||||
@@ -4,12 +4,11 @@ import { ASSET_SCHEMA } from '../core/schema';
|
||||
import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
|
||||
|
||||
/**
|
||||
* 위치 중심 자산 현황 뷰 (Refined)
|
||||
* 위치 중심 자산 현황 뷰 (Vercel Integrated)
|
||||
*/
|
||||
export async function renderLocationView(container: HTMLElement) {
|
||||
if (!container) return;
|
||||
|
||||
// 로컬 상태 (UI 제어용)
|
||||
let currentLoc = '기술개발센터';
|
||||
let currentDetail = '서버실';
|
||||
let currentPage = 0;
|
||||
@@ -26,7 +25,7 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
: [];
|
||||
const mapPath = locImages[currentPage] || '';
|
||||
|
||||
// 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시
|
||||
// 자산이 등록된 구역만 필터링
|
||||
const allBoxes = mapConfig[mapPath] || [];
|
||||
const boxes = allBoxes.filter((box: any) =>
|
||||
state.masterData.hw.some(a =>
|
||||
@@ -39,38 +38,36 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="location-view-wrapper">
|
||||
<!-- 상단 통합 바 (토글 + 필터) -->
|
||||
<div class="location-filter-bar" style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--border-color); background: white;">
|
||||
<!-- 좌측: 3-way 토글 -->
|
||||
<div class="view-toggle">
|
||||
<button class="toggle-btn active" data-mode="location">자산 위치</button>
|
||||
<button class="toggle-btn" data-mode="system">운영 현황</button>
|
||||
<button class="toggle-btn" data-mode="asset">자산 목록</button>
|
||||
</div>
|
||||
|
||||
<!-- 우측: 위치 필터 -->
|
||||
<div style="display: flex; align-items: center; gap: 1.5rem;">
|
||||
<div class="filter-group" style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<label style="font-size: 13px; font-weight: 700; color: var(--text-muted);">건물/위치</label>
|
||||
<select id="sel-loc-main" style="padding: 4px 8px; border: 1px solid var(--border-color); font-family: inherit; font-size: 13px; outline: none; background: #fff; cursor: pointer; border-radius: 4px;">
|
||||
<!-- 상단 통합 바 (Vercel Style) -->
|
||||
<div class="location-filter-bar">
|
||||
<div class="filter-actions-group">
|
||||
<div class="filter-group">
|
||||
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; font-weight: 500; color: var(--primary);">
|
||||
<input type="checkbox" id="chk-list-view-loc" style="width: 16px; height: 16px; cursor: pointer;" />
|
||||
목록보기
|
||||
</label>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>건물/위치</label>
|
||||
<select id="sel-loc-main" class="form-select-sm">
|
||||
${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group" style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<label style="font-size: 13px; font-weight: 700; color: var(--text-muted);">상세 위치</label>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<select id="sel-loc-detail" style="padding: 4px 8px; border: 1px solid var(--border-color); font-family: inherit; font-size: 13px; outline: none; background: #fff; cursor: pointer; border-radius: 4px;">
|
||||
<div class="filter-group">
|
||||
<label>상세 위치</label>
|
||||
<div class="filter-row">
|
||||
<select id="sel-loc-detail" class="form-select-sm">
|
||||
${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
|
||||
</select>
|
||||
|
||||
<!-- 페이지네이션 -->
|
||||
${locImages.length > 1 ? `
|
||||
<div class="map-pagination" style="margin-left: 0; padding-left: 0.5rem; border-left: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div class="page-btns" style="display: flex; gap: 4px;">
|
||||
<button id="btn-prev-page" style="background: none; border: 1px solid var(--border-color); padding: 2px 8px; cursor: pointer; font-size: 12px; border-radius: 4px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
|
||||
<button id="btn-next-page" style="background: none; border: 1px solid var(--border-color); padding: 2px 8px; cursor: pointer; font-size: 12px; border-radius: 4px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
|
||||
<div class="map-pagination-group">
|
||||
<div class="page-btns">
|
||||
<button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
|
||||
<button id="btn-next-page" class="btn btn-outline btn-sm" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
|
||||
</div>
|
||||
<span class="page-info" style="font-size: 12px; color: var(--text-muted);">(${currentPage + 1} / ${locImages.length})</span>
|
||||
<span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
@@ -79,12 +76,12 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
</div>
|
||||
|
||||
<div class="location-main-content">
|
||||
<!-- 지도 섹션: Border-only -->
|
||||
<!-- 지도 섹션 -->
|
||||
<div class="map-container-section">
|
||||
<div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
|
||||
<div class="map-frame-wrapper">
|
||||
${mapPath ? `
|
||||
<img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
|
||||
<div id="box-overlay" style="position: absolute; pointer-events: none; transition: none;">
|
||||
<img src="${mapPath}" id="main-map-img" class="map-image">
|
||||
<div id="box-overlay" class="map-overlay">
|
||||
${boxes.map((box: any, idx: number) => {
|
||||
const name = box.name || `#${idx+1}`;
|
||||
return `
|
||||
@@ -92,22 +89,22 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
data-name="${name}"
|
||||
data-x="${box.x}"
|
||||
data-y="${box.y}"
|
||||
style="position: absolute; left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
|
||||
style="left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
|
||||
border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto;">
|
||||
</div>
|
||||
`}).join('')}
|
||||
</div>
|
||||
` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
|
||||
` : '<div class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 상세 정보 섹션: Border-only -->
|
||||
<div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff;">
|
||||
<div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
|
||||
<h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 800; color: var(--primary-color);">📍 구역을 선택하세요</h4>
|
||||
<!-- 상세 정보 섹션 -->
|
||||
<div class="asset-list-section">
|
||||
<div class="section-header">
|
||||
<h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
|
||||
</div>
|
||||
<div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
|
||||
<div class="empty-state" style="padding: 3rem 1rem; color: var(--text-muted); text-align: center;">지도에서 자산 위치를 클릭하세요.</div>
|
||||
<div id="loc-asset-table-container" class="mini-table-wrapper">
|
||||
<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -117,25 +114,8 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
const syncOverlaySize = () => {
|
||||
const img = container.querySelector('#main-map-img') as HTMLImageElement;
|
||||
const overlay = container.querySelector('#box-overlay') as HTMLElement;
|
||||
const mainContent = container.querySelector('.location-main-content') as HTMLElement;
|
||||
|
||||
if (img && overlay && img.complete) {
|
||||
// 1. 이미지 실제 크기와 가로세로 비율 계산
|
||||
const naturalRatio = img.naturalWidth / img.naturalHeight;
|
||||
|
||||
// 2. 비율에 따른 동적 레이아웃 조정 (Adaptive Layout)
|
||||
if (naturalRatio < 0.85) {
|
||||
// 세로로 긴 사진: 상세정보를 대폭 넓힘
|
||||
mainContent.style.gridTemplateColumns = '0.9fr 1.1fr';
|
||||
} else if (naturalRatio < 1.25) {
|
||||
// 정사각형에 가까운 사진: 균형 배치
|
||||
mainContent.style.gridTemplateColumns = '1.2fr 1fr';
|
||||
} else {
|
||||
// 가로로 넓은 사진: 지도 중심 (예전 2:1 비율)
|
||||
mainContent.style.gridTemplateColumns = '2fr 1fr';
|
||||
}
|
||||
|
||||
// 3. 오버레이 크기와 위치 동기화
|
||||
overlay.style.width = img.clientWidth + 'px';
|
||||
overlay.style.height = img.clientHeight + 'px';
|
||||
overlay.style.left = img.offsetLeft + 'px';
|
||||
@@ -156,7 +136,6 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
window.removeEventListener('resize', syncOverlaySize);
|
||||
window.addEventListener('resize', syncOverlaySize);
|
||||
|
||||
// 이벤트 바인딩
|
||||
const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
|
||||
selMain?.addEventListener('change', () => {
|
||||
currentLoc = selMain.value;
|
||||
@@ -175,19 +154,23 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
|
||||
container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
|
||||
|
||||
// 뷰 모드 전환 이벤트 바인딩 (Unified Logic)
|
||||
container.querySelectorAll('.toggle-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const mode = btn.getAttribute('data-mode');
|
||||
if (mode === 'location') {
|
||||
state.viewMode = 'location';
|
||||
} else {
|
||||
state.viewMode = 'list';
|
||||
(state as any).currentViewMode = mode;
|
||||
}
|
||||
window.dispatchEvent(new Event('refresh-view'));
|
||||
});
|
||||
});
|
||||
const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
|
||||
|
||||
if (chkBox) {
|
||||
chkBox.checked = (state as any).currentViewMode === 'asset';
|
||||
const handleToggle = () => {
|
||||
const isListMode = chkBox.checked;
|
||||
if (isListMode) {
|
||||
state.viewMode = 'list';
|
||||
(state as any).currentViewMode = 'asset';
|
||||
} else {
|
||||
state.viewMode = 'location';
|
||||
(state as any).currentViewMode = 'location';
|
||||
}
|
||||
window.dispatchEvent(new Event('refresh-view'));
|
||||
};
|
||||
chkBox.addEventListener('change', handleToggle);
|
||||
}
|
||||
|
||||
container.querySelectorAll('.location-box-point').forEach(box => {
|
||||
box.addEventListener('click', () => {
|
||||
@@ -201,10 +184,7 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
String(a.loc_y) === String(y)
|
||||
);
|
||||
|
||||
if (targetAsset) {
|
||||
renderAssetDetail(targetAsset);
|
||||
}
|
||||
|
||||
if (targetAsset) renderAssetDetail(targetAsset);
|
||||
container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
|
||||
(box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
|
||||
});
|
||||
@@ -215,7 +195,6 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
const title = container.querySelector('#loc-list-title')!;
|
||||
const tableContainer = container.querySelector('#loc-asset-table-container')!;
|
||||
|
||||
// 헤더: 자산상세정보 대신 자산번호 + 구분/유형 배치 (CSS Class 사용)
|
||||
title.innerHTML = `
|
||||
<div class="detail-header-actions">
|
||||
<div class="header-identity">
|
||||
@@ -227,11 +206,27 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 섹션 렌더러: 2열 구성 및 폰트 대비 강화 (CSS Class 사용)
|
||||
const renderSection = (title: string, fields: { label: string; value: any; fullWidth?: boolean }[]) => `
|
||||
<div class="detail-section">
|
||||
<div class="detail-section-title">${title}</div>
|
||||
<div class="detail-grid-2col">
|
||||
const fields = [
|
||||
{ label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
|
||||
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
|
||||
{ label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
|
||||
{ label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
|
||||
{ label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
|
||||
{ label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
|
||||
{ label: ASSET_SCHEMA.OS.ui, value: asset.os },
|
||||
{ label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
|
||||
{ label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
|
||||
{ label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true },
|
||||
{ label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
|
||||
{ label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
|
||||
{ label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool },
|
||||
{ label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
|
||||
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
|
||||
];
|
||||
|
||||
const sectionsHTML = `
|
||||
<div class="detail-section" style="margin-bottom: 0;">
|
||||
<div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
|
||||
${fields.map(f => `
|
||||
<div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
|
||||
<div class="detail-label-sm">${f.label}</div>
|
||||
@@ -242,41 +237,12 @@ export async function renderLocationView(container: HTMLElement) {
|
||||
</div>
|
||||
`;
|
||||
|
||||
const sectionsHTML = [
|
||||
renderSection('시스템 사양', [
|
||||
{ label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
|
||||
{ label: ASSET_SCHEMA.OS.ui, value: asset.os },
|
||||
{ label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
|
||||
{ label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
|
||||
{ label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true }
|
||||
]),
|
||||
renderSection('네트워크 및 상태', [
|
||||
{ label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
|
||||
{ label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
|
||||
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
|
||||
{ label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool }
|
||||
]),
|
||||
renderSection('상세 메모리', [
|
||||
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
|
||||
])
|
||||
].join('');
|
||||
|
||||
tableContainer.innerHTML = `
|
||||
<div class="asset-detail-sidebar">
|
||||
${sectionsHTML}
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
|
||||
title.innerHTML = `<h4 id="loc-list-title" class="sidebar-title">📍 구역을 선택하세요</h4>`;
|
||||
tableContainer.innerHTML = `<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>`;
|
||||
});
|
||||
|
||||
container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
|
||||
title.innerHTML = `<h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 800; color: var(--primary-color);">📍 구역을 선택하세요</h4>`;
|
||||
tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem; color: var(--text-muted); text-align: center;">지도에서 자산 위치를 클릭하세요.</div>`;
|
||||
});
|
||||
|
||||
container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
|
||||
openHwModal(asset, 'edit');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user