Compare commits
4 Commits
2b9c965c91
...
10479aad7e
| Author | SHA1 | Date | |
|---|---|---|---|
| 10479aad7e | |||
| 95fbd3f606 | |||
| 207acbdecb | |||
| 164568843b |
@@ -35,8 +35,9 @@ class HwAssetModal extends BaseModal {
|
||||
<div class="modal-form-area">
|
||||
<form id="hw-asset-form" class="grid-form">
|
||||
<input type="hidden" id="hw-id" name="id" />
|
||||
<input type="hidden" id="hw-remotes-data" name="remotes" />
|
||||
|
||||
<!-- [SECTION 1] 기본 관리 정보 (필수 공통) -->
|
||||
<!-- [SECTION 1] 기본 관리 정보 -->
|
||||
<div class="form-section-title" style="padding-top: 0; margin-bottom: 12px;">기본 관리 정보</div>
|
||||
<div class="form-group">
|
||||
<label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
|
||||
@@ -101,8 +102,8 @@ class HwAssetModal extends BaseModal {
|
||||
<input type="text" id="hw-previous_user" name="previous_user" style="${inputStyle}" />
|
||||
</div>
|
||||
|
||||
<!-- [SECTION 3] 하드웨어 사양 및 네트워크 -->
|
||||
<div class="form-section-title hardware-section" style="margin-top: 24px; margin-bottom: 12px;">시스템 사양 및 네트워크</div>
|
||||
<!-- [SECTION 3] 하드웨어 사양 -->
|
||||
<div class="form-section-title hardware-section" style="margin-top: 24px; margin-bottom: 12px;">시스템 사양 정보</div>
|
||||
<div class="form-group">
|
||||
<label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
|
||||
<input type="text" id="hw-model_name" name="model_name" style="${inputStyle}" />
|
||||
@@ -135,58 +136,33 @@ class HwAssetModal extends BaseModal {
|
||||
<label>${ASSET_SCHEMA.MAINBOARD.ui}</label>
|
||||
<input type="text" id="hw-mainboard" name="mainboard" style="${inputStyle}" />
|
||||
</div>
|
||||
<div class="form-group monitor-only">
|
||||
<label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
|
||||
<input type="text" id="hw-monitor_inch" name="monitor_inch" style="${inputStyle}" />
|
||||
</div>
|
||||
|
||||
<!-- 동적 디스크 할당 영역 (Plan B) -->
|
||||
<!-- 동적 디스크 할당 영역 -->
|
||||
<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>
|
||||
|
||||
<div class="form-group net-only">
|
||||
<label>${ASSET_SCHEMA.IP_ADDR.ui}</label>
|
||||
<input type="text" id="hw-ip_address" name="ip_address" style="${inputStyle}" />
|
||||
</div>
|
||||
<div class="form-group net-only">
|
||||
<label>${ASSET_SCHEMA.MAC_ADDR.ui}</label>
|
||||
<input type="text" id="hw-mac_address" name="mac_address" style="${inputStyle}" />
|
||||
</div>
|
||||
<div class="form-group monitor-only">
|
||||
<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 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>
|
||||
<button type="button" id="btn-add-remote-info" class="btn btn-outline" style="height: 26px !important; padding: 0 10px; font-size: 11px; display: none;">+ 접속 정보 추가</button>
|
||||
</div>
|
||||
<div id="hw-remote-info-container" style="display: flex; flex-direction: column; gap: 12px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- [SECTION 4] 원격 접속 정보 (서버 전용) -->
|
||||
<div class="form-section-title remote-section" style="margin-top: 24px; margin-bottom: 12px;">원격 접속 정보</div>
|
||||
<div class="form-group remote-field">
|
||||
<label>${ASSET_SCHEMA.IP_ADDR2.ui}</label>
|
||||
<input type="text" id="hw-ip_address_2" name="ip_address_2" style="${inputStyle}" />
|
||||
</div>
|
||||
<div class="form-group remote-field">
|
||||
<label>${ASSET_SCHEMA.REMOTE_TOOL.ui}</label>
|
||||
<input type="text" id="hw-remote_tool" name="remote_tool" style="${inputStyle}" />
|
||||
</div>
|
||||
<div class="form-group remote-field">
|
||||
<label>${ASSET_SCHEMA.REMOTE_ID.ui}</label>
|
||||
<input type="text" id="hw-remote_id" name="remote_id" style="${inputStyle}" />
|
||||
</div>
|
||||
<div class="form-group remote-field">
|
||||
<label>${ASSET_SCHEMA.REMOTE_PW.ui}</label>
|
||||
<input type="text" id="hw-remote_pw" name="remote_pw" style="${inputStyle}" />
|
||||
</div>
|
||||
|
||||
<!-- [SECTION 5] 설치 위치 (인프라/실물 장비 전용) -->
|
||||
<!-- [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>
|
||||
@@ -202,7 +178,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 6] 구매 및 증빙 (공통) -->
|
||||
<!-- [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>
|
||||
@@ -331,9 +307,9 @@ class HwAssetModal extends BaseModal {
|
||||
this.toggleEditOnlyBtns(false);
|
||||
});
|
||||
|
||||
// 동적 볼륨 추가 기능 연결
|
||||
const btnAddVolume = document.getElementById('btn-add-volume')!;
|
||||
btnAddVolume.addEventListener('click', () => this.addVolumeRow());
|
||||
// 동적 기능 이벤트 연결
|
||||
document.getElementById('btn-add-volume')?.addEventListener('click', () => this.addVolumeRow());
|
||||
document.getElementById('btn-add-remote-info')?.addEventListener('click', () => this.addRemoteInfoRow());
|
||||
|
||||
const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement;
|
||||
const fileNameDisplay = document.getElementById('hw-file-name-display');
|
||||
@@ -374,7 +350,7 @@ class HwAssetModal extends BaseModal {
|
||||
return;
|
||||
}
|
||||
|
||||
// 동적 볼륨 데이터 수집 및 배열 생성
|
||||
// 동적 볼륨 데이터 수집
|
||||
const vols: any[] = [];
|
||||
document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
|
||||
const type = (row.querySelector('.vol-type') as HTMLSelectElement).value;
|
||||
@@ -384,6 +360,24 @@ class HwAssetModal extends BaseModal {
|
||||
});
|
||||
setFieldValue('hw-volumes-data', JSON.stringify(vols));
|
||||
|
||||
// 동적 네트워크/원격 데이터 수집
|
||||
const nets: any[] = [];
|
||||
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 || '';
|
||||
const pw = (row.querySelector('.ri-pw') as HTMLInputElement)?.value || '';
|
||||
const val2Str = (id || pw) ? JSON.stringify({ id, pw }) : '';
|
||||
nets.push({ type: 'IP', name: tool, val1: val1, val2: val2Str });
|
||||
} else if (type === 'MAC' && val1) {
|
||||
nets.push({ type: 'MAC', name: 'MAC 주소', val1: val1, val2: '' });
|
||||
}
|
||||
});
|
||||
setFieldValue('hw-remotes-data', JSON.stringify(nets));
|
||||
|
||||
const formData = new FormData(this.formEl!);
|
||||
const updated = { ...this.currentAsset };
|
||||
formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
|
||||
@@ -426,12 +420,94 @@ class HwAssetModal extends BaseModal {
|
||||
container.appendChild(row);
|
||||
}
|
||||
|
||||
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 = '';
|
||||
if (info.type === 'IP' && info.val2) {
|
||||
try {
|
||||
const parsed = typeof info.val2 === 'string' ? JSON.parse(info.val2) : info.val2;
|
||||
parsedId = parsed.id || '';
|
||||
parsedPw = parsed.pw || '';
|
||||
} catch (e) {
|
||||
// Legacy fallback if val2 was just a simple string
|
||||
parsedId = info.val2;
|
||||
}
|
||||
}
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.className = 'remote-info-row';
|
||||
|
||||
// First Line: Type & Address
|
||||
const line1 = document.createElement('div');
|
||||
line1.className = 'ri-line';
|
||||
line1.innerHTML = `
|
||||
<select class="ri-type" ${!this.isEditMode ? 'disabled' : ''}>
|
||||
<option value="IP" ${info.type === 'IP' ? 'selected' : ''}>IP 주소</option>
|
||||
<option value="MAC" ${info.type === 'MAC' ? 'selected' : ''}>MAC 주소</option>
|
||||
</select>
|
||||
<input type="text" class="ri-val1" value="${info.val1 || ''}" placeholder="주소 입력" ${!this.isEditMode ? 'readonly' : ''} />
|
||||
<button type="button" class="btn-remove-row ri-remove-btn edit-only-btn" style="display: ${this.isEditMode ? 'inline-flex' : 'none'};">×</button>
|
||||
`;
|
||||
|
||||
// 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.innerHTML = `
|
||||
<div class="ri-connector"></div>
|
||||
<select class="ri-tool" ${!this.isEditMode ? 'disabled' : ''}>
|
||||
<option value="원격접속" ${info.name === '원격접속' ? 'selected' : ''}>원격접속</option>
|
||||
<option value="리눅스" ${info.name === '리눅스' ? 'selected' : ''}>리눅스</option>
|
||||
<option value="기타" ${info.name === '기타' ? 'selected' : ''}>기타</option>
|
||||
</select>
|
||||
<input type="text" class="ri-id" value="${parsedId}" placeholder="원격 ID" ${!this.isEditMode ? 'readonly' : ''} />
|
||||
<input type="text" class="ri-pw" value="${parsedPw}" placeholder="원격 PW" ${!this.isEditMode ? 'readonly' : ''} />
|
||||
<div class="ri-spacer"></div> <!-- Spacer for the remove button width -->
|
||||
`;
|
||||
|
||||
row.appendChild(line1);
|
||||
row.appendChild(line2);
|
||||
|
||||
// Toggle logic
|
||||
const typeSelect = row.querySelector('.ri-type') as HTMLSelectElement;
|
||||
typeSelect.addEventListener('change', (e) => {
|
||||
const isIP = (e.target as HTMLSelectElement).value === 'IP';
|
||||
line2.style.display = isIP ? 'flex' : 'none';
|
||||
if (!isIP) {
|
||||
(row.querySelector('.ri-id') as HTMLInputElement).value = '';
|
||||
(row.querySelector('.ri-pw') as HTMLInputElement).value = '';
|
||||
}
|
||||
});
|
||||
|
||||
row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
|
||||
container.appendChild(row);
|
||||
}
|
||||
|
||||
private toggleEditOnlyBtns(isEdit: boolean) {
|
||||
const addBtn = document.getElementById('btn-add-volume');
|
||||
if (addBtn) addBtn.style.display = isEdit ? 'inline-flex' : 'none';
|
||||
['btn-add-volume', 'btn-add-remote-info'].forEach(id => {
|
||||
const btn = document.getElementById(id);
|
||||
if (btn) btn.style.display = isEdit ? 'inline-flex' : 'none';
|
||||
});
|
||||
document.querySelectorAll('.edit-only-btn').forEach(btn => {
|
||||
(btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none';
|
||||
});
|
||||
|
||||
// 동적 생성된 필드들 (볼륨/원격정보)의 상태 일괄 토글
|
||||
const containers = ['#hw-volume-container', '#hw-remote-info-container'];
|
||||
containers.forEach(selector => {
|
||||
document.querySelectorAll(`${selector} input`).forEach(input => {
|
||||
if (isEdit) input.removeAttribute('readonly');
|
||||
else input.setAttribute('readonly', 'true');
|
||||
});
|
||||
document.querySelectorAll(`${selector} select`).forEach(select => {
|
||||
if (isEdit) select.removeAttribute('disabled');
|
||||
else select.setAttribute('disabled', 'true');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
protected fillFormData(asset: any): void {
|
||||
@@ -469,12 +545,33 @@ class HwAssetModal extends BaseModal {
|
||||
vols.forEach((v: any) => this.addVolumeRow(v));
|
||||
}
|
||||
|
||||
setFieldValue('hw-ip_address', asset.ip_address || '');
|
||||
setFieldValue('hw-ip_address_2', asset.ip_address_2 || '');
|
||||
setFieldValue('hw-mac_address', asset.mac_address || '');
|
||||
setFieldValue('hw-remote_tool', asset.remote_tool || '');
|
||||
setFieldValue('hw-remote_id', asset.remote_id || '');
|
||||
setFieldValue('hw-remote_pw', asset.remote_pw || '');
|
||||
// 통합 원격 접속 정보 렌더링 초기화 및 생성
|
||||
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) {
|
||||
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 || '');
|
||||
setFieldValue('hw-monitor_inch', asset.monitor_inch || '');
|
||||
@@ -520,32 +617,18 @@ class HwAssetModal extends BaseModal {
|
||||
const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || '';
|
||||
const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || '';
|
||||
|
||||
// 인프라 장비 (서버, 저장매체, 네트워크, 보안장비, 공간정보장비, 서버PC)
|
||||
const infraCategories = ['서버', '저장매체', '네트워크', '보안장비', '공간정보장비'];
|
||||
const isInfra = infraCategories.includes(category) || type.includes('서버') || type.includes('저장시스템');
|
||||
|
||||
// 개인 장비 (PC, 노트북, 모바일, 태블릿) - '서버PC'는 제외
|
||||
const personalCategories = ['PC', '노트북', '모바일', '태블릿'];
|
||||
const isPersonal = (personalCategories.includes(category) || type.includes('개인PC') || type.includes('노트북')) && !type.includes('서버PC');
|
||||
|
||||
// 시스템 사양 (PC, 서버 등)
|
||||
const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
|
||||
const hasSpec = specCategories.includes(category) || type.includes('서버PC');
|
||||
|
||||
// 네트워크 정보 (IP/MAC)
|
||||
const noNetCategories = ['저장매체', '네트워크', '공간정보장비', 'PC부품', '사무가구'];
|
||||
const showNet = (isInfra || isPersonal) && !noNetCategories.includes(category);
|
||||
|
||||
// 시리얼 번호
|
||||
const hasSN = !['사무가구', 'PC부품'].includes(category);
|
||||
|
||||
// 수량/용량 전용 (부품)
|
||||
const isParts = ['PC부품', '사무가구'].includes(category);
|
||||
|
||||
// 원격 접속 (서버 전용)
|
||||
const showRemote = category === '서버' || type.includes('서버');
|
||||
|
||||
// JS에서 display: block 강제 대신 빈 문자열 할당하여 네이티브 CSS flex 활용
|
||||
document.querySelectorAll('.remote-section, .remote-field, .monitoring-field').forEach(el => (el as HTMLElement).style.display = showRemote ? '' : 'none');
|
||||
document.querySelectorAll('.net-only').forEach(el => (el as HTMLElement).style.display = showNet ? '' : 'none');
|
||||
document.querySelectorAll('.spec-only').forEach(el => (el as HTMLElement).style.display = hasSpec ? '' : 'none');
|
||||
@@ -658,9 +741,9 @@ class HwAssetModal extends BaseModal {
|
||||
private renderHistory(assetId: string) {
|
||||
const container = document.getElementById('hw-history-list');
|
||||
if (!container) return;
|
||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
|
||||
const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId);
|
||||
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
|
||||
container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
|
||||
container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.log_date}</div><div class=\"history-user\">${l.log_user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
|
||||
}
|
||||
|
||||
private getCategoryKey(asset: any): string {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { PAGE_DESCRIPTIONS } from './schema';
|
||||
|
||||
export const API_BASE_URL = `http://${location.hostname}:3000`;
|
||||
export const API_BASE_URL = '';
|
||||
|
||||
/**
|
||||
* ITAM 공통 유틸리티 함수
|
||||
|
||||
35
src/main.ts
35
src/main.ts
@@ -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';
|
||||
@@ -47,12 +48,32 @@ function refreshView() {
|
||||
const mainContent = document.getElementById('main-content')!;
|
||||
if (!mainContent) return;
|
||||
|
||||
if (state.activeSubTab === '대시보드') {
|
||||
renderDashboard(mainContent);
|
||||
mainContent.innerHTML = `
|
||||
<div class="view-header">
|
||||
<div class="view-toggle-container">
|
||||
<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); // 리스트 형식
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 통합 저장 및 갱신
|
||||
async function saveAllDataToDB() {
|
||||
@@ -74,11 +95,7 @@ function initApp() {
|
||||
|
||||
try {
|
||||
renderNavigation((tab) => {
|
||||
if (tab === '대시보드') {
|
||||
renderDashboard(mainContent);
|
||||
} else {
|
||||
renderSWTable(mainContent);
|
||||
}
|
||||
refreshView();
|
||||
});
|
||||
|
||||
initHwModal(() => saveAllDataToDB(), closeAllModals);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
244
src/views/LocationView.ts
Normal file
244
src/views/LocationView.ts
Normal 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();
|
||||
}
|
||||
@@ -4,5 +4,15 @@ export default defineConfig({
|
||||
server: {
|
||||
port: 8080,
|
||||
host: true, // Listen on all local IPs
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/uploads': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user