b24014/ITAM-test
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge: ux_setting 브랜치를 main에 병합 (HWModal UI 고도화 및 PC 탭 제한 사항 반영)

Browse Source
This commit is contained in:
이태훈
2026-06-11 11:23:09 +09:00
parent 29c7d5f3d8 f5a84a77ef
commit 4810df212a
9 changed files with 661 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/Modal/HWModal.ts
View File

@@ -151,27 +151,20 @@ class HwAssetModal extends BaseModal {
<label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
<input type="text" id="hw-monitor_inch" name="monitor_inch" style="${inputStyle}" />
</div>
<div class="form-group parts-only">
<label>${ASSET_SCHEMA.VOLUME.ui}</label>
<input type="text" id="hw-volume" name="volume" style="${inputStyle}" />
</div>
<div class="form-group parts-only">
<label>${ASSET_SCHEMA.ASSET_COUNT.ui}</label>
<input type="text" id="hw-asset_count" name="asset_count" style="${inputStyle}" />
</div>
<!-- 동적 디스크 할당 영역 -->
<div class="form-section-title spec-only" style="margin-top: 24px; margin-bottom: 12px;">디스크(용량) 정보</div>
<div class="form-group spec-only full-width" style="grid-column: span 2;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">저장장치 (디스크)</label>
<button type="button" id="btn-add-volume" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 디스크 추가</button>
<label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">연결된 드라이브 리스트</label>
<button type="button" id="btn-add-volume" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 볼륨 추가</button>
</div>
<div id="hw-volume-container" style="display: flex; flex-direction: column; gap: 8px;"></div>
<input type="hidden" id="hw-volumes-data" name="volumes" />
</div>
<!-- [SECTION 4] 통합 원격 접속 정보 -->
<div class="form-section-title net-only" style="margin-top: 24px; margin-bottom: 12px;">원격 접속 정보</div>
<!-- 통합 원격 접속 정보 영역 -->
<div class="form-section-title net-only" style="margin-top: 24px; margin-bottom: 12px;">네트워크 및 원격 접속 정보</div>
<div class="form-group net-only full-width" style="grid-column: span 2;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<label style="margin: 0; font-size: 11px; font-weight: 700; color: var(--text-muted);">IP/MAC 및 접속 계정 정보</label>
@@ -180,7 +173,7 @@ class HwAssetModal extends BaseModal {
<div id="hw-remote-info-container" style="display: flex; flex-direction: column; gap: 12px;"></div>
</div>
<!-- [SECTION 6] 설치 위치 -->
<!-- [SECTION 5] 설치 위치 -->
<div class="form-section-title location-section" style="margin-top: 24px; margin-bottom: 12px;">설치 위치</div>
<div class="form-group location-field">
<label>건물/위치</label>
@@ -196,7 +189,7 @@ class HwAssetModal extends BaseModal {
<input type="hidden" id="hw-loc_x" name="loc_x" /><input type="hidden" id="hw-loc_y" name="loc_y" /><input type="hidden" id="hw-location_photo" name="location_photo" />
</div>
<!-- [SECTION 7] 구매 및 증빙 -->
<!-- [SECTION 6] 구매 정보 -->
<div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">구매 및 증빙 정보</div>
<div class="form-group">
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
@@ -384,7 +377,7 @@ class HwAssetModal extends BaseModal {
document.querySelectorAll('#hw-remote-info-container .remote-info-row').forEach(row => {
const type = (row.querySelector('.ri-type') as HTMLSelectElement).value;
const val1 = (row.querySelector('.ri-val1') as HTMLInputElement).value;
if (type === 'IP' && val1) {
const tool = (row.querySelector('.ri-tool') as HTMLSelectElement)?.value || '';
const id = (row.querySelector('.ri-id') as HTMLInputElement)?.value || '';
@@ -436,7 +429,7 @@ class HwAssetModal extends BaseModal {
private addRemoteInfoRow(info: any = { type: 'IP', name: '원격접속', val1: '', val2: '' }) {
const container = document.getElementById('hw-remote-info-container');
if (!container) return;
// Parse val2 (which contains JSON with id and pw if type is IP)
let parsedId = '';
let parsedPw = '';
@@ -469,7 +462,7 @@ class HwAssetModal extends BaseModal {
// Second Line: Tool & Credentials (Only for IP)
const line2 = document.createElement('div');
line2.className = 'ri-line ri-cred-line';
line2.style.display = info.type === 'IP' ? 'flex' : 'none';
line2.style.display = info.type === 'IP' ? 'flex' : 'none';
line2.innerHTML = `
<div class="ri-connector"></div>
<select class="ri-tool" ${!this.isEditMode ? 'disabled' : ''}>
@@ -503,9 +496,9 @@ class HwAssetModal extends BaseModal {
private toggleEditOnlyBtns(isEdit: boolean) {
['btn-add-volume', 'btn-add-remote-info'].forEach(id => {
const btn = document.getElementById(id);
if (btn) btn.style.display = isEdit ? 'inline-flex' : 'none';
if (btn) btn.style.display = isEdit ? 'inline-flex' : 'none';
});
document.querySelectorAll('.edit-only-btn').forEach(btn => {
document.querySelectorAll('.edit-only-btn').forEach(btn => {
(btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none';
});
@@ -556,33 +549,32 @@ class HwAssetModal extends BaseModal {
try { vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : []; } catch(e) {}
vols.forEach((v: any) => this.addVolumeRow(v));
// 통합 원격 접속 정보 렌더링
// 통합 원격 접속 정보 렌더링 초기화 및 생성
const remoteInfoContainer = document.getElementById('hw-remote-info-container');
if (remoteInfoContainer) remoteInfoContainer.innerHTML = '';
let nets = [];
try { nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : []; } catch(e) {}
// Fallback: 서버에서 배열을 안 줬지만 기존 평탄화 데이터가 있는 경우
if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) {
if (asset.ip_address) {
// 기존 REMOTE 정보가 있다면 IP 로우에 통합 시도
const tool = asset.remote_tool || '원격접속';
const creds = (asset.remote_id || asset.remote_pw) ? JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }) : '';
nets.push({ type: 'IP', name: tool, val1: asset.ip_address, val2: creds });
}
if (asset.mac_address) {
nets.push({ type: 'MAC', name: 'MAC 주소', val1: asset.mac_address, val2: '' });
}
// IP가 없는데 원격 정보만 있는 경우 (특이 케이스)
if (!asset.ip_address && (asset.remote_tool || asset.remote_id)) {
const creds = JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' });
nets.push({ type: 'IP', name: asset.remote_tool || '기타', val1: '', val2: creds });
}
}
if (remoteInfoContainer) {
remoteInfoContainer.innerHTML = '';
let nets = [];
try {
nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : [];
} catch(e) {}
nets.forEach((n: any) => {
this.addRemoteInfoRow(n);
});
// Fallback: 서버에서 배열을 안 줬지만 기존 평탄화 데이터가 있는 경우
if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) {
if (asset.ip_address) {
const tool = asset.remote_tool || '원격접속';
const creds = (asset.remote_id || asset.remote_pw) ? JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }) : '';
nets.push({ type: 'IP', name: tool, val1: asset.ip_address, val2: creds });
}
if (asset.mac_address) {
nets.push({ type: 'MAC', name: 'MAC 주소', val1: asset.mac_address, val2: '' });
}
if (!asset.ip_address && (asset.remote_tool || asset.remote_id)) {
const creds = JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' });
nets.push({ type: 'IP', name: asset.remote_tool || '기타', val1: '', val2: creds });
}
}
nets.forEach((n: any) => this.addRemoteInfoRow(n));
}
setFieldValue('hw-monitoring', asset.monitoring || '비대상');
setFieldValue('hw-serial_num', asset.serial_num || '');
@@ -787,7 +779,7 @@ class HwAssetModal extends BaseModal {
}
// 화살표 기호(➔)를 사용하여 변경 사항 강조
const formattedDetails = l.details.replace(' -> ', ' <span class="history-arrow">➔</span> ');
const formattedDetails = (l.details || '').replace(' -> ', ' <span class="history-arrow">➔</span> ');
return `
<div class="history-item ${itemClass}">

2
src/core/state.ts
View File

@@ -36,6 +36,7 @@ export interface MasterAssetData {
export interface AppState {
activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
activeSubTab: string;
viewMode: 'location' | 'legacy' | 'list';
masterData: MasterAssetData;
activeCharts: any[];
currentUserRole: 'admin' | 'user';
@@ -45,6 +46,7 @@ export interface AppState {
export const state: AppState = {
activeCategory: 'hw',
activeSubTab: '서버', // 대시보드 제거됨에 따라 기본값 변경
viewMode: 'location',
activeCharts: [],
currentUserRole: 'user',
masterData: {

2
src/core/utils.ts
View File

@@ -1,6 +1,6 @@
import { PAGE_DESCRIPTIONS } from './schema';
export const API_BASE_URL = `http://${location.hostname}:3000`;
export const API_BASE_URL = '';
/**
* ITAM 공통 유틸리티 함수

40
src/main.ts
View File

@@ -2,6 +2,7 @@ import { state, loadMasterDataFromDB, saveAsset } from './core/state';
import { renderNavigation } from './components/Navigation';
import { renderDashboard } from './views/DashboardView';
import { renderSWTable } from './views/SW_Table';
import { renderLocationView } from './views/LocationView';
import { initBaseModal } from './components/Modal/BaseModal';
import { initHwModal, openHwModal } from './components/Modal/HWModal';
import { initSwModal, openSwModal } from './components/Modal/SWModal';
@@ -15,11 +16,38 @@ import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Lapto
function refreshView() {
const mainContent = document.getElementById('main-content')!;
if (!mainContent) return;
// 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
if (state.activeSubTab !== '서버' && state.viewMode === 'location') {
state.viewMode = 'list';
}
const isServerTab = state.activeSubTab === '서버';
if (state.activeSubTab === '대시보드') {
renderDashboard(mainContent);
mainContent.innerHTML = `
<div class="view-header">
<div class="view-toggle-container" style="${isServerTab ? '' : 'display:none;'}">
<button class="mode-toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산현황(위치)</button>
<button class="mode-toggle-btn ${state.viewMode === 'list' ? 'active' : ''}" data-mode="list">자산목록</button>
</div>
</div>
<div id="view-body" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;"></div>
`;
// 이벤트 바인딩
mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => {
btn.addEventListener('click', () => {
const mode = (btn as HTMLElement).getAttribute('data-mode') as any;
state.viewMode = mode;
refreshView();
});
});
const viewBody = document.getElementById('view-body')!;
if (state.viewMode === 'location') {
renderLocationView(viewBody);
} else {
renderSWTable(mainContent);
renderSWTable(viewBody); // 리스트 형식
}
}
@@ -38,11 +66,7 @@ function initApp() {
try {
renderNavigation((tab) => {
if (tab === '대시보드') {
renderDashboard(mainContent);
} else {
renderSWTable(mainContent);
}
refreshView();
});
initHwModal(() => refreshAllData(), closeAllModals);

321
src/styles/dashboard.css
View File

@@ -57,3 +57,324 @@
width: 100% !important;
max-height: 280px;
}
/* --- Location View Styles --- */
.location-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
height: calc(100vh - 180px);
}
.map-section, .asset-section {
display: flex;
flex-direction: column;
}
.section-title {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-main);
display: flex;
align-items: center;
}
.map-wrapper {
flex: 1;
background: #f8fafc;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
.location-box {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
user-select: none;
}
.location-box:hover {
background: rgba(30, 81, 73, 0.2) !important;
transform: scale(1.02);
z-index: 10;
}
.location-box:active {
transform: scale(0.98);
}
.asset-section .table-container {
flex: 1;
overflow-y: auto;
}
.status-tag {
display: inline-block;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
background: #ecfdf5;
color: #059669;
border: 1px solid #d1fae5;
}
.view-toggle-btn:hover {
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
.view-toggle-btn.active:hover {
color: white !important;
}
/* --- View Toggle Header --- */
.view-header {
padding: 0.5rem 1.5rem;
background: var(--white);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
}
.view-toggle-container {
display: flex;
background: #f1f5f9;
padding: 0.25rem;
border-radius: 8px;
gap: 0.25rem;
}
.mode-toggle-btn {
padding: 0.5rem 1rem;
border: none;
background: transparent;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
}
.mode-toggle-btn:hover {
color: var(--text-main);
}
.mode-toggle-btn.active {
background: var(--white);
color: var(--primary-color);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* --- Enhanced Location View --- */
.location-view-wrapper {
display: flex;
flex-direction: column;
height: calc(100vh - 120px);
}
.location-filter-bar {
padding: 1rem 1.5rem;
background: var(--white);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 2rem;
}
.filter-group {
display: flex;
align-items: center;
gap: 0.75rem;
}
.filter-group label {
font-size: 0.8125rem;
font-weight: 700;
color: var(--text-main);
}
.filter-group select {
padding: 0.4rem 0.75rem;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 0.8125rem;
color: var(--text-main);
background: var(--white);
min-width: 140px;
}
.map-pagination {
margin-left: auto;
display: flex;
align-items: center;
gap: 1rem;
}
.page-info {
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 600;
}
.page-btns button {
padding: 0.3rem 0.75rem;
border: 1px solid var(--border-color);
background: var(--white);
border-radius: 4px;
font-size: 0.75rem;
cursor: pointer;
}
.page-btns button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.location-main-content {
flex: 1;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 1.5rem;
padding: 1.5rem;
overflow: hidden;
}
.map-container-section {
display: flex;
flex-direction: column;
overflow: auto;
}
.location-box-point {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.box-label-text {
font-size: 0.65rem;
font-weight: 800;
color: var(--primary-color);
pointer-events: none;
text-shadow: 0 0 2px white;
}
.asset-list-section {
background: var(--white);
border-radius: 12px;
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
overflow: hidden;
}
.asset-list-section .section-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-color);
background: #f8fafc;
}
.asset-list-section h4 {
margin: 0;
font-size: 0.9375rem;
color: var(--text-main);
}
.mini-table-wrapper {
flex: 1;
overflow-y: auto;
}
.compact-table {
width: 100%;
border-collapse: collapse;
}
.compact-table th {
position: sticky;
top: 0;
background: var(--white);
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
border-bottom: 1px solid var(--border-color);
}
.compact-table td {
padding: 0.75rem 1rem;
font-size: 0.8125rem;
border-bottom: 1px solid #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
.compact-table tr.clickable-row:hover {
background: #f1f5f9;
cursor: pointer;
}
/* --- Asset Detail Sidebar (LocationView) --- */
.asset-detail-sidebar {
padding-top: 1rem;
background: var(--white);
height: 100%;
overflow-y: auto;
}
.detail-section {
margin-bottom: 20px;
padding: 0 1.25rem;
}
.detail-section-title {
font-size: 13px;
font-weight: 700;
color: var(--primary-color);
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
margin-bottom: 12px;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(80px, auto) 1fr);
gap: 8px 16px;
}
.detail-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
display: flex;
align-items: center;
}
.detail-value {
font-size: 14px;
color: var(--text-main);
font-weight: 500;
word-break: break-all;
display: flex;
align-items: center;
}
.detail-header-actions {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.detail-header-title {
flex: 1;
font-size: 0.95rem;
font-weight: 700;
}

11
src/views/List/ListFactory.ts
View File

@@ -41,15 +41,20 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' };
let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '' };
// 강제로 기본 뷰 모드를 'system' (자산 현황)으로 설정
(state as any).currentViewMode = 'system';
// 서버 탭이 아닐 경우 '자산 현황(대시보드)' 뷰 진입 방지 및 강제 'asset' 모드
const isServer = config.title === '서버';
if (!isServer) {
(state as any).currentViewMode = 'asset';
} else if (!(state as any).currentViewMode) {
(state as any).currentViewMode = 'system';
}
// 2. 뷰 전환 토글 버튼 생성 (명칭 변경)
const toggleWrapper = document.createElement('div');
toggleWrapper.className = 'view-toggle-container';
toggleWrapper.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<div class="view-toggle" style="display: flex; gap: 0;">
<div class="view-toggle" style="display: ${isServer ? 'flex' : 'none'}; gap: 0;">
<button class="toggle-btn ${(state as any).currentViewMode === 'system' ? 'active' : ''}" data-mode="system">자산 현황</button>
<button class="toggle-btn ${(state as any).currentViewMode === 'asset' ? 'active' : ''}" data-mode="asset">자산 목록</button>
</div>

45
src/views/List/PcListView.ts
View File

@@ -5,43 +5,10 @@ import { ASSET_SCHEMA } from '../../core/schema';
import { createListView } from './ListFactory';
export function renderPcList(container: HTMLElement) {
createListView(container, {
title: 'PC',
dataSource: () => sortAssets((state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC')),
searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'],
filterOptions: {
keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
showLoc: true,
showDept: true,
showType: true
},
onRowClick: (asset) => openHwModal(asset, 'view'),
columns: [
{ 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.CPU.ui, sortKey: ASSET_SCHEMA.CPU.key, align: 'center', render: a => a[ASSET_SCHEMA.CPU.key] || '' },
{ header: ASSET_SCHEMA.MAINBOARD.ui, sortKey: ASSET_SCHEMA.MAINBOARD.key, align: 'center', render: a => a[ASSET_SCHEMA.MAINBOARD.key] || '-' },
{ header: ASSET_SCHEMA.RAM.ui, sortKey: ASSET_SCHEMA.RAM.key, align: 'center', render: a => a[ASSET_SCHEMA.RAM.key] || '' },
{ header: ASSET_SCHEMA.GPU.ui, sortKey: ASSET_SCHEMA.GPU.key, align: 'center', render: a => a[ASSET_SCHEMA.GPU.key] || '-' },
{
header: 'SSD',
align: 'center',
width: '8%',
render: a => [a[ASSET_SCHEMA.SSD1.key], a[ASSET_SCHEMA.SSD2.key]].filter(Boolean).join(' / ') || '-'
},
{
header: 'HDD',
align: 'center',
width: '12%',
render: a => [a[ASSET_SCHEMA.HDD1.key], a[ASSET_SCHEMA.HDD2.key], a[ASSET_SCHEMA.HDD3.key], a[ASSET_SCHEMA.HDD4.key]].filter(Boolean).join(' / ') || '-'
},
{
header: ASSET_SCHEMA.MAC_ADDR.ui,
sortKey: ASSET_SCHEMA.MAC_ADDR.key,
align: 'center',
render: a => `<span style="font-family:monospace; font-size:11px;">${a[ASSET_SCHEMA.MAC_ADDR.key] || '-'}</span>`
},
{ header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', width: '30%', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }
]
});
container.innerHTML = `
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);">
<div style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;">PC 관리</div>
<p>해당 페이지는 다른 작업자에 의해 개발 중입니다.</p>
</div>
`;
}

244
src/views/LocationView.ts Normal file
View File

@@ -0,0 +1,244 @@
import { state } from '../core/state';
import { openHwModal } from '../components/Modal/HWModal';
import { ASSET_SCHEMA } from '../core/schema';
import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
/**
* 위치 중심 자산 현황 뷰 (Refined)
*/
export async function renderLocationView(container: HTMLElement) {
if (!container) return;
// 로컬 상태 (UI 제어용)
let currentLoc = '기술개발센터';
let currentDetail = '서버실';
let currentPage = 0;
let mapConfig: any = {};
try {
const res = await fetch('/api/maps');
mapConfig = await res.json();
} catch (err) { console.error('Failed to load map config', err); }
const render = () => {
const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail])
? IMAGE_LOCATIONS[currentLoc][currentDetail]
: [];
const mapPath = locImages[currentPage] || '';
// 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시
const allBoxes = mapConfig[mapPath] || [];
const boxes = allBoxes.filter((box: any) =>
state.masterData.hw.some(a =>
a.location === currentLoc &&
a.location_detail === currentDetail &&
String(a.loc_x) === String(box.x) &&
String(a.loc_y) === String(box.y)
)
);
container.innerHTML = `
<div class="location-view-wrapper">
<!-- 2단계 필터 바 -->
<div class="location-filter-bar">
<div class="filter-group">
<label>건물/위치</label>
<select id="sel-loc-main">
${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
</select>
</div>
<div class="filter-group">
<label>상세 위치</label>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<select id="sel-loc-detail">
${(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">
<button id="btn-prev-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
<button id="btn-next-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
</div>
<span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
</div>
` : ''}
</div>
</div>
</div>
<div class="location-main-content" style="height: calc(100vh - 180px); align-items: stretch; gap: 1rem; padding: 1rem; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr;">
<!-- 지도 섹션: 상단 고정 정렬로 밀림 방지 -->
<div class="map-container-section" style="position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-color); background: #f1f5f9; display: flex; align-items: flex-start; justify-content: center;">
<div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
${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;">
${boxes.map((box: any, idx: number) => {
const name = box.name || `#${idx+1}`;
return `
<div class="location-box-point"
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}%;
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>
</div>
<!-- 상세 정보 섹션: 내부 스크롤만 허용 -->
<div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 8px; border: 1px solid var(--border-color);">
<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: 700;">📍 구역을 선택하세요</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;">지도에서 자산 위치를 클릭하세요.</div>
</div>
</div>
</div>
<div style="padding: 0 1.5rem 0.5rem; flex-shrink: 0;">
<p style="font-size:0.75rem; color:var(--text-muted); margin: 0;">* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.</p>
</div>
</div>
`;
// 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤
const syncOverlaySize = () => {
const img = container.querySelector('#main-map-img') as HTMLImageElement;
const overlay = container.querySelector('#box-overlay') as HTMLElement;
if (img && overlay && img.complete) {
overlay.style.width = img.clientWidth + 'px';
overlay.style.height = img.clientHeight + 'px';
overlay.style.left = img.offsetLeft + 'px';
overlay.style.top = img.offsetTop + 'px';
}
};
const img = container.querySelector('#main-map-img') as HTMLImageElement;
if (img) {
if (img.complete) {
syncOverlaySize();
setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
} else {
img.onload = syncOverlaySize;
}
}
window.removeEventListener('resize', syncOverlaySize);
window.addEventListener('resize', syncOverlaySize);
// 이벤트 바인딩
const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
selMain?.addEventListener('change', () => {
currentLoc = selMain.value;
currentDetail = LOCATION_DATA[currentLoc][0];
currentPage = 0;
render();
});
const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement;
selDetail?.addEventListener('change', () => {
currentDetail = selDetail.value;
currentPage = 0;
render();
});
container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
container.querySelectorAll('.location-box-point').forEach(box => {
box.addEventListener('click', () => {
const x = box.getAttribute('data-x');
const y = box.getAttribute('data-y');
const targetAsset = state.masterData.hw.find(a =>
a.location === currentLoc &&
a.location_detail === currentDetail &&
String(a.loc_x) === String(x) &&
String(a.loc_y) === String(y)
);
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)';
});
});
};
const renderAssetDetail = (asset: any) => {
const title = container.querySelector('#loc-list-title')!;
const tableContainer = container.querySelector('#loc-asset-table-container')!;
title.innerHTML = `
<div class="detail-header-actions">
<button id="btn-back-to-list" class="btn-icon" style="background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 0 4px;">←</button>
<span class="detail-header-title">자산 상세 정보</span>
<button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button>
</div>
`;
const renderSection = (title: string, fields: { label: string; value: any }[]) => `
<div class="detail-section">
<div class="detail-section-title">${title}</div>
<div class="detail-grid">
${fields.map(f => `
<div class="detail-label">${f.label}</div>
<div class="detail-value">${f.value || '-'}</div>
`).join('')}
</div>
</div>
`;
const sectionsHTML = [
renderSection('기본 관리 정보', [
{ label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code },
{ label: ASSET_SCHEMA.PURCHASE_CORP.ui, value: asset.purchase_corp },
{ label: ASSET_SCHEMA.CATEGORY.ui, value: asset.category },
{ label: ASSET_SCHEMA.ASSET_TYPE.ui, value: asset.asset_type },
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status }
]),
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 }
]),
renderSection('네트워크 정보', [
{ 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 }
]),
renderSection('구매 및 기타', [
{ label: ASSET_SCHEMA.PURCHASE_DATE.ui, value: asset.purchase_date },
{ label: ASSET_SCHEMA.PURCHASE_AMOUNT.ui, value: asset.purchase_amount ? `${Number(asset.purchase_amount).toLocaleString()}원` : '-' },
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo }
])
].join('');
tableContainer.innerHTML = `
<div class="asset-detail-sidebar">
${sectionsHTML}
</div>
`;
container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
title.textContent = `📍 구역을 선택하세요`;
tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>`;
});
container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
openHwModal(asset, 'edit');
});
};
render();
}