Compare commits
2 Commits
3ab587d342
...
2b9c965c91
| Author | SHA1 | Date | |
|---|---|---|---|
| 2b9c965c91 | |||
| 4b408b0640 |
74
server.js
74
server.js
@@ -9,6 +9,12 @@ dotenv.config();
|
|||||||
const app = express();
|
const app = express();
|
||||||
app.use(cors());
|
app.use(cors());
|
||||||
app.use(express.json({ limit: '50mb' }));
|
app.use(express.json({ limit: '50mb' }));
|
||||||
|
app.use('/uploads', express.static('uploads')); // 업로드 파일 정적 서빙
|
||||||
|
|
||||||
|
// uploads 폴더가 없으면 생성
|
||||||
|
if (!fs.existsSync('uploads')) {
|
||||||
|
fs.mkdirSync('uploads');
|
||||||
|
}
|
||||||
|
|
||||||
// MySQL Pool Configuration
|
// MySQL Pool Configuration
|
||||||
const pool = mysql.createPool({
|
const pool = mysql.createPool({
|
||||||
@@ -110,11 +116,10 @@ app.get('/api/assets/master', async (req, res) => {
|
|||||||
s.monitoring, s.price, s.monitor_inch, s.serial_num,
|
s.monitoring, s.price, s.monitor_inch, s.serial_num,
|
||||||
l.location, l.location_detail, l.location_photo, l.loc_x, l.loc_y,
|
l.location, l.location_detail, l.location_photo, l.loc_x, l.loc_y,
|
||||||
n.ip_address, n.mac_address, n.remote_tool, n.remote_id, n.remote_pw,
|
n.ip_address, n.mac_address, n.remote_tool, n.remote_id, n.remote_pw,
|
||||||
(SELECT CONCAT(capacity, unit) FROM asset_volume WHERE asset_id = c.id AND disk_type = 'SSD' AND slot_no = 1 LIMIT 1) as ssd_1,
|
(
|
||||||
(SELECT CONCAT(capacity, unit) FROM asset_volume WHERE asset_id = c.id AND disk_type = 'SSD' AND slot_no = 2 LIMIT 1) as ssd_2,
|
SELECT JSON_ARRAYAGG(JSON_OBJECT('type', disk_type, 'capacity', capacity, 'unit', unit, 'slot', slot_no))
|
||||||
(SELECT CONCAT(capacity, unit) FROM asset_volume WHERE asset_id = c.id AND disk_type = 'HDD' AND slot_no = 1 LIMIT 1) as hdd_1,
|
FROM asset_volume WHERE asset_id = c.id
|
||||||
(SELECT CONCAT(capacity, unit) FROM asset_volume WHERE asset_id = c.id AND disk_type = 'HDD' AND slot_no = 2 LIMIT 1) as hdd_2,
|
) as volumes
|
||||||
(SELECT GROUP_CONCAT(CONCAT(disk_type, ': ', capacity, unit) SEPARATOR ', ') FROM asset_volume WHERE asset_id = c.id) as volume_summary
|
|
||||||
FROM asset_core c
|
FROM asset_core c
|
||||||
LEFT JOIN asset_spec s ON c.id = s.asset_id
|
LEFT JOIN asset_spec s ON c.id = s.asset_id
|
||||||
LEFT JOIN asset_location l ON l.id = (
|
LEFT JOIN asset_location l ON l.id = (
|
||||||
@@ -188,26 +193,23 @@ app.post('/api/asset/:category/save', async (req, res) => {
|
|||||||
await connection.query(`INSERT INTO asset_spec (${specKeys.join(', ')}) VALUES (${specKeys.map(() => '?').join(', ')})`, Object.values(specData));
|
await connection.query(`INSERT INTO asset_spec (${specKeys.join(', ')}) VALUES (${specKeys.map(() => '?').join(', ')})`, Object.values(specData));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3.3 asset_volume (Legacy Parser)
|
// 3.3 asset_volume
|
||||||
const parseCapacity = (str) => {
|
|
||||||
if (!str || str.trim() === '' || str.toLowerCase() === 'null') return null;
|
|
||||||
const match = str.match(/(\d+(?:\.\d+)?)\s*([GT]B)?/i);
|
|
||||||
if (match) return { value: parseFloat(match[1]), unit: (match[2] || 'GB').toUpperCase() };
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
const storages = [
|
|
||||||
{ val: asset.ssd_1, type: 'SSD', slot: 1 },
|
|
||||||
{ val: asset.ssd_2, type: 'SSD', slot: 2 },
|
|
||||||
{ val: asset.hdd_1, type: 'HDD', slot: 1 },
|
|
||||||
{ val: asset.hdd_2, type: 'HDD', slot: 2 }
|
|
||||||
];
|
|
||||||
await connection.query('DELETE FROM asset_volume WHERE asset_id = ?', [asset.id]);
|
await connection.query('DELETE FROM asset_volume WHERE asset_id = ?', [asset.id]);
|
||||||
for (const s of storages) {
|
if (asset.volumes) {
|
||||||
const parsed = parseCapacity(s.val);
|
try {
|
||||||
if (parsed) {
|
let vols = typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes;
|
||||||
await connection.query('INSERT INTO asset_volume (asset_id, disk_type, capacity, unit, slot_no) VALUES (?, ?, ?, ?, ?)',
|
if (Array.isArray(vols)) {
|
||||||
[asset.id, s.type, parsed.value, parsed.unit, s.slot]);
|
for (let i = 0; i < vols.length; i++) {
|
||||||
}
|
const v = vols[i];
|
||||||
|
if (v.type && v.capacity) {
|
||||||
|
await connection.query(
|
||||||
|
'INSERT INTO asset_volume (asset_id, disk_type, capacity, unit, slot_no) VALUES (?, ?, ?, ?, ?)',
|
||||||
|
[asset.id, v.type, v.capacity, v.unit || 'GB', v.slot || (i + 1)]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch(e) { console.error('Volume parse error', e); }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3.4 asset_location
|
// 3.4 asset_location
|
||||||
@@ -327,6 +329,30 @@ app.post('/api/maps/save', (req, res) => {
|
|||||||
} catch (err) { handleError(res, err, 'SAVE MAPS'); }
|
} catch (err) { handleError(res, err, 'SAVE MAPS'); }
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 7. File Upload API (Base64)
|
||||||
|
app.post('/api/upload', (req, res) => {
|
||||||
|
try {
|
||||||
|
const { fileName, fileData } = req.body;
|
||||||
|
if (!fileName || !fileData) return res.status(400).json({ error: 'FileName and FileData are required' });
|
||||||
|
|
||||||
|
// base64 데이터에서 실제 바이너리 추출
|
||||||
|
const base64Data = fileData.replace(/^data:.*;base64,/, "");
|
||||||
|
const buffer = Buffer.from(base64Data, 'base64');
|
||||||
|
|
||||||
|
// 고유한 파일명 생성 (타임스탬프 결합)
|
||||||
|
const timestamp = Date.now();
|
||||||
|
const safeFileName = `${timestamp}_${fileName.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
|
||||||
|
const filePath = `uploads/${safeFileName}`;
|
||||||
|
|
||||||
|
fs.writeFileSync(filePath, buffer);
|
||||||
|
|
||||||
|
console.log(`파일 업로드 성공: ${filePath}`);
|
||||||
|
res.json({ success: true, filePath: `/${filePath}`, fileName: safeFileName });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'FILE UPLOAD');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
app.listen(3000, '0.0.0.0', () => {
|
app.listen(3000, '0.0.0.0', () => {
|
||||||
console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (V3 Normalized)');
|
console.log('📡 ITAM BACKEND SERVER RUNNING ON PORT 3000 (V3 Normalized)');
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ import {
|
|||||||
} from './ModalUtils';
|
} from './ModalUtils';
|
||||||
import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData';
|
import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData';
|
||||||
import { BaseModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { createIcons, X, History, Plus, Save, Paperclip, Calendar, Monitor, Cpu, Network, ShieldCheck } from 'lucide';
|
|
||||||
|
|
||||||
class HwAssetModal extends BaseModal {
|
class HwAssetModal extends BaseModal {
|
||||||
private dynamicMapConfig: Record<string, any[]> = {};
|
private dynamicMapConfig: Record<string, any[]> = {};
|
||||||
@@ -20,238 +19,238 @@ class HwAssetModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected renderFrameHTML(): string {
|
protected renderFrameHTML(): string {
|
||||||
|
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
|
||||||
|
const inputStyle = sharedStyle;
|
||||||
|
const btnStyle = `padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; white-space: nowrap; cursor: pointer; ${sharedStyle}`;
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div id="hw-asset-modal" class="modal-overlay hidden">
|
<div id="hw-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="hw-modal-title">${this.title}</h2>
|
<h2 id="hw-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
|
||||||
<button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
<button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
|
||||||
<div class="modal-body-split">
|
<div class="modal-body-split">
|
||||||
<div class="modal-form-area">
|
<div class="modal-form-area">
|
||||||
<form id="hw-asset-form" class="grid-form">
|
<form id="hw-asset-form" class="grid-form">
|
||||||
<input type="hidden" id="hw-id" name="id" />
|
<input type="hidden" id="hw-id" name="id" />
|
||||||
|
|
||||||
<div class="form-section-title">기본 및 관리 정보</div>
|
<!-- [SECTION 1] 기본 관리 정보 (필수 공통) -->
|
||||||
|
<div class="form-section-title" style="padding-top: 0; margin-bottom: 12px;">기본 관리 정보</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
|
<label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
|
||||||
<div class="input-with-btn">
|
<div class="input-with-btn" style="display: flex; gap: 8px; align-items: stretch;">
|
||||||
<input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly />
|
<input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly style="flex: 1; ${inputStyle}" />
|
||||||
<button type="button" id="btn-gen-hw-code" class="btn btn-outline btn-sm btn-helper">생성</button>
|
<button type="button" id="btn-gen-hw-code" class="btn btn-outline" style="${btnStyle}">생성</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
<label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
|
||||||
<select id="hw-purchase_corp" name="purchase_corp">${generateOptionsHTML(CORP_LIST)}</select>
|
<select id="hw-purchase_corp" name="purchase_corp" style="${inputStyle}">${generateOptionsHTML(CORP_LIST)}</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.CATEGORY.ui}</label>
|
<label>${ASSET_SCHEMA.CATEGORY.ui}</label>
|
||||||
<select id="hw-category" name="category">
|
<select id="hw-category" name="category" style="${inputStyle}">
|
||||||
<option value="">선택</option>
|
<option value="">선택</option>
|
||||||
${generateOptionsHTML(Object.keys(CATEGORY_TYPE_MAP), '', false)}
|
${generateOptionsHTML(Object.keys(CATEGORY_TYPE_MAP), '', false)}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
|
<label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
|
||||||
<select id="hw-asset_type" name="asset_type">
|
<select id="hw-asset_type" name="asset_type" style="${inputStyle}">
|
||||||
<option value="">구분을 먼저 선택하세요</option>
|
<option value="">구분을 먼저 선택하세요</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
||||||
<select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
|
<select id="hw-hw_status" name="hw_status" style="${inputStyle}">${generateOptionsHTML(HW_STATUS_LIST)}</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group dept-field">
|
<div class="form-group infra-only monitoring-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>
|
<label>${ASSET_SCHEMA.MONITORING.ui}</label>
|
||||||
<select id="hw-monitoring" name="monitoring">
|
<select id="hw-monitoring" name="monitoring" style="${inputStyle}">
|
||||||
<option value="대상">대상</option>
|
|
||||||
<option value="비대상">비대상</option>
|
<option value="비대상">비대상</option>
|
||||||
|
<option value="대상">대상</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-section-title">구매 및 증빙</div>
|
<!-- [SECTION 2] 조직 및 사용자 정보 -->
|
||||||
|
<div class="form-section-title org-user-section" style="margin-top: 24px; margin-bottom: 12px;">사용자 및 조직 정보</div>
|
||||||
|
<div class="form-group org-user-field">
|
||||||
|
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
||||||
|
<select id="hw-current_dept" name="current_dept" style="${inputStyle}">${generateOptionsHTML(ORG_LIST)}</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group org-user-field">
|
||||||
|
<label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
|
||||||
|
<input type="text" id="hw-manager_primary" name="manager_primary" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group personal-only">
|
||||||
|
<label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
|
||||||
|
<input type="text" id="hw-user_current" name="user_current" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group personal-only">
|
||||||
|
<label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
|
||||||
|
<input type="text" id="hw-user_position" name="user_position" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
|
||||||
|
<input type="text" id="hw-manager_secondary" name="manager_secondary" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group personal-only">
|
||||||
|
<label>${ASSET_SCHEMA.PREV_USER.ui}</label>
|
||||||
|
<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>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
|
||||||
|
<input type="text" id="hw-model_name" name="model_name" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>${ASSET_SCHEMA.ASSET_MFR.ui}</label>
|
||||||
|
<input type="text" id="hw-asset_mfr" name="asset_mfr" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group sn-only">
|
||||||
|
<label>${ASSET_SCHEMA.SERIAL_NUM.ui}</label>
|
||||||
|
<input type="text" id="hw-serial_num" name="serial_num" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only">
|
||||||
|
<label>${ASSET_SCHEMA.OS.ui}</label>
|
||||||
|
<input type="text" id="hw-os" name="os" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only">
|
||||||
|
<label>${ASSET_SCHEMA.CPU.ui}</label>
|
||||||
|
<input type="text" id="hw-cpu" name="cpu" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only">
|
||||||
|
<label>${ASSET_SCHEMA.RAM.ui}</label>
|
||||||
|
<input type="text" id="hw-ram" name="ram" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only">
|
||||||
|
<label>${ASSET_SCHEMA.GPU.ui}</label>
|
||||||
|
<input type="text" id="hw-gpu" name="gpu" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group spec-only">
|
||||||
|
<label>${ASSET_SCHEMA.MAINBOARD.ui}</label>
|
||||||
|
<input type="text" id="hw-mainboard" name="mainboard" style="${inputStyle}" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 동적 디스크 할당 영역 (Plan B) -->
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- [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] 설치 위치 (인프라/실물 장비 전용) -->
|
||||||
|
<div class="form-section-title location-section" style="margin-top: 24px; margin-bottom: 12px;">설치 위치</div>
|
||||||
|
<div class="form-group location-field">
|
||||||
|
<label>건물/위치</label>
|
||||||
|
<select id="hw-bldg-select" name="location" style="${inputStyle}">${generateOptionsHTML(Object.keys(LOCATION_DATA))}</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group location-field">
|
||||||
|
<label>${ASSET_SCHEMA.LOC_DETAIL.ui}</label>
|
||||||
|
<div class="input-with-btn" style="display: flex; gap: 8px; align-items: stretch;">
|
||||||
|
<select id="hw-location_detail" name="location_detail" style="flex: 1; ${inputStyle}"><option value="">선택</option></select>
|
||||||
|
<button type="button" id="btn-reg-loc-map" class="btn btn-primary" style="${btnStyle} display: none;">위치등록</button>
|
||||||
|
<button type="button" id="btn-view-loc-map" class="btn btn-primary btn-loc-action btn-loc-view" style="${btnStyle} display: none; pointer-events: auto !important; cursor: pointer !important;">위치보기</button>
|
||||||
|
</div>
|
||||||
|
<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] 구매 및 증빙 (공통) -->
|
||||||
|
<div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">구매 및 증빙 정보</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
|
<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" placeholder="YYYY-MM-DD" style="${inputStyle}" />
|
||||||
<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>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
|
<label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
|
||||||
<input type="text" id="hw-purchase_vendor" name="purchase_vendor" />
|
<input type="text" id="hw-purchase_vendor" name="purchase_vendor" style="${inputStyle}" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
<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, ',')" />
|
<input type="text" id="hw-purchase_amount" name="purchase_amount" placeholder="0" style="${inputStyle}" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group full-width">
|
<div class="form-group">
|
||||||
<label>${ASSET_SCHEMA.APPROVAL_DOC.ui}</label>
|
<label>${ASSET_SCHEMA.APPROVAL_DOC.ui} (첨부파일)</label>
|
||||||
<div style="display:flex; align-items:center; gap:0.5rem;">
|
<div class="file-upload-wrapper">
|
||||||
<input type="file" id="hw-approval_document_file" style="font-size:12px;" />
|
<input type="file" id="hw-approval_document_file" style="display:none;" />
|
||||||
<span id="hw-approval_document_name" style="font-size:12px; color:var(--text-muted);"></span>
|
<div class="input-with-btn" style="display: flex; gap: 8px; align-items: stretch;">
|
||||||
|
<button type="button" id="btn-file-select" onclick="document.getElementById('hw-approval_document_file').click()" class="btn btn-outline btn-loc-action" style="${btnStyle} flex: 1; justify-content: flex-start; pointer-events: auto !important; cursor: pointer !important;">
|
||||||
|
<span id="hw-file-name-display">파일 선택...</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" id="hw-approval_document" name="approval_document" />
|
||||||
|
<div id="hw-file-link-container" style="margin-top: 4px;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group full-width">
|
<div class="form-group full-width">
|
||||||
<label>${ASSET_SCHEMA.MEMO.ui}</label>
|
<label>${ASSET_SCHEMA.MEMO.ui}</label>
|
||||||
<textarea id="hw-memo" name="memo" rows="2"></textarea>
|
<textarea id="hw-memo" name="memo" rows="3" style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 13px; resize: none !important; box-sizing: border-box;"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-history-area">
|
<div class="modal-history-area">
|
||||||
<div class="history-header">
|
<div class="history-header" style="border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 16px;">
|
||||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 자산 변동 이력</h3>
|
<h3 style="margin: 0; font-size: 14px; font-weight: 800;">자산 변동 이력</h3>
|
||||||
<button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm">
|
<button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm" style="height: 30px; font-size: 11px;">이력 추가</button>
|
||||||
이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="hw-history-list" class="history-timeline"></div>
|
<div id="hw-history-list" class="history-timeline"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
|
<button id="btn-delete-hw-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
|
||||||
<div class="footer-actions">
|
<div class="footer-actions">
|
||||||
<button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
|
<button id="btn-revert-hw-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
|
||||||
<button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
|
<button id="btn-cancel-hw-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
|
||||||
<button id="btn-save-hw-asset" class="btn btn-primary">수정</button>
|
<button id="btn-save-hw-asset" class="btn btn-primary" style="height: 42px;">저장</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -273,48 +272,48 @@ class HwAssetModal extends BaseModal {
|
|||||||
|
|
||||||
categorySelect.addEventListener('change', () => {
|
categorySelect.addEventListener('change', () => {
|
||||||
const types = CATEGORY_TYPE_MAP[categorySelect.value] || [];
|
const types = CATEGORY_TYPE_MAP[categorySelect.value] || [];
|
||||||
typeSelect.innerHTML = types.length > 0
|
typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, '', true) : '<option value="">구분을 먼저 선택하세요</option>';
|
||||||
? generateOptionsHTML(types, '', true)
|
this.applyRoleVisibility();
|
||||||
: '<option value="">구분을 먼저 선택하세요</option>';
|
});
|
||||||
|
|
||||||
|
typeSelect.addEventListener('change', () => {
|
||||||
|
this.applyRoleVisibility();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
|
document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
|
||||||
const cat = categorySelect.value;
|
const cat = categorySelect.value;
|
||||||
if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
|
if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
|
||||||
|
|
||||||
const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
|
const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
|
||||||
const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
|
const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
|
const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
if (data.nextCode) {
|
if (data.nextCode) setFieldValue('hw-asset_code', data.nextCode);
|
||||||
setFieldValue('hw-asset_code', data.nextCode);
|
} catch (err) { console.error('코드 생성 실패:', err); }
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('코드 생성 실패:', err);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
bldgSelect.addEventListener('change', () => setTimeout(() => this.updateMapButtonVisibility(), 100));
|
bldgSelect.addEventListener('change', () => setTimeout(() => this.updateMapButtonVisibility(), 100));
|
||||||
detailSelect.addEventListener('change', () => this.updateMapButtonVisibility());
|
detailSelect.addEventListener('change', () => this.updateMapButtonVisibility());
|
||||||
|
|
||||||
document.getElementById('btn-reg-loc-map')?.addEventListener('click', async () => {
|
document.getElementById('btn-reg-loc-map')?.addEventListener('click', async (e) => {
|
||||||
|
e.preventDefault(); e.stopPropagation();
|
||||||
await this.fetchMapConfig();
|
await this.fetchMapConfig();
|
||||||
const images = this.getImagesForLocation(bldgSelect.value, detailSelect.value);
|
const images = this.getImagesForLocation(bldgSelect.value, detailSelect.value);
|
||||||
if (images) this.openImagePicker(images, `${detailSelect.value} 위치 등록`);
|
if (images) this.openImagePicker(images, `${detailSelect.value} 위치 등록`);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('btn-view-loc-map')?.addEventListener('click', async () => {
|
document.getElementById('btn-view-loc-map')?.addEventListener('click', async (e) => {
|
||||||
|
e.preventDefault(); e.stopPropagation();
|
||||||
await this.fetchMapConfig();
|
await this.fetchMapConfig();
|
||||||
const images = this.getImagesForLocation(bldgSelect.value, detailSelect.value);
|
|
||||||
const x = getFieldValue('hw-loc_x');
|
const x = getFieldValue('hw-loc_x');
|
||||||
const y = getFieldValue('hw-loc_y');
|
const y = getFieldValue('hw-loc_y');
|
||||||
const savedImg = getFieldValue('hw-location_photo');
|
const savedImg = getFieldValue('hw-location_photo');
|
||||||
|
const bldg = getFieldValue('hw-bldg-select');
|
||||||
|
const detail = getFieldValue('hw-location_detail');
|
||||||
|
const images = this.getImagesForLocation(bldg, detail);
|
||||||
if (images) {
|
if (images) {
|
||||||
const imgPath = savedImg && images.includes(savedImg) ? savedImg : images[0];
|
const imgPath = savedImg && images.includes(savedImg) ? savedImg : images[0];
|
||||||
this.openImagePreview(imgPath, `${detailSelect.value} 위치 확인`, x, y);
|
this.openImagePreview(imgPath, `${detail} 위치 확인`, x, y);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -329,6 +328,39 @@ class HwAssetModal extends BaseModal {
|
|||||||
this.setEditLockMode('view');
|
this.setEditLockMode('view');
|
||||||
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
||||||
this.updateMapButtonVisibility();
|
this.updateMapButtonVisibility();
|
||||||
|
this.toggleEditOnlyBtns(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 동적 볼륨 추가 기능 연결
|
||||||
|
const btnAddVolume = document.getElementById('btn-add-volume')!;
|
||||||
|
btnAddVolume.addEventListener('click', () => this.addVolumeRow());
|
||||||
|
|
||||||
|
const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement;
|
||||||
|
const fileNameDisplay = document.getElementById('hw-file-name-display');
|
||||||
|
const fileLinkContainer = document.getElementById('hw-file-link-container');
|
||||||
|
|
||||||
|
fileInput?.addEventListener('change', async (e) => {
|
||||||
|
const file = (e.target as HTMLInputElement).files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
if (fileNameDisplay) fileNameDisplay.textContent = file.name;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`http://${location.hostname}:3000/api/upload`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ fileName: file.name, fileData: reader.result })
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.success) {
|
||||||
|
setFieldValue('hw-approval_document', data.filePath);
|
||||||
|
if (fileLinkContainer) {
|
||||||
|
fileLinkContainer.innerHTML = `<a href="http://${location.hostname}:3000${data.filePath}" target="_blank" class="btn-loc-action" style="color:var(--primary-color); font-size:12px; text-decoration:underline; pointer-events: auto !important;">[업로드 완료: 파일 보기]</a>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) { console.error('파일 업로드 실패:', err); alert('파일 업로드 중 오류가 발생했습니다.'); }
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
});
|
});
|
||||||
|
|
||||||
saveBtn.addEventListener('click', async () => {
|
saveBtn.addEventListener('click', async () => {
|
||||||
@@ -337,9 +369,21 @@ class HwAssetModal extends BaseModal {
|
|||||||
this.setEditLockMode('edit');
|
this.setEditLockMode('edit');
|
||||||
this.isEditMode = true;
|
this.isEditMode = true;
|
||||||
this.updateMapButtonVisibility();
|
this.updateMapButtonVisibility();
|
||||||
|
this.toggleFileUploadUI(true);
|
||||||
|
this.toggleEditOnlyBtns(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 동적 볼륨 데이터 수집 및 배열 생성
|
||||||
|
const vols: any[] = [];
|
||||||
|
document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
|
||||||
|
const type = (row.querySelector('.vol-type') as HTMLSelectElement).value;
|
||||||
|
const cap = (row.querySelector('.vol-cap') as HTMLInputElement).value;
|
||||||
|
const unit = (row.querySelector('.vol-unit') as HTMLSelectElement).value;
|
||||||
|
if (cap) vols.push({ type, capacity: parseFloat(cap), unit, slot: idx + 1 });
|
||||||
|
});
|
||||||
|
setFieldValue('hw-volumes-data', JSON.stringify(vols));
|
||||||
|
|
||||||
const formData = new FormData(this.formEl!);
|
const formData = new FormData(this.formEl!);
|
||||||
const updated = { ...this.currentAsset };
|
const updated = { ...this.currentAsset };
|
||||||
formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
|
formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
|
||||||
@@ -350,8 +394,44 @@ class HwAssetModal extends BaseModal {
|
|||||||
onSave(); this.close(); closeModals();
|
onSave(); this.close(); closeModals();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
createIcons({ icons: { History, Plus, Save, Paperclip, Calendar, Monitor, Cpu, Network, ShieldCheck } });
|
private addVolumeRow(vol: any = { type: 'SSD', capacity: '', unit: 'GB' }) {
|
||||||
|
const container = document.getElementById('hw-volume-container');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const row = document.createElement('div');
|
||||||
|
row.style.display = 'flex';
|
||||||
|
row.style.gap = '8px';
|
||||||
|
row.style.alignItems = 'center';
|
||||||
|
row.className = 'volume-row';
|
||||||
|
|
||||||
|
const inputStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0; padding: 0 8px;';
|
||||||
|
|
||||||
|
row.innerHTML = `
|
||||||
|
<select class="vol-type" style="${inputStyle} width: 80px;" ${!this.isEditMode ? 'disabled' : ''}>
|
||||||
|
<option value="SSD" ${vol.type === 'SSD' ? 'selected' : ''}>SSD</option>
|
||||||
|
<option value="HDD" ${vol.type === 'HDD' ? 'selected' : ''}>HDD</option>
|
||||||
|
<option value="NVMe" ${vol.type === 'NVMe' ? 'selected' : ''}>NVMe</option>
|
||||||
|
</select>
|
||||||
|
<input type="number" class="vol-cap" value="${vol.capacity || ''}" placeholder="용량" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
|
||||||
|
<select class="vol-unit" style="${inputStyle} width: 70px;" ${!this.isEditMode ? 'disabled' : ''}>
|
||||||
|
<option value="GB" ${vol.unit === 'GB' ? 'selected' : ''}>GB</option>
|
||||||
|
<option value="TB" ${vol.unit === 'TB' ? 'selected' : ''}>TB</option>
|
||||||
|
</select>
|
||||||
|
<button type="button" class="btn btn-outline btn-remove-vol edit-only-btn" style="height: 38px !important; padding: 0 12px; color: #E11D48; border-color: #E11D48; display: ${this.isEditMode ? 'inline-flex' : 'none'};">×</button>
|
||||||
|
`;
|
||||||
|
|
||||||
|
row.querySelector('.btn-remove-vol')?.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';
|
||||||
|
document.querySelectorAll('.edit-only-btn').forEach(btn => {
|
||||||
|
(btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none';
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
@@ -359,100 +439,122 @@ class HwAssetModal extends BaseModal {
|
|||||||
setFieldValue('hw-asset_code', asset.asset_code || '');
|
setFieldValue('hw-asset_code', asset.asset_code || '');
|
||||||
setFieldValue('hw-purchase_corp', asset.purchase_corp || '');
|
setFieldValue('hw-purchase_corp', asset.purchase_corp || '');
|
||||||
setFieldValue('hw-category', asset.category || '');
|
setFieldValue('hw-category', asset.category || '');
|
||||||
setFieldValue('hw-current_role', asset.current_role || 'Normal');
|
|
||||||
|
|
||||||
const types = CATEGORY_TYPE_MAP[asset.category] || [];
|
const types = CATEGORY_TYPE_MAP[asset.category] || [];
|
||||||
const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
|
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>';
|
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-asset_type', asset.asset_type || '');
|
||||||
setFieldValue('hw-hw_status', asset.hw_status || '운영');
|
setFieldValue('hw-hw_status', asset.hw_status || '운영');
|
||||||
setFieldValue('hw-current_dept', asset.current_dept || '');
|
setFieldValue('hw-current_dept', asset.current_dept || '');
|
||||||
setFieldValue('hw-previous_dept', asset.previous_dept || '');
|
|
||||||
setFieldValue('hw-manager_primary', asset.manager_primary || '');
|
setFieldValue('hw-manager_primary', asset.manager_primary || '');
|
||||||
setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
|
setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
|
||||||
setFieldValue('hw-user_current', asset.user_current || '');
|
setFieldValue('hw-user_current', asset.user_current || '');
|
||||||
setFieldValue('hw-user_position', asset.user_position || '');
|
setFieldValue('hw-user_position', asset.user_position || '');
|
||||||
setFieldValue('hw-previous_user', asset.previous_user || '');
|
setFieldValue('hw-previous_user', asset.previous_user || '');
|
||||||
setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
|
|
||||||
setFieldValue('hw-model_name', asset.model_name || '');
|
setFieldValue('hw-model_name', asset.model_name || '');
|
||||||
|
setFieldValue('hw-asset_mfr', asset.asset_mfr || '');
|
||||||
|
setFieldValue('hw-os', asset.os || '');
|
||||||
setFieldValue('hw-cpu', asset.cpu || '');
|
setFieldValue('hw-cpu', asset.cpu || '');
|
||||||
setFieldValue('hw-ram', asset.ram || '');
|
setFieldValue('hw-ram', asset.ram || '');
|
||||||
setFieldValue('hw-gpu', asset.gpu || '');
|
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-mainboard', asset.mainboard || '');
|
||||||
setFieldValue('hw-os', asset.os || '');
|
|
||||||
setFieldValue('hw-mac_address', asset.mac_address || '');
|
// 동적 볼륨 렌더링 초기화 및 생성
|
||||||
|
const volumeContainer = document.getElementById('hw-volume-container');
|
||||||
|
if (volumeContainer) {
|
||||||
|
volumeContainer.innerHTML = '';
|
||||||
|
let vols = [];
|
||||||
|
try {
|
||||||
|
vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : [];
|
||||||
|
} catch(e) {}
|
||||||
|
vols.forEach((v: any) => this.addVolumeRow(v));
|
||||||
|
}
|
||||||
|
|
||||||
setFieldValue('hw-ip_address', asset.ip_address || '');
|
setFieldValue('hw-ip_address', asset.ip_address || '');
|
||||||
setFieldValue('hw-ip_address_2', asset.ip_address_2 || '');
|
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_tool', asset.remote_tool || '');
|
||||||
setFieldValue('hw-remote_id', asset.remote_id || '');
|
setFieldValue('hw-remote_id', asset.remote_id || '');
|
||||||
setFieldValue('hw-remote_pw', asset.remote_pw || '');
|
setFieldValue('hw-remote_pw', asset.remote_pw || '');
|
||||||
setFieldValue('hw-monitoring', asset.monitoring || '비대상');
|
setFieldValue('hw-monitoring', asset.monitoring || '비대상');
|
||||||
|
setFieldValue('hw-serial_num', asset.serial_num || '');
|
||||||
|
setFieldValue('hw-monitor_inch', asset.monitor_inch || '');
|
||||||
|
setFieldValue('hw-volume', asset.volume || '');
|
||||||
|
setFieldValue('hw-asset_count', asset.asset_count || '');
|
||||||
setFieldValue('hw-purchase_date', asset.purchase_date || '');
|
setFieldValue('hw-purchase_date', asset.purchase_date || '');
|
||||||
setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
|
setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
|
||||||
setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
|
setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
|
||||||
|
setFieldValue('hw-approval_document', asset.approval_document || '');
|
||||||
const docName = document.getElementById('hw-approval_document_name');
|
const docName = document.getElementById('hw-file-name-display');
|
||||||
if (docName) docName.textContent = asset.approval_document || '';
|
if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...';
|
||||||
|
const fileLinkContainer = document.getElementById('hw-file-link-container');
|
||||||
|
if (fileLinkContainer && asset.approval_document) {
|
||||||
|
fileLinkContainer.innerHTML = `<a href="http://${location.hostname}:3000${asset.approval_document}" target="_blank" class="btn-loc-action" style="color:var(--primary-color); font-size:12px; text-decoration:underline; pointer-events: auto !important;">[파일 보기]</a>`;
|
||||||
|
} else if (fileLinkContainer) {
|
||||||
|
fileLinkContainer.innerHTML = '';
|
||||||
|
}
|
||||||
setFieldValue('hw-memo', asset.memo || '');
|
setFieldValue('hw-memo', asset.memo || '');
|
||||||
setFieldValue('hw-location_detail', asset.location_detail || '');
|
setFieldValue('hw-location_detail', asset.location_detail || '');
|
||||||
setFieldValue('hw-loc_x', asset.loc_x || '');
|
setFieldValue('hw-loc_x', asset.loc_x || '');
|
||||||
setFieldValue('hw-loc_y', asset.loc_y || '');
|
setFieldValue('hw-loc_y', asset.loc_y || '');
|
||||||
setFieldValue('hw-location_photo', asset.location_photo || asset.loc_img || '');
|
setFieldValue('hw-location_photo', asset.location_photo || asset.loc_img || '');
|
||||||
|
|
||||||
parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
|
parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
|
||||||
this.renderHistory(asset.id);
|
this.renderHistory(asset.id);
|
||||||
|
this.applyRoleVisibility();
|
||||||
// Initial visibility check based on role
|
|
||||||
this.applyRoleVisibility(asset.current_role || 'Normal');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
|
const genBtn = document.getElementById('btn-gen-hw-code');
|
||||||
|
if (genBtn) genBtn.style.display = (mode === 'add') ? 'inline-flex' : 'none';
|
||||||
|
this.toggleFileUploadUI(mode !== 'view');
|
||||||
|
this.toggleEditOnlyBtns(mode !== 'view');
|
||||||
this.updateMapButtonVisibility(asset);
|
this.updateMapButtonVisibility(asset);
|
||||||
|
this.applyRoleVisibility();
|
||||||
const role = asset.current_role || 'Normal';
|
|
||||||
this.applyRoleVisibility(role);
|
|
||||||
|
|
||||||
// Role change event
|
|
||||||
const roleSelect = document.getElementById('hw-current_role') as HTMLSelectElement;
|
|
||||||
roleSelect?.addEventListener('change', (e) => {
|
|
||||||
this.applyRoleVisibility((e.target as HTMLSelectElement).value);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private applyRoleVisibility(role: string): void {
|
private toggleFileUploadUI(showUpload: boolean) {
|
||||||
const isServer = role === 'Server';
|
const fileBtn = document.getElementById('btn-file-select') as HTMLElement;
|
||||||
const isPersonal = role === 'Personal';
|
if (fileBtn) fileBtn.style.display = showUpload ? 'inline-flex' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
// Section Visibility
|
private applyRoleVisibility(): void {
|
||||||
const networkSectionTitle = document.evaluate("//div[contains(text(), '네트워크 및 접속 정보')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue as HTMLElement;
|
const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || '';
|
||||||
const locationSectionTitle = document.evaluate("//div[contains(text(), '설치 위치')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue as HTMLElement;
|
const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || '';
|
||||||
|
|
||||||
// Helper to toggle visibility of elements after a title until next section title
|
// 인프라 장비 (서버, 저장매체, 네트워크, 보안장비, 공간정보장비, 서버PC)
|
||||||
const toggleSection = (titleEl: HTMLElement, show: boolean) => {
|
const infraCategories = ['서버', '저장매체', '네트워크', '보안장비', '공간정보장비'];
|
||||||
if (!titleEl) return;
|
const isInfra = infraCategories.includes(category) || type.includes('서버') || type.includes('저장시스템');
|
||||||
titleEl.style.display = show ? 'block' : 'none';
|
|
||||||
let next = titleEl.nextElementSibling as HTMLElement;
|
|
||||||
while (next && !next.classList.contains('form-section-title')) {
|
|
||||||
next.style.display = show ? 'flex' : 'none';
|
|
||||||
next = next.nextElementSibling as HTMLElement;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Show/Hide based on role
|
// 개인 장비 (PC, 노트북, 모바일, 태블릿) - '서버PC'는 제외
|
||||||
toggleSection(networkSectionTitle, isServer);
|
const personalCategories = ['PC', '노트북', '모바일', '태블릿'];
|
||||||
toggleSection(locationSectionTitle, !isPersonal);
|
const isPersonal = (personalCategories.includes(category) || type.includes('개인PC') || type.includes('노트북')) && !type.includes('서버PC');
|
||||||
|
|
||||||
// Specific fields
|
// 시스템 사양 (PC, 서버 등)
|
||||||
document.querySelectorAll('.server-only').forEach(el => (el as HTMLElement).style.display = isServer ? 'flex' : 'none');
|
const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
|
||||||
document.querySelectorAll('.pc-only').forEach(el => (el as HTMLElement).style.display = isPersonal ? 'flex' : 'none');
|
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');
|
||||||
|
document.querySelectorAll('.location-section, .location-field').forEach(el => (el as HTMLElement).style.display = (isInfra || category === '공간정보장비') ? '' : 'none');
|
||||||
|
document.querySelectorAll('.org-user-section, .org-user-field').forEach(el => (el as HTMLElement).style.display = (isPersonal || isParts || category === '업무지원장비') ? '' : 'none');
|
||||||
|
document.querySelectorAll('.personal-only').forEach(el => (el as HTMLElement).style.display = isPersonal ? '' : 'none');
|
||||||
|
document.querySelectorAll('.sn-only').forEach(el => (el as HTMLElement).style.display = hasSN ? '' : 'none');
|
||||||
|
document.querySelectorAll('.monitor-only').forEach(el => (el as HTMLElement).style.display = type.includes('모니터') ? '' : 'none');
|
||||||
|
document.querySelectorAll('.parts-only').forEach(el => (el as HTMLElement).style.display = isParts ? '' : 'none');
|
||||||
}
|
}
|
||||||
|
|
||||||
private updateMapButtonVisibility(asset?: any) {
|
private updateMapButtonVisibility(asset?: any) {
|
||||||
@@ -460,18 +562,19 @@ class HwAssetModal extends BaseModal {
|
|||||||
const detail = asset ? (asset.location_detail || '') : getFieldValue('hw-location_detail');
|
const detail = asset ? (asset.location_detail || '') : getFieldValue('hw-location_detail');
|
||||||
const x = asset ? (asset.loc_x || '') : getFieldValue('hw-loc_x');
|
const x = asset ? (asset.loc_x || '') : getFieldValue('hw-loc_x');
|
||||||
const y = asset ? (asset.loc_y || '') : getFieldValue('hw-loc_y');
|
const y = asset ? (asset.loc_y || '') : getFieldValue('hw-loc_y');
|
||||||
|
|
||||||
const hasCoords = (x !== '' && y !== '' && x !== 'null' && y !== 'null');
|
const hasCoords = (x !== '' && y !== '' && x !== 'null' && y !== 'null');
|
||||||
const hasImage = !!this.getImagesForLocation(bldg, detail);
|
const hasImage = !!this.getImagesForLocation(bldg, detail);
|
||||||
|
|
||||||
const regLocBtn = document.getElementById('btn-reg-loc-map')!;
|
const regLocBtn = document.getElementById('btn-reg-loc-map')!;
|
||||||
const viewLocBtn = document.getElementById('btn-view-loc-map')!;
|
const viewLocBtn = document.getElementById('btn-view-loc-map')!;
|
||||||
|
|
||||||
if (hasImage && this.isEditMode) regLocBtn.classList.remove('hidden');
|
if (hasImage && this.isEditMode) regLocBtn.style.display = 'inline-flex'; else regLocBtn.style.display = 'none';
|
||||||
else regLocBtn.classList.add('hidden');
|
if (hasImage && hasCoords) {
|
||||||
|
viewLocBtn.style.display = 'inline-flex';
|
||||||
if (hasImage && hasCoords) viewLocBtn.classList.remove('hidden');
|
viewLocBtn.style.pointerEvents = 'auto';
|
||||||
else viewLocBtn.classList.add('hidden');
|
viewLocBtn.style.opacity = '1';
|
||||||
|
} else {
|
||||||
|
viewLocBtn.style.display = 'none';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private getImagesForLocation(bldg: string, detail: string): string[] | null {
|
private getImagesForLocation(bldg: string, detail: string): string[] | null {
|
||||||
@@ -489,78 +592,32 @@ class HwAssetModal extends BaseModal {
|
|||||||
private generateDynamicSVG(imagePath: string): string {
|
private generateDynamicSVG(imagePath: string): string {
|
||||||
const boxes = this.dynamicMapConfig[imagePath] || [];
|
const boxes = this.dynamicMapConfig[imagePath] || [];
|
||||||
if (boxes.length === 0) return '';
|
if (boxes.length === 0) return '';
|
||||||
return `
|
return `<svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width:100%; height:100%; position:absolute; top:0; left:0; pointer-events:none;"><g>${boxes.map((b) => `<rect x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="0.5" style="fill:rgba(30,81,73,0.05); stroke:rgba(30,81,73,0.2); stroke-width:0.2;" />`).join('')}</g></svg>`;
|
||||||
<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) {
|
private openImagePicker(imagePaths: string[], title: string) {
|
||||||
let currentIdx = 0;
|
let currentIdx = 0;
|
||||||
const overlay = document.createElement('div');
|
const overlay = document.createElement('div');
|
||||||
overlay.className = 'image-picker-overlay';
|
overlay.className = 'image-picker-overlay';
|
||||||
|
|
||||||
const renderContent = () => {
|
const renderContent = () => {
|
||||||
const imgPath = imagePaths[currentIdx];
|
const imgPath = imagePaths[currentIdx];
|
||||||
const isMulti = imagePaths.length > 1;
|
|
||||||
const digitalMap = this.generateDynamicSVG(imgPath);
|
const digitalMap = this.generateDynamicSVG(imgPath);
|
||||||
overlay.innerHTML = `
|
overlay.innerHTML = `
|
||||||
<div class="image-picker-header">
|
<div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">×</button></div>
|
||||||
<h3>${title} ${isMulti ? `(${currentIdx + 1}/${imagePaths.length})` : ''}</h3>
|
<div class="image-picker-content"><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>
|
||||||
<button class="btn-icon btn-close-picker" style="color:white !important;"><i data-lucide="x"></i></button>
|
<div class="image-picker-footer"><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>`;
|
||||||
</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 = '';
|
let selectedX = ''; let selectedY = '';
|
||||||
const container = overlay.querySelector('#picker-container') as HTMLElement;
|
const container = overlay.querySelector('#picker-container') as HTMLElement;
|
||||||
const marker = overlay.querySelector('#picker-marker') as HTMLElement;
|
const marker = overlay.querySelector('#picker-marker') as HTMLElement;
|
||||||
|
container.addEventListener('click', (e) => {
|
||||||
overlay.querySelectorAll('.map-seat-obj').forEach(seat => {
|
const rect = container.getBoundingClientRect();
|
||||||
seat.addEventListener('click', (e) => {
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||||
e.stopPropagation();
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||||
const target = e.currentTarget as SVGRectElement;
|
selectedX = x.toFixed(2); selectedY = y.toFixed(2);
|
||||||
selectedX = target.getAttribute('x') || ''; selectedY = target.getAttribute('y') || '';
|
marker.style.left = `${selectedX}%`; marker.style.top = `${selectedY}%`; marker.classList.remove('hidden');
|
||||||
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-close-picker')?.addEventListener('click', () => overlay.remove());
|
||||||
overlay.querySelector('#btn-picker-cancel')?.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', () => {
|
overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
|
||||||
if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
|
if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
|
||||||
setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
|
setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
|
||||||
@@ -575,33 +632,22 @@ class HwAssetModal extends BaseModal {
|
|||||||
const overlay = document.createElement('div');
|
const overlay = document.createElement('div');
|
||||||
overlay.className = 'image-picker-overlay';
|
overlay.className = 'image-picker-overlay';
|
||||||
const digitalMap = this.generateDynamicSVG(imagePath);
|
const digitalMap = this.generateDynamicSVG(imagePath);
|
||||||
|
|
||||||
overlay.innerHTML = `
|
overlay.innerHTML = `
|
||||||
<div class="image-picker-header">
|
<div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">×</button></div>
|
||||||
<h3>${title}</h3>
|
<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>
|
||||||
<button class="btn-icon btn-close-picker" style="color:white !important;"><i data-lucide="x"></i></button>
|
<div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>`;
|
||||||
</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);
|
document.body.appendChild(overlay);
|
||||||
createIcons({ icons: { X } });
|
|
||||||
|
|
||||||
if (digitalMap) {
|
if (digitalMap) {
|
||||||
overlay.querySelectorAll('.map-seat-obj').forEach(seat => {
|
const curX = parseFloat(x || '0'); const curY = parseFloat(y || '0');
|
||||||
const sx = seat.getAttribute('x'); const sy = seat.getAttribute('y');
|
overlay.querySelectorAll('rect').forEach(rect => {
|
||||||
if (sx === x && sy === y) {
|
const sx = parseFloat(rect.getAttribute('x') || '0');
|
||||||
(seat as SVGRectElement).style.fill = 'rgba(255, 61, 0, 0.4)';
|
const sy = parseFloat(rect.getAttribute('y') || '0');
|
||||||
(seat as SVGRectElement).style.stroke = '#FF3D00'; (seat as SVGRectElement).style.strokeWidth = '0.8';
|
if (Math.abs(sx - curX) < 0.01 && Math.abs(sy - curY) < 0.01) {
|
||||||
|
rect.style.fill = 'rgba(255, 61, 0, 0.4)'; rect.style.stroke = '#FF3D00'; rect.style.strokeWidth = '0.8';
|
||||||
|
const w = parseFloat(rect.getAttribute('width') || '0');
|
||||||
|
const h = parseFloat(rect.getAttribute('height') || '0');
|
||||||
const marker = overlay.querySelector('#preview-marker') as HTMLElement;
|
const marker = overlay.querySelector('#preview-marker') as HTMLElement;
|
||||||
const w = seat.getAttribute('width') || '0'; const h = seat.getAttribute('height') || '0';
|
if (marker) { marker.style.left = `${sx + w/2}%`; marker.style.top = `${sy + h/2}%`; }
|
||||||
marker.style.left = `${parseFloat(sx!) + parseFloat(w)/2}%`; marker.style.top = `${parseFloat(sy!) + parseFloat(h)/2}%`;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -631,14 +677,6 @@ class HwAssetModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 싱글톤 인스턴스 생성 및 익스포트
|
|
||||||
export const hwModal = new HwAssetModal();
|
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); }
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -13,15 +13,15 @@ export const HW_STATUS_LIST = ['운영', '재고', '수리', '폐기', '기타']
|
|||||||
|
|
||||||
// 구분(Category) -> 유형(Asset Type) 관계 정의 (통합 관리)
|
// 구분(Category) -> 유형(Asset Type) 관계 정의 (통합 관리)
|
||||||
export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
|
export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
|
||||||
'서버': ['서버 렉', '가상서버(VM)', '워크스테이션', '서버PC', '저장시스템_렉(NAS)', '저장시스템_렉(DAS)', '저장시스템_미니(NAS)', '저장시스템_미니(DAS)'],
|
'서버': ['서버 렉', '가상서버(VM)', '워크스테이션', '저장시스템_렉(NAS)', '저장시스템_렉(DAS)', '저장시스템_미니(NAS)', '저장시스템_미니(DAS)'],
|
||||||
'PC': ['개인PC', '노트북', '공용PC', '서버PC'],
|
'PC': ['개인PC', '노트북', '공용PC', '서버PC'],
|
||||||
'저장매체': ['SSD', 'HDD', '외장HDD'],
|
'저장매체': ['SSD', 'HDD', '외장HDD'],
|
||||||
'네트워크': ['스위치', '허브', '방화벽', '라우터', '공유기', '허브'],
|
'네트워크': ['스위치', '허브', '방화벽', '라우터', '공유기', '허브'],
|
||||||
'PC부품': ['CPU', 'RAM', 'GPU', 'SSD', 'HDD', 'RAM', '모니터'],
|
'PC부품': ['CPU', 'RAM', 'GPU', 'SSD', 'HDD', 'RAM', '모니터'],
|
||||||
'공간정보장비': ['드론', '측량장비', '보조기기'],
|
'공간정보장비': ['드론', '측량장비', '보조기기'],
|
||||||
'업무지원장비': ['카메라', '스피커', 'TV', '모바일', '유선전화기', 'XR', '프린터', '전산소모품'],
|
'업무지원장비': ['카메라', '스피커', 'TV', '모바일', '유선전화기', 'XR', '프린터', '전산소모품'],
|
||||||
'외부': ['영구', '구독'],
|
'외부SW': ['영구', '구독'],
|
||||||
'내부': ['판매용', 'Solutions', 'Inhouse', 'Engine&Module'],
|
'내부SW': ['판매용', 'Solutions', 'Inhouse', 'Engine&Module'],
|
||||||
'비용관리': ['클라우드', '도메인', '전화', '인터넷', '이메일'],
|
'비용관리': ['클라우드', '도메인', '전화', '인터넷', '이메일'],
|
||||||
'내빈/외빈': ['선물'],
|
'내빈/외빈': ['선물'],
|
||||||
'시설자산': ['사무가구']
|
'시설자산': ['사무가구']
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ const MENU_CONFIG: any = {
|
|||||||
},
|
},
|
||||||
sw: {
|
sw: {
|
||||||
label: '소프트웨어',
|
label: '소프트웨어',
|
||||||
tabs: ['외부', '내부']
|
tabs: ['외부SW', '내부SW']
|
||||||
},
|
},
|
||||||
ops: {
|
ops: {
|
||||||
label: '운영지원',
|
label: '운영지원',
|
||||||
|
|||||||
@@ -120,12 +120,12 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
|
|||||||
description: '측량 및 공간 정보 수집에 사용되는 특수 정밀 장비들의 이력과 상태를 관리합니다.',
|
description: '측량 및 공간 정보 수집에 사용되는 특수 정밀 장비들의 이력과 상태를 관리합니다.',
|
||||||
icon: 'map'
|
icon: 'map'
|
||||||
},
|
},
|
||||||
'내부': {
|
'내부SW': {
|
||||||
title: '사내 개발 S/W 관리',
|
title: '사내 개발 S/W 관리',
|
||||||
description: '사내에서 자체 개발하거나 운영 중인 시스템 및 소프트웨어 서비스 현황을 관리합니다.',
|
description: '사내에서 자체 개발하거나 운영 중인 시스템 및 소프트웨어 서비스 현황을 관리합니다.',
|
||||||
icon: 'code'
|
icon: 'code'
|
||||||
},
|
},
|
||||||
'외부': {
|
'외부SW': {
|
||||||
title: '외부 상용 S/W 관리',
|
title: '외부 상용 S/W 관리',
|
||||||
description: '상용 소프트웨어의 라이선스 보유 현황, 사용자 할당 및 만료 일정을 관리합니다.',
|
description: '상용 소프트웨어의 라이선스 보유 현황, 사용자 할당 및 만료 일정을 관리합니다.',
|
||||||
icon: 'package'
|
icon: 'package'
|
||||||
|
|||||||
@@ -153,14 +153,8 @@ export function dynamicSort<T>(list: T[], key: string, direction: 'asc' | 'desc'
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 목록 뷰용 액션 버튼 HTML 생성 (자산추가)
|
* 목록 뷰용 액션 버튼 HTML 생성 (중복 제거를 위해 비워둠)
|
||||||
*/
|
*/
|
||||||
export function getActionButtonsHTML(): string {
|
export function getActionButtonsHTML(): string {
|
||||||
return `
|
return '';
|
||||||
<div class="search-actions">
|
|
||||||
<button id="btn-add-asset" class="btn btn-primary">
|
|
||||||
<i data-lucide="plus"></i> 자산추가
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -121,7 +121,7 @@ function initApp() {
|
|||||||
if (cat === 'hw') {
|
if (cat === 'hw') {
|
||||||
openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
|
openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
|
||||||
} else if (cat === 'sw') {
|
} else if (cat === 'sw') {
|
||||||
const swType = tab === '외부' ? '외부SW' : (tab === '내부' ? '내부SW' : '외부SW');
|
const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
|
||||||
openSwModal({ id: newId, asset_type: swType } as any, 'add');
|
openSwModal({ id: newId, asset_type: swType } as any, 'add');
|
||||||
} else if (cat === 'ops') {
|
} else if (cat === 'ops') {
|
||||||
if (tab === '도메인') openDomainModal(null);
|
if (tab === '도메인') openDomainModal(null);
|
||||||
|
|||||||
@@ -48,9 +48,14 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
const toggleWrapper = document.createElement('div');
|
const toggleWrapper = document.createElement('div');
|
||||||
toggleWrapper.className = 'view-toggle-container';
|
toggleWrapper.className = 'view-toggle-container';
|
||||||
toggleWrapper.innerHTML = `
|
toggleWrapper.innerHTML = `
|
||||||
<div class="view-toggle">
|
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
||||||
<button class="toggle-btn ${(state as any).currentViewMode === 'system' ? 'active' : ''}" data-mode="system">자산 현황</button>
|
<div class="view-toggle" style="display: flex; gap: 0;">
|
||||||
<button class="toggle-btn ${(state as any).currentViewMode === 'asset' ? 'active' : ''}" data-mode="asset">자산 목록</button>
|
<button class="toggle-btn ${(state as any).currentViewMode === 'system' ? 'active' : ''}" data-mode="system">자산 현황</button>
|
||||||
|
<button class="toggle-btn ${(state as any).currentViewMode === 'asset' ? 'active' : ''}" data-mode="asset">자산 목록</button>
|
||||||
|
</div>
|
||||||
|
<button id="btn-add-asset" style="padding: 6px 14px; font-size: 12px; font-weight: 700; background: #1E5149; color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
|
||||||
|
<span style="font-size: 16px; line-height: 1;">+</span> 자산 추가
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
container.appendChild(toggleWrapper);
|
container.appendChild(toggleWrapper);
|
||||||
@@ -87,8 +92,20 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
const pcTypeCounts = { public: 0, server: 0, personal: 0 };
|
const pcTypeCounts = { public: 0, server: 0, personal: 0 };
|
||||||
|
|
||||||
// 동적 통계 수집 객체 (Hardcoding 제거)
|
// 동적 통계 수집 객체 (Hardcoding 제거)
|
||||||
const extStats = { total: 0, locCounts: {} as Record<string, number>, typeCounts: {} as Record<string, number>, locWarning: 0, typeWarning: 0 };
|
const extStats = {
|
||||||
const intStats = { total: 0, locCounts: {} as Record<string, number>, typeCounts: {} as Record<string, number> };
|
total: 0,
|
||||||
|
locCounts: {} as Record<string, number>,
|
||||||
|
typeCounts: {} as Record<string, number>,
|
||||||
|
typeLocMap: {} as Record<string, Record<string, number>>, // 유형별 위치 분포
|
||||||
|
locWarning: 0,
|
||||||
|
typeWarning: 0
|
||||||
|
};
|
||||||
|
const intStats = {
|
||||||
|
total: 0,
|
||||||
|
locCounts: {} as Record<string, number>,
|
||||||
|
typeCounts: {} as Record<string, number>,
|
||||||
|
typeLocMap: {} as Record<string, Record<string, number>>
|
||||||
|
};
|
||||||
|
|
||||||
// 중앙화된 경고 감지 로직
|
// 중앙화된 경고 감지 로직
|
||||||
const checkAnomaly = (serviceType: string, loc: string, type: string) => {
|
const checkAnomaly = (serviceType: string, loc: string, type: string) => {
|
||||||
@@ -122,7 +139,12 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
const targetStat = serviceType === '내부' ? intStats : extStats;
|
const targetStat = serviceType === '내부' ? intStats : extStats;
|
||||||
targetStat.total++;
|
targetStat.total++;
|
||||||
if (loc) targetStat.locCounts[loc] = (targetStat.locCounts[loc] || 0) + 1;
|
if (loc) targetStat.locCounts[loc] = (targetStat.locCounts[loc] || 0) + 1;
|
||||||
if (type) targetStat.typeCounts[type] = (targetStat.typeCounts[type] || 0) + 1;
|
if (type) {
|
||||||
|
targetStat.typeCounts[type] = (targetStat.typeCounts[type] || 0) + 1;
|
||||||
|
// 유형별 위치 분포 수집
|
||||||
|
if (!targetStat.typeLocMap[type]) targetStat.typeLocMap[type] = {};
|
||||||
|
targetStat.typeLocMap[type][loc] = (targetStat.typeLocMap[type][loc] || 0) + 1;
|
||||||
|
}
|
||||||
|
|
||||||
if (serviceType === '외부') {
|
if (serviceType === '외부') {
|
||||||
const anomaly = checkAnomaly(serviceType, loc, type);
|
const anomaly = checkAnomaly(serviceType, loc, type);
|
||||||
@@ -132,7 +154,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 템플릿 제너레이터 함수 (HTML 중복 제거)
|
// 템플릿 제너레이터 함수 (HTML 중복 제거)
|
||||||
const generateDetailStatHTML = (title: string, stats: typeof extStats) => `
|
const generateDetailStatHTML = (title: string, stats: any) => `
|
||||||
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 0.5rem;">
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 0.5rem;">
|
||||||
<span style="font-size: 14px; font-weight: 800; color: var(--text-main); white-space: nowrap;">${title}</span>
|
<span style="font-size: 14px; font-weight: 800; color: var(--text-main); white-space: nowrap;">${title}</span>
|
||||||
<div style="display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;">
|
<div style="display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;">
|
||||||
@@ -142,12 +164,20 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column; gap: 0.3rem; font-size: 13px; color: var(--text-muted);">
|
<div style="display: flex; flex-direction: column; gap: 0.3rem; font-size: 13px; color: var(--text-muted);">
|
||||||
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
|
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
|
||||||
${Object.entries(stats.locCounts).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([l, c]) => `<span>${l}: <strong style="color:var(--text-main); font-size: 14px;">${c}</strong></span>`).join('')}
|
${Object.entries(stats.locCounts as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([l, c]) => `<span>${l}: <strong style="color:var(--text-main); font-size: 14px;">${c}</strong></span>`).join('')}
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; gap: 0.6rem; flex-wrap: wrap; opacity: 0.9; border-top: 1px dashed var(--border-color); padding-top: 4px; margin-top: 2px;">
|
<div style="display: flex; gap: 0.6rem; flex-wrap: wrap; opacity: 0.9; border-top: 1px dashed var(--border-color); padding-top: 4px; margin-top: 2px;">
|
||||||
${Object.entries(stats.typeCounts).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([t, c]) => {
|
${Object.entries(stats.typeCounts as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([t, c]) => {
|
||||||
const isTypeWarning = title.includes('외부') && t.toLowerCase().replace(/\s/g, '').includes('서버pc');
|
const isTypeWarning = title.includes('외부') && t.toLowerCase().replace(/\s/g, '').includes('서버pc');
|
||||||
return `<span style="${isTypeWarning ? 'color:#E11D48; font-weight:700;' : ''}; font-size: 13px;">${t}: <strong style="color:var(--text-main); font-size: 14px;">${c}</strong></span>`;
|
|
||||||
|
// 위치별 상세 정보 생성 (툴팁용)
|
||||||
|
const locDist = stats.typeLocMap[t] || {};
|
||||||
|
const locHint = Object.entries(locDist)
|
||||||
|
.sort((a: any, b: any) => b[1] - a[1])
|
||||||
|
.map(([l, count]) => `${l}: ${count}대`)
|
||||||
|
.join('\n');
|
||||||
|
|
||||||
|
return `<span title="${locHint}" style="${isTypeWarning ? 'color:#E11D48; font-weight:700;' : ''}; font-size: 13px; cursor: help;">${t}: <strong style="color:var(--text-main); font-size: 14px;">${c}</strong></span>`;
|
||||||
}).join('')}
|
}).join('')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -397,8 +427,8 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-';
|
const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-';
|
||||||
|
|
||||||
// [경고 로직] 외부 운영인데 서버PC이거나 IDC가 아닌 경우
|
// [경고 로직] 외부 운영인데 서버PC이거나 IDC가 아닌 경우
|
||||||
const isLocWarning = serviceType === '외부' && loc !== 'IDC';
|
const isLocWarning = serviceType === '외부SW' && loc !== 'IDC';
|
||||||
const isTypeWarning = serviceType === '외부' && type.toLowerCase().replace(/\s/g, '').includes('서버pc');
|
const isTypeWarning = serviceType === '외부SW' && type.toLowerCase().replace(/\s/g, '').includes('서버pc');
|
||||||
const isWarning = isLocWarning || isTypeWarning;
|
const isWarning = isLocWarning || isTypeWarning;
|
||||||
const warningStyle = isWarning ? 'background-color: #FFF1F2; border-left: 3px solid #E11D48;' : '';
|
const warningStyle = isWarning ? 'background-color: #FFF1F2; border-left: 3px solid #E11D48;' : '';
|
||||||
|
|
||||||
|
|||||||
@@ -5,10 +5,10 @@ import { ASSET_SCHEMA } from '../../core/schema';
|
|||||||
import { createListView } from './ListFactory';
|
import { createListView } from './ListFactory';
|
||||||
|
|
||||||
export function renderSwList(container: HTMLElement) {
|
export function renderSwList(container: HTMLElement) {
|
||||||
const isInternal = state.activeSubTab === '내부';
|
const isInternal = state.activeSubTab === '내부SW';
|
||||||
|
|
||||||
createListView(container, {
|
createListView(container, {
|
||||||
title: isInternal ? '내부' : '외부',
|
title: isInternal ? '내부SW' : '외부SW',
|
||||||
dataSource: () => sortAssets(isInternal ? state.masterData.swInternal : state.masterData.swExternal),
|
dataSource: () => sortAssets(isInternal ? state.masterData.swInternal : state.masterData.swExternal),
|
||||||
searchKeys: ['PRODUCT_NAME', 'CURRENT_USER', 'CURRENT_DEPT', 'ASSET_TYPE'],
|
searchKeys: ['PRODUCT_NAME', 'CURRENT_USER', 'CURRENT_DEPT', 'ASSET_TYPE'],
|
||||||
emptyMessage: '검색 결과가 없습니다.',
|
emptyMessage: '검색 결과가 없습니다.',
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ export function renderSWTable(mainContent: HTMLElement) {
|
|||||||
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
|
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
|
||||||
}
|
}
|
||||||
} else if (state.activeCategory === 'sw') {
|
} else if (state.activeCategory === 'sw') {
|
||||||
if (tab === '외부' || tab === '내부') {
|
if (tab === '외부SW' || tab === '내부SW') {
|
||||||
renderSwList(container);
|
renderSwList(container);
|
||||||
} else {
|
} else {
|
||||||
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 소프트웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
|
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 소프트웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
|
||||||
|
|||||||
Reference in New Issue
Block a user