From 10479aad7ed146fa4f5f07fd9c67420367404f41 Mon Sep 17 00:00:00 2001 From: Taehoon Date: Thu, 11 Jun 2026 11:14:00 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20HWModal=20=EB=84=A4=ED=8A=B8=EC=9B=8C?= =?UTF-8?q?=ED=81=AC=20=EB=B0=8F=20=EC=9B=90=EA=B2=A9=20=EC=A0=91=EC=86=8D?= =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EB=8F=99=EC=A0=81=20=EC=9E=85=EB=A0=A5?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=ED=86=B5=ED=95=A9=20=EB=B0=8F=20UI=20?= =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/HWModal.ts | 231 ++++++++++++++++++++++---------- 1 file changed, 157 insertions(+), 74 deletions(-) diff --git a/src/components/Modal/HWModal.ts b/src/components/Modal/HWModal.ts index 9cd7916..efb5521 100644 --- a/src/components/Modal/HWModal.ts +++ b/src/components/Modal/HWModal.ts @@ -35,8 +35,9 @@ class HwAssetModal extends BaseModal {
+ - +
기본 관리 정보
@@ -101,8 +102,8 @@ class HwAssetModal extends BaseModal {
- -
시스템 사양 및 네트워크
+ +
시스템 사양 정보
@@ -135,58 +136,33 @@ class HwAssetModal extends BaseModal {
+
+ + +
- + +
디스크(용량) 정보
- - + +
-
- - -
-
- - -
-
- - -
-
- - -
-
- - + +
네트워크 및 원격 접속 정보
+
+
+ + +
+
- -
원격 접속 정보
-
- - -
-
- - -
-
- - -
-
- - -
- - +
설치 위치
@@ -202,7 +178,7 @@ class HwAssetModal extends BaseModal {
- +
구매 및 증빙 정보
@@ -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 = ` + + + + `; + + // 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 = ` +
+ + + +
+ `; + + 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 = '
이력이 없습니다.
'; return; } - container.innerHTML = logs.map(l => `
${l.date}
${l.user}
${l.details}
`).join(''); + container.innerHTML = logs.map(l => `
${l.log_date}
${l.log_user}
${l.details}
`).join(''); } private getCategoryKey(asset: any): string {