feat: HWModal 네트워크 및 원격 접속 정보 동적 입력 기능 통합 및 UI 최적화
This commit is contained in:
@@ -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 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 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 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 {
|
||||
|
||||
Reference in New Issue
Block a user