595 lines
30 KiB
TypeScript
595 lines
30 KiB
TypeScript
import { state, saveAsset, deleteAsset } from '../../core/state';
|
|
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
|
import {
|
|
generateOptionsHTML,
|
|
setFieldValue,
|
|
getFieldValue,
|
|
parseAndSetLocation,
|
|
bindLocationEvents,
|
|
applyDateMask
|
|
} from './ModalUtils';
|
|
import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS } from './SharedData';
|
|
import { BaseModal } from './BaseModal';
|
|
import { createIcons, X, History, Plus, Save, Paperclip, Calendar, Monitor, Cpu, Network, ShieldCheck } from 'lucide';
|
|
|
|
class HwAssetModal extends BaseModal {
|
|
private dynamicMapConfig: Record<string, any[]> = {};
|
|
|
|
constructor() {
|
|
super('hw', '자산 상세 정보');
|
|
}
|
|
|
|
protected renderFrameHTML(): string {
|
|
return `
|
|
<div id="hw-asset-modal" class="modal-overlay hidden">
|
|
<div class="modal-content wide">
|
|
<div class="modal-header">
|
|
<h2 id="hw-modal-title">${this.title}</h2>
|
|
<button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-body-split">
|
|
<div class="modal-form-area">
|
|
<form id="hw-asset-form" class="grid-form">
|
|
<input type="hidden" id="hw-id" name="id" />
|
|
|
|
<div class="form-section-title">기본 및 관리 정보</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
|
|
<div class="input-with-btn">
|
|
<input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly />
|
|
<button type="button" id="btn-gen-hw-code" class="btn btn-outline btn-sm btn-helper">생성</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
|
<select id="hw-purchase_corp" name="purchase_corp">${generateOptionsHTML(CORP_LIST)}</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.CATEGORY.ui}</label>
|
|
<select id="hw-category" name="category">
|
|
<option value="">선택</option>
|
|
${generateOptionsHTML(Object.keys(CATEGORY_TYPE_MAP), '', false)}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
|
|
<select id="hw-asset_type" name="asset_type">
|
|
<option value="">구분을 먼저 선택하세요</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
|
<select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
|
|
</div>
|
|
<div class="form-group dept-field">
|
|
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
|
<select id="hw-current_dept" name="current_dept">${generateOptionsHTML(ORG_LIST)}</select>
|
|
</div>
|
|
<div class="form-group dept-field">
|
|
<label>${ASSET_SCHEMA.PREV_DEPT.ui}</label>
|
|
<select id="hw-previous_dept" name="previous_dept">${generateOptionsHTML(ORG_LIST)}</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
|
|
<input type="text" id="hw-manager_primary" name="manager_primary" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
|
|
<input type="text" id="hw-manager_secondary" name="manager_secondary" />
|
|
</div>
|
|
<div class="form-group user-tracking-field">
|
|
<label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
|
|
<input type="text" id="hw-user_current" name="user_current" />
|
|
</div>
|
|
<div class="form-group user-tracking-field pc-only">
|
|
<label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
|
|
<input type="text" id="hw-user_position" name="user_position" />
|
|
</div>
|
|
<div class="form-group user-tracking-field">
|
|
<label>${ASSET_SCHEMA.PREV_USER.ui}</label>
|
|
<input type="text" id="hw-previous_user" name="previous_user" />
|
|
</div>
|
|
<div class="form-group full-width server-only">
|
|
<label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
|
|
<input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="예: DB서버, 웹서버, 백업용 등" />
|
|
</div>
|
|
|
|
<div class="form-section-title">설치 위치</div>
|
|
<div class="form-group">
|
|
<label>건물/위치</label>
|
|
<select id="hw-bldg-select" name="location">${generateOptionsHTML(Object.keys(LOCATION_DATA))}</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.LOC_DETAIL.ui}</label>
|
|
<div class="location-detail-container">
|
|
<select id="hw-location_detail" name="location_detail">
|
|
<option value="">선택</option>
|
|
</select>
|
|
<button type="button" id="btn-reg-loc-map" class="btn-loc-action btn-loc-view hidden" style="background-color: var(--primary-color);">
|
|
위치등록
|
|
</button>
|
|
<button type="button" id="btn-view-loc-map" class="btn-loc-action btn-loc-view hidden">
|
|
위치보기
|
|
</button>
|
|
<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>
|
|
</div>
|
|
|
|
<div class="form-section-title">시스템 사양</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
|
|
<input type="text" id="hw-model_name" name="model_name" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.MAINBOARD.ui}</label>
|
|
<input type="text" id="hw-mainboard" name="mainboard" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.OS.ui}</label>
|
|
<input type="text" id="hw-os" name="os" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.CPU.ui}</label>
|
|
<input type="text" id="hw-cpu" name="cpu" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.RAM.ui}</label>
|
|
<input type="text" id="hw-ram" name="ram" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.GPU.ui}</label>
|
|
<input type="text" id="hw-gpu" name="gpu" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>SSD 1</label>
|
|
<input type="text" id="hw-ssd_1" name="ssd_1" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>SSD 2</label>
|
|
<input type="text" id="hw-ssd_2" name="ssd_2" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>HDD 1</label>
|
|
<input type="text" id="hw-hdd_1" name="hdd_1" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>HDD 2</label>
|
|
<input type="text" id="hw-hdd_2" name="hdd_2" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>HDD 3</label>
|
|
<input type="text" id="hw-hdd_3" name="hdd_3" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>HDD 4</label>
|
|
<input type="text" id="hw-hdd_4" name="hdd_4" />
|
|
</div>
|
|
<div class="form-group pc-only">
|
|
<label>${ASSET_SCHEMA.MAC_ADDR.ui}</label>
|
|
<input type="text" id="hw-mac_address" name="mac_address" />
|
|
</div>
|
|
|
|
<div class="form-section-title">네트워크 및 접속 정보</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.IP_ADDR.ui}</label>
|
|
<input type="text" id="hw-ip_address" name="ip_address" />
|
|
</div>
|
|
<div class="form-group server-only">
|
|
<label>${ASSET_SCHEMA.IP_ADDR2.ui}</label>
|
|
<input type="text" id="hw-ip_address_2" name="ip_address_2" />
|
|
</div>
|
|
<div class="form-group server-only">
|
|
<label>${ASSET_SCHEMA.REMOTE_TOOL.ui}</label>
|
|
<input type="text" id="hw-remote_tool" name="remote_tool" placeholder="Anydesk, Chrome 등" />
|
|
</div>
|
|
<div class="form-group server-only">
|
|
<label>${ASSET_SCHEMA.REMOTE_ID.ui}</label>
|
|
<input type="text" id="hw-remote_id" name="remote_id" />
|
|
</div>
|
|
<div class="form-group server-only">
|
|
<label>${ASSET_SCHEMA.REMOTE_PW.ui}</label>
|
|
<input type="text" id="hw-remote_pw" name="remote_pw" />
|
|
</div>
|
|
<div class="form-group server-only">
|
|
<label>${ASSET_SCHEMA.MONITORING.ui}</label>
|
|
<select id="hw-monitoring" name="monitoring">
|
|
<option value="대상">대상</option>
|
|
<option value="비대상">비대상</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-section-title">구매 및 증빙</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
|
|
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
|
<input type="text" id="hw-purchase_date" name="purchase_date" style="flex:1;" />
|
|
<button type="button" class="btn-icon btn-helper" onclick="const p = document.getElementById('hw-purchase_date-picker'); p.value = document.getElementById('hw-purchase_date').value; p.showPicker();" style="padding:0.25rem;">
|
|
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
|
</button>
|
|
<input type="date" id="hw-purchase_date-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('hw-purchase_date').value = this.value" tabindex="-1" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
|
|
<input type="text" id="hw-purchase_vendor" name="purchase_vendor" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
|
<input type="text" id="hw-purchase_amount" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
|
</div>
|
|
<div class="form-group full-width">
|
|
<label>${ASSET_SCHEMA.APPROVAL_DOC.ui}</label>
|
|
<div style="display:flex; align-items:center; gap:0.5rem;">
|
|
<input type="file" id="hw-approval_document_file" style="font-size:12px;" />
|
|
<span id="hw-approval_document_name" style="font-size:12px; color:var(--text-muted);"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group full-width">
|
|
<label>${ASSET_SCHEMA.MEMO.ui}</label>
|
|
<textarea id="hw-memo" name="memo" rows="2"></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="modal-history-area">
|
|
<div class="history-header">
|
|
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 자산 변동 이력</h3>
|
|
<button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm">
|
|
이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
|
|
</button>
|
|
</div>
|
|
<div id="hw-history-list" class="history-timeline"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
|
|
<div class="footer-actions">
|
|
<button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
|
|
<button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
|
|
<button id="btn-save-hw-asset" class="btn btn-primary">수정</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
|
const saveBtn = document.getElementById('btn-save-hw-asset')!;
|
|
const revertBtn = document.getElementById('btn-revert-hw-edit')!;
|
|
const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
|
|
const categorySelect = document.getElementById('hw-category') as HTMLSelectElement;
|
|
const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
|
|
const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
|
|
const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
|
|
|
|
bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
|
|
applyDateMask(document.getElementById('hw-purchase_date') as HTMLInputElement);
|
|
|
|
categorySelect.addEventListener('change', () => {
|
|
const types = CATEGORY_TYPE_MAP[categorySelect.value] || [];
|
|
typeSelect.innerHTML = types.length > 0
|
|
? generateOptionsHTML(types, '', true)
|
|
: '<option value="">구분을 먼저 선택하세요</option>';
|
|
});
|
|
|
|
bldgSelect.addEventListener('change', () => setTimeout(() => this.updateMapButtonVisibility(), 100));
|
|
detailSelect.addEventListener('change', () => this.updateMapButtonVisibility());
|
|
|
|
document.getElementById('btn-reg-loc-map')?.addEventListener('click', async () => {
|
|
await this.fetchMapConfig();
|
|
const images = this.getImagesForLocation(bldgSelect.value, detailSelect.value);
|
|
if (images) this.openImagePicker(images, `${detailSelect.value} 위치 등록`);
|
|
});
|
|
|
|
document.getElementById('btn-view-loc-map')?.addEventListener('click', async () => {
|
|
await this.fetchMapConfig();
|
|
const images = this.getImagesForLocation(bldgSelect.value, detailSelect.value);
|
|
const x = getFieldValue('hw-loc_x');
|
|
const y = getFieldValue('hw-loc_y');
|
|
const savedImg = getFieldValue('hw-location_photo');
|
|
|
|
if (images) {
|
|
const imgPath = savedImg && images.includes(savedImg) ? savedImg : images[0];
|
|
this.openImagePreview(imgPath, `${detailSelect.value} 위치 확인`, x, y);
|
|
}
|
|
});
|
|
|
|
deleteBtn.addEventListener('click', async () => {
|
|
if (!this.currentAsset || !confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
|
|
if (await deleteAsset(this.getCategoryKey(this.currentAsset), this.currentAsset.id)) {
|
|
alert('성공적으로 삭제되었습니다.'); onSave(); this.close(); closeModals();
|
|
}
|
|
});
|
|
|
|
revertBtn.addEventListener('click', () => {
|
|
this.setEditLockMode('view');
|
|
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
|
this.updateMapButtonVisibility();
|
|
});
|
|
|
|
saveBtn.addEventListener('click', async () => {
|
|
if (!this.currentAsset) return;
|
|
if (!this.isEditMode) {
|
|
this.setEditLockMode('edit');
|
|
this.isEditMode = true;
|
|
this.updateMapButtonVisibility();
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(this.formEl!);
|
|
const updated = { ...this.currentAsset };
|
|
formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
|
|
updated.location = getFieldValue('hw-bldg-select');
|
|
|
|
if (await saveAsset(this.getCategoryKey(updated), updated)) {
|
|
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
|
onSave(); this.close(); closeModals();
|
|
}
|
|
});
|
|
|
|
createIcons({ icons: { History, Plus, Save, Paperclip, Calendar, Monitor, Cpu, Network, ShieldCheck } });
|
|
}
|
|
|
|
protected fillFormData(asset: any): void {
|
|
setFieldValue('hw-id', asset.id);
|
|
setFieldValue('hw-asset_code', asset.asset_code || '');
|
|
setFieldValue('hw-purchase_corp', asset.purchase_corp || '');
|
|
setFieldValue('hw-category', asset.category || '');
|
|
|
|
const types = CATEGORY_TYPE_MAP[asset.category] || [];
|
|
const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
|
|
if (typeSelect) typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, asset.asset_type, true) : '<option value="">구분을 먼저 선택하세요</option>';
|
|
|
|
setFieldValue('hw-asset_type', asset.asset_type || '');
|
|
setFieldValue('hw-hw_status', asset.hw_status || '운영');
|
|
setFieldValue('hw-current_dept', asset.current_dept || '');
|
|
setFieldValue('hw-previous_dept', asset.previous_dept || '');
|
|
setFieldValue('hw-manager_primary', asset.manager_primary || '');
|
|
setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
|
|
setFieldValue('hw-user_current', asset.user_current || '');
|
|
setFieldValue('hw-user_position', asset.user_position || '');
|
|
setFieldValue('hw-previous_user', asset.previous_user || '');
|
|
setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
|
|
setFieldValue('hw-model_name', asset.model_name || '');
|
|
setFieldValue('hw-cpu', asset.cpu || '');
|
|
setFieldValue('hw-ram', asset.ram || '');
|
|
setFieldValue('hw-gpu', asset.gpu || '');
|
|
setFieldValue('hw-ssd_1', asset.ssd_1 || '');
|
|
setFieldValue('hw-ssd_2', asset.ssd_2 || '');
|
|
setFieldValue('hw-hdd_1', asset.hdd_1 || '');
|
|
setFieldValue('hw-hdd_2', asset.hdd_2 || '');
|
|
setFieldValue('hw-hdd_3', asset.hdd_3 || '');
|
|
setFieldValue('hw-hdd_4', asset.hdd_4 || '');
|
|
setFieldValue('hw-mainboard', asset.mainboard || '');
|
|
setFieldValue('hw-os', asset.os || '');
|
|
setFieldValue('hw-mac_address', asset.mac_address || '');
|
|
setFieldValue('hw-ip_address', asset.ip_address || '');
|
|
setFieldValue('hw-ip_address_2', asset.ip_address_2 || '');
|
|
setFieldValue('hw-remote_tool', asset.remote_tool || '');
|
|
setFieldValue('hw-remote_id', asset.remote_id || '');
|
|
setFieldValue('hw-remote_pw', asset.remote_pw || '');
|
|
setFieldValue('hw-monitoring', asset.monitoring || '비대상');
|
|
setFieldValue('hw-purchase_date', asset.purchase_date || '');
|
|
setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
|
|
setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
|
|
|
|
const docName = document.getElementById('hw-approval_document_name');
|
|
if (docName) docName.textContent = asset.approval_document || '';
|
|
|
|
setFieldValue('hw-memo', asset.memo || '');
|
|
setFieldValue('hw-location_detail', asset.location_detail || '');
|
|
setFieldValue('hw-loc_x', asset.loc_x || '');
|
|
setFieldValue('hw-loc_y', asset.loc_y || '');
|
|
setFieldValue('hw-location_photo', asset.location_photo || asset.loc_img || '');
|
|
|
|
parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
|
|
this.renderHistory(asset.id);
|
|
}
|
|
|
|
protected onAfterOpen(asset: any, mode: string): void {
|
|
this.updateMapButtonVisibility(asset);
|
|
|
|
const isServer = asset.category === '서버' || asset.asset_code?.startsWith('SVR') || asset.asset_type === '서버PC';
|
|
const isPc = asset.category === 'PC' || asset.asset_code?.startsWith('PC');
|
|
const isVip = asset.category === '선물' || asset.category === 'VIP';
|
|
|
|
document.querySelectorAll('.server-only').forEach(el => (el as HTMLElement).style.display = isServer ? 'flex' : 'none');
|
|
document.querySelectorAll('.non-server').forEach(el => (el as HTMLElement).style.display = !isServer ? 'flex' : 'none');
|
|
document.querySelectorAll('.pc-only').forEach(el => (el as HTMLElement).style.display = isPc ? 'flex' : 'none');
|
|
document.querySelectorAll('.user-tracking-field').forEach(el => (el as HTMLElement).style.display = (!isServer && !isVip) ? 'flex' : 'none');
|
|
}
|
|
|
|
private updateMapButtonVisibility(asset?: any) {
|
|
const bldg = asset ? (asset.location || '') : getFieldValue('hw-bldg-select');
|
|
const detail = asset ? (asset.location_detail || '') : getFieldValue('hw-location_detail');
|
|
const x = asset ? (asset.loc_x || '') : getFieldValue('hw-loc_x');
|
|
const y = asset ? (asset.loc_y || '') : getFieldValue('hw-loc_y');
|
|
|
|
const hasCoords = (x !== '' && y !== '' && x !== 'null' && y !== 'null');
|
|
const hasImage = !!this.getImagesForLocation(bldg, detail);
|
|
|
|
const regLocBtn = document.getElementById('btn-reg-loc-map')!;
|
|
const viewLocBtn = document.getElementById('btn-view-loc-map')!;
|
|
|
|
if (hasImage && this.isEditMode) regLocBtn.classList.remove('hidden');
|
|
else regLocBtn.classList.add('hidden');
|
|
|
|
if (hasImage && hasCoords) viewLocBtn.classList.remove('hidden');
|
|
else viewLocBtn.classList.add('hidden');
|
|
}
|
|
|
|
private getImagesForLocation(bldg: string, detail: string): string[] | null {
|
|
if (!bldg || !detail) return null;
|
|
return IMAGE_LOCATIONS[bldg.trim()]?.[detail.trim()] || null;
|
|
}
|
|
|
|
private async fetchMapConfig() {
|
|
try {
|
|
const res = await fetch(`http://${location.hostname}:3000/api/maps`);
|
|
this.dynamicMapConfig = await res.json();
|
|
} catch (err) { console.error('Failed to fetch map config:', err); }
|
|
}
|
|
|
|
private generateDynamicSVG(imagePath: string): string {
|
|
const boxes = this.dynamicMapConfig[imagePath] || [];
|
|
if (boxes.length === 0) return '';
|
|
return `
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" class="digital-map-svg">
|
|
<g class="seat-group">
|
|
${boxes.map((b, i) => `<rect class="map-seat-obj" data-id="seat-${i+1}" x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="0.5" />`).join('')}
|
|
</g>
|
|
</svg>
|
|
`;
|
|
}
|
|
|
|
private openImagePicker(imagePaths: string[], title: string) {
|
|
let currentIdx = 0;
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'image-picker-overlay';
|
|
|
|
const renderContent = () => {
|
|
const imgPath = imagePaths[currentIdx];
|
|
const isMulti = imagePaths.length > 1;
|
|
const digitalMap = this.generateDynamicSVG(imgPath);
|
|
overlay.innerHTML = `
|
|
<div class="image-picker-header">
|
|
<h3>${title} ${isMulti ? `(${currentIdx + 1}/${imagePaths.length})` : ''}</h3>
|
|
<button class="btn-icon btn-close-picker" style="color:white !important;"><i data-lucide="x"></i></button>
|
|
</div>
|
|
<div class="image-picker-content">
|
|
${isMulti ? `<div class=\"picker-nav prev ${currentIdx === 0 ? 'disabled' : ''}\">◀</div><div class=\"picker-nav next ${currentIdx === imagePaths.length - 1 ? 'disabled' : ''}\">▶</div>` : ''}
|
|
<div class="layout-map-container" id="picker-container">
|
|
<img src="${imgPath}" class="layout-map-img" />
|
|
<div id="picker-marker" class="layout-marker hidden"></div>
|
|
<div class="digital-overlay-layer">${digitalMap}</div>
|
|
</div>
|
|
</div>
|
|
<div class="image-picker-footer">
|
|
<p style="color:#ddd; font-size:12px; margin:0; flex:1;">배치도의 네모 칸을 클릭하면 위치가 자동으로 지정됩니다.</p>
|
|
<button id="btn-picker-cancel" class="btn btn-outline" style="color:white; border-color:white;">취소</button>
|
|
<button id="btn-picker-save" class="btn btn-primary">위치 확정</button>
|
|
</div>
|
|
`;
|
|
createIcons({ icons: { X } });
|
|
|
|
let selectedX = ''; let selectedY = '';
|
|
const container = overlay.querySelector('#picker-container') as HTMLElement;
|
|
const marker = overlay.querySelector('#picker-marker') as HTMLElement;
|
|
|
|
overlay.querySelectorAll('.map-seat-obj').forEach(seat => {
|
|
seat.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const target = e.currentTarget as SVGRectElement;
|
|
selectedX = target.getAttribute('x') || ''; selectedY = target.getAttribute('y') || '';
|
|
const w = target.getAttribute('width') || '0'; const h = target.getAttribute('height') || '0';
|
|
marker.style.left = `${parseFloat(selectedX) + parseFloat(w)/2}%`;
|
|
marker.style.top = `${parseFloat(selectedY) + parseFloat(h)/2}%`;
|
|
marker.classList.remove('hidden');
|
|
});
|
|
});
|
|
|
|
if (!digitalMap) {
|
|
container.addEventListener('click', (e) => {
|
|
const rect = container.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
selectedX = x.toFixed(2); selectedY = y.toFixed(2);
|
|
marker.style.left = `${selectedX}%`; marker.style.top = `${selectedY}%`;
|
|
marker.classList.remove('hidden');
|
|
});
|
|
}
|
|
|
|
overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
|
|
overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
|
|
if (isMulti) {
|
|
overlay.querySelector('.picker-nav.prev')?.addEventListener('click', (e) => { if (currentIdx > 0) { currentIdx--; renderContent(); } });
|
|
overlay.querySelector('.picker-nav.next')?.addEventListener('click', (e) => { if (currentIdx < imagePaths.length - 1) { currentIdx++; renderContent(); } });
|
|
}
|
|
overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
|
|
if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
|
|
setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
|
|
setFieldValue('hw-location_photo', imagePaths[currentIdx]);
|
|
this.updateMapButtonVisibility(); overlay.remove();
|
|
});
|
|
};
|
|
renderContent(); document.body.appendChild(overlay);
|
|
}
|
|
|
|
private openImagePreview(imagePath: string, title: string, x: string, y: string) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'image-picker-overlay';
|
|
const digitalMap = this.generateDynamicSVG(imagePath);
|
|
|
|
overlay.innerHTML = `
|
|
<div class="image-picker-header">
|
|
<h3>${title}</h3>
|
|
<button class="btn-icon btn-close-picker" style="color:white !important;"><i data-lucide="x"></i></button>
|
|
</div>
|
|
<div class="image-picker-content">
|
|
<div class="layout-map-container readonly">
|
|
<img src="${imagePath}" class="layout-map-img" />
|
|
<div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div>
|
|
<div class="digital-overlay-layer">${digitalMap}</div>
|
|
</div>
|
|
</div>
|
|
<div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>
|
|
`;
|
|
document.body.appendChild(overlay);
|
|
createIcons({ icons: { X } });
|
|
|
|
if (digitalMap) {
|
|
overlay.querySelectorAll('.map-seat-obj').forEach(seat => {
|
|
const sx = seat.getAttribute('x'); const sy = seat.getAttribute('y');
|
|
if (sx === x && sy === y) {
|
|
(seat as SVGRectElement).style.fill = 'rgba(255, 61, 0, 0.4)';
|
|
(seat as SVGRectElement).style.stroke = '#FF3D00'; (seat as SVGRectElement).style.strokeWidth = '0.8';
|
|
const marker = overlay.querySelector('#preview-marker') as HTMLElement;
|
|
const w = seat.getAttribute('width') || '0'; const h = seat.getAttribute('height') || '0';
|
|
marker.style.left = `${parseFloat(sx!) + parseFloat(w)/2}%`; marker.style.top = `${parseFloat(sy!) + parseFloat(h)/2}%`;
|
|
}
|
|
});
|
|
}
|
|
overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
|
|
overlay.querySelector('#btn-preview-close')?.addEventListener('click', () => overlay.remove());
|
|
}
|
|
|
|
private renderHistory(assetId: string) {
|
|
const container = document.getElementById('hw-history-list');
|
|
if (!container) return;
|
|
const logs = (state.masterData.logs || []).filter(l => l.assetId === 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('');
|
|
}
|
|
|
|
private getCategoryKey(asset: any): string {
|
|
const cat = asset.category;
|
|
const code = asset.asset_code || '';
|
|
if (asset.asset_type === '서버PC') return 'pc';
|
|
if (cat === '서버' || code.startsWith('SVR')) return 'server';
|
|
if (cat === '스토리지' || code.startsWith('STO')) return 'storage';
|
|
if (cat === '네트워크' || code.startsWith('NET')) return 'network';
|
|
if (cat === '업무지원장비' || code.startsWith('EQP')) return 'equipment';
|
|
if (cat === '공간정보장비') return 'survey';
|
|
if (cat === 'PC부품') return 'pcParts';
|
|
return (cat === 'PC' || code.startsWith('PC')) ? 'pc' : 'officeSupplies';
|
|
}
|
|
}
|
|
|
|
// 싱글톤 인스턴스 생성 및 익스포트
|
|
export const hwModal = new HwAssetModal();
|
|
|
|
// 레거시 호환성을 위한 함수 래퍼
|
|
export function initHwModal(onSave: () => void, closeModals: () => void) {
|
|
hwModal.init(onSave, closeModals);
|
|
}
|
|
|
|
export function openHwModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
|
hwModal.open(asset, mode);
|
|
}
|