= ({ server, onClose }) => {
+ // ESC ํค๋ก ๋ชจ๋ฌ ๋ซ๊ธฐ
+ useEffect(() => {
+ const handleEsc = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ onClose();
+ }
+ };
+ window.addEventListener('keydown', handleEsc);
+ return () => {
+ window.removeEventListener('keydown', handleEsc);
+ };
+ }, [onClose]);
+
+ return (
+
+
e.stopPropagation()}>
+
+
{server.category} ({server.serverNo})
+
+
+
+
+
+ {/* Row 1 */}
+
+
+
{server.company}
+
+
+
+
{server.serverNo}
+
+
+ {/* Row 2 */}
+
+
+
{server.category}
+
+
+
+
{server.location}
+
+
+ {/* Row 3: ๊ด๋ฆฌ์ ์ถ๊ฐ */}
+
+
+
+ ์ : {server.managerPrimary}
+ ๋ถ: {server.managerSecondary}
+
+
+
+ {/* Row 4 */}
+
+
+
{server.ip1 || '-'}
+
+
+
+
{server.ip2 || '-'}
+
+
+ {/* Row 5 */}
+
+
+
+ {server.remoteAccess.length > 0 ? (
+
+ {server.remoteAccess.map((access, idx) => (
+
+ {access.tool}
+ {access.id}
+ |
+ PW: {access.pw}
+
+ ))}
+
+ ) : '-'}
+
+
+
+ {/* Row 6 */}
+
+
+
{server.model || '-'}
+
+
+
+
{server.os || '-'}
+
+
+ {/* Row 7 */}
+
+
+
{server.cpu || '-'}
+
+
+
+
{server.ram || '-'}
+
+
+ {/* Row 8 */}
+
+
+
{server.storage.length > 0 ? server.storage.join(' + ') : '-'}
+
+
+ {/* Row 9 */}
+
+
+
{server.purchaseDate || '-'}
+
+
+
+
{server.monitoring || '-'}
+
+
+ {/* Row 10 */}
+
+
+
{server.remarks || '-'}
+
+
+
+
+
+
+
+
+
+
| ํ ๋น๋ ์ฌ์ฉ์๊ฐ ์์ต๋๋ค. |
';
+ return;
+ }
+
+ tempSwUsers.forEach((user, idx) => {
+ const tr = document.createElement('tr');
+ tr.style.cssText = 'border-bottom: 1px solid var(--border); transition: background-color 0.2s;';
+
+ const deptTeam = [user.๋ถ์, user.ํ].filter(Boolean).join(' / ') || '-';
+ const attachIcon = user.์ ์ฒญ์๋ช
? `` : '-';
+
+ tr.innerHTML = `
+ ${user.๋ฒ์ธ} |
+ ${deptTeam} |
+ ${user.์ง์ || '-'} |
+ ${user.์ด๋ฆ} |
+ ${user.์ฌ์ฉ๊ธฐ๊ฐ || '-'} |
+ ${attachIcon} |
+
+
+
+ |
+ `;
+ tbody.appendChild(tr);
+ });
+
+ createIcons({ icons: { Edit2, X, Paperclip } });
+
+ tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
+ openUserEditModal(idx);
+ });
+ });
+
+ tbody.querySelectorAll('.btn-remove-user').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!);
+ tempSwUsers.splice(idx, 1);
+ renderUserList();
+ });
+ });
+}
+
+/**
+ * ์ฌ์ฉ์ ํ ๋น ๋ชจ๋ฌ ์ด๊ธฐ
+ */
+export function openSwUserModal(asset: SoftwareAsset) {
+ openModal('sw-user-modal');
+ currentSwUserAssetId = asset.id;
+ tempSwUsers = state.masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u}));
+ renderUserList();
+}
+
+/**
+ * ์ฌ์ฉ์ ์ถ๊ฐ/์์ ๋ชจ๋ฌ ์ด๊ธฐ
+ */
+function openUserEditModal(idx: number) {
+ const editModal = document.getElementById('sw-user-edit-modal')!;
+ editModal.classList.remove('hidden');
+ (document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx);
+
+ if (idx === -1) {
+ document.getElementById('sw-user-edit-modal-title')!.innerText = '์ ์ฌ์ฉ์ ์ถ๊ฐ';
+ (document.getElementById('new-user-๋ฒ์ธ') as HTMLSelectElement).value = 'ํ๋งฅ';
+ (document.getElementById('new-user-๋ถ์') as HTMLInputElement).value = '';
+ (document.getElementById('new-user-ํ') as HTMLInputElement).value = '';
+ (document.getElementById('new-user-์ง์') as HTMLInputElement).value = '';
+ (document.getElementById('new-user-์ด๋ฆ') as HTMLInputElement).value = '';
+ (document.getElementById('new-user-์ฌ์ฉ๊ธฐ๊ฐ') as HTMLInputElement).value = '';
+ (document.getElementById('new-user-์ ์ฒญ์') as HTMLInputElement).value = '';
+ document.getElementById('new-user-์ ์ฒญ์๋ช
')!.innerText = '';
+ } else {
+ document.getElementById('sw-user-edit-modal-title')!.innerText = '์ฌ์ฉ์ ์์ ';
+ const u = tempSwUsers[idx];
+ (document.getElementById('new-user-๋ฒ์ธ') as HTMLSelectElement).value = u.๋ฒ์ธ;
+ (document.getElementById('new-user-๋ถ์') as HTMLInputElement).value = u.๋ถ์;
+ (document.getElementById('new-user-ํ') as HTMLInputElement).value = u.ํ;
+ (document.getElementById('new-user-์ง์') as HTMLInputElement).value = u.์ง์;
+ (document.getElementById('new-user-์ด๋ฆ') as HTMLInputElement).value = u.์ด๋ฆ;
+ (document.getElementById('new-user-์ฌ์ฉ๊ธฐ๊ฐ') as HTMLInputElement).value = u.์ฌ์ฉ๊ธฐ๊ฐ;
+ (document.getElementById('new-user-์ ์ฒญ์') as HTMLInputElement).value = '';
+ document.getElementById('new-user-์ ์ฒญ์๋ช
')!.innerText = u.์ ์ฒญ์๋ช
? `๐${u.์ ์ฒญ์๋ช
}` : '';
+ }
+}
+
+/**
+ * ์ฌ์ฉ์ ์ถ๊ฐ/์์ ๋ด์ฉ ์ ์ฅ (์์ ๋ชฉ๋ก์ ๋ฐ์)
+ */
+function saveUserEdit() {
+ const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
+ const ๋ฒ์ธ = (document.getElementById('new-user-๋ฒ์ธ') as HTMLSelectElement).value;
+ const ๋ถ์ = (document.getElementById('new-user-๋ถ์') as HTMLInputElement).value;
+ const ํ = (document.getElementById('new-user-ํ') as HTMLInputElement).value;
+ const ์ง์ = (document.getElementById('new-user-์ง์') as HTMLInputElement).value;
+ const ์ด๋ฆ = (document.getElementById('new-user-์ด๋ฆ') as HTMLInputElement).value.trim();
+ const ์ฌ์ฉ๊ธฐ๊ฐ = (document.getElementById('new-user-์ฌ์ฉ๊ธฐ๊ฐ') as HTMLInputElement).value;
+
+ const fileInput = document.getElementById('new-user-์ ์ฒญ์') as HTMLInputElement;
+ let ์ ์ฒญ์๋ช
= '';
+ if (fileInput.files && fileInput.files.length > 0) {
+ ์ ์ฒญ์๋ช
= fileInput.files[0].name;
+ } else if (idx !== -1) {
+ ์ ์ฒญ์๋ช
= tempSwUsers[idx].์ ์ฒญ์๋ช
;
+ }
+
+ if (!์ด๋ฆ) { alert('์ด๋ฆ์ ์
๋ ฅํด์ฃผ์ธ์.'); return; }
+
+ if (idx === -1) {
+ tempSwUsers.push({
+ id: Math.random().toString(36).substring(2, 9),
+ swId: currentSwUserAssetId,
+ ๋ฒ์ธ, ๋ถ์, ํ, ์ง์, ์ด๋ฆ, ์ฌ์ฉ๊ธฐ๊ฐ, ์ ์ฒญ์๋ช
+ });
+ } else {
+ tempSwUsers[idx] = { ...tempSwUsers[idx], ๋ฒ์ธ, ๋ถ์, ํ, ์ง์, ์ด๋ฆ, ์ฌ์ฉ๊ธฐ๊ฐ, ์ ์ฒญ์๋ช
};
+ }
+
+ document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
+ renderUserList();
+}
diff --git a/src/components/Modal/StorageModal.ts b/src/components/Modal/StorageModal.ts
new file mode 100644
index 0000000..1c3a8d9
--- /dev/null
+++ b/src/components/Modal/StorageModal.ts
@@ -0,0 +1,108 @@
+import { state } from '../../state';
+import { HardwareAsset } from '../../excelHandler';
+import { openModal } from './BaseModal';
+
+/**
+ * ์คํ ๋ฆฌ์ง ๋ชจ๋ฌ ์ด๊ธฐํ ๋ฐ ๋ก์ง ์ ์ด
+ */
+export function initStorageModal(renderContent: () => void, closeModals: () => void) {
+ const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
+ const btnSaveStorage = document.getElementById('btn-save-storage-asset') as HTMLButtonElement;
+ const btnDeleteStorage = document.getElementById('btn-delete-storage-asset') as HTMLButtonElement;
+
+ // ์ ์ฅ ๋ฒํผ ์ด๋ฒคํธ
+ btnSaveStorage?.addEventListener('click', (e) => {
+ e.preventDefault();
+ if (!storageForm.checkValidity()) { storageForm.reportValidity(); return; }
+
+ const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
+ const fileInput = document.getElementById('storage-ํ์์') as HTMLInputElement;
+ const ํ์์๋ช
= fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('storage-ํ์์๋ช
') as HTMLElement).innerText.replace('๐', '');
+
+ const newAsset: HardwareAsset = {
+ id: id || Math.random().toString(36).substring(2, 9),
+ type: '์คํ ๋ฆฌ์ง',
+ ๋ฒ์ธ: (document.getElementById('storage-๋ฒ์ธ') as HTMLSelectElement).value,
+ storage์ ํ: (document.getElementById('storage-์ ํ') as HTMLSelectElement).value,
+ ์์ฐ์ฝ๋: (document.getElementById('storage-์์ฐ์ฝ๋') as HTMLInputElement).value,
+ ๋ช
์นญ: (document.getElementById('storage-๋ช
์นญ') as HTMLInputElement).value,
+ ์์น: (document.getElementById('storage-์์น') as HTMLInputElement).value,
+ ๊ด๋ฆฌ์: '',
+ IP์ฃผ์: (document.getElementById('storage-IP์ฃผ์') as HTMLInputElement).value,
+ MACaddress: (document.getElementById('storage-MAC์ฃผ์') as HTMLInputElement).value,
+ HW์ฌ์: '',
+ OS: '',
+ ๋ชจ๋ธ๋ช
: (document.getElementById('storage-๋ชจ๋ธ๋ช
') as HTMLInputElement).value,
+ ์ฉ๋: (document.getElementById('storage-์ฉ๋') as HTMLInputElement).value,
+ ๋ด๋น์_์ : (document.getElementById('storage-๋ด๋น์_์ ') as HTMLInputElement).value,
+ ๋ด๋น์_๋ถ: (document.getElementById('storage-๋ด๋น์_๋ถ') as HTMLInputElement).value,
+ ๊ตฌ๋งค์ผ: (document.getElementById('storage-๊ตฌ๋งค์ผ') as HTMLInputElement).value,
+ ๊ธ์ก: (document.getElementById('storage-๊ธ์ก') as HTMLInputElement).value,
+ ๋ฉํ์
์ฒด: (document.getElementById('storage-๋ฉํ์
์ฒด') as HTMLInputElement).value,
+ ํ์์๋ช
+ };
+
+ if (id) {
+ const idx = state.masterData.hw.findIndex(a => a.id === id);
+ if(idx !== -1) state.masterData.hw[idx] = newAsset;
+ } else {
+ state.masterData.hw.push(newAsset);
+ }
+
+ closeModals();
+ renderContent();
+ });
+
+ // ์ญ์ ๋ฒํผ ์ด๋ฒคํธ
+ btnDeleteStorage?.addEventListener('click', (e) => {
+ e.preventDefault();
+ const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
+ if (confirm('์ญ์ ํ์๊ฒ ์ต๋๊น?')) {
+ state.masterData.hw = state.masterData.hw.filter(a => a.id !== id);
+ closeModals();
+ renderContent();
+ }
+ });
+}
+
+/**
+ * ์คํ ๋ฆฌ์ง ์์ธ ๋ชจ๋ฌ ์ด๊ธฐ
+ * @param asset ์์ ์ ์์ฐ ๋ฐ์ดํฐ, ์ ๊ท ์ undefined
+ */
+export function openStorageModal(asset?: HardwareAsset) {
+ const storageModal = document.getElementById('storage-asset-modal') as HTMLDivElement;
+ const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
+ const deleteBtn = document.getElementById('btn-delete-storage-asset')!;
+
+ openModal('storage-asset-modal');
+ storageForm.reset();
+
+ if (asset) {
+ document.getElementById('storage-modal-title')!.textContent = '์คํ ๋ฆฌ์ง ์์ธ ์ ๋ณด ์์ ';
+ deleteBtn.style.display = 'block';
+
+ (document.getElementById('storage-asset-id') as HTMLInputElement).value = asset.id;
+ (document.getElementById('storage-๋ฒ์ธ') as HTMLSelectElement).value = asset.๋ฒ์ธ;
+ (document.getElementById('storage-์ ํ') as HTMLSelectElement).value = asset.storage์ ํ || 'NAS';
+ (document.getElementById('storage-์์ฐ์ฝ๋') as HTMLInputElement).value = asset.์์ฐ์ฝ๋;
+ (document.getElementById('storage-๋ช
์นญ') as HTMLInputElement).value = asset.๋ช
์นญ;
+ (document.getElementById('storage-์์น') as HTMLInputElement).value = asset.์์น || '';
+ (document.getElementById('storage-๋ชจ๋ธ๋ช
') as HTMLInputElement).value = asset.๋ชจ๋ธ๋ช
|| '';
+ (document.getElementById('storage-์ฉ๋') as HTMLInputElement).value = asset.์ฉ๋ || '';
+ (document.getElementById('storage-๋ด๋น์_์ ') as HTMLInputElement).value = asset.๋ด๋น์_์ || '';
+ (document.getElementById('storage-๋ด๋น์_๋ถ') as HTMLInputElement).value = asset.๋ด๋น์_๋ถ || '';
+ (document.getElementById('storage-IP์ฃผ์') as HTMLInputElement).value = asset.IP์ฃผ์ || '';
+ (document.getElementById('storage-MAC์ฃผ์') as HTMLInputElement).value = asset.MACaddress || '';
+ (document.getElementById('storage-๊ตฌ๋งค์ผ') as HTMLInputElement).value = asset.๊ตฌ๋งค์ผ || '';
+ (document.getElementById('storage-๊ธ์ก') as HTMLInputElement).value = asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : '';
+ (document.getElementById('storage-๋ฉํ์
์ฒด') as HTMLInputElement).value = asset.๋ฉํ์
์ฒด || '';
+ (document.getElementById('storage-ํ์์๋ช
') as HTMLElement).innerText = asset.ํ์์๋ช
? `๐${asset.ํ์์๋ช
}` : '';
+ } else {
+ document.getElementById('storage-modal-title')!.textContent = '์ ์คํ ๋ฆฌ์ง ์์ฐ ์ถ๊ฐ';
+ deleteBtn.style.display = 'none';
+ (document.getElementById('storage-asset-id') as HTMLInputElement).value = '';
+ (document.getElementById('storage-๋ฒ์ธ') as HTMLSelectElement).value = 'ํ๋งฅ';
+ (document.getElementById('storage-์ ํ') as HTMLSelectElement).value = 'NAS';
+ (document.getElementById('storage-ํ์์๋ช
') as HTMLElement).innerText = '';
+ }
+}
diff --git a/src/components/Sidebar.ts b/src/components/Sidebar.ts
new file mode 100644
index 0000000..ad9578f
--- /dev/null
+++ b/src/components/Sidebar.ts
@@ -0,0 +1,37 @@
+import { state } from '../state';
+
+export function initSidebar(renderContent: () => void) {
+ const navItems = document.querySelectorAll('.nav-list li');
+ const titleElement = document.getElementById('current-tab-title') as HTMLHeadingElement;
+ const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
+
+ navItems.forEach(item => {
+ item.addEventListener('click', () => {
+ // ํญ UI ์
๋ฐ์ดํธ
+ navItems.forEach(nav => nav.classList.remove('active'));
+ item.classList.add('active');
+
+ // ์ํ ์
๋ฐ์ดํธ
+ state.activeCategory = item.getAttribute('data-category') as 'hw' | 'sw';
+ state.activeSubTab = item.getAttribute('data-tab') || '๋์๋ณด๋';
+
+ // ํ์ดํ ์
๋ฐ์ดํธ (Deep Green ํฌ์ธํธ ์ปฌ๋ฌ ์ ์ง)
+ const catName = state.activeCategory === 'hw' ? 'ํ๋์จ์ด' : '์ํํธ์จ์ด';
+ if (titleElement) {
+ titleElement.textContent = `${catName} / ${state.activeSubTab}`;
+ }
+
+ // ์ถ๊ฐ ๋ฒํผ ๋
ธ์ถ ์ฌ๋ถ (๋์๋ณด๋์์๋ ์จ๊น)
+ if (btnAddAsset) {
+ if (state.activeSubTab === '๋์๋ณด๋') {
+ btnAddAsset.classList.add('hidden');
+ } else {
+ btnAddAsset.classList.remove('hidden');
+ }
+ }
+
+ // ํ๋ฉด ๋ฆฌ๋ ๋๋ง
+ renderContent();
+ });
+ });
+}
diff --git a/src/main.ts b/src/main.ts
index bd7d726..9dceb60 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,1071 +1,66 @@
import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } from 'lucide';
-import { MasterAssetData, HardwareAsset, SoftwareAsset, downloadTemplate, exportToExcel, parseExcel } from './excelHandler';
-import { generateDummyData } from './dummyDataGenerator';
+import { downloadTemplate, exportToExcel, parseExcel } from './excelHandler';
+import { state } from './state';
+import { initSidebar } from './components/Sidebar';
+import { initBaseModal } from './components/Modal/BaseModal';
+import { initPCModal, openPcModal } from './components/Modal/PCModal';
+import { initHWModal, openHwModal } from './components/Modal/HWModal';
+import { initStorageModal, openStorageModal } from './components/Modal/StorageModal';
+import { initSWModal, openSwModal } from './components/Modal/SWModal';
+import { initSWUserModal, openSwUserModal } from './components/Modal/SWUserModal';
+import { renderDashboard } from './views/DashboardView';
+import { renderTable } from './views/AssetTableView';
declare var Chart: any;
-let activeCharts: any[] = [];
-
-// --- State Management ---
-let masterData: MasterAssetData = generateDummyData();
-let activeCategory: 'hw' | 'sw' = 'hw';
-let activeSubTab: string = '๋์๋ณด๋';
-
// --- DOM Elements ---
const mainContent = document.getElementById('main-content') as HTMLElement;
-const titleElement = document.getElementById('current-tab-title') as HTMLHeadingElement;
const uploadInput = document.getElementById('excel-upload') as HTMLInputElement;
-
const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
const btnDownloadTemp = document.getElementById('btn-download-template') as HTMLButtonElement;
const btnExport = document.getElementById('btn-export-excel') as HTMLButtonElement;
-// Nav items
-const navItems = document.querySelectorAll('.nav-list li');
-
-// Modal Elements
-const hwModal = document.getElementById('hw-asset-modal') as HTMLDivElement;
-const swModal = document.getElementById('sw-asset-modal') as HTMLDivElement;
-const pcModal = document.getElementById('pc-asset-modal') as HTMLDivElement;
-const storageModal = document.getElementById('storage-asset-modal') as HTMLDivElement;
-const hwForm = document.getElementById('hw-asset-form') as HTMLFormElement;
-const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
-const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
-const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
-
-const dashboardDetailModal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
-const btnCloseDashboardDetail = document.getElementById('btn-close-dashboard-detail') as HTMLButtonElement;
-btnCloseDashboardDetail?.addEventListener('click', () => {
- dashboardDetailModal.classList.add('hidden');
-});
-
// Initialize Icons
createIcons({
icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 }
});
-// --- Navigation Logic ---
-navItems.forEach(item => {
- item.addEventListener('click', (e) => {
- // ํญ UI ์
๋ฐ์ดํธ
- navItems.forEach(nav => nav.classList.remove('active'));
- item.classList.add('active');
+// Initialize Components
+const { closeAllModals } = initBaseModal();
+initSidebar(renderContent);
+initPCModal(renderContent, closeAllModals);
+initHWModal(renderContent, closeAllModals);
+initStorageModal(renderContent, closeAllModals);
+initSWModal(renderContent, closeAllModals);
+initSWUserModal(renderContent, closeAllModals);
- // ์ํ ์
๋ฐ์ดํธ
- activeCategory = item.getAttribute('data-category') as 'hw' | 'sw';
- activeSubTab = item.getAttribute('data-tab') || '๋์๋ณด๋';
-
- // ํ์ดํ ์
๋ฐ์ดํธ
- const catName = activeCategory === 'hw' ? 'ํ๋์จ์ด' : '์ํํธ์จ์ด';
- titleElement.textContent = `${catName} / ${activeSubTab}`;
-
- // ์ถ๊ฐ ๋ฒํผ ๋
ธ์ถ ์ฌ๋ถ
- if (activeSubTab === '๋์๋ณด๋') {
- btnAddAsset.classList.add('hidden');
- } else {
- btnAddAsset.classList.remove('hidden');
- }
-
- renderContent();
- });
-});
-
-// --- Render Logic ---
-function renderContent() {
- mainContent.innerHTML = ''; // Clear
-
- if (activeSubTab === '๋์๋ณด๋') {
- renderDashboard();
- } else {
- renderTable();
- }
-}
-
-function isHwIdle(a: HardwareAsset) {
- if (a.type === '๊ฐ์ธPC') return !a.์ฌ์ฉ์ || a.์ฌ์ฉ์.trim() === '' || a.์ฌ์ฉ์.trim() === '-';
- if (a.type === '์คํ ๋ฆฌ์ง') return !a.๋ด๋น์_์ || a.๋ด๋น์_์ .trim() === '' || a.๋ด๋น์_์ .trim() === '-';
- return !a.๊ด๋ฆฌ์ || a.๊ด๋ฆฌ์.trim() === '' || a.๊ด๋ฆฌ์.trim() === '-';
-}
-
-function getHwAgeYears(a: HardwareAsset) {
- if (!a.๊ตฌ๋งค์ผ) return 0;
- return (Date.now() - new Date(a.๊ตฌ๋งค์ผ).getTime()) / (1000 * 60 * 60 * 24 * 365.25);
-}
-
-function isSWExpiring(sw: SoftwareAsset) {
- if (sw.type === '๊ตฌ๋
SW' && sw.๊ตฌ๋
์ผ) {
- const parts = sw.๊ตฌ๋
์ผ.split('~');
- if (parts.length > 1) {
- const endStr = parts[1].trim();
- const endMs = new Date(endStr.replace(/\\./g, '-')).getTime();
- const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
- return diffDays >= 0 && diffDays <= 30;
- }
- } else if (sw.type === '์๊ตฌSW' && sw.๋น๊ณ && sw.๋น๊ณ .includes('์ ์ง๋ณด์: ~')) {
- const endStr = sw.๋น๊ณ .split('~')[1].trim();
- const endMs = new Date(endStr.replace(/\\./g, '-')).getTime();
- const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
- return diffDays >= 0 && diffDays <= 30;
- }
- return false;
-}
-
-function openDashboardDetail(title: string, list: HardwareAsset[]) {
- const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
- const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
- const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
- const thead = tbody.closest('table')!.querySelector('thead')!;
-
- titleEl.textContent = title;
- thead.innerHTML = `| No | ์ ํ | ์์ฐ์ฝ๋ | ๋ช
์นญ/๋ชจ๋ธ | ์์น | ๋ด๋น/์ฌ์ฉ์ | ๊ตฌ๋งค์ผ | ๊ธ์ก |
|---|
`;
- tbody.innerHTML = '';
- if (list.length === 0) {
- tbody.innerHTML = `| ํด๋น ์กฐ๊ฑด์ ์์ฐ์ด ์์ต๋๋ค. |
`;
- } else {
- list.forEach((asset, idx) => {
- let manager = asset.๊ด๋ฆฌ์ || asset.์ฌ์ฉ์ || asset.๋ด๋น์_์ || '-';
- let name = asset.๋ช
์นญ || asset.๋ชจ๋ธ๋ช
|| '-';
- let typeDisplay = asset.type === '์ ์ฐ๋นํ' ? `์ ์ฐ๋นํ(${asset.๋นํ์ ํ||'-'})` : asset.type;
-
- const tr = document.createElement('tr');
- tr.innerHTML = `
- ${idx+1} |
- ${typeDisplay} |
- ${asset.์์ฐ์ฝ๋} |
- ${name} |
- ${asset.์์น||'-'} |
- ${manager} |
- ${asset.๊ตฌ๋งค์ผ||'-'} |
- ${asset.๊ธ์ก||'-'} |
- `;
- tbody.appendChild(tr);
- });
- }
- modal.classList.remove('hidden');
-}
-
-function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
- const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
- const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
- const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
- const thead = tbody.closest('table')!.querySelector('thead')!;
-
- titleEl.textContent = title;
- thead.innerHTML = `| No | ์ ํ | ๋ฒ์ธ | ์ ํ๋ช
| ๊ตฌ๋
์ผ/๋น๊ณ | ์๋ | ๊ธ์ก |
|---|
`;
- tbody.innerHTML = '';
- if (list.length === 0) {
- tbody.innerHTML = `| ํด๋น ์กฐ๊ฑด์ ์ํํธ์จ์ด๊ฐ ์์ต๋๋ค. |
`;
- } else {
- list.forEach((sw, idx) => {
- const tr = document.createElement('tr');
- tr.innerHTML = `
- ${idx+1} |
- ${sw.type === '๊ตฌ๋
SW' ? '๊ตฌ๋
' : '์๊ตฌ'} |
- ${sw.๋ฒ์ธ||'-'} |
- ${sw.์ ํ๋ช
||'-'} |
- ${sw.๊ตฌ๋
์ผ || sw.๋น๊ณ || '-'} |
- ${sw.์๋||'-'} |
- ${sw.๊ธ์ก||'-'} |
- `;
- tbody.appendChild(tr);
- });
- }
- modal.classList.remove('hidden');
-}
-
-function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
- const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
- const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
- const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
- const thead = tbody.closest('table')!.querySelector('thead')!;
-
- titleEl.textContent = title;
- thead.innerHTML = `| No | ๋ฒ์ธ | ์ ํ๋ช
| ์๋ | ์ฌ์ฉ์ค | ์ฌ์ฉ๊ฐ๋ฅ | ๊ตฌ๋งค์ผ | ๊ธ์ก |
|---|
`;
- tbody.innerHTML = '';
- if (list.length === 0) {
- tbody.innerHTML = `| ํด๋น ์ ํ์ ์ํํธ์จ์ด๊ฐ ์์ต๋๋ค. |
`;
- } else {
- list.forEach((sw, idx) => {
- const assigned = masterData.swUsers.filter(u => u.swId === sw.id).length;
- const qty = typeof sw.์๋ === 'number' ? sw.์๋ : parseInt(sw.์๋ || '0', 10);
- const available = qty - assigned;
- const availColor = available > 0 ? 'var(--dash-primary)' : 'var(--dash-danger)';
-
- const tr = document.createElement('tr');
- tr.innerHTML = `
- ${idx+1} |
- ${sw.๋ฒ์ธ||'-'} |
- ${sw.์ ํ๋ช
||'-'} |
- ${qty} |
- ${assigned} |
- ${available} |
- ${sw.๊ตฌ๋งค์ผ||'-'} |
- ${sw.๊ธ์ก||'-'} |
- `;
- tbody.appendChild(tr);
- });
- }
- modal.classList.remove('hidden');
-}
-
-function renderDashboard() {
- mainContent.innerHTML = '';
-
- activeCharts.forEach(c => c.destroy());
- activeCharts = [];
-
- if (activeCategory === 'hw') {
- // 1. Data Aggregation
- const types = ['๊ฐ์ธPC', '์๋ฒ', '์คํ ๋ฆฌ์ง', '์ ์ฐ๋นํ'];
- const units = ['๋', '๋', '๋', '๊ฐ'];
- const groups: any = {};
- types.forEach(t => {
- groups[t] = {
- idle: [], active: [],
- aged: [], normal: []
- };
- });
-
- masterData.hw.forEach(a => {
- if (!groups[a.type]) return;
- if (isHwIdle(a)) groups[a.type].idle.push(a);
- else groups[a.type].active.push(a);
-
- const ageY = getHwAgeYears(a);
- const isAged = a.type === '์ ์ฐ๋นํ' ? ageY >= 3 : ageY >= 5;
- if (isAged) groups[a.type].aged.push(a);
- else groups[a.type].normal.push(a);
- });
-
- const counts = types.map(t => groups[t].idle.length + groups[t].active.length);
-
- // ์ฌ์ฉํํฉ ์นด๋ ์์ฑ
- let usageCards = '';
- types.forEach((t, i) => {
- const total = groups[t].idle.length + groups[t].active.length;
- const used = groups[t].active.length;
- const per = total > 0 ? Math.round((used / total) * 100) : 0;
- const barColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
- const perColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
- const badge = per >= 50
- ? `์ ์ฌ์ฉํ๊ณ ์์ด์
`
- : `์ ๊ฒ์ด ํ์ํฉ๋๋ค
`;
-
- usageCards += `
-
-
- ${t} ์ฌ์ฉํํฉ
-
-
- ${total}${units[i]} ์ค ${used}${units[i]} ์ฌ์ฉ ์ค ยท ์ ํด ${groups[t].idle.length}${units[i]}
-
-
-
-
-
-
- ${t} ๋
ธํํ ํํฉ
- ${threshold} ์ด๊ณผ
-
-
- ์ ์ฒด ${total}${units[i]} ์ค ${agedCount}${units[i]} ๋
ธํ ์ฅ๋น
-
-
${agedCount}${units[i]}
-
-
-
์ฌ์ฉํํฉ
-
- ${usageCards}
-
-
- ๋
ธํํ ์์ฐ ๋น์จ
-
- ${agedCards}
-
- `;
-
- // HW ์นด๋ ํด๋ฆญ ์ด๋ฒคํธ ๋ฐ์ธ๋ฉ
- mainContent.querySelectorAll('[data-action="idle"]').forEach(card => {
- card.addEventListener('click', () => {
- const t = card.getAttribute('data-type')!;
- openDashboardDetail(`[${t}] ์ ํด ์์ฐ ๋ชฉ๋ก`, groups[t].idle);
- });
- });
- mainContent.querySelectorAll('[data-action="aged"]').forEach(card => {
- card.addEventListener('click', () => {
- const t = card.getAttribute('data-type')!;
- openDashboardDetail(`[${t}] ๋
ธํ ์ฅ๋น ๋ชฉ๋ก`, groups[t].aged);
- });
- });
-
- } else {
- // S/W Dashboard
- let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
- let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
-
- masterData.sw.forEach(sw => {
- const assigned = masterData.swUsers.filter(u => u.swId === sw.id).length;
- const qty = typeof sw.์๋ === 'number' ? sw.์๋ : parseInt(sw.์๋||'0', 10);
-
- if (sw.type === '๊ตฌ๋
SW') {
- subQty += qty; subUsed += assigned; subTotal++;
- if (isSWExpiring(sw)) subExp++;
- } else {
- permQty += qty; permUsed += assigned; permTotal++;
- if (isSWExpiring(sw)) permExp++;
- }
- });
-
- const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
- const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
- const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
- const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
-
- // ์ํ ๋ฑ์ง (50% ๋ฏธ๋ง์ด๋ฉด ๋นจ๊ฐ์ ๊ฒฝ๊ณ )
- const subBadge = subPer >= 50
- ? `์ ์ฌ์ฉํ๊ณ ์์ด์
`
- : `์ ๊ฒ์ด ํ์ํฉ๋๋ค
`;
- const permBadge = permPer >= 50
- ? `์ ์ฌ์ฉํ๊ณ ์์ด์
`
- : `์ ๊ฒ์ด ํ์ํฉ๋๋ค
`;
-
- const subBarColor = subPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
- const permBarColor = permPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
- const subPerColor = subPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
- const permPerColor = permPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
-
- mainContent.innerHTML = `
-
-
-
- ๊ตฌ๋
์ํํธ์จ์ด ์ฌ์ฉ์ ๋ณด
-
-
- ${subQty}๊ฐ์ ์ ํ ์ค ${subUsed}๊ฐ ์ฌ์ฉ ์ค
-
-
-
- ${subPer}%
-
- ${subBadge}
-
-
-
-
-
-
- ์๊ตฌ ์ํํธ์จ์ด ์ฌ์ฉ์ ๋ณด
-
-
- ${permQty}๊ฐ์ ์ ํ ์ค ${permUsed}๊ฐ ์ฌ์ฉ ์ค
-
-
-
- ${permPer}%
-
- ${permBadge}
-
-
-
-
-
-
-
- ๊ตฌ๋
SW ๋ง๋ฃ ์์
-
-
- 30์ผ ์ด๋ด์ ${subTotal}๊ฐ์ ์ ํ ์ค ${subExp}๊ฐ ๋ง๋ฃ ์์
-
-
${subExp}๊ฐ
-
-
-
-
-
-
-
- ์ ์ง๋ณด์ ๋ง๋ฃ ์์
-
-
- 30์ผ ์ด๋ด์ ${permTotal}๊ฐ์ ์ ํ ์ค ${permExp}๊ฐ ๋ง๋ฃ ์์
-
-
${permExp}๊ฐ
-
-
-
-
- | No | ๋ฒ์ธ | ์์ฐ์ฝ๋ | ์ฌ์ฉ์ |
- ์์น | CPU | GPU | RAM |
- SSD1 | SSD2 | HDD1 | HDD2 |
- ๊ตฌ๋งค์ผ | ๊ธ์ก | ๋ฉํ์
์ฒด | ํ์์ | ๊ด๋ฆฌ |
-
-
-
- `;
- container.appendChild(table);
- mainContent.appendChild(container);
-
- const tbody = document.getElementById('dynamic-tbody')!;
- if (list.length === 0) {
- tbody.innerHTML = `| ๋ฑ๋ก๋ [${activeSubTab}] ์์ฐ์ด ์์ต๋๋ค. |
`;
- return;
- }
-
- list.forEach((asset, idx) => {
- const tr = document.createElement('tr');
- tr.style.cursor = 'pointer';
- tr.innerHTML = `
- ${idx + 1} | ${asset.๋ฒ์ธ} | ${asset.์์ฐ์ฝ๋} | ${asset.์ฌ์ฉ์||''} |
- ${asset.์์น||''} | ${asset.CPU||''} | ${asset.GPU||''} | ${asset.RAM||''} |
- ${asset.SSD1||'-'} | ${asset.SSD2||'-'} | ${asset.HDD1||'-'} | ${asset.HDD2||'-'} |
- ${asset.๊ตฌ๋งค์ผ||''} |
- ${asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : ''} |
- ${asset.๋ฉํ์
์ฒด||''} |
- ${asset.ํ์์๋ช
? `` : '-'} |
- |
- `;
- tr.addEventListener('click', (e) => {
- if ((e.target as HTMLElement).tagName.toLowerCase() === 'button') return;
- openPcModal(asset);
- });
- tr.querySelector('.btn-edit')?.addEventListener('click', () => openPcModal(asset));
- tbody.appendChild(tr);
- });
- } else if (activeSubTab === '์คํ ๋ฆฌ์ง') {
- table.innerHTML = `
-
-
- | No | ๋ฒ์ธ | ์ ํ | ์์ฐ์ฝ๋ | ๋ช
์นญ |
- ์์น | ๋ชจ๋ธ๋ช
| ์ฉ๋ | ๋ด๋น์(์ ) | ๋ด๋น์(๋ถ) |
- IP์ฃผ์ | MAC ์ฃผ์ |
- ๊ตฌ๋งค์ผ | ๊ธ์ก | ๋ฉํ์
์ฒด | ํ์์ | ๊ด๋ฆฌ |
-
-
-
- `;
- container.appendChild(table);
- mainContent.appendChild(container);
-
- const tbody = document.getElementById('dynamic-tbody')!;
- if (list.length === 0) {
- tbody.innerHTML = `| ๋ฑ๋ก๋ [${activeSubTab}] ์์ฐ์ด ์์ต๋๋ค. |
`;
- return;
- }
-
- list.forEach((asset, idx) => {
- const tr = document.createElement('tr');
- tr.style.cursor = 'pointer';
- tr.innerHTML = `
- ${idx + 1} | ${asset.๋ฒ์ธ} | ${asset.storage์ ํ||''} | ${asset.์์ฐ์ฝ๋} | ${asset.๋ช
์นญ} |
- ${asset.์์น||''} | ${asset.๋ชจ๋ธ๋ช
||''} | ${asset.์ฉ๋||''} | ${asset.๋ด๋น์_์ ||''} | ${asset.๋ด๋น์_๋ถ||''} |
- ${asset.IP์ฃผ์||''} | ${asset.MACaddress||''} |
- ${asset.๊ตฌ๋งค์ผ||''} |
- ${asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : ''} |
- ${asset.๋ฉํ์
์ฒด||''} |
- ${asset.ํ์์๋ช
? `` : '-'} |
- |
- `;
- tr.addEventListener('click', (e) => {
- if ((e.target as HTMLElement).tagName.toLowerCase() === 'button') return;
- openStorageModal(asset);
- });
- tr.querySelector('.btn-edit')?.addEventListener('click', () => openStorageModal(asset));
- tbody.appendChild(tr);
- });
- } else {
- table.innerHTML = `
-
-
- | No | ๋ฒ์ธ |
- ${activeSubTab === '์ ์ฐ๋นํ' ? '์ ํ | ' : ''}
- ์์ฐ์ฝ๋ | ๋ช
์นญ |
- ์์น | ๊ด๋ฆฌ์ | IP์ฃผ์ | MAC ์ฃผ์ |
- H/W ์ฌ์ | OS |
- ๊ตฌ๋งค์ผ | ๊ธ์ก | ๋ฉํ์
์ฒด | ํ์์ | ๊ด๋ฆฌ |
-
-
-
- `;
- container.appendChild(table);
- mainContent.appendChild(container);
-
- const tbody = document.getElementById('dynamic-tbody')!;
- if (list.length === 0) {
- tbody.innerHTML = `| ๋ฑ๋ก๋ [${activeSubTab}] ์์ฐ์ด ์์ต๋๋ค. |
`;
- return;
- }
-
- list.forEach((asset, idx) => {
- const tr = document.createElement('tr');
- tr.style.cursor = 'pointer';
- tr.innerHTML = `
- ${idx + 1} | ${asset.๋ฒ์ธ} |
- ${activeSubTab === '์ ์ฐ๋นํ' ? `${asset.๋นํ์ ํ||'-'} | ` : ''}
- ${asset.์์ฐ์ฝ๋} | ${asset.๋ช
์นญ} |
- ${asset.์์น} | ${asset.๊ด๋ฆฌ์} | ${asset.IP์ฃผ์} | ${asset.MACaddress} |
- ${asset.HW์ฌ์} |
- ${asset.OS} |
- ${asset.๊ตฌ๋งค์ผ||''} |
- ${asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : ''} |
- ${asset.๋ฉํ์
์ฒด||''} |
- ${asset.ํ์์๋ช
? `` : '-'} |
- |
- `;
- tr.addEventListener('click', (e) => {
- if ((e.target as HTMLElement).tagName.toLowerCase() === 'button') return;
- openHwModal(asset);
- });
- tr.querySelector('.btn-edit')?.addEventListener('click', () => openHwModal(asset));
- tbody.appendChild(tr);
- });
- }
-
- } else {
- // SW
- const list = masterData.sw.filter(a => a.type === activeSubTab);
-
- // Header
- let theadHTML = '';
- if (activeSubTab === '๊ตฌ๋
SW') {
- theadHTML = `
- | No | ๋ฒ์ธ | ์ ํ๋ช
| ๊ตฌ๋งค์ผ | ๊ตฌ๋
์ผ |
- ๊ธ์ก | ์๋ | ์ฌ์ฉ๊ฐ๋ฅ | ๊ณ์ ๋ช
| ๋ฉํ์
์ฒด | ๋น๊ณ | ๊ด๋ฆฌ |
-
`;
- } else {
- theadHTML = `
- | No | ๋ฒ์ธ | ์ ํ๋ช
| ๊ตฌ๋งค์ผ | ์ ์ง๋ณด์ |
- ๊ธ์ก | ์๋ | ์ฌ์ฉ๊ฐ๋ฅ | ๊ณ์ ๋ช
| ๋ฉํ์
์ฒด | ๋น๊ณ | ๊ด๋ฆฌ |
-
`;
- }
-
- table.innerHTML = `
- ${theadHTML}
-
- `;
- container.appendChild(table);
- mainContent.appendChild(container);
-
- const tbody = document.getElementById('dynamic-tbody')!;
- if (list.length === 0) {
- tbody.innerHTML = `| ๋ฑ๋ก๋ [${activeSubTab}] ์ ๋ณด๊ฐ ์์ต๋๋ค. |
`;
- createIcons({ icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Mouse, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } });
- return;
- }
-
- list.forEach((asset, idx) => {
- const assignedUsers = masterData.swUsers.filter(u => u.swId === asset.id);
- const available = asset.์๋ - assignedUsers.length;
-
- const tr = document.createElement('tr');
- tr.style.cursor = 'pointer';
-
- let middleRowHTML = '';
- if (activeSubTab === '๊ตฌ๋
SW') {
- middleRowHTML = `${asset.๊ตฌ๋
์ผ||''} | `;
- } else {
- middleRowHTML = `${asset.์ ์ง๋ณด์์ฌ๋ถ ? 'Y' : 'N'} | `;
- }
-
- tr.innerHTML = `
- ${idx + 1} |
- ${asset.๋ฒ์ธ} |
- ${asset.์ ํ๋ช
} |
- ${asset.๊ตฌ๋งค์ผ||''} |
- ${middleRowHTML}
- ${asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : ''} |
- ${asset.์๋} |
- ${available} |
- ${asset.๊ณ์ ๋ช
||''} |
- ${asset.๋ฉํ์
์ฒด||''} |
- ${asset.๋น๊ณ ||''} |
-
-
-
- |
- `;
- tr.addEventListener('click', (e) => {
- const target = e.target as HTMLElement;
- if (target.tagName.toLowerCase() === 'button' || target.closest('button')) return;
- openSwModal(asset);
- });
- tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
- tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));
- tbody.appendChild(tr);
- });
- }
-
- // BUG FIX: initialize icons for newly inserted DOM blocks
- createIcons({ icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Mouse, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } });
-}
-
-// --- Modals ---
-function closeModals() {
- hwModal.classList.add('hidden');
- swModal.classList.add('hidden');
- pcModal.classList.add('hidden');
- storageModal.classList.add('hidden');
- document.getElementById('sw-user-modal')?.classList.add('hidden');
- document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
-}
-
-document.querySelectorAll('.btn-icon, #btn-cancel-hw-modal, #btn-cancel-sw-modal, #btn-cancel-pc-modal, #btn-cancel-storage-modal').forEach(btn => {
- btn.addEventListener('click', closeModals);
-});
-
-// ESCํค, ์ธ๋ถํด๋ฆญ ๋ซ๊ธฐ
-window.addEventListener('keydown', (e) => {
- if (e.key === 'Escape') closeModals();
-});
-document.querySelectorAll('.modal-overlay').forEach(overlay => {
- overlay.addEventListener('click', (e) => {
- if (e.target === overlay) closeModals();
- });
+// Dashboard Detail ๋ซ๊ธฐ ๋ฒํผ (๊ณตํต ์ฒ๋ฆฌ์ฉ)
+const btnCloseDashboardDetail = document.getElementById('btn-close-dashboard-detail') as HTMLButtonElement;
+btnCloseDashboardDetail?.addEventListener('click', () => {
+ document.getElementById('dashboard-detail-modal')?.classList.add('hidden');
});
// Add Element Button
-btnAddAsset.addEventListener('click', () => {
- if (activeSubTab === '๋์๋ณด๋') return;
- if (activeCategory === 'hw') {
- if (activeSubTab === '๊ฐ์ธPC') {
- openPcModal();
- } else if (activeSubTab === '์คํ ๋ฆฌ์ง') {
- openStorageModal();
- } else {
- openHwModal();
- }
+btnAddAsset?.addEventListener('click', () => {
+ if (state.activeSubTab === '๋์๋ณด๋') return;
+ if (state.activeCategory === 'hw') {
+ if (state.activeSubTab === '๊ฐ์ธPC') openPcModal();
+ else if (state.activeSubTab === '์คํ ๋ฆฌ์ง') openStorageModal();
+ else openHwModal();
} else {
openSwModal();
}
});
-// HW Modal open logic
-function openHwModal(asset?: HardwareAsset) {
- hwModal.classList.remove('hidden');
- hwForm.reset();
- const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
-
- if (asset) {
- document.getElementById('hw-modal-title')!.textContent = '์์ฐ ์์ธ ์ ๋ณด ์์ ';
- deleteBtn.style.display = 'block';
-
- (document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
- (document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
- (document.getElementById('hw-๋ฒ์ธ') as HTMLInputElement).value = asset.๋ฒ์ธ;
- (document.getElementById('hw-์์ฐ์ฝ๋') as HTMLInputElement).value = asset.์์ฐ์ฝ๋;
- (document.getElementById('hw-๋ช
์นญ') as HTMLInputElement).value = asset.๋ช
์นญ;
- (document.getElementById('hw-์์น') as HTMLInputElement).value = asset.์์น;
- (document.getElementById('hw-๊ด๋ฆฌ์') as HTMLInputElement).value = asset.๊ด๋ฆฌ์;
- (document.getElementById('hw-IP์ฃผ์') as HTMLInputElement).value = asset.IP์ฃผ์;
- (document.getElementById('hw-MACaddress') as HTMLInputElement).value = asset.MACaddress;
- (document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS;
- (document.getElementById('hw-HW์ฌ์') as HTMLTextAreaElement).value = asset.HW์ฌ์;
- (document.getElementById('hw-๊ตฌ๋งค์ผ') as HTMLInputElement).value = asset.๊ตฌ๋งค์ผ || '';
- (document.getElementById('hw-๊ธ์ก') as HTMLInputElement).value = asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : '';
- (document.getElementById('hw-๋ฉํ์
์ฒด') as HTMLInputElement).value = asset.๋ฉํ์
์ฒด || '';
- (document.getElementById('hw-ํ์์๋ช
') as HTMLElement).innerText = asset.ํ์์๋ช
? `๐${asset.ํ์์๋ช
}` : '';
- (document.getElementById('hw-๋นํ์ ํ') as HTMLSelectElement).value = asset.๋นํ์ ํ || '๋
ธํธ๋ถ';
- } else {
- document.getElementById('hw-modal-title')!.textContent = `์ ${activeSubTab} ์์ฐ ์ถ๊ฐ`;
- deleteBtn.style.display = 'none';
- (document.getElementById('hw-asset-id') as HTMLInputElement).value = '';
- (document.getElementById('hw-asset-type') as HTMLInputElement).value = activeSubTab;
- (document.getElementById('hw-ํ์์๋ช
') as HTMLElement).innerText = '';
- (document.getElementById('hw-๋นํ์ ํ') as HTMLSelectElement).value = '๋
ธํธ๋ถ';
- }
-
- if (activeSubTab === '์ ์ฐ๋นํ') {
- document.getElementById('hw-๋นํ์ ํ-group')!.style.display = 'block';
- } else {
- document.getElementById('hw-๋นํ์ ํ-group')!.style.display = 'none';
- }
-}
-
-// PC Modal open logic
-function openPcModal(asset?: HardwareAsset) {
- pcModal.classList.remove('hidden');
- pcForm.reset();
- const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
-
- if (asset) {
- document.getElementById('pc-modal-title')!.textContent = '๊ฐ์ธPC ์์ธ ์ ๋ณด ์์ ';
- deleteBtn.style.display = 'block';
-
- (document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
- (document.getElementById('pc-๋ฒ์ธ') as HTMLSelectElement).value = asset.๋ฒ์ธ;
- (document.getElementById('pc-์์ฐ์ฝ๋') as HTMLInputElement).value = asset.์์ฐ์ฝ๋;
- (document.getElementById('pc-์ฌ์ฉ์') as HTMLInputElement).value = asset.์ฌ์ฉ์ || '';
- (document.getElementById('pc-์์น') as HTMLInputElement).value = asset.์์น || '';
- (document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
- (document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
- (document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
- (document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
- (document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
- (document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
- (document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
- (document.getElementById('pc-๊ตฌ๋งค์ผ') as HTMLInputElement).value = asset.๊ตฌ๋งค์ผ || '';
- (document.getElementById('pc-๊ธ์ก') as HTMLInputElement).value = asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : '';
- (document.getElementById('pc-๋ฉํ์
์ฒด') as HTMLInputElement).value = asset.๋ฉํ์
์ฒด || '';
- (document.getElementById('pc-ํ์์๋ช
') as HTMLElement).innerText = asset.ํ์์๋ช
? `๐${asset.ํ์์๋ช
}` : '';
- } else {
- document.getElementById('pc-modal-title')!.textContent = '์ ๊ฐ์ธPC ์์ฐ ์ถ๊ฐ';
- deleteBtn.style.display = 'none';
- (document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
- (document.getElementById('pc-๋ฒ์ธ') as HTMLSelectElement).value = 'ํ๋งฅ';
- (document.getElementById('pc-ํ์์๋ช
') as HTMLElement).innerText = '';
- }
-}
-
-// Storage Modal open logic
-function openStorageModal(asset?: HardwareAsset) {
- storageModal.classList.remove('hidden');
- storageForm.reset();
- const deleteBtn = document.getElementById('btn-delete-storage-asset')!;
-
- if (asset) {
- document.getElementById('storage-modal-title')!.textContent = '์คํ ๋ฆฌ์ง ์์ธ ์ ๋ณด ์์ ';
- deleteBtn.style.display = 'block';
-
- (document.getElementById('storage-asset-id') as HTMLInputElement).value = asset.id;
- (document.getElementById('storage-๋ฒ์ธ') as HTMLSelectElement).value = asset.๋ฒ์ธ;
- (document.getElementById('storage-์ ํ') as HTMLSelectElement).value = asset.storage์ ํ || 'NAS';
- (document.getElementById('storage-์์ฐ์ฝ๋') as HTMLInputElement).value = asset.์์ฐ์ฝ๋;
- (document.getElementById('storage-๋ช
์นญ') as HTMLInputElement).value = asset.๋ช
์นญ;
- (document.getElementById('storage-์์น') as HTMLInputElement).value = asset.์์น || '';
- (document.getElementById('storage-๋ชจ๋ธ๋ช
') as HTMLInputElement).value = asset.๋ชจ๋ธ๋ช
|| '';
- (document.getElementById('storage-์ฉ๋') as HTMLInputElement).value = asset.์ฉ๋ || '';
- (document.getElementById('storage-๋ด๋น์_์ ') as HTMLInputElement).value = asset.๋ด๋น์_์ || '';
- (document.getElementById('storage-๋ด๋น์_๋ถ') as HTMLInputElement).value = asset.๋ด๋น์_๋ถ || '';
- (document.getElementById('storage-IP์ฃผ์') as HTMLInputElement).value = asset.IP์ฃผ์ || '';
- (document.getElementById('storage-MAC์ฃผ์') as HTMLInputElement).value = asset.MACaddress || '';
- (document.getElementById('storage-๊ตฌ๋งค์ผ') as HTMLInputElement).value = asset.๊ตฌ๋งค์ผ || '';
- (document.getElementById('storage-๊ธ์ก') as HTMLInputElement).value = asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : '';
- (document.getElementById('storage-๋ฉํ์
์ฒด') as HTMLInputElement).value = asset.๋ฉํ์
์ฒด || '';
- (document.getElementById('storage-ํ์์๋ช
') as HTMLElement).innerText = asset.ํ์์๋ช
? `๐${asset.ํ์์๋ช
}` : '';
- } else {
- document.getElementById('storage-modal-title')!.textContent = '์ ์คํ ๋ฆฌ์ง ์์ฐ ์ถ๊ฐ';
- deleteBtn.style.display = 'none';
- (document.getElementById('storage-asset-id') as HTMLInputElement).value = '';
- (document.getElementById('storage-๋ฒ์ธ') as HTMLSelectElement).value = 'ํ๋งฅ';
- (document.getElementById('storage-์ ํ') as HTMLSelectElement).value = 'NAS';
- (document.getElementById('storage-ํ์์๋ช
') as HTMLElement).innerText = '';
- }
-}
-
-// SW Modal open logic
-function openSwModal(asset?: SoftwareAsset) {
- swModal.classList.remove('hidden');
- swForm.reset();
- const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
-
- const subGroup = document.getElementById('sw-๊ตฌ๋
์ผ-group')!;
- const permGroup = document.getElementById('sw-์ ์ง๋ณด์-group')!;
- if (activeSubTab === '๊ตฌ๋
SW') {
- subGroup.style.display = 'block';
- permGroup.style.display = 'none';
- } else {
- subGroup.style.display = 'none';
- permGroup.style.display = 'block';
- }
-
- if (asset) {
- document.getElementById('sw-modal-title')!.textContent = `${activeSubTab} ์์ธ ์ ๋ณด ์์ `;
- deleteBtn.style.display = 'block';
-
- (document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
- (document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
- (document.getElementById('sw-๋ฒ์ธ') as HTMLSelectElement).value = asset.๋ฒ์ธ;
- (document.getElementById('sw-์ ํ๋ช
') as HTMLInputElement).value = asset.์ ํ๋ช
;
- (document.getElementById('sw-๊ตฌ๋งค์ผ') as HTMLInputElement).value = asset.๊ตฌ๋งค์ผ || '';
- (document.getElementById('sw-๊ตฌ๋
์ผ') as HTMLInputElement).value = asset.๊ตฌ๋
์ผ || '';
- (document.getElementById('sw-์ ์ง๋ณด์์ฌ๋ถ') as HTMLInputElement).checked = !!asset.์ ์ง๋ณด์์ฌ๋ถ;
- (document.getElementById('sw-๊ธ์ก') as HTMLInputElement).value = asset.๊ธ์ก ? Number(asset.๊ธ์ก.replace(/,/g, '')).toLocaleString() : '';
- (document.getElementById('sw-์๋') as HTMLInputElement).value = String(asset.์๋);
- (document.getElementById('sw-๊ณ์ ๋ช
') as HTMLInputElement).value = asset.๊ณ์ ๋ช
|| '';
- (document.getElementById('sw-๋ฉํ์
์ฒด') as HTMLInputElement).value = asset.๋ฉํ์
์ฒด || '';
- (document.getElementById('sw-๋น๊ณ ') as HTMLInputElement).value = asset.๋น๊ณ || '';
- } else {
- document.getElementById('sw-modal-title')!.textContent = `์ ${activeSubTab} ์์ฐ ์ถ๊ฐ`;
- deleteBtn.style.display = 'none';
- (document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
- (document.getElementById('sw-asset-type') as HTMLInputElement).value = activeSubTab;
- (document.getElementById('sw-๋ฒ์ธ') as HTMLSelectElement).value = 'ํ๋งฅ';
- }
-}
-
-// HW Save
-document.getElementById('btn-save-hw-asset')?.addEventListener('click', (e) => {
- e.preventDefault();
- if (!hwForm.checkValidity()) { hwForm.reportValidity(); return; }
-
- const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
- const fileInput = document.getElementById('hw-ํ์์') as HTMLInputElement;
- const ํ์์๋ช
= fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('hw-ํ์์๋ช
') as HTMLElement).innerText.replace('๐', '');
-
- const newAsset: HardwareAsset = {
- id: id || Math.random().toString(36).substring(2, 9),
- type: (document.getElementById('hw-asset-type') as HTMLInputElement).value,
- ๋ฒ์ธ: (document.getElementById('hw-๋ฒ์ธ') as HTMLInputElement).value,
- ์์ฐ์ฝ๋: (document.getElementById('hw-์์ฐ์ฝ๋') as HTMLInputElement).value,
- ๋ช
์นญ: (document.getElementById('hw-๋ช
์นญ') as HTMLInputElement).value,
- ์์น: (document.getElementById('hw-์์น') as HTMLInputElement).value,
- ๊ด๋ฆฌ์: (document.getElementById('hw-๊ด๋ฆฌ์') as HTMLInputElement).value,
- IP์ฃผ์: (document.getElementById('hw-IP์ฃผ์') as HTMLInputElement).value,
- MACaddress: (document.getElementById('hw-MACaddress') as HTMLInputElement).value,
- OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
- HW์ฌ์: (document.getElementById('hw-HW์ฌ์') as HTMLTextAreaElement).value,
- ๊ตฌ๋งค์ผ: (document.getElementById('hw-๊ตฌ๋งค์ผ') as HTMLInputElement).value,
- ๊ธ์ก: (document.getElementById('hw-๊ธ์ก') as HTMLInputElement).value,
- ๋ฉํ์
์ฒด: (document.getElementById('hw-๋ฉํ์
์ฒด') as HTMLInputElement).value,
- ํ์์๋ช
,
- ๋นํ์ ํ: (document.getElementById('hw-asset-type') as HTMLInputElement).value === '์ ์ฐ๋นํ'
- ? (document.getElementById('hw-๋นํ์ ํ') as HTMLSelectElement).value : undefined
- };
-
- if (id) {
- const idx = masterData.hw.findIndex(a => a.id === id);
- if(idx !== -1) masterData.hw[idx] = newAsset;
- } else {
- masterData.hw.push(newAsset);
- }
- closeModals(); renderContent();
-});
-
-// PC Save
-document.getElementById('btn-save-pc-asset')?.addEventListener('click', (e) => {
- e.preventDefault();
- if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
-
- const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
- const fileInput = document.getElementById('pc-ํ์์') as HTMLInputElement;
- const ํ์์๋ช
= fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-ํ์์๋ช
') as HTMLElement).innerText.replace('๐', '');
-
- const newAsset: HardwareAsset = {
- id: id || Math.random().toString(36).substring(2, 9),
- type: '๊ฐ์ธPC',
- ๋ฒ์ธ: (document.getElementById('pc-๋ฒ์ธ') as HTMLSelectElement).value,
- ์์ฐ์ฝ๋: (document.getElementById('pc-์์ฐ์ฝ๋') as HTMLInputElement).value,
- ๋ช
์นญ: '',
- ์์น: (document.getElementById('pc-์์น') as HTMLInputElement).value,
- ๊ด๋ฆฌ์: '',
- IP์ฃผ์: '',
- MACaddress: '',
- HW์ฌ์: '',
- OS: '',
- ์ฌ์ฉ์: (document.getElementById('pc-์ฌ์ฉ์') as HTMLInputElement).value,
- CPU: (document.getElementById('pc-CPU') as HTMLInputElement).value,
- GPU: (document.getElementById('pc-GPU') as HTMLInputElement).value,
- RAM: (document.getElementById('pc-RAM') as HTMLInputElement).value,
- SSD1: (document.getElementById('pc-SSD1') as HTMLInputElement).value,
- SSD2: (document.getElementById('pc-SSD2') as HTMLInputElement).value,
- HDD1: (document.getElementById('pc-HDD1') as HTMLInputElement).value,
- HDD2: (document.getElementById('pc-HDD2') as HTMLInputElement).value,
- ๊ตฌ๋งค์ผ: (document.getElementById('pc-๊ตฌ๋งค์ผ') as HTMLInputElement).value,
- ๊ธ์ก: (document.getElementById('pc-๊ธ์ก') as HTMLInputElement).value,
- ๋ฉํ์
์ฒด: (document.getElementById('pc-๋ฉํ์
์ฒด') as HTMLInputElement).value,
- ํ์์๋ช
- };
-
- if (id) {
- const idx = masterData.hw.findIndex(a => a.id === id);
- if(idx !== -1) masterData.hw[idx] = newAsset;
- } else {
- masterData.hw.push(newAsset);
- }
- closeModals(); renderContent();
-});
-
-// Storage Save
-document.getElementById('btn-save-storage-asset')?.addEventListener('click', (e) => {
- e.preventDefault();
- if (!storageForm.checkValidity()) { storageForm.reportValidity(); return; }
-
- const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
- const fileInput = document.getElementById('storage-ํ์์') as HTMLInputElement;
- const ํ์์๋ช
= fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('storage-ํ์์๋ช
') as HTMLElement).innerText.replace('๐', '');
-
- const newAsset: HardwareAsset = {
- id: id || Math.random().toString(36).substring(2, 9),
- type: '์คํ ๋ฆฌ์ง',
- ๋ฒ์ธ: (document.getElementById('storage-๋ฒ์ธ') as HTMLSelectElement).value,
- storage์ ํ: (document.getElementById('storage-์ ํ') as HTMLSelectElement).value,
- ์์ฐ์ฝ๋: (document.getElementById('storage-์์ฐ์ฝ๋') as HTMLInputElement).value,
- ๋ช
์นญ: (document.getElementById('storage-๋ช
์นญ') as HTMLInputElement).value,
- ์์น: (document.getElementById('storage-์์น') as HTMLInputElement).value,
- ๊ด๋ฆฌ์: '',
- IP์ฃผ์: (document.getElementById('storage-IP์ฃผ์') as HTMLInputElement).value,
- MACaddress: (document.getElementById('storage-MAC์ฃผ์') as HTMLInputElement).value,
- HW์ฌ์: '',
- OS: '',
- ๋ชจ๋ธ๋ช
: (document.getElementById('storage-๋ชจ๋ธ๋ช
') as HTMLInputElement).value,
- ์ฉ๋: (document.getElementById('storage-์ฉ๋') as HTMLInputElement).value,
- ๋ด๋น์_์ : (document.getElementById('storage-๋ด๋น์_์ ') as HTMLInputElement).value,
- ๋ด๋น์_๋ถ: (document.getElementById('storage-๋ด๋น์_๋ถ') as HTMLInputElement).value,
- ๊ตฌ๋งค์ผ: (document.getElementById('storage-๊ตฌ๋งค์ผ') as HTMLInputElement).value,
- ๊ธ์ก: (document.getElementById('storage-๊ธ์ก') as HTMLInputElement).value,
- ๋ฉํ์
์ฒด: (document.getElementById('storage-๋ฉํ์
์ฒด') as HTMLInputElement).value,
- ํ์์๋ช
- };
-
- if (id) {
- const idx = masterData.hw.findIndex(a => a.id === id);
- if(idx !== -1) masterData.hw[idx] = newAsset;
- } else {
- masterData.hw.push(newAsset);
- }
- closeModals(); renderContent();
-});
-
-// SW Save
-document.getElementById('btn-save-sw-asset')?.addEventListener('click', (e) => {
- e.preventDefault();
- if (!swForm.checkValidity()) { swForm.reportValidity(); return; }
-
- const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
- const newAsset: SoftwareAsset = {
- id: id || Math.random().toString(36).substring(2, 9),
- type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
- ๋ฒ์ธ: (document.getElementById('sw-๋ฒ์ธ') as HTMLSelectElement).value,
- ์ ํ๋ช
: (document.getElementById('sw-์ ํ๋ช
') as HTMLInputElement).value,
- ๊ตฌ๋งค์ผ: (document.getElementById('sw-๊ตฌ๋งค์ผ') as HTMLInputElement).value,
- ๊ตฌ๋
์ผ: (document.getElementById('sw-๊ตฌ๋
์ผ') as HTMLInputElement).value,
- ์ ์ง๋ณด์์ฌ๋ถ: (document.getElementById('sw-์ ์ง๋ณด์์ฌ๋ถ') as HTMLInputElement).checked,
- ๊ธ์ก: (document.getElementById('sw-๊ธ์ก') as HTMLInputElement).value,
- ์๋: parseInt((document.getElementById('sw-์๋') as HTMLInputElement).value || '1', 10),
- ๊ณ์ ๋ช
: (document.getElementById('sw-๊ณ์ ๋ช
') as HTMLInputElement).value,
- ๋ฉํ์
์ฒด: (document.getElementById('sw-๋ฉํ์
์ฒด') as HTMLInputElement).value,
- ๋น๊ณ : (document.getElementById('sw-๋น๊ณ ') as HTMLInputElement).value,
- };
-
- if (id) {
- const idx = masterData.sw.findIndex(a => a.id === id);
- if(idx !== -1) masterData.sw[idx] = newAsset;
- } else {
- masterData.sw.push(newAsset);
- }
- closeModals(); renderContent();
-});
-
-// Deletes
-document.getElementById('btn-delete-hw-asset')?.addEventListener('click', (e) => {
- e.preventDefault();
- const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
- if (confirm('์ญ์ ํ์๊ฒ ์ต๋๊น?')) {
- masterData.hw = masterData.hw.filter(a => a.id !== id);
- closeModals(); renderContent();
- }
-});
-document.getElementById('btn-delete-pc-asset')?.addEventListener('click', (e) => {
- e.preventDefault();
- const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
- if (confirm('์ญ์ ํ์๊ฒ ์ต๋๊น?')) {
- masterData.hw = masterData.hw.filter(a => a.id !== id);
- closeModals(); renderContent();
- }
-});
-document.getElementById('btn-delete-storage-asset')?.addEventListener('click', (e) => {
- e.preventDefault();
- const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
- if (confirm('์ญ์ ํ์๊ฒ ์ต๋๊น?')) {
- masterData.hw = masterData.hw.filter(a => a.id !== id);
- closeModals(); renderContent();
- }
-});
-document.getElementById('btn-delete-sw-asset')?.addEventListener('click', (e) => {
- e.preventDefault();
- const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
- if (confirm('์ญ์ ํ์๊ฒ ์ต๋๊น?')) {
- masterData.sw = masterData.sw.filter(a => a.id !== id);
- closeModals(); renderContent();
- }
-});
-
// --- Excel Controls ---
-btnDownloadTemp.addEventListener('click', () => downloadTemplate());
-btnExport.addEventListener('click', () => exportToExcel(masterData));
+btnDownloadTemp?.addEventListener('click', () => downloadTemplate());
+btnExport?.addEventListener('click', () => exportToExcel(state.masterData));
-uploadInput.addEventListener('change', async (e) => {
+uploadInput?.addEventListener('change', async (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (!file) return;
try {
- masterData = await parseExcel(file);
+ state.masterData = await parseExcel(file);
renderContent();
alert('๋ชจ๋ ์ํธ ๋ฐ์ดํฐ ์ฐ๋ ์๋ฃ');
} catch (error) {
@@ -1076,161 +71,18 @@ uploadInput.addEventListener('change', async (e) => {
}
});
-// --- SW User Modal Logic ---
-const swUserModal = document.getElementById('sw-user-modal') as HTMLDivElement;
-const swUserEditModal = document.getElementById('sw-user-edit-modal') as HTMLDivElement;
-let currentSwUserAssetId: string = '';
-let tempSwUsers: import("./excelHandler").SWUser[] = [];
-
-function renderUserList() {
- const tbody = document.getElementById('user-list-body')!;
- tbody.innerHTML = '';
- if (tempSwUsers.length === 0) {
- tbody.innerHTML = '| ํ ๋น๋ ์ฌ์ฉ์๊ฐ ์์ต๋๋ค. |
';
- return;
- }
+/**
+ * ์ ์ญ ๋ ๋๋ง ํจ์ - ๊ฐ ์ปดํฌ๋ํธ์์ ํธ์ถํ์ฌ ํ๋ฉด์ ๊ฐฑ์ ํฉ๋๋ค.
+ */
+function renderContent() {
+ mainContent.innerHTML = ''; // ํ๋ฉด ์ด๊ธฐํ
- tempSwUsers.forEach((user, idx) => {
- const tr = document.createElement('tr');
- tr.style.cssText = 'border-bottom: 1px solid var(--border); transition: background-color 0.2s;';
- tr.addEventListener('mouseenter', () => tr.style.backgroundColor = 'var(--bg-light)');
- tr.addEventListener('mouseleave', () => tr.style.backgroundColor = 'transparent');
-
- // ๋ฒ์ธ, ๋ถ์/ํ, ์ง์, ์ด๋ฆ, ์ฌ์ฉ๊ธฐ๊ฐ, ์ฒจ๋ถํ์ผ, ๊ด๋ฆฌ
- const deptTeam = [user.๋ถ์, user.ํ].filter(Boolean).join(' / ') || '-';
- const attachIcon = user.์ ์ฒญ์๋ช
? `` : '-';
-
- tr.innerHTML = `
- ${user.๋ฒ์ธ} |
- ${deptTeam} |
- ${user.์ง์ || '-'} |
- ${user.์ด๋ฆ} |
- ${user.์ฌ์ฉ๊ธฐ๊ฐ || '-'} |
- ${attachIcon} |
-
-
-
- |
- `;
- tbody.appendChild(tr);
- });
-
- createIcons({ icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Mouse, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } });
-
- tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
- btn.addEventListener('click', (e) => {
- const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
- openUserEditModal(idx);
- });
- });
-
- tbody.querySelectorAll('.btn-remove-user').forEach(btn => {
- btn.addEventListener('click', (e) => {
- e.stopPropagation();
- const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!);
- tempSwUsers.splice(idx, 1);
- renderUserList();
- });
- });
-}
-
-function openSwUserModal(asset: SoftwareAsset) {
- swUserModal.classList.remove('hidden');
- currentSwUserAssetId = asset.id;
- tempSwUsers = masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u}));
- renderUserList();
-}
-
-function openUserEditModal(idx: number) {
- swUserEditModal.classList.remove('hidden');
- (document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx);
-
- if (idx === -1) {
- document.getElementById('sw-user-edit-modal-title')!.innerText = '์ ์ฌ์ฉ์ ์ถ๊ฐ';
- (document.getElementById('new-user-๋ฒ์ธ') as HTMLSelectElement).value = 'ํ๋งฅ';
- (document.getElementById('new-user-๋ถ์') as HTMLInputElement).value = '';
- (document.getElementById('new-user-ํ') as HTMLInputElement).value = '';
- (document.getElementById('new-user-์ง์') as HTMLInputElement).value = '';
- (document.getElementById('new-user-์ด๋ฆ') as HTMLInputElement).value = '';
- (document.getElementById('new-user-์ฌ์ฉ๊ธฐ๊ฐ') as HTMLInputElement).value = '';
- (document.getElementById('new-user-์ ์ฒญ์') as HTMLInputElement).value = '';
- document.getElementById('new-user-์ ์ฒญ์๋ช
')!.innerText = '';
+ if (state.activeSubTab === '๋์๋ณด๋') {
+ renderDashboard(mainContent);
} else {
- document.getElementById('sw-user-edit-modal-title')!.innerText = '์ฌ์ฉ์ ์์ ';
- const u = tempSwUsers[idx];
- (document.getElementById('new-user-๋ฒ์ธ') as HTMLSelectElement).value = u.๋ฒ์ธ;
- (document.getElementById('new-user-๋ถ์') as HTMLInputElement).value = u.๋ถ์;
- (document.getElementById('new-user-ํ') as HTMLInputElement).value = u.ํ;
- (document.getElementById('new-user-์ง์') as HTMLInputElement).value = u.์ง์;
- (document.getElementById('new-user-์ด๋ฆ') as HTMLInputElement).value = u.์ด๋ฆ;
- (document.getElementById('new-user-์ฌ์ฉ๊ธฐ๊ฐ') as HTMLInputElement).value = u.์ฌ์ฉ๊ธฐ๊ฐ;
- (document.getElementById('new-user-์ ์ฒญ์') as HTMLInputElement).value = ''; // file input cannot be programmatically set
- document.getElementById('new-user-์ ์ฒญ์๋ช
')!.innerText = u.์ ์ฒญ์๋ช
? `๐${u.์ ์ฒญ์๋ช
}` : '';
+ renderTable(mainContent);
}
}
-document.getElementById('btn-open-add-user')?.addEventListener('click', () => {
- openUserEditModal(-1);
-});
-
-document.getElementById('btn-save-edit-user')?.addEventListener('click', () => {
- const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
- const ๋ฒ์ธ = (document.getElementById('new-user-๋ฒ์ธ') as HTMLSelectElement).value;
- const ๋ถ์ = (document.getElementById('new-user-๋ถ์') as HTMLInputElement).value;
- const ํ = (document.getElementById('new-user-ํ') as HTMLInputElement).value;
- const ์ง์ = (document.getElementById('new-user-์ง์') as HTMLInputElement).value;
- const ์ด๋ฆ = (document.getElementById('new-user-์ด๋ฆ') as HTMLInputElement).value.trim();
- const ์ฌ์ฉ๊ธฐ๊ฐ = (document.getElementById('new-user-์ฌ์ฉ๊ธฐ๊ฐ') as HTMLInputElement).value;
-
- const fileInput = document.getElementById('new-user-์ ์ฒญ์') as HTMLInputElement;
- let ์ ์ฒญ์๋ช
= '';
- if (fileInput.files && fileInput.files.length > 0) {
- ์ ์ฒญ์๋ช
= fileInput.files[0].name;
- } else if (idx !== -1) {
- // Keep existing file if not changed
- ์ ์ฒญ์๋ช
= tempSwUsers[idx].์ ์ฒญ์๋ช
;
- }
-
- if (!์ด๋ฆ) { alert('์ด๋ฆ์ ์
๋ ฅํด์ฃผ์ธ์.'); return; }
-
- if (idx === -1) {
- tempSwUsers.push({
- id: Math.random().toString(36).substring(2, 9),
- swId: currentSwUserAssetId,
- ๋ฒ์ธ, ๋ถ์, ํ, ์ง์, ์ด๋ฆ, ์ฌ์ฉ๊ธฐ๊ฐ, ์ ์ฒญ์๋ช
- });
- } else {
- tempSwUsers[idx] = { ...tempSwUsers[idx], ๋ฒ์ธ, ๋ถ์, ํ, ์ง์, ์ด๋ฆ, ์ฌ์ฉ๊ธฐ๊ฐ, ์ ์ฒญ์๋ช
};
- }
-
- swUserEditModal.classList.add('hidden');
- renderUserList();
-});
-
-document.getElementById('btn-cancel-sw-user-edit')?.addEventListener('click', () => {
- swUserEditModal.classList.add('hidden');
-});
-document.getElementById('btn-close-sw-user-edit-modal')?.addEventListener('click', () => {
- swUserEditModal.classList.add('hidden');
-});
-
-document.getElementById('btn-save-sw-user-mapping')?.addEventListener('click', () => {
- // Remove existing mappings for this asset
- masterData.swUsers = masterData.swUsers.filter(u => u.swId !== currentSwUserAssetId);
- // Add updated mappings
- masterData.swUsers.push(...tempSwUsers);
-
- swUserModal.classList.add('hidden');
- renderContent();
-});
-
-document.getElementById('btn-cancel-sw-user-modal')?.addEventListener('click', () => {
- swUserModal.classList.add('hidden');
-});
-document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => {
- swUserModal.classList.add('hidden');
-});
-
-
// Initial Render
renderContent();
diff --git a/src/state.ts b/src/state.ts
new file mode 100644
index 0000000..9f72589
--- /dev/null
+++ b/src/state.ts
@@ -0,0 +1,23 @@
+import { MasterAssetData } from './excelHandler';
+import { generateDummyData } from './dummyDataGenerator';
+
+// --- State Definitions ---
+export interface AppState {
+ masterData: MasterAssetData;
+ activeCategory: 'hw' | 'sw';
+ activeSubTab: string;
+ activeCharts: any[];
+}
+
+// --- Initial State ---
+export const state: AppState = {
+ masterData: generateDummyData(),
+ activeCategory: 'hw',
+ activeSubTab: '๋์๋ณด๋',
+ activeCharts: []
+};
+
+// --- State Helpers ---
+export function updateState(newState: Partial) {
+ Object.assign(state, newState);
+}
diff --git a/src/views/AssetTableView.ts b/src/views/AssetTableView.ts
new file mode 100644
index 0000000..91254bf
--- /dev/null
+++ b/src/views/AssetTableView.ts
@@ -0,0 +1,95 @@
+import { state } from '../state';
+import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } from 'lucide';
+import { openPcModal } from '../components/Modal/PCModal';
+import { openHwModal } from '../components/Modal/HWModal';
+import { openStorageModal } from '../components/Modal/StorageModal';
+import { openSwModal } from '../components/Modal/SWModal';
+import { openSwUserModal } from '../components/Modal/SWUserModal';
+
+/**
+ * ์์ฐ ๋ชฉ๋ก ํ
์ด๋ธ ๋ ๋๋ง ๋ฉ์ธ ํจ์
+ */
+export function renderTable(mainContent: HTMLElement) {
+ const container = document.createElement('div');
+ container.className = 'table-container';
+ const table = document.createElement('table');
+
+ if (state.activeCategory === 'hw') {
+ renderHwTable(table, container, mainContent);
+ } else {
+ renderSwTable(table, container, mainContent);
+ }
+
+ // ํ
์ด๋ธ ๋ด ์์ด์ฝ ์ด๊ธฐํ
+ createIcons({
+ icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 }
+ });
+}
+
+function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
+ const list = state.masterData.hw.filter(a => a.type === state.activeSubTab);
+
+ if (state.activeSubTab === '๊ฐ์ธPC') {
+ table.innerHTML = `| No | ๋ฒ์ธ | ์์ฐ์ฝ๋ | ์ฌ์ฉ์ | ์์น | CPU | GPU | RAM | SSD1 | SSD2 | HDD1 | HDD2 | ๊ตฌ๋งค์ผ | ๊ธ์ก | ๋ฉํ์
์ฒด | ํ์์ | ๊ด๋ฆฌ |
|---|
`;
+ container.appendChild(table);
+ mainContent.appendChild(container);
+ const tbody = document.getElementById('dynamic-tbody')!;
+ if (list.length === 0) { tbody.innerHTML = `| ๋ฑ๋ก๋ ์์ฐ์ด ์์ต๋๋ค. |
`; return; }
+ list.forEach((asset, idx) => {
+ const tr = document.createElement('tr');
+ tr.style.cursor = 'pointer';
+ tr.innerHTML = `${idx+1} | ${asset.๋ฒ์ธ} | ${asset.์์ฐ์ฝ๋} | ${asset.์ฌ์ฉ์||''} | ${asset.์์น||''} | ${asset.CPU||''} | ${asset.GPU||''} | ${asset.RAM||''} | ${asset.SSD1||'-'} | ${asset.SSD2||'-'} | ${asset.HDD1||'-'} | ${asset.HDD2||'-'} | ${asset.๊ตฌ๋งค์ผ||''} | ${asset.๊ธ์ก||''} | ${asset.๋ฉํ์
์ฒด||''} | ${asset.ํ์์๋ช
? '' : '-'} | | `;
+ tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openPcModal(asset); });
+ tr.querySelector('.btn-edit')?.addEventListener('click', () => openPcModal(asset));
+ tbody.appendChild(tr);
+ });
+ } else if (state.activeSubTab === '์คํ ๋ฆฌ์ง') {
+ table.innerHTML = `| No | ๋ฒ์ธ | ์ ํ | ์์ฐ์ฝ๋ | ๋ช
์นญ | ์์น | ๋ชจ๋ธ๋ช
| ์ฉ๋ | ๋ด๋น์(์ ) | IP์ฃผ์ | ๊ตฌ๋งค์ผ | ๊ธ์ก | ๊ด๋ฆฌ |
|---|
`;
+ container.appendChild(table);
+ mainContent.appendChild(container);
+ const tbody = document.getElementById('dynamic-tbody')!;
+ if (list.length === 0) { tbody.innerHTML = `| ๋ฑ๋ก๋ ์์ฐ์ด ์์ต๋๋ค. |
`; return; }
+ list.forEach((asset, idx) => {
+ const tr = document.createElement('tr');
+ tr.style.cursor = 'pointer';
+ tr.innerHTML = `${idx+1} | ${asset.๋ฒ์ธ} | ${asset.storage์ ํ||''} | ${asset.์์ฐ์ฝ๋} | ${asset.๋ช
์นญ} | ${asset.์์น||''} | ${asset.๋ชจ๋ธ๋ช
||''} | ${asset.์ฉ๋||''} | ${asset.๋ด๋น์_์ ||''} | ${asset.IP์ฃผ์||''} | ${asset.๊ตฌ๋งค์ผ||''} | ${asset.๊ธ์ก||''} | | `;
+ tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
+ tr.querySelector('.btn-edit')?.addEventListener('click', () => openStorageModal(asset));
+ tbody.appendChild(tr);
+ });
+ } else {
+ table.innerHTML = `| No | ๋ฒ์ธ | ${state.activeSubTab === '์ ์ฐ๋นํ' ? '์ ํ | ' : ''}์์ฐ์ฝ๋ | ๋ช
์นญ | ์์น | ๊ด๋ฆฌ์ | ๊ตฌ๋งค์ผ | ๊ธ์ก | ๊ด๋ฆฌ |
|---|
`;
+ container.appendChild(table);
+ mainContent.appendChild(container);
+ const tbody = document.getElementById('dynamic-tbody')!;
+ if (list.length === 0) { tbody.innerHTML = `| ๋ฑ๋ก๋ ์์ฐ์ด ์์ต๋๋ค. |
`; return; }
+ list.forEach((asset, idx) => {
+ const tr = document.createElement('tr');
+ tr.style.cursor = 'pointer';
+ tr.innerHTML = `${idx+1} | ${asset.๋ฒ์ธ} | ${state.activeSubTab === '์ ์ฐ๋นํ' ? `${asset.๋นํ์ ํ||'-'} | ` : ''}${asset.์์ฐ์ฝ๋} | ${asset.๋ช
์นญ} | ${asset.์์น} | ${asset.๊ด๋ฆฌ์} | ${asset.๊ตฌ๋งค์ผ||''} | ${asset.๊ธ์ก||''} | | `;
+ tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
+ tr.querySelector('.btn-edit')?.addEventListener('click', () => openHwModal(asset));
+ tbody.appendChild(tr);
+ });
+ }
+}
+
+function renderSwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
+ const list = state.masterData.sw.filter(a => a.type === state.activeSubTab);
+ table.innerHTML = `| No | ๋ฒ์ธ | ์ ํ๋ช
| ๊ตฌ๋งค์ผ | ์๋ | ์ฌ์ฉ๊ฐ๋ฅ | ๊ด๋ฆฌ |
|---|
`;
+ container.appendChild(table);
+ mainContent.appendChild(container);
+ const tbody = document.getElementById('dynamic-tbody')!;
+ if (list.length === 0) { tbody.innerHTML = `| ์ ๋ณด๊ฐ ์์ต๋๋ค. |
`; return; }
+ list.forEach((asset, idx) => {
+ const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
+ const avail = asset.์๋ - assigned;
+ const tr = document.createElement('tr');
+ tr.style.cursor = 'pointer';
+ tr.innerHTML = `${idx+1} | ${asset.๋ฒ์ธ} | ${asset.์ ํ๋ช
} | ${asset.๊ตฌ๋งค์ผ||''} | ${asset.์๋} | ${avail} | | `;
+ tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
+ tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
+ tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));
+ tbody.appendChild(tr);
+ });
+}
diff --git a/src/views/DashboardView.ts b/src/views/DashboardView.ts
new file mode 100644
index 0000000..4101b34
--- /dev/null
+++ b/src/views/DashboardView.ts
@@ -0,0 +1,287 @@
+import { state } from '../state';
+import { HardwareAsset, SoftwareAsset } from '../excelHandler';
+
+/**
+ * ๋์๋ณด๋ ๋ ๋๋ง ๋ฉ์ธ ํจ์
+ */
+export function renderDashboard(mainContent: HTMLElement) {
+ mainContent.innerHTML = '';
+
+ // ๊ธฐ์กด ์ฐจํธ ๋ฆฌ์์ค ํด์
+ state.activeCharts.forEach(c => c.destroy());
+ state.activeCharts = [];
+
+ if (state.activeCategory === 'hw') {
+ renderHwDashboard(mainContent);
+ } else {
+ renderSwDashboard(mainContent);
+ }
+}
+
+// --- ํ๋์จ์ด ๋์๋ณด๋ ---
+function renderHwDashboard(container: HTMLElement) {
+ const types = ['๊ฐ์ธPC', '์๋ฒ', '์คํ ๋ฆฌ์ง', '์ ์ฐ๋นํ'];
+ const units = ['๋', '๋', '๋', '๊ฐ'];
+ const groups: any = {};
+
+ types.forEach(t => { groups[t] = { idle: [], active: [], aged: [], normal: [] }; });
+
+ state.masterData.hw.forEach(a => {
+ if (!groups[a.type]) return;
+ if (isHwIdle(a)) groups[a.type].idle.push(a);
+ else groups[a.type].active.push(a);
+
+ const ageY = getHwAgeYears(a);
+ const isAged = a.type === '์ ์ฐ๋นํ' ? ageY >= 3 : ageY >= 5;
+ if (isAged) groups[a.type].aged.push(a);
+ else groups[a.type].normal.push(a);
+ });
+
+ // ์ฌ์ฉํํฉ ์นด๋ ์์ฑ
+ let usageCards = '';
+ types.forEach((t, i) => {
+ const total = groups[t].idle.length + groups[t].active.length;
+ const used = groups[t].active.length;
+ const per = total > 0 ? Math.round((used / total) * 100) : 0;
+ const barColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
+
+ usageCards += `
+
+
+ ${t} ์ฌ์ฉํํฉ
+
+
+ ${total}${units[i]} ์ค ${used}${units[i]} ์ฌ์ฉ ์ค ยท ์ ํด ${groups[t].idle.length}${units[i]}
+
+
+
${per}%
+
+ ${per >= 50 ? '์ ์ฌ์ฉํ๊ณ ์์ด์' : '์ ๊ฒ์ด ํ์ํฉ๋๋ค'}
+
+
+
+
+
+
+ ${t} ๋
ธํํ ํํฉ
+ ${threshold} ์ด๊ณผ
+
+
+ ์ ์ฒด ${total}${units[i]} ์ค ${agedCount}${units[i]} ๋
ธํ ์ฅ๋น
+
+
${agedCount}${units[i]}
+
+
+
์ฌ์ฉํํฉ
+ ${usageCards}
+ ๋
ธํํ ์์ฐ ๋น์จ
+ ${agedCards}
+ `;
+
+ // ํด๋ฆญ ์ด๋ฒคํธ ๋ฐ์ธ๋ฉ
+ container.querySelectorAll('[data-action="idle"]').forEach(card => {
+ card.addEventListener('click', () => {
+ const t = card.getAttribute('data-type')!;
+ openDashboardDetail(`[${t}] ์ ํด ์์ฐ ๋ชฉ๋ก`, groups[t].idle);
+ });
+ });
+ container.querySelectorAll('[data-action="aged"]').forEach(card => {
+ card.addEventListener('click', () => {
+ const t = card.getAttribute('data-type')!;
+ openDashboardDetail(`[${t}] ๋
ธํ ์ฅ๋น ๋ชฉ๋ก`, groups[t].aged);
+ });
+ });
+}
+
+// --- ์ํํธ์จ์ด ๋์๋ณด๋ ---
+function renderSwDashboard(container: HTMLElement) {
+ let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
+ let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
+
+ state.masterData.sw.forEach(sw => {
+ const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
+ const qty = typeof sw.์๋ === 'number' ? sw.์๋ : parseInt(sw.์๋||'0', 10);
+ if (sw.type === '๊ตฌ๋
SW') {
+ subQty += qty; subUsed += assigned; subTotal++;
+ if (isSWExpiring(sw)) subExp++;
+ } else {
+ permQty += qty; permUsed += assigned; permTotal++;
+ if (isSWExpiring(sw)) permExp++;
+ }
+ });
+
+ const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
+ const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
+ const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
+ const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
+
+ container.innerHTML = `
+
+
+
๊ตฌ๋
์ํํธ์จ์ด ์ฌ์ฉ์ ๋ณด
+
${subQty}๊ฐ์ ์ ํ ์ค ${subUsed}๊ฐ ์ฌ์ฉ ์ค
+
+
+
+
+
์๊ตฌ ์ํํธ์จ์ด ์ฌ์ฉ์ ๋ณด
+
${permQty}๊ฐ์ ์ ํ ์ค ${permUsed}๊ฐ ์ฌ์ฉ ์ค
+
+
+
+
+
+
+
๊ตฌ๋
SW ๋ง๋ฃ ์์
+
${subExp}๊ฐ ๋ง๋ฃ ์์
+
+
+
+
+
+
์ ์ง๋ณด์ ๋ง๋ฃ ์์
+
${permExp}๊ฐ ๋ง๋ฃ ์์
+
+
+
+
| No | ์ ํ | ์์ฐ์ฝ๋ | ๋ช
์นญ/๋ชจ๋ธ | ์์น | ๋ด๋น/์ฌ์ฉ์ | ๊ตฌ๋งค์ผ | ๊ธ์ก |
|---|
`;
+ tbody.innerHTML = '';
+ if (list.length === 0) {
+ tbody.innerHTML = `| ํด๋น ์กฐ๊ฑด์ ์์ฐ์ด ์์ต๋๋ค. |
`;
+ } else {
+ list.forEach((asset, idx) => {
+ let manager = asset.๊ด๋ฆฌ์ || asset.์ฌ์ฉ์ || asset.๋ด๋น์_์ || '-';
+ let name = asset.๋ช
์นญ || asset.๋ชจ๋ธ๋ช
|| '-';
+ const tr = document.createElement('tr');
+ tr.innerHTML = `${idx+1} | ${asset.type} | ${asset.์์ฐ์ฝ๋} | ${name} | ${asset.์์น||'-'} | ${manager} | ${asset.๊ตฌ๋งค์ผ||'-'} | ${asset.๊ธ์ก||'-'} | `;
+ tbody.appendChild(tr);
+ });
+ }
+ modal.classList.remove('hidden');
+}
+
+function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
+ const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
+ const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
+ const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
+ const thead = tbody.closest('table')!.querySelector('thead')!;
+
+ titleEl.textContent = title;
+ thead.innerHTML = `| No | ์ ํ | ๋ฒ์ธ | ์ ํ๋ช
| ์๋ | ๊ธ์ก |
|---|
`;
+ tbody.innerHTML = '';
+ list.forEach((sw, idx) => {
+ const tr = document.createElement('tr');
+ tr.innerHTML = `${idx+1} | ${sw.type} | ${sw.๋ฒ์ธ} | ${sw.์ ํ๋ช
} | ${sw.์๋} | ${sw.๊ธ์ก} | `;
+ tbody.appendChild(tr);
+ });
+ modal.classList.remove('hidden');
+}
+
+function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
+ const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
+ const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
+ const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
+ const thead = tbody.closest('table')!.querySelector('thead')!;
+
+ titleEl.textContent = title;
+ thead.innerHTML = `| No | ๋ฒ์ธ | ์ ํ๋ช
| ์๋ | ์ฌ์ฉ์ค | ์ฌ์ฉ๊ฐ๋ฅ |
|---|
`;
+ tbody.innerHTML = '';
+ list.forEach((sw, idx) => {
+ const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
+ const avail = (typeof sw.์๋ === 'number' ? sw.์๋ : parseInt(sw.์๋||'0', 10)) - assigned;
+ const tr = document.createElement('tr');
+ tr.innerHTML = `${idx+1} | ${sw.๋ฒ์ธ} | ${sw.์ ํ๋ช
} | ${sw.์๋} | ${assigned} | ${avail} | `;
+ tbody.appendChild(tr);
+ });
+ modal.classList.remove('hidden');
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..7065ca9
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}