Compare commits
3 Commits
HW_dashboa
...
54bfb9d482
| Author | SHA1 | Date | |
|---|---|---|---|
| 54bfb9d482 | |||
| 7158689fd0 | |||
| fde7ef8439 |
@@ -4,7 +4,9 @@
|
||||
export function initBaseModal() {
|
||||
const closeAllModals = () => {
|
||||
const modals = document.querySelectorAll('.modal-overlay');
|
||||
modals.forEach(modal => modal.classList.add('hidden'));
|
||||
modals.forEach(modal => {
|
||||
modal.classList.add('hidden');
|
||||
});
|
||||
};
|
||||
|
||||
// ESC 키로 닫기
|
||||
@@ -12,12 +14,21 @@ export function initBaseModal() {
|
||||
if (e.key === 'Escape') closeAllModals();
|
||||
});
|
||||
|
||||
// 배경(Overlay) 클릭 시 닫기 (동적 생성된 모달 대응을 위해 이벤트 위임 고려 가능하나 일단 단순 구현)
|
||||
// 배경(Overlay) 및 닫기 버튼 클릭 시 닫기 (이벤트 위임)
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
// 1. 오버레이 클릭 시 닫기
|
||||
if (target.classList.contains('modal-overlay')) {
|
||||
closeAllModals();
|
||||
}
|
||||
|
||||
// 2. 닫기 아이콘(data-lucide="x") 또는 닫기/취소 버튼 클릭 시 닫기
|
||||
// 버튼 ID가 btn-close- 또는 btn-cancel-로 시작하는 경우 대응
|
||||
const btn = target.closest('button');
|
||||
if (btn && (btn.id.startsWith('btn-close-') || btn.id.startsWith('btn-cancel-'))) {
|
||||
closeAllModals();
|
||||
}
|
||||
});
|
||||
|
||||
return { closeAllModals };
|
||||
|
||||
@@ -21,13 +21,25 @@ const HW_MODAL_HTML = `
|
||||
<!-- Group 1: 기본 정보 -->
|
||||
<div class="form-section-title">기본 정보 (Identity)</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-법인">법인</label>
|
||||
<label for="hw-법인">구매법인</label>
|
||||
<input type="text" id="hw-법인" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-자산코드">자산번호/코드</label>
|
||||
<input type="text" id="hw-자산코드" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-구매일">구매일자</label>
|
||||
<input type="text" id="hw-구매일" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-현사용조직">현 사용조직</label>
|
||||
<input type="text" id="hw-현사용조직" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="hw-이전사용조직">이전 사용조직</label>
|
||||
<input type="text" id="hw-이전사용조직" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-용도">용도</label>
|
||||
<input type="text" id="hw-용도" />
|
||||
@@ -46,7 +58,7 @@ const HW_MODAL_HTML = `
|
||||
</div>
|
||||
|
||||
<!-- Group 2: 네트워크 정보 -->
|
||||
<div class="form-section-title server-only">네트워크 정보 (Connectivity)</div>
|
||||
<div class="form-section-title server-only">네트워크 정보 (Connectivity) <span class="badge-security" style="margin-left: 0.5rem;">보안 정보</span></div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-IP주소">IP 주소 1</label>
|
||||
<input type="text" id="hw-IP주소" />
|
||||
@@ -56,7 +68,7 @@ const HW_MODAL_HTML = `
|
||||
<input type="text" id="hw-IP2" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
<label for="hw-원격접속">원격 도구 (Anydesk/Chrome 등)</label>
|
||||
<label for="hw-원격접속">원격 도구</label>
|
||||
<input type="text" id="hw-원격접속" />
|
||||
</div>
|
||||
<div class="form-group server-only">
|
||||
@@ -183,12 +195,15 @@ function fillHwFormData(asset: HardwareAsset) {
|
||||
(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-모델명') as HTMLInputElement).value = asset.모델명 || '';
|
||||
(document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS || '';
|
||||
(document.getElementById('hw-CPU') as HTMLInputElement).value = asset.CPU || '';
|
||||
(document.getElementById('hw-RAM') as HTMLInputElement).value = asset.RAM || '';
|
||||
(document.getElementById('hw-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
|
||||
(document.getElementById('hw-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
|
||||
(document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
|
||||
(document.getElementById('hw-담당자_정') as HTMLInputElement).value = asset.담당자_정 || asset.관리자 || '';
|
||||
(document.getElementById('hw-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
|
||||
(document.getElementById('hw-품의서명') as HTMLElement).textContent = asset.품의서명 || '';
|
||||
@@ -283,12 +298,15 @@ export function initHwModal() {
|
||||
법인: (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,
|
||||
모델명: (document.getElementById('hw-모델명') as HTMLInputElement).value,
|
||||
OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
|
||||
CPU: (document.getElementById('hw-CPU') as HTMLInputElement).value,
|
||||
RAM: (document.getElementById('hw-RAM') as HTMLInputElement).value,
|
||||
SSD1: (document.getElementById('hw-SSD1') as HTMLInputElement).value,
|
||||
SSD2: (document.getElementById('hw-SSD2') 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,
|
||||
|
||||
@@ -38,6 +38,8 @@ export interface HardwareAsset {
|
||||
서버PW?: string;
|
||||
모니터링?: string;
|
||||
비고?: string;
|
||||
현사용조직?: string;
|
||||
이전사용조직?: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -90,7 +92,7 @@ const SW_TABS = ['구독SW', '영구SW'];
|
||||
|
||||
const HW_HEADERS = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매일', '금액', '납품업체', '품의서명'];
|
||||
const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', '구매일', '금액', '납품업체', '품의서명'];
|
||||
const SERVER_HEADERS = ['법인', '자산번호', '유형', '용도', '설치위치', '담당자(정)', '담당자(부)', 'IP 주소', '원격접속', '모델명', 'OS', 'CPU', 'RAM', 'GPU', 'Storage1', 'Storage2', 'Storage3', '모니터링', '비고'];
|
||||
const SERVER_HEADERS = ['구매법인', '자산번호', '구매일자', '용도', '상세내용', '현 사용조직', '이전 사용조직', '설치위치', '담당자(정)', '담당자(부)', 'IP 주소 1', 'IP 주소 2', '원격도구', '서버 ID', '서버 PW', '모델명', 'OS', 'CPU', 'RAM', 'SSD1', 'SSD2', '모니터링', '비고'];
|
||||
const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매일', '금액', '납품업체', '품의서명'];
|
||||
const SUB_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
|
||||
const PERM_SW_HEADERS = ['ID', '분야', '법인', '부서', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
|
||||
@@ -112,7 +114,7 @@ export function downloadTemplate() {
|
||||
wscols = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
} else if (tab === '서버') {
|
||||
hd = SERVER_HEADERS;
|
||||
wscols = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
|
||||
wscols = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:30}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
|
||||
} else if (tab === '스토리지') {
|
||||
hd = STORAGE_HEADERS;
|
||||
wscols = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
|
||||
@@ -164,9 +166,13 @@ export function exportToExcel(masterData: MasterAssetData) {
|
||||
} else if (tab === '서버') {
|
||||
wsData = [
|
||||
SERVER_HEADERS,
|
||||
...targetAssets.map(a => [a.법인, a.자산코드, a.storage유형 || '물리', a.용도 || '', a.위치, a.담당자_정 || '', a.담당자_부 || '', a.IP주소, a.원격접속 || '', a.모델명 || '', a.OS, a.CPU, a.RAM, a.GPU || '', a.SSD1 || '', a.SSD2 || '', a.HDD1 || '', a.모니터링 || '', a.비고 || ''])
|
||||
...targetAssets.map(a => [
|
||||
a.법인, a.자산코드, a.구매일 || '', a.용도 || '', a.상세 || '', a.현사용조직 || '', a.이전사용조직 || '',
|
||||
a.위치, a.담당자_정 || '', a.담당자_부 || '', a.IP주소, (a as any).IP2 || '', a.원격접속 || '',
|
||||
(a as any).서버ID || '', (a as any).서버PW || '', a.모델명 || '', a.OS, a.CPU, a.RAM, a.SSD1 || '', a.SSD2 || '', a.모니터링 || '', a.비고 || ''
|
||||
])
|
||||
];
|
||||
colsConfig = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
|
||||
colsConfig = [{wch:15}, {wch:20}, {wch:15}, {wch:25}, {wch:30}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:20}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:30}];
|
||||
} else if (tab === '스토리지') {
|
||||
wsData = [
|
||||
STORAGE_HEADERS,
|
||||
@@ -262,18 +268,27 @@ export async function parseExcel(file: File): Promise<MasterAssetData> {
|
||||
hwAssets.push({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
type: sheetName,
|
||||
법인: row['법인'] || '',
|
||||
법인: row['구매법인'] || row['법인'] || '',
|
||||
자산코드: row['자산번호'] || row['자산코드'] || '',
|
||||
명칭: row['용도'] || row['명칭'] || '',
|
||||
용도: row['용도'] || '', 위치: row['설치위치'] || row['위치'] || '',
|
||||
구매일: row['구매일자'] || row['구매일'] || '',
|
||||
용도: row['용도'] || '',
|
||||
상세: row['상세내용'] || row['상세'] || '',
|
||||
현사용조직: row['현 사용조직'] || '',
|
||||
이전사용조직: row['이전 사용조직'] || '',
|
||||
위치: row['설치위치'] || row['위치'] || '',
|
||||
관리자: row['담당자(정)'] || '', 담당자_정: row['담당자(정)'] || '', 담당자_부: row['담당자(부)'] || '',
|
||||
IP주소: row['IP 주소'] || row['IP주소'] || '', IP2: row['IP2'] || '',
|
||||
원격접속: row['원격접속'] || '', 서버ID: row['서버ID'] || '', 서버PW: row['서버PW'] || '',
|
||||
IP주소: row['IP 주소 1'] || row['IP 주소'] || row['IP주소'] || '',
|
||||
IP2: row['IP 주소 2'] || row['IP2'] || '',
|
||||
원격접속: row['원격도구'] || row['원격접속'] || '',
|
||||
서버ID: row['서버 ID'] || row['서버ID'] || '',
|
||||
서버PW: row['서버 PW'] || row['서버PW'] || '',
|
||||
모델명: row['모델명'] || '', OS: row['OS'] || '',
|
||||
CPU: row['CPU'] || '', RAM: row['RAM'] || '', GPU: row['GPU'] || '',
|
||||
SSD1: row['Storage1'] || row['SSD1'] || '', SSD2: row['Storage2'] || row['SSD2'] || '', HDD1: row['Storage3'] || row['HDD1'] || '',
|
||||
모니터링: row['모니터링'] || '', 비고: row['비고'] || '', storage유형: row['유형'] || '물리',
|
||||
MACaddress: '', HW사양: '', 구매일: '', 금액: '', 납품업체: '', 품의서명: '',
|
||||
CPU: row['CPU'] || '', RAM: row['RAM'] || '',
|
||||
SSD1: row['SSD1'] || row['Storage1'] || '',
|
||||
SSD2: row['SSD2'] || row['Storage2'] || '',
|
||||
모니터링: row['모니터링'] || '', 비고: row['비고'] || '', storage유형: '물리',
|
||||
MACaddress: '', HW사양: '', 금액: '', 납품업체: '', 품의서명: '',
|
||||
});
|
||||
} else if (sheetName === '스토리지') {
|
||||
hwAssets.push({
|
||||
|
||||
@@ -609,7 +609,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "NAS",
|
||||
"용도": "GSIM NAS",
|
||||
@@ -629,7 +629,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "NAS",
|
||||
"용도": "그래픽스개발팀 데이터 백업 NAS",
|
||||
@@ -649,7 +649,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "공통 GIT 서버",
|
||||
@@ -669,7 +669,7 @@ export const realServerData = [
|
||||
"SSD2": "1TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "BUILD 서버",
|
||||
@@ -689,7 +689,7 @@ export const realServerData = [
|
||||
"SSD2": "10TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "HmEG 테스트 서버",
|
||||
@@ -709,7 +709,7 @@ export const realServerData = [
|
||||
"SSD2": "1TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "산하 ERP 개발서버",
|
||||
@@ -729,7 +729,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "공간정보 신청",
|
||||
@@ -749,7 +749,7 @@ export const realServerData = [
|
||||
"SSD2": "931GB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "AI 관련",
|
||||
@@ -769,7 +769,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "한종 테스트",
|
||||
@@ -789,7 +789,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "GSIM 언리얼 서버",
|
||||
@@ -809,7 +809,7 @@ export const realServerData = [
|
||||
"SSD2": "8TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "AutoCAD 테스트 서버",
|
||||
@@ -829,7 +829,7 @@ export const realServerData = [
|
||||
"SSD2": "2TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "GSIM 테스트 서버",
|
||||
@@ -849,7 +849,7 @@ export const realServerData = [
|
||||
"SSD2": "512GB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "공간데이터 서버",
|
||||
@@ -869,7 +869,7 @@ export const realServerData = [
|
||||
"SSD2": "8 TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "PC",
|
||||
"용도": "가평 VM 원격 서버",
|
||||
@@ -889,7 +889,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "서버",
|
||||
"용도": "GSIM 협업",
|
||||
@@ -909,7 +909,7 @@ export const realServerData = [
|
||||
"SSD2": "1.88TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "스토리지",
|
||||
"용도": "GSIM 협업 스토리지",
|
||||
@@ -929,7 +929,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "서버",
|
||||
"용도": "GSIM META 서버",
|
||||
@@ -949,7 +949,7 @@ export const realServerData = [
|
||||
"SSD2": "4TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "서버",
|
||||
"용도": "GSIM 서버",
|
||||
@@ -969,7 +969,7 @@ export const realServerData = [
|
||||
"SSD2": "4TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "스토리지",
|
||||
"용도": "GSIM 스토리지",
|
||||
@@ -989,7 +989,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "서버",
|
||||
"용도": "함양-합천 서버",
|
||||
@@ -1009,7 +1009,7 @@ export const realServerData = [
|
||||
"SSD2": "10TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "서버",
|
||||
"용도": "HM MapService 2.0 서버",
|
||||
@@ -1029,7 +1029,7 @@ export const realServerData = [
|
||||
"SSD2": "40 TB"
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "스토리지",
|
||||
"용도": "HM MapService 2.0 스토리지",
|
||||
@@ -1049,7 +1049,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "서버",
|
||||
"용도": "Gitlab Runner",
|
||||
@@ -1069,7 +1069,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "기술개발센터",
|
||||
"법인": "",
|
||||
"자산코드": "",
|
||||
"storage유형": "서버",
|
||||
"용도": "전산모사",
|
||||
@@ -1089,7 +1089,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "1",
|
||||
"storage유형": "NAS",
|
||||
"용도": "NAS 2",
|
||||
@@ -1105,7 +1105,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "2",
|
||||
"storage유형": "NAS",
|
||||
"용도": "NAS 1",
|
||||
@@ -1121,7 +1121,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "3",
|
||||
"storage유형": "NAS",
|
||||
"용도": "NAS 4",
|
||||
@@ -1137,7 +1137,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "4",
|
||||
"storage유형": "NAS",
|
||||
"용도": "NAS 5",
|
||||
@@ -1153,7 +1153,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "5",
|
||||
"storage유형": "NAS",
|
||||
"용도": "NAS 6",
|
||||
@@ -1169,7 +1169,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "6",
|
||||
"storage유형": "NAS",
|
||||
"용도": "NAS7",
|
||||
@@ -1185,7 +1185,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "7",
|
||||
"storage유형": "NAS",
|
||||
"용도": "총괄기획실 NAS",
|
||||
@@ -1201,7 +1201,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "8",
|
||||
"storage유형": "NAS",
|
||||
"용도": "한맥 NAS 1",
|
||||
@@ -1217,7 +1217,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "9",
|
||||
"storage유형": "NAS",
|
||||
"용도": "한맥 NAS 2",
|
||||
@@ -1233,7 +1233,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "10",
|
||||
"storage유형": "NAS",
|
||||
"용도": "한맥 NAS 3",
|
||||
@@ -1249,7 +1249,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "11",
|
||||
"storage유형": "NAS",
|
||||
"용도": "NAS 13",
|
||||
@@ -1265,7 +1265,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "12",
|
||||
"storage유형": "PC",
|
||||
"용도": "회계",
|
||||
@@ -1281,7 +1281,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "13",
|
||||
"storage유형": "PC",
|
||||
"용도": "한맥CAD",
|
||||
@@ -1297,9 +1297,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "14",
|
||||
"storage유형": "서버(타워)",
|
||||
"storage유형": "PC",
|
||||
"용도": "Ai-Cell-Util",
|
||||
"상세": "깃티, 매터모스트 등 70여종",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1313,7 +1313,7 @@ export const realServerData = [
|
||||
"SSD2": "8 TB"
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "15",
|
||||
"storage유형": "PC",
|
||||
"용도": "한라CAD",
|
||||
@@ -1329,7 +1329,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "16",
|
||||
"storage유형": "NAS",
|
||||
"용도": "디자인팀1 NAS",
|
||||
@@ -1345,7 +1345,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "17",
|
||||
"storage유형": "NAS",
|
||||
"용도": "디자인팀2 NAS",
|
||||
@@ -1361,9 +1361,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "18",
|
||||
"storage유형": "서버(미니워크스테이션)",
|
||||
"storage유형": "PC",
|
||||
"용도": "인사정보 서버",
|
||||
"상세": "인사정보 PM",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1377,9 +1377,9 @@ export const realServerData = [
|
||||
"SSD2": "2 TB"
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "19",
|
||||
"storage유형": "서버(타워)",
|
||||
"storage유형": "PC",
|
||||
"용도": "BEPs 서버",
|
||||
"상세": "BEPs 개발서버, Outline 협업서비스",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1393,9 +1393,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "20",
|
||||
"storage유형": "서버(타워)",
|
||||
"storage유형": "PC",
|
||||
"용도": "Ai-Cell-A100-1",
|
||||
"상세": "OCR, Local LLM 등 30여종",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1409,9 +1409,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "21",
|
||||
"storage유형": "서버(타워)",
|
||||
"storage유형": "PC",
|
||||
"용도": "빌드서버",
|
||||
"상세": "인스톨 쉴드, 지라",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1425,9 +1425,9 @@ export const realServerData = [
|
||||
"SSD2": "4TB"
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "22",
|
||||
"storage유형": "PC\n서버(랙)",
|
||||
"storage유형": "PC",
|
||||
"용도": "저장소 및 전산모사\n구)스마트건설 서버",
|
||||
"상세": "ParaView, CFDCore\n디지털화설문, 검색WIKI 웹서비스",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1441,9 +1441,9 @@ export const realServerData = [
|
||||
"SSD2": "2TB"
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "23",
|
||||
"storage유형": "서버(랙)",
|
||||
"storage유형": "서버",
|
||||
"용도": "IDC 산하ERP서버",
|
||||
"상세": "XR 가상화 메인 서버 → IDC 산하ERP서버",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1457,9 +1457,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "24",
|
||||
"storage유형": "스토리지(랙)",
|
||||
"storage유형": "스토리지",
|
||||
"용도": "WAS Storage",
|
||||
"상세": "",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1473,9 +1473,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "25",
|
||||
"storage유형": "서버(랙)",
|
||||
"storage유형": "서버",
|
||||
"용도": "한맥 백업 서버",
|
||||
"상세": "가족사 인트라넷 소스 백업 서버",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1489,9 +1489,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "26",
|
||||
"storage유형": "서버(랙)",
|
||||
"storage유형": "서버",
|
||||
"용도": "한라 백업 서버",
|
||||
"상세": "한라 웹 소스 및 Miso DB 백업 서버",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1505,7 +1505,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "27",
|
||||
"storage유형": "NAS",
|
||||
"용도": "기술개발센터 NAS",
|
||||
@@ -1521,7 +1521,7 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "28",
|
||||
"storage유형": "NAS",
|
||||
"용도": "-",
|
||||
@@ -1537,9 +1537,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "29",
|
||||
"storage유형": "스토리지(랙)",
|
||||
"storage유형": "스토리지",
|
||||
"용도": "Backup Storage",
|
||||
"상세": "",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1553,9 +1553,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "30",
|
||||
"storage유형": "스토리지(랙)",
|
||||
"storage유형": "스토리지",
|
||||
"용도": "-",
|
||||
"상세": "",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1569,9 +1569,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "31",
|
||||
"storage유형": "서버(랙)",
|
||||
"storage유형": "서버",
|
||||
"용도": "XR WAS Server",
|
||||
"상세": "",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
@@ -1585,9 +1585,9 @@ export const realServerData = [
|
||||
"SSD2": ""
|
||||
},
|
||||
{
|
||||
"법인": "한맥빌딩",
|
||||
"법인": "",
|
||||
"자산코드": "32",
|
||||
"storage유형": "서버(랙)",
|
||||
"storage유형": "서버",
|
||||
"용도": "WAS Storage",
|
||||
"상세": "",
|
||||
"위치": "한맥빌딩(MDF 실)",
|
||||
|
||||
15
src/main.ts
15
src/main.ts
@@ -3,6 +3,7 @@ import { renderSidebar } from './components/Sidebar';
|
||||
import { renderDashboard } from './views/DashboardView';
|
||||
import { renderTable } from './views/AssetTableView';
|
||||
import { downloadTemplate, exportToExcel, parseExcel, HardwareAsset } from './core/excelHandler';
|
||||
import { initBaseModal } from './components/Modal/BaseModal';
|
||||
import { initPcModal } from './components/Modal/PCModal';
|
||||
import { initHwModal, openHwModal } from './components/Modal/HWModal';
|
||||
import { initStorageModal } from './components/Modal/StorageModal';
|
||||
@@ -36,12 +37,14 @@ function initApp() {
|
||||
}
|
||||
});
|
||||
|
||||
// 3. 모달 초기화 (HTML 주입 및 이벤트 바인딩)
|
||||
initPcModal(() => renderTable(mainContent), () => {});
|
||||
initHwModal();
|
||||
initStorageModal(() => renderTable(mainContent), () => {});
|
||||
initSwModal(() => renderTable(mainContent), () => {});
|
||||
initSwUserModal(() => renderTable(mainContent), () => {});
|
||||
// 3. 모달 초기화 (HTML 주입 및 개별 로직 바인딩)
|
||||
const { closeAllModals } = initBaseModal();
|
||||
|
||||
initPcModal(() => renderTable(mainContent), closeAllModals);
|
||||
initHwModal(); // HW 모달은 내부에서 자체 닫기 로직 포함 중이나 추후 통일 가능
|
||||
initStorageModal(() => renderTable(mainContent), closeAllModals);
|
||||
initSwModal(() => renderTable(mainContent), closeAllModals);
|
||||
initSwUserModal(() => renderTable(mainContent), closeAllModals);
|
||||
initDashboardDetailModal();
|
||||
|
||||
// 4. 전역 버튼 이벤트 바인딩
|
||||
|
||||
@@ -126,6 +126,19 @@
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.badge-security {
|
||||
font-size: 10px;
|
||||
background-color: #fef2f2;
|
||||
color: #ef4444;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #fee2e2;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
|
||||
@@ -27,18 +27,18 @@ export function renderTable(mainContent: HTMLElement) {
|
||||
}
|
||||
|
||||
function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
|
||||
const list = state.masterData.hw.filter(a => a.type === state.activeSubTab);
|
||||
const fullList = state.masterData.hw.filter(a => a.type === state.activeSubTab);
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
|
||||
if (state.activeSubTab === '개인PC') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>GPU</th><th>RAM</th><th>SSD1</th><th>SSD2</th><th>HDD1</th><th>HDD2</th><th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>GPU</th><th>RAM</th><th>SSD1</th><th>SSD2</th><th>HDD1</th><th>HDD2</th><th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="17">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
list.forEach((asset, idx) => {
|
||||
if (fullList.length === 0) { tbody.innerHTML = `<tr><td colspan="17">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
fullList.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.사용자||''}</td><td>${asset.위치||''}</td><td>${asset.CPU||''}</td><td>${asset.GPU||''}</td><td>${asset.RAM||''}</td><td>${asset.SSD1||'-'}</td><td>${asset.SSD2||'-'}</td><td>${asset.HDD1||'-'}</td><td>${asset.HDD2||'-'}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td>${asset.납품업체||''}</td><td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
@@ -46,68 +46,190 @@ function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainCont
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
} else if (state.activeSubTab === '스토리지') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>담당자(정)</th><th>IP주소</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>담당자(정)</th><th>IP주소</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="13">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
list.forEach((asset, idx) => {
|
||||
if (fullList.length === 0) { tbody.innerHTML = `<tr><td colspan="13">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
fullList.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.storage유형||''}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치||''}</td><td>${asset.모델명||''}</td><td>${asset.용량||''}</td><td>${asset.담당자_정||''}</td><td>${asset.IP주소||''}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
} else {
|
||||
// 서버 또는 전산비품
|
||||
if (state.activeSubTab === '서버') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산번호</th><th>유형</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>IP 주소</th><th>원격접속</th><th>모델명</th><th>OS</th><th>CPU</th><th>RAM</th><th>Storage</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
} else {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th>${state.activeSubTab === '전산비품' ? '<th>유형</th>' : ''}<th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
}
|
||||
} else if (state.activeSubTab === '서버') {
|
||||
// --- 서버 전용 필터 및 검색 기능 ---
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
|
||||
// 법인, 조직, 유형, 위치 고유값 추출
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a.현사용조직))).filter(Boolean).sort();
|
||||
const types = Array.from(new Set(fullList.map(a => a.storage유형))).filter(Boolean).sort();
|
||||
const locations = Array.from(new Set(fullList.map(a => {
|
||||
const loc = String(a.위치 || '');
|
||||
if (loc.startsWith('서관') || loc.startsWith('동관')) return 'IDC';
|
||||
return loc.split(' ')[0]; // 첫 단어 기준 (본사, 지사, 마천사무실 등)
|
||||
}))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산번호/조직/용도/모델명)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>구매법인</label>
|
||||
<select id="filter-corp">
|
||||
<option value="">전체 법인</option>
|
||||
${corps.map(c => `<option value="${c}">${c}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>현 사용조직</label>
|
||||
<select id="filter-org-unit">
|
||||
<option value="">전체 조직</option>
|
||||
${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>유형</label>
|
||||
<select id="filter-type">
|
||||
<option value="">전체 유형</option>
|
||||
${types.map(t => `<option value="${t}">${t}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>설치위치</label>
|
||||
<select id="filter-location">
|
||||
<option value="">전체 위치</option>
|
||||
${locations.map(l => `<option value="${l}">${l}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset" title="검색 조건 초기화">
|
||||
<i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i> 필터 초기화
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th><th>현 사용조직</th><th>자산번호</th><th>유형</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>모델명</th><th>OS</th><th>CPU</th><th>RAM</th><th>Storage</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keyword = (document.getElementById('filter-keyword') as HTMLInputElement).value.toLowerCase().trim();
|
||||
const corp = (document.getElementById('filter-corp') as HTMLSelectElement).value;
|
||||
const orgUnit = (document.getElementById('filter-org-unit') as HTMLSelectElement).value;
|
||||
const type = (document.getElementById('filter-type') as HTMLSelectElement).value;
|
||||
const location = (document.getElementById('filter-location') as HTMLSelectElement).value;
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const formatAsset = (v: any) => String(v || '').toLowerCase();
|
||||
const matchKeyword = !keyword ||
|
||||
formatAsset(asset.자산코드).includes(keyword) ||
|
||||
formatAsset(asset.용도).includes(keyword) ||
|
||||
formatAsset(asset.상세).includes(keyword) ||
|
||||
formatAsset(asset.모델명).includes(keyword) ||
|
||||
formatAsset(asset.담당자_정).includes(keyword) ||
|
||||
formatAsset(asset.현사용조직).includes(keyword) ||
|
||||
formatAsset(asset.담당자_부).includes(keyword);
|
||||
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchOrgUnit = !orgUnit || asset.현사용조직 === orgUnit;
|
||||
const matchType = !type || asset.storage유형 === type;
|
||||
|
||||
let matchLocation = true;
|
||||
if (location) {
|
||||
const loc = String(asset.위치 || '');
|
||||
if (location === 'IDC') {
|
||||
matchLocation = loc.startsWith('서관') || loc.startsWith('동관');
|
||||
} else {
|
||||
matchLocation = loc.includes(location);
|
||||
}
|
||||
}
|
||||
|
||||
return matchKeyword && matchCorp && matchOrgUnit && matchType && matchLocation;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="14" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
const formatInline = (v: any) => String(v || '').replace(/\n/g, ' / ').trim();
|
||||
const getBadge = (text: string, bgColor: string) => `<span style="background:${bgColor}; color:white; font-size:10px; padding:1px 4px; border-radius:3px; font-weight:700; margin-right:4px; display:inline-block; line-height:1.2;">${text}</span>`;
|
||||
|
||||
const mainManager = asset.담당자_정 || '';
|
||||
const subManager = asset.담당자_부 || '';
|
||||
const managerHtml = [mainManager ? `${getBadge('정', '#1E5149')} ${mainManager}` : '', subManager ? `${getBadge('부', '#9CA3AF')} ${subManager}` : ''].filter(v => v !== '').join(' / ');
|
||||
const storageInfo = [asset.SSD1, asset.SSD2].filter(v => v && v !== '').join(' / ');
|
||||
|
||||
let locationHtml = formatInline(asset.위치);
|
||||
if (locationHtml.startsWith('서관') || locationHtml.startsWith('동관')) {
|
||||
locationHtml = `IDC(${locationHtml})`;
|
||||
}
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>${idx+1}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.법인)}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.현사용조직)}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.자산코드)}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.storage유형)}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.용도)}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.상세)}</td>
|
||||
<td class="text-nowrap">${locationHtml}</td>
|
||||
<td class="text-nowrap">${managerHtml}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.모델명)}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.OS)}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.CPU)}</td>
|
||||
<td class="text-nowrap">${formatInline(asset.RAM)}</td>
|
||||
<td class="text-nowrap">${formatInline(storageInfo)}</td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { RefreshCcw, Paperclip } });
|
||||
};
|
||||
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
const typeSelect = document.getElementById('filter-type') as HTMLSelectElement;
|
||||
const locationSelect = document.getElementById('filter-location') as HTMLSelectElement;
|
||||
const resetBtn = document.getElementById('btn-reset-filters') as HTMLButtonElement;
|
||||
|
||||
keywordInput.addEventListener('input', updateTable);
|
||||
corpSelect.addEventListener('change', updateTable);
|
||||
typeSelect.addEventListener('change', updateTable);
|
||||
locationSelect.addEventListener('change', updateTable);
|
||||
resetBtn.addEventListener('click', () => {
|
||||
keywordInput.value = ''; corpSelect.value = ''; typeSelect.value = ''; locationSelect.value = '';
|
||||
updateTable();
|
||||
});
|
||||
|
||||
updateTable();
|
||||
} else {
|
||||
// 전산비품
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>구매법인</th>${state.activeSubTab === '전산비품' ? '<th>유형</th>' : ''}<th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
const colCount = state.activeSubTab === '서버' ? 15 : (state.activeSubTab === '전산비품' ? 11 : 10);
|
||||
if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="${colCount}">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
const colCount = state.activeSubTab === '전산비품' ? 11 : 10;
|
||||
if (fullList.length === 0) { tbody.innerHTML = `<tr><td colspan="${colCount}">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
|
||||
list.forEach((asset, idx) => {
|
||||
fullList.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
const formatInline = (v: any) => String(v || '').replace(/\n/g, ' / ').trim();
|
||||
const getBadge = (text: string, bgColor: string) => `<span style="background:${bgColor}; color:white; font-size:10px; padding:1px 4px; border-radius:3px; font-weight:700; margin-right:4px; display:inline-block; line-height:1.2;">${text}</span>`;
|
||||
|
||||
if (state.activeSubTab === '서버') {
|
||||
const mainManager = asset.담당자_정 || '';
|
||||
const subManager = asset.담당자_부 || '';
|
||||
const managerHtml = [mainManager ? `${getBadge('정', '#1E5149')} ${mainManager}` : '', subManager ? `${getBadge('부', '#9CA3AF')} ${subManager}` : ''].filter(v => v !== '').join(' / ');
|
||||
const tools = (asset.원격접속 || '').split('\n');
|
||||
const ids = (asset.서버ID || '').split('\n');
|
||||
const pws = (asset.서버PW || '').split('\n');
|
||||
const maxLen = Math.max(tools.length, ids.length, pws.length);
|
||||
let remoteItems = [];
|
||||
for(let i=0; i<maxLen; i++) {
|
||||
let toolName = tools[i] || '접속';
|
||||
let badgeColor = '#3B82F6';
|
||||
if (toolName.toLowerCase().includes('any')) badgeColor = '#EF4444';
|
||||
if (toolName.toLowerCase().includes('chrome')) badgeColor = '#F59E0B';
|
||||
let item = `${getBadge(toolName, badgeColor)}`;
|
||||
if (ids[i] || pws[i]) item += ` (${ids[i] || '-'}/${pws[i] || '-'})`;
|
||||
remoteItems.push(item);
|
||||
}
|
||||
const remoteHtml = remoteItems.join(' / ');
|
||||
const ipInfo = [asset.IP주소, asset.IP2].filter(v => v && v !== '').join(' / ');
|
||||
const storageInfo = [asset.SSD1, asset.SSD2].filter(v => v && v !== '').join(' / ');
|
||||
|
||||
tr.innerHTML = `<td>${idx+1}</td><td class="text-nowrap">${formatInline(asset.법인)}</td><td class="text-nowrap">${formatInline(asset.자산코드)}</td><td class="text-nowrap">${formatInline(asset.storage유형)}</td><td class="text-nowrap">${formatInline(asset.용도)}</td><td class="text-nowrap">${formatInline(asset.상세)}</td><td class="text-nowrap">${formatInline(asset.위치)}</td><td class="text-nowrap">${managerHtml}</td><td class="text-nowrap">${formatInline(ipInfo)}</td><td class="text-nowrap">${remoteHtml}</td><td class="text-nowrap">${formatInline(asset.모델명)}</td><td class="text-nowrap">${formatInline(asset.OS)}</td><td class="text-nowrap">${formatInline(asset.CPU)}</td><td class="text-nowrap">${formatInline(asset.RAM)}</td><td class="text-nowrap">${formatInline(storageInfo)}</td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
} else {
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td>${state.activeSubTab === '전산비품' ? `<td>${asset.비품유형||'-'}</td>` : ''}<td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
}
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td>${state.activeSubTab === '전산비품' ? `<td>${asset.비품유형||'-'}</td>` : ''}<td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user