Merge branch 'origin/QR_setting' into thoon
This commit is contained in:
이태훈
@@ -11,6 +11,7 @@ import {
|
||||
} from './ModalUtils';
|
||||
import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData';
|
||||
import { BaseModal } from './BaseModal';
|
||||
import { QRPrinter } from '../../core/qr_print';
|
||||
|
||||
/**
|
||||
* 하드웨어 자산 상세 모달 (Styled Main Edition)
|
||||
@@ -30,9 +31,11 @@ class HwAssetModal extends BaseModal {
|
||||
<div id="hw-asset-modal" class="modal-overlay hidden">
|
||||
<div class="modal-content wide">
|
||||
<div class="modal-header">
|
||||
<div class="header-left">
|
||||
<h2 id="hw-modal-title" class="modal-title">${this.title}</h2>
|
||||
<div id="hw-header-identity" class="header-identity"></div>
|
||||
<div class="header-left" style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
|
||||
<h2 id="hw-modal-title" class="modal-title" style="display: none;">${this.title}</h2>
|
||||
<div id="hw-header-identity" class="header-identity" style="display: inline-flex; gap: 0.5rem; align-items: center;"></div>
|
||||
<button id="btn-print-hw-qr" class="btn btn-outline btn-primary hidden" style="padding: 2px 8px; font-size: 11px; height: 22px; margin: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;">QR 인쇄</button>
|
||||
<span id="hw-modal-audit-approved-badge" style="display: none; align-items: center; background-color: rgba(16, 185, 129, 0.08); color: #059669; border: 1px solid rgba(16, 185, 129, 0.18); padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; height: 20px; line-height: 1; vertical-align: middle; white-space: nowrap; margin-left: 4px;">승인완료</span>
|
||||
</div>
|
||||
<button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||
</div>
|
||||
@@ -264,6 +267,21 @@ class HwAssetModal extends BaseModal {
|
||||
const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
|
||||
|
||||
this.fetchMapConfig();
|
||||
|
||||
const qrPrintBtn = document.getElementById('btn-print-hw-qr');
|
||||
qrPrintBtn?.addEventListener('click', () => {
|
||||
if (this.currentAsset && this.currentAsset.asset_code) {
|
||||
QRPrinter.print([{
|
||||
type: 'asset',
|
||||
code: this.currentAsset.asset_code,
|
||||
title: '[ HM IT ASSET ]',
|
||||
subtitle: this.currentAsset.model_name || this.currentAsset.asset_purpose || this.currentAsset.category || 'IT 자산',
|
||||
dept: this.currentAsset.current_dept || '-',
|
||||
user: this.currentAsset.user_current || '-'
|
||||
}]);
|
||||
}
|
||||
});
|
||||
|
||||
this.fetchMasterComponents().then(() => {
|
||||
this.bindAutocomplete('hw-cpu', 'hw-cpu-list', 'CPU');
|
||||
this.bindAutocomplete('hw-ram', 'hw-ram-list', 'RAM');
|
||||
@@ -318,7 +336,7 @@ class HwAssetModal extends BaseModal {
|
||||
const reader = new FileReader();
|
||||
reader.onload = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/upload`, {
|
||||
const res = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ fileName: file.name, fileData: reader.result })
|
||||
@@ -644,6 +662,19 @@ class HwAssetModal extends BaseModal {
|
||||
protected onAfterOpen(asset: any, mode: string): void {
|
||||
const genBtn = document.getElementById('btn-gen-hw-code');
|
||||
if (genBtn) genBtn.style.display = (mode === 'add') ? 'inline-flex' : 'none';
|
||||
|
||||
const qrBtn = document.getElementById('btn-print-hw-qr');
|
||||
if (qrBtn) {
|
||||
const hasCode = asset && asset.asset_code && asset.asset_code.trim() !== '';
|
||||
qrBtn.classList.toggle('hidden', mode !== 'view' || !hasCode);
|
||||
}
|
||||
|
||||
const approvedBadge = document.getElementById('hw-modal-audit-approved-badge');
|
||||
if (approvedBadge) {
|
||||
const isApproved = asset && asset.is_audit_approved;
|
||||
approvedBadge.style.display = (mode === 'view' && isApproved) ? 'inline-flex' : 'none';
|
||||
}
|
||||
|
||||
this.toggleFileUploadUI(mode !== 'view');
|
||||
this.toggleEditOnlyBtns(mode !== 'view');
|
||||
this.updateMapButtonVisibility();
|
||||
|
||||
@@ -1,120 +1,124 @@
|
||||
import { state } from '../core/state';
|
||||
|
||||
const MENU_CONFIG: any = {
|
||||
hw: {
|
||||
label: '하드웨어',
|
||||
tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
|
||||
},
|
||||
sw: {
|
||||
label: '소프트웨어',
|
||||
tabs: ['외부SW', '내부SW']
|
||||
},
|
||||
ops: {
|
||||
label: '운영지원',
|
||||
tabs: ['클라우드', '도메인', '비용관리', '사용자']
|
||||
},
|
||||
vip: {
|
||||
label: '내빈/외빈',
|
||||
tabs: ['선물']
|
||||
},
|
||||
fac: {
|
||||
label: '시설자산',
|
||||
tabs: ['사무가구']
|
||||
}
|
||||
};
|
||||
|
||||
export function renderNavigation(onTabChange: (tab: string) => void) {
|
||||
const header = document.querySelector('.main-header') as HTMLElement;
|
||||
const headerContainer = document.querySelector('.header-container')!;
|
||||
if (!headerContainer) return;
|
||||
|
||||
const render = () => {
|
||||
// 1. 헤더 구조 (Vercel Style: Clean Single Row)
|
||||
headerContainer.innerHTML = `
|
||||
<div class="brand" id="btn-home-logo" style="cursor: pointer;">
|
||||
<img src="img/image_92.png" class="main-logo" alt="HM Logo" />
|
||||
<h1>한맥자산관리시스템</h1>
|
||||
</div>
|
||||
|
||||
<nav class="integrated-nav" id="main-nav-list"></nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="role-toggle-wrapper">
|
||||
<span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
|
||||
<label class="role-toggle">
|
||||
<input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
|
||||
<span class="role-slider"></span>
|
||||
</label>
|
||||
<span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
|
||||
</div>
|
||||
<div class="notification-area">
|
||||
<button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const navList = document.getElementById('main-nav-list')!;
|
||||
|
||||
// 2. GNB 메뉴 렌더링 (Ghost Tab Style)
|
||||
Object.keys(MENU_CONFIG).forEach(catKey => {
|
||||
const config = MENU_CONFIG[catKey];
|
||||
|
||||
const visibleTabs = config.tabs.filter((tab: string) => {
|
||||
if (state.currentUserRole === 'admin') return tab === '대시보드';
|
||||
return tab !== '대시보드';
|
||||
});
|
||||
|
||||
if (visibleTabs.length === 0) return;
|
||||
|
||||
visibleTabs.forEach((tab: string) => {
|
||||
if (tab === '부품 마스터') return;
|
||||
const item = document.createElement('div');
|
||||
const isActive = state.activeSubTab === tab;
|
||||
item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
|
||||
item.textContent = tab;
|
||||
item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
|
||||
|
||||
item.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
state.activeCategory = catKey as any;
|
||||
state.activeSubTab = tab;
|
||||
render();
|
||||
onTabChange(tab);
|
||||
});
|
||||
navList.appendChild(item);
|
||||
});
|
||||
});
|
||||
|
||||
// 3. 관리자 전용 '관리도구'
|
||||
if (state.currentUserRole === 'admin') {
|
||||
const adminTrigger = document.createElement('div');
|
||||
adminTrigger.className = 'gnb-trigger admin-trigger';
|
||||
adminTrigger.innerHTML = '관리도구';
|
||||
adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
|
||||
navList.appendChild(adminTrigger);
|
||||
}
|
||||
|
||||
// 4. 이벤트 바인딩
|
||||
document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
|
||||
|
||||
const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
|
||||
roleToggle?.addEventListener('change', () => {
|
||||
state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
|
||||
if (state.currentUserRole === 'admin') {
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '대시보드';
|
||||
} else {
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '서버';
|
||||
}
|
||||
render();
|
||||
onTabChange(state.activeSubTab);
|
||||
});
|
||||
|
||||
// 아이콘 생성
|
||||
// @ts-ignore
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
};
|
||||
|
||||
render();
|
||||
}
|
||||
import { state } from '../core/state';
|
||||
|
||||
const MENU_CONFIG: any = {
|
||||
hw: {
|
||||
label: '하드웨어',
|
||||
tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
|
||||
},
|
||||
sw: {
|
||||
label: '소프트웨어',
|
||||
tabs: ['외부SW', '내부SW']
|
||||
},
|
||||
ops: {
|
||||
label: '운영지원',
|
||||
tabs: ['클라우드', '도메인', '비용관리', '사용자']
|
||||
},
|
||||
vip: {
|
||||
label: '내빈/외빈',
|
||||
tabs: ['선물']
|
||||
},
|
||||
fac: {
|
||||
label: '시설자산',
|
||||
tabs: ['사무가구']
|
||||
}
|
||||
};
|
||||
|
||||
export function renderNavigation(onTabChange: (tab: string) => void) {
|
||||
const header = document.querySelector('.main-header') as HTMLElement;
|
||||
const headerContainer = document.querySelector('.header-container')!;
|
||||
if (!headerContainer) return;
|
||||
|
||||
const render = () => {
|
||||
// 1. 헤더 구조 (Vercel Style: Clean Single Row)
|
||||
headerContainer.innerHTML = `
|
||||
<div class="brand" id="btn-home-logo" style="cursor: pointer;">
|
||||
<img src="img/image_92.png" class="main-logo" alt="HM Logo" />
|
||||
<h1>한맥자산관리시스템</h1>
|
||||
</div>
|
||||
|
||||
<nav class="integrated-nav" id="main-nav-list"></nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="role-toggle-wrapper">
|
||||
<span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
|
||||
<label class="role-toggle">
|
||||
<input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
|
||||
<span class="role-slider"></span>
|
||||
</label>
|
||||
<span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
|
||||
</div>
|
||||
<div class="notification-area">
|
||||
<button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const navList = document.getElementById('main-nav-list')!;
|
||||
|
||||
// 2. GNB 메뉴 렌더링 (Ghost Tab Style)
|
||||
Object.keys(MENU_CONFIG).forEach(catKey => {
|
||||
const config = MENU_CONFIG[catKey];
|
||||
|
||||
let visibleTabs = config.tabs.filter((tab: string) => {
|
||||
if (state.currentUserRole === 'admin') return tab === '대시보드';
|
||||
return tab !== '대시보드';
|
||||
});
|
||||
|
||||
if (state.currentUserRole === 'admin' && catKey === 'hw') {
|
||||
visibleTabs = ['대시보드', '실사 승인'];
|
||||
}
|
||||
|
||||
if (visibleTabs.length === 0) return;
|
||||
|
||||
visibleTabs.forEach((tab: string) => {
|
||||
if (tab === '부품 마스터') return;
|
||||
const item = document.createElement('div');
|
||||
const isActive = state.activeSubTab === tab;
|
||||
item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
|
||||
item.textContent = tab;
|
||||
item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
|
||||
|
||||
item.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
state.activeCategory = catKey as any;
|
||||
state.activeSubTab = tab;
|
||||
render();
|
||||
onTabChange(tab);
|
||||
});
|
||||
navList.appendChild(item);
|
||||
});
|
||||
});
|
||||
|
||||
// 3. 관리자 전용 '관리도구'
|
||||
if (state.currentUserRole === 'admin') {
|
||||
const adminTrigger = document.createElement('div');
|
||||
adminTrigger.className = 'gnb-trigger admin-trigger';
|
||||
adminTrigger.innerHTML = '관리도구';
|
||||
adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
|
||||
navList.appendChild(adminTrigger);
|
||||
}
|
||||
|
||||
// 4. 이벤트 바인딩
|
||||
document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
|
||||
|
||||
const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
|
||||
roleToggle?.addEventListener('change', () => {
|
||||
state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
|
||||
if (state.currentUserRole === 'admin') {
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '대시보드';
|
||||
} else {
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '서버';
|
||||
}
|
||||
render();
|
||||
onTabChange(state.activeSubTab);
|
||||
});
|
||||
|
||||
// 아이콘 생성
|
||||
// @ts-ignore
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
};
|
||||
|
||||
render();
|
||||
}
|
||||
|
||||
250
src/core/qr_print.ts
Normal file
250
src/core/qr_print.ts
Normal file
@@ -0,0 +1,250 @@
|
||||
|
||||
export interface QRPrintItem {
|
||||
type: 'asset' | 'location';
|
||||
code: string;
|
||||
title: string; // e.g. "[ HM IT ASSET ]" or "[ HM LOCATION ]"
|
||||
subtitle?: string; // e.g. "가을-PC(i5-12400F)" or "기술개발센터 서버실"
|
||||
dept?: string; // e.g. "전산" or "B-03 랙"
|
||||
user?: string; // e.g. "박노석"
|
||||
date?: string; // e.g. "2024-08-05"
|
||||
}
|
||||
|
||||
/**
|
||||
* QR 라벨 인쇄 유틸리티 클래스
|
||||
*/
|
||||
export class QRPrinter {
|
||||
private static styleId = 'qr-print-style';
|
||||
private static containerId = 'label-print-container';
|
||||
|
||||
/**
|
||||
* 인쇄 전용 CSS 스타일 주입
|
||||
*/
|
||||
private static injectStyles() {
|
||||
if (document.getElementById(this.styleId)) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = this.styleId;
|
||||
style.innerHTML = `
|
||||
/* 화면에서는 인쇄 컨테이너 숨김 */
|
||||
#${this.containerId} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
/* 화면 내 모든 요소 숨김 */
|
||||
body > *:not(#${this.containerId}) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 인쇄 전용 컨테이너 표시 */
|
||||
#${this.containerId} {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50mm;
|
||||
height: 30mm;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 페이지 규격 설정 */
|
||||
@page {
|
||||
size: 50mm 30mm;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 개별 라벨 스타일 */
|
||||
.print-label-item {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
width: 50mm;
|
||||
height: 30mm;
|
||||
box-sizing: border-box;
|
||||
padding: 2.5mm;
|
||||
page-break-after: always;
|
||||
font-family: 'Pretendard Variable', sans-serif;
|
||||
color: #000;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.print-label-item:last-child {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
/* 왼쪽 명세 영역 */
|
||||
.label-details {
|
||||
width: 30mm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 6.5pt;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
padding-right: 1mm;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.label-header {
|
||||
font-size: 7.5pt;
|
||||
font-weight: 800;
|
||||
border-bottom: 0.5px solid #000;
|
||||
padding-bottom: 0.5mm;
|
||||
margin-bottom: 0.5mm;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.label-row {
|
||||
display: flex;
|
||||
margin-bottom: 0.2mm;
|
||||
}
|
||||
|
||||
.label-row .row-title {
|
||||
font-weight: 700;
|
||||
width: 9.5mm;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label-row .row-value {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 오른쪽 QR 영역 */
|
||||
.label-qr-wrapper {
|
||||
width: 15mm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label-qr-canvas {
|
||||
width: 14mm !important;
|
||||
height: 14mm !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.label-qr-code-text {
|
||||
font-size: 5.5pt;
|
||||
font-weight: 700;
|
||||
margin-top: 1mm;
|
||||
text-align: center;
|
||||
width: 15mm;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/**
|
||||
* 라벨 인쇄 실행
|
||||
*/
|
||||
public static async print(items: QRPrintItem[]): Promise<void> {
|
||||
if (items.length === 0) return;
|
||||
|
||||
this.injectStyles();
|
||||
|
||||
// 기존 컨테이너 제거
|
||||
const oldContainer = document.getElementById(this.containerId);
|
||||
if (oldContainer) oldContainer.remove();
|
||||
|
||||
// 새 인쇄 컨테이너 생성
|
||||
const container = document.createElement('div');
|
||||
container.id = this.containerId;
|
||||
document.body.appendChild(container);
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
const labelDiv = document.createElement('div');
|
||||
labelDiv.className = 'print-label-item';
|
||||
|
||||
// QR 접속 URL 정의
|
||||
const paramName = item.type === 'asset' ? 'asset' : 'loc';
|
||||
const qrUrl = `${window.location.origin}/mobile?${paramName}=${encodeURIComponent(item.code)}`;
|
||||
|
||||
// HTML 구성
|
||||
if (item.type === 'asset') {
|
||||
labelDiv.innerHTML = `
|
||||
<div class="label-details">
|
||||
<div class="label-header">${item.title}</div>
|
||||
<div class="label-row">
|
||||
<span class="row-title">자산번호 :</span>
|
||||
<span class="row-value">${item.code}</span>
|
||||
</div>
|
||||
<div class="label-row">
|
||||
<span class="row-title">자 산 명 :</span>
|
||||
<span class="row-value">${item.subtitle || '-'}</span>
|
||||
</div>
|
||||
<div class="label-row">
|
||||
<span class="row-title">부 서 :</span>
|
||||
<span class="row-value">${item.dept || '-'}</span>
|
||||
</div>
|
||||
<div class="label-row">
|
||||
<span class="row-title">사 용 자 :</span>
|
||||
<span class="row-value">${item.user || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label-qr-wrapper">
|
||||
<canvas class="label-qr-canvas" id="qr-canvas-${i}"></canvas>
|
||||
<div class="label-qr-code-text">${item.code}</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
// Location 라벨 레이아웃
|
||||
labelDiv.innerHTML = `
|
||||
<div class="label-details" style="justify-content: center; gap: 1mm;">
|
||||
<div class="label-header">${item.title}</div>
|
||||
<div class="label-row">
|
||||
<span class="row-title">위치코드 :</span>
|
||||
<span class="row-value" style="font-weight: 700;">${item.code}</span>
|
||||
</div>
|
||||
<div class="label-row">
|
||||
<span class="row-title">구 역 :</span>
|
||||
<span class="row-value">${item.subtitle || '-'}</span>
|
||||
</div>
|
||||
<div class="label-row">
|
||||
<span class="row-title">상세위치 :</span>
|
||||
<span class="row-value">${item.dept || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label-qr-wrapper">
|
||||
<canvas class="label-qr-canvas" id="qr-canvas-${i}"></canvas>
|
||||
<div class="label-qr-code-text">${item.code}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
container.appendChild(labelDiv);
|
||||
|
||||
// QR 코드 렌더링
|
||||
const canvas = document.getElementById(`qr-canvas-${i}`) as HTMLCanvasElement;
|
||||
if (canvas) {
|
||||
const qrLib = (window as any).QRCode;
|
||||
if (qrLib) {
|
||||
await qrLib.toCanvas(canvas, qrUrl, {
|
||||
margin: 0,
|
||||
width: 100,
|
||||
errorCorrectionLevel: 'H'
|
||||
});
|
||||
} else {
|
||||
console.error("QRCode library is not loaded on window.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 약간의 딜레이를 주어 QR 코드가 완전히 렌더링되도록 함
|
||||
setTimeout(() => {
|
||||
window.print();
|
||||
// 인쇄 완료 후 컨테이너 정리
|
||||
window.onafterprint = () => {
|
||||
container.remove();
|
||||
};
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
416
src/main.ts
416
src/main.ts
@@ -1,205 +1,211 @@
|
||||
import './styles/common.css';
|
||||
import './styles/login.css';
|
||||
import { state, loadMasterDataFromDB, saveAsset } from './core/state';
|
||||
import { renderNavigation } from './components/Navigation';
|
||||
import { renderDashboard } from './views/DashboardView';
|
||||
import { renderSWTable } from './views/SW_Table';
|
||||
import { renderLocationView } from './views/LocationView';
|
||||
import { initBaseModal } from './components/Modal/BaseModal';
|
||||
import { initHwModal, openHwModal } from './components/Modal/HWModal';
|
||||
import { initSwModal, openSwModal } from './components/Modal/SWModal';
|
||||
import { initSwUserModal } from './components/Modal/SWUserModal';
|
||||
import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
|
||||
import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
|
||||
import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
|
||||
import { initUserModal, openUserModal } from './components/Modal/UserModal';
|
||||
import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
|
||||
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
|
||||
import { initGuide } from './components/Guide';
|
||||
import { pcFlowModal } from './components/Modal/PCFlowModal';
|
||||
import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';
|
||||
|
||||
|
||||
// 화면 갱신 통합 핸들러
|
||||
function refreshView(tab?: string) {
|
||||
const mainContent = document.getElementById('main-content')!;
|
||||
if (!mainContent) return;
|
||||
|
||||
const activeTab = tab || state.activeSubTab;
|
||||
|
||||
if (activeTab === '대시보드') {
|
||||
renderDashboard(mainContent);
|
||||
return;
|
||||
}
|
||||
|
||||
// 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
|
||||
// (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
|
||||
const isServerTab = activeTab === '서버';
|
||||
const effectiveViewMode = isServerTab ? state.viewMode : 'list';
|
||||
|
||||
mainContent.innerHTML = `
|
||||
<div id="view-body" class="view-container"></div>
|
||||
`;
|
||||
|
||||
const viewBody = document.getElementById('view-body')!;
|
||||
if (effectiveViewMode === 'location') {
|
||||
renderLocationView(viewBody);
|
||||
} else {
|
||||
renderSWTable(viewBody); // 리스트 형식
|
||||
}
|
||||
}
|
||||
|
||||
// 통합 갱신 (저장은 이미 개별 모달에서 처리됨)
|
||||
async function refreshAllData() {
|
||||
await loadMasterDataFromDB();
|
||||
refreshView();
|
||||
}
|
||||
|
||||
// --- App Initialization ---
|
||||
function initApp() {
|
||||
const mainContent = document.getElementById('main-content')!;
|
||||
if (!mainContent) return;
|
||||
|
||||
const { closeAllModals } = initBaseModal();
|
||||
|
||||
try {
|
||||
renderNavigation((tab) => {
|
||||
refreshView();
|
||||
});
|
||||
|
||||
initHwModal(() => refreshAllData(), closeAllModals);
|
||||
initSwModal(() => refreshAllData(), closeAllModals);
|
||||
initSwUserModal(() => {
|
||||
loadMasterDataFromDB().then(() => refreshView());
|
||||
}, closeAllModals);
|
||||
initDomainModal(() => refreshAllData(), closeAllModals);
|
||||
initPartsMasterModal(() => refreshAllData(), closeAllModals);
|
||||
initJobSpecModal(() => refreshAllData(), closeAllModals);
|
||||
initUserModal(() => refreshAllData(), closeAllModals);
|
||||
|
||||
initDashboardDetailModal();
|
||||
initGuide();
|
||||
pcFlowModal.init(() => {
|
||||
loadMasterDataFromDB().then(() => refreshView());
|
||||
});
|
||||
|
||||
loadMasterDataFromDB().then((success) => {
|
||||
if (success) {
|
||||
refreshView();
|
||||
initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
|
||||
}
|
||||
});
|
||||
} catch (e) { console.error('❌ Initialization failed:', e); }
|
||||
|
||||
console.log('🚀 ITAM App Multi-Table Optimized');
|
||||
|
||||
// --- 통합 이벤트 위임 (Dynamic Elements 지원) ---
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
// 자산 추가
|
||||
if (target.closest('#btn-add-asset')) {
|
||||
const tab = state.activeSubTab;
|
||||
const cat = state.activeCategory;
|
||||
const newId = Math.random().toString(36).substring(2, 9);
|
||||
|
||||
if (cat === 'hw') {
|
||||
if (tab === '부품 마스터') {
|
||||
if (activePartsMasterSubTab === 'job-spec') {
|
||||
openJobSpecModal({ id: '' } as any, 'add');
|
||||
} else {
|
||||
openPartsMasterModal({ id: '' } as any, 'add');
|
||||
}
|
||||
} else {
|
||||
openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
|
||||
}
|
||||
} else if (cat === 'sw') {
|
||||
const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
|
||||
openSwModal({ id: newId, asset_type: swType } as any, 'add');
|
||||
} else if (cat === 'ops') {
|
||||
if (tab === '도메인') openDomainModal(null);
|
||||
else if (tab === '사용자') openUserModal({ id: '' }, 'add');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 부품 마스터 탭으로 바로가기 연동
|
||||
if (target.closest('#btn-goto-parts-master')) {
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '부품 마스터';
|
||||
renderNavigation((tab) => { refreshView(); });
|
||||
refreshView();
|
||||
return;
|
||||
}
|
||||
|
||||
// PC 이동/반납 모달 열기
|
||||
if (target.closest('#btn-pc-flow')) {
|
||||
pcFlowModal.open();
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
createIcons({
|
||||
icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings }
|
||||
});
|
||||
window.addEventListener('refresh-view', () => refreshView());
|
||||
}
|
||||
|
||||
/**
|
||||
* 헤더 역할 전환 토글 로직
|
||||
*/
|
||||
function initRoleSwitcher() {
|
||||
const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
|
||||
const userLabel = document.querySelector('.role-label.user');
|
||||
const adminLabel = document.querySelector('.role-label.admin');
|
||||
|
||||
if (!checkbox || !userLabel || !adminLabel) return;
|
||||
|
||||
checkbox.addEventListener('change', () => {
|
||||
if (checkbox.checked) {
|
||||
state.currentUserRole = 'admin';
|
||||
userLabel.classList.remove('active');
|
||||
adminLabel.classList.add('active');
|
||||
document.body.classList.add('admin-mode');
|
||||
|
||||
// 관리자 모드 전환 시 대시보드로 이동
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '대시보드';
|
||||
} else {
|
||||
state.currentUserRole = 'user';
|
||||
adminLabel.classList.remove('active');
|
||||
userLabel.classList.add('active');
|
||||
document.body.classList.remove('admin-mode');
|
||||
|
||||
// 실무자 모드 전환 시 서버 목록으로 이동
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '서버';
|
||||
}
|
||||
// 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
|
||||
renderNavigation(() => refreshView());
|
||||
refreshView();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 앱 초기화 (로그인 과정 없이 즉시 시작)
|
||||
*/
|
||||
function initializeAppDirectly() {
|
||||
const loginContainer = document.getElementById('login-container');
|
||||
const appLayout = document.getElementById('app-layout');
|
||||
|
||||
// 기본 권한 설정: 실무자 (User)
|
||||
state.currentUserRole = 'user';
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '서버'; // 실무자 기본 탭
|
||||
|
||||
// 화면 전환
|
||||
if (loginContainer) loginContainer.style.display = 'none';
|
||||
if (appLayout) appLayout.style.display = 'flex';
|
||||
|
||||
// 앱 초기화 및 내비게이션(헤더 포함) 렌더링
|
||||
initApp();
|
||||
renderNavigation((tab) => refreshView(tab));
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initializeAppDirectly);
|
||||
import './styles/common.css';
|
||||
import './styles/login.css';
|
||||
import { state, loadMasterDataFromDB, saveAsset } from './core/state';
|
||||
import { renderNavigation } from './components/Navigation';
|
||||
import { renderDashboard } from './views/DashboardView';
|
||||
import { renderSWTable } from './views/SW_Table';
|
||||
import { renderLocationView } from './views/LocationView';
|
||||
import { renderAuditApprovalView } from './views/AuditApprovalView';
|
||||
import { initBaseModal } from './components/Modal/BaseModal';
|
||||
import { initHwModal, openHwModal } from './components/Modal/HWModal';
|
||||
import { initSwModal, openSwModal } from './components/Modal/SWModal';
|
||||
import { initSwUserModal } from './components/Modal/SWUserModal';
|
||||
import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
|
||||
import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
|
||||
import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
|
||||
import { initUserModal, openUserModal } from './components/Modal/UserModal';
|
||||
import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
|
||||
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
|
||||
import { initGuide } from './components/Guide';
|
||||
import { pcFlowModal } from './components/Modal/PCFlowModal';
|
||||
import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';
|
||||
|
||||
|
||||
// 화면 갱신 통합 핸들러
|
||||
function refreshView(tab?: string) {
|
||||
const mainContent = document.getElementById('main-content')!;
|
||||
if (!mainContent) return;
|
||||
|
||||
const activeTab = tab || state.activeSubTab;
|
||||
|
||||
if (activeTab === '대시보드') {
|
||||
renderDashboard(mainContent);
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeTab === '실사 승인') {
|
||||
renderAuditApprovalView(mainContent);
|
||||
return;
|
||||
}
|
||||
|
||||
// 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
|
||||
// (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
|
||||
const isServerTab = activeTab === '서버';
|
||||
const effectiveViewMode = isServerTab ? state.viewMode : 'list';
|
||||
|
||||
mainContent.innerHTML = `
|
||||
<div id="view-body" class="view-container"></div>
|
||||
`;
|
||||
|
||||
const viewBody = document.getElementById('view-body')!;
|
||||
if (effectiveViewMode === 'location') {
|
||||
renderLocationView(viewBody);
|
||||
} else {
|
||||
renderSWTable(viewBody); // 리스트 형식
|
||||
}
|
||||
}
|
||||
|
||||
// 통합 갱신 (저장은 이미 개별 모달에서 처리됨)
|
||||
async function refreshAllData() {
|
||||
await loadMasterDataFromDB();
|
||||
refreshView();
|
||||
}
|
||||
|
||||
// --- App Initialization ---
|
||||
function initApp() {
|
||||
const mainContent = document.getElementById('main-content')!;
|
||||
if (!mainContent) return;
|
||||
|
||||
const { closeAllModals } = initBaseModal();
|
||||
|
||||
try {
|
||||
renderNavigation((tab) => {
|
||||
refreshView();
|
||||
});
|
||||
|
||||
initHwModal(() => refreshAllData(), closeAllModals);
|
||||
initSwModal(() => refreshAllData(), closeAllModals);
|
||||
initSwUserModal(() => {
|
||||
loadMasterDataFromDB().then(() => refreshView());
|
||||
}, closeAllModals);
|
||||
initDomainModal(() => refreshAllData(), closeAllModals);
|
||||
initPartsMasterModal(() => refreshAllData(), closeAllModals);
|
||||
initJobSpecModal(() => refreshAllData(), closeAllModals);
|
||||
initUserModal(() => refreshAllData(), closeAllModals);
|
||||
|
||||
initDashboardDetailModal();
|
||||
initGuide();
|
||||
pcFlowModal.init(() => {
|
||||
loadMasterDataFromDB().then(() => refreshView());
|
||||
});
|
||||
|
||||
loadMasterDataFromDB().then((success) => {
|
||||
if (success) {
|
||||
refreshView();
|
||||
initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
|
||||
}
|
||||
});
|
||||
} catch (e) { console.error('❌ Initialization failed:', e); }
|
||||
|
||||
console.log('🚀 ITAM App Multi-Table Optimized');
|
||||
|
||||
// --- 통합 이벤트 위임 (Dynamic Elements 지원) ---
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
// 자산 추가
|
||||
if (target.closest('#btn-add-asset')) {
|
||||
const tab = state.activeSubTab;
|
||||
const cat = state.activeCategory;
|
||||
const newId = Math.random().toString(36).substring(2, 9);
|
||||
|
||||
if (cat === 'hw') {
|
||||
if (tab === '부품 마스터') {
|
||||
if (activePartsMasterSubTab === 'job-spec') {
|
||||
openJobSpecModal({ id: '' } as any, 'add');
|
||||
} else {
|
||||
openPartsMasterModal({ id: '' } as any, 'add');
|
||||
}
|
||||
} else {
|
||||
openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
|
||||
}
|
||||
} else if (cat === 'sw') {
|
||||
const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
|
||||
openSwModal({ id: newId, asset_type: swType } as any, 'add');
|
||||
} else if (cat === 'ops') {
|
||||
if (tab === '도메인') openDomainModal(null);
|
||||
else if (tab === '사용자') openUserModal({ id: '' }, 'add');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 부품 마스터 탭으로 바로가기 연동
|
||||
if (target.closest('#btn-goto-parts-master')) {
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '부품 마스터';
|
||||
renderNavigation((tab) => { refreshView(); });
|
||||
refreshView();
|
||||
return;
|
||||
}
|
||||
|
||||
// PC 이동/반납 모달 열기
|
||||
if (target.closest('#btn-pc-flow')) {
|
||||
pcFlowModal.open();
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
createIcons({
|
||||
icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings }
|
||||
});
|
||||
window.addEventListener('refresh-view', () => refreshView());
|
||||
}
|
||||
|
||||
/**
|
||||
* 헤더 역할 전환 토글 로직
|
||||
*/
|
||||
function initRoleSwitcher() {
|
||||
const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
|
||||
const userLabel = document.querySelector('.role-label.user');
|
||||
const adminLabel = document.querySelector('.role-label.admin');
|
||||
|
||||
if (!checkbox || !userLabel || !adminLabel) return;
|
||||
|
||||
checkbox.addEventListener('change', () => {
|
||||
if (checkbox.checked) {
|
||||
state.currentUserRole = 'admin';
|
||||
userLabel.classList.remove('active');
|
||||
adminLabel.classList.add('active');
|
||||
document.body.classList.add('admin-mode');
|
||||
|
||||
// 관리자 모드 전환 시 대시보드로 이동
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '대시보드';
|
||||
} else {
|
||||
state.currentUserRole = 'user';
|
||||
adminLabel.classList.remove('active');
|
||||
userLabel.classList.add('active');
|
||||
document.body.classList.remove('admin-mode');
|
||||
|
||||
// 실무자 모드 전환 시 서버 목록으로 이동
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '서버';
|
||||
}
|
||||
// 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
|
||||
renderNavigation(() => refreshView());
|
||||
refreshView();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 앱 초기화 (로그인 과정 없이 즉시 시작)
|
||||
*/
|
||||
function initializeAppDirectly() {
|
||||
const loginContainer = document.getElementById('login-container');
|
||||
const appLayout = document.getElementById('app-layout');
|
||||
|
||||
// 기본 권한 설정: 실무자 (User)
|
||||
state.currentUserRole = 'user';
|
||||
state.activeCategory = 'hw';
|
||||
state.activeSubTab = '서버'; // 실무자 기본 탭
|
||||
|
||||
// 화면 전환
|
||||
if (loginContainer) loginContainer.style.display = 'none';
|
||||
if (appLayout) appLayout.style.display = 'flex';
|
||||
|
||||
// 앱 초기화 및 내비게이션(헤더 포함) 렌더링
|
||||
initApp();
|
||||
renderNavigation((tab) => refreshView(tab));
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initializeAppDirectly);
|
||||
|
||||
183
src/mobile-main.ts
Normal file
183
src/mobile-main.ts
Normal file
@@ -0,0 +1,183 @@
|
||||
// ITAM Mobile Audit Scanner Main Business Logic
|
||||
|
||||
const SESSION_LOC_KEY = 'itam_audit_locked_location';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const locDisplay = document.getElementById('loc-display')!;
|
||||
const unlockBtn = document.getElementById('btn-unlock-loc') as HTMLButtonElement;
|
||||
const feedbackEl = document.getElementById('scan-feedback')!;
|
||||
const manualToggleBtn = document.getElementById('btn-toggle-manual')!;
|
||||
const manualForm = document.getElementById('manual-form')!;
|
||||
const manualInput = document.getElementById('manual-code-input') as HTMLInputElement;
|
||||
const manualSubmitBtn = document.getElementById('btn-submit-manual') as HTMLButtonElement;
|
||||
|
||||
let html5QrcodeScanner: any = null;
|
||||
|
||||
// Initialize UI based on current session lock
|
||||
updateLocationUI();
|
||||
|
||||
// Parse URL parameters for immediate processing (convenience for direct QR scans)
|
||||
parseUrlParams();
|
||||
|
||||
// Initialize HTML5 QR Code Scanner
|
||||
initScanner();
|
||||
|
||||
// Bind UI Events
|
||||
unlockBtn.addEventListener('click', () => {
|
||||
sessionStorage.removeItem(SESSION_LOC_KEY);
|
||||
showFeedback('위치 잠금이 해제되었습니다.', 'success');
|
||||
updateLocationUI();
|
||||
});
|
||||
|
||||
manualToggleBtn.addEventListener('click', () => {
|
||||
const isHidden = window.getComputedStyle(manualForm).display === 'none';
|
||||
manualForm.style.display = isHidden ? 'flex' : 'none';
|
||||
manualToggleBtn.textContent = isHidden ? '스캐너 카메라로 스캔하기' : '카메라가 안 되나요? 수동 코드로 입력';
|
||||
});
|
||||
|
||||
manualSubmitBtn.addEventListener('click', () => {
|
||||
const code = manualInput.value.trim();
|
||||
if (!code) return;
|
||||
processScannedCode(code);
|
||||
manualInput.value = '';
|
||||
});
|
||||
|
||||
// --- Core Scanner Functions ---
|
||||
|
||||
function initScanner() {
|
||||
try {
|
||||
// Create Html5Qrcode instance
|
||||
// Using Html5Qrcode directly instead of Html5QrcodeScanner for customized viewport control
|
||||
const html5QrCode = new (window as any).Html5Qrcode("reader");
|
||||
|
||||
const config = {
|
||||
fps: 10,
|
||||
qrbox: (width: number, height: number) => {
|
||||
const size = Math.min(width, height) * 0.7;
|
||||
return { width: size, height: size };
|
||||
},
|
||||
aspectRatio: 1.0
|
||||
};
|
||||
|
||||
// Start scanning using the rear camera
|
||||
html5QrCode.start(
|
||||
{ facingMode: "environment" },
|
||||
config,
|
||||
(decodedText: string) => {
|
||||
processScannedCode(decodedText);
|
||||
},
|
||||
(errorMessage: string) => {
|
||||
// Silent failure during continuous scanning to avoid log flooding
|
||||
}
|
||||
).catch((err: any) => {
|
||||
console.error("Camera startup failed:", err);
|
||||
showFeedback("카메라 시작 실패: 권한을 허용했는지 확인하세요.", "error");
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Failed to initialize html5-qrcode:", e);
|
||||
showFeedback("QR 라이브러리 로드 오류", "error");
|
||||
}
|
||||
}
|
||||
|
||||
function processScannedCode(rawCode: string) {
|
||||
// QR 코드 인쇄 폼 등으로 인한 개행 문자(\r, \n) 및 모든 공백 문자(\s)를 제거
|
||||
const code = rawCode.replace(/[\r\n]/g, '').replace(/\s+/g, '').trim();
|
||||
|
||||
// 1. Check if the code is a physical location code
|
||||
if (code.startsWith('LOC-')) {
|
||||
sessionStorage.setItem(SESSION_LOC_KEY, code);
|
||||
showFeedback(`위치 [${code}] 잠금 설정 완료!`, 'success');
|
||||
updateLocationUI();
|
||||
vibrateDevice(100);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Otherwise treat it as an asset code
|
||||
const lockedLoc = sessionStorage.getItem(SESSION_LOC_KEY);
|
||||
if (!lockedLoc) {
|
||||
showFeedback('위치 QR 코드를 먼저 스캔하여 잠금을 설정해야 자산을 스캔할 수 있습니다.', 'error');
|
||||
vibrateDevice([100, 50, 100]);
|
||||
return;
|
||||
}
|
||||
|
||||
// Submit matching info to server
|
||||
submitAssetAudit(code, lockedLoc);
|
||||
}
|
||||
|
||||
async function submitAssetAudit(assetCode: string, locationCode: string) {
|
||||
showFeedback(`자산 ${assetCode} 전송 중...`, 'success');
|
||||
|
||||
try {
|
||||
// Request is sent relative to host, which resolves dynamically through server proxy
|
||||
const res = await fetch('/api/audit/scan', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
asset_code: assetCode,
|
||||
physical_location_code: locationCode
|
||||
})
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok && data.success) {
|
||||
showFeedback(`자산 [${assetCode}] 실사 전송 성공! (관리자 승인 대기)`, 'success');
|
||||
vibrateDevice([200]);
|
||||
} else {
|
||||
showFeedback(`전송 실패: ${data.error || '알 수 없는 서버 오류'}`, 'error');
|
||||
vibrateDevice([100, 100, 100]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to submit scan:", err);
|
||||
showFeedback('서버 전송 중 통신 네트워크 오류가 발생했습니다.', 'error');
|
||||
vibrateDevice([100, 100, 100]);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocationUI() {
|
||||
const lockedLoc = sessionStorage.getItem(SESSION_LOC_KEY);
|
||||
if (lockedLoc) {
|
||||
locDisplay.textContent = lockedLoc;
|
||||
locDisplay.className = 'badge-lock';
|
||||
unlockBtn.style.display = 'inline-block';
|
||||
} else {
|
||||
locDisplay.textContent = '위치 QR 코드를 먼저 스캔하세요.';
|
||||
locDisplay.className = 'badge-empty';
|
||||
unlockBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function parseUrlParams() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const loc = params.get('loc');
|
||||
const asset = params.get('asset');
|
||||
|
||||
if (loc) {
|
||||
processScannedCode(loc);
|
||||
// Clean query parameters to avoid re-triggering on page refresh
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
} else if (asset) {
|
||||
processScannedCode(asset);
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
}
|
||||
}
|
||||
|
||||
function showFeedback(msg: string, type: 'success' | 'error') {
|
||||
feedbackEl.textContent = msg;
|
||||
feedbackEl.style.display = 'block';
|
||||
feedbackEl.className = `feedback-message ${type === 'success' ? 'feedback-success' : 'feedback-error'}`;
|
||||
|
||||
// Auto-hide feedback after 4 seconds
|
||||
setTimeout(() => {
|
||||
if (feedbackEl.textContent === msg) {
|
||||
feedbackEl.style.display = 'none';
|
||||
}
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
function vibrateDevice(pattern: number | number[]) {
|
||||
if ('vibrate' in navigator) {
|
||||
navigator.vibrate(pattern);
|
||||
}
|
||||
}
|
||||
});
|
||||
427
src/views/AuditApprovalView.ts
Normal file
427
src/views/AuditApprovalView.ts
Normal file
@@ -0,0 +1,427 @@
|
||||
import { state, loadMasterDataFromDB } from '../core/state';
|
||||
import { openHwModal } from '../components/Modal/HWModal';
|
||||
|
||||
/**
|
||||
* 실사 점검 승인 대시보드 뷰 (Vercel Style Clean layout)
|
||||
*/
|
||||
export async function renderAuditApprovalView(container: HTMLElement) {
|
||||
if (!container) return;
|
||||
|
||||
// 1. CSS Stylesheet Injection
|
||||
const styleId = 'audit-approval-view-style';
|
||||
if (!document.getElementById(styleId)) {
|
||||
const style = document.createElement('style');
|
||||
style.id = styleId;
|
||||
style.innerHTML = `
|
||||
.audit-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--header-height) - 48px);
|
||||
background-color: var(--canvas);
|
||||
color: var(--text-main);
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.audit-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.audit-title-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.audit-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.audit-badge {
|
||||
background-color: var(--primary-soft);
|
||||
color: var(--primary);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.audit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.audit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid var(--hairline);
|
||||
background-color: var(--canvas-soft);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.audit-btn:hover {
|
||||
background-color: var(--canvas-soft-2);
|
||||
}
|
||||
|
||||
.audit-btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: #fff;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.audit-btn-primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.audit-btn-danger {
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
color: var(--danger);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.audit-btn-danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
/* Data Table Custom Vercel layout */
|
||||
.audit-table-wrapper {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 12px;
|
||||
background-color: var(--canvas-soft);
|
||||
}
|
||||
|
||||
.audit-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: 0.825rem;
|
||||
}
|
||||
|
||||
.audit-table th {
|
||||
background-color: var(--canvas-soft-2);
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.audit-table td {
|
||||
padding: 0.75rem 0.8rem;
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.audit-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.audit-table tr:hover td {
|
||||
background-color: var(--canvas-soft-2);
|
||||
}
|
||||
|
||||
.audit-checkbox {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.link-asset-code {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-asset-code:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.location-badge-diff {
|
||||
background-color: rgba(245, 158, 11, 0.12);
|
||||
color: #d97706;
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.location-badge-same {
|
||||
background-color: rgba(16, 185, 129, 0.08);
|
||||
color: #059669;
|
||||
border: 1px solid rgba(16, 185, 129, 0.18);
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Empty State Illustration Layout */
|
||||
.audit-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.audit-empty-icon {
|
||||
font-size: 3rem;
|
||||
color: var(--hairline);
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
let pendingData: any[] = [];
|
||||
|
||||
// Function to load data and render layout
|
||||
async function loadAndRender() {
|
||||
try {
|
||||
container.innerHTML = `
|
||||
<div class="audit-container">
|
||||
<div class="audit-header">
|
||||
<div class="audit-title-area">
|
||||
<span class="audit-title">실사 점검 승인 관리</span>
|
||||
<span id="audit-count-badge" class="audit-badge">조회 중...</span>
|
||||
</div>
|
||||
<div class="audit-actions">
|
||||
<button id="btn-audit-refresh" class="audit-btn"><i data-lucide="refresh-ccw" style="width:14px; height:14px; margin-right:4px;"></i> 새로고침</button>
|
||||
<button id="btn-audit-reject" class="audit-btn audit-btn-danger" disabled>선택 반려</button>
|
||||
<button id="btn-audit-approve" class="audit-btn audit-btn-primary" disabled>선택 승인</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="audit-content-area" class="audit-table-wrapper">
|
||||
<div style="padding: 2rem; text-align: center; color: var(--text-muted);">실사 내역을 불러오고 있습니다...</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
bindHeaderEvents();
|
||||
await fetchPendingList();
|
||||
} catch (err) {
|
||||
console.error('Failed to init audit view:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchPendingList() {
|
||||
try {
|
||||
const res = await fetch('/api/audit/pending');
|
||||
pendingData = await res.json();
|
||||
renderTable();
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch pending audits:', err);
|
||||
const contentArea = document.getElementById('audit-content-area')!;
|
||||
contentArea.innerHTML = `<div style="padding: 3rem; text-align: center; color: var(--danger); font-weight: 600;">데이터를 불러오는 중 네트워크 에러가 발생했습니다.</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderTable() {
|
||||
const badge = document.getElementById('audit-count-badge')!;
|
||||
badge.textContent = `대기 ${pendingData.length}건`;
|
||||
|
||||
const contentArea = document.getElementById('audit-content-area')!;
|
||||
if (pendingData.length === 0) {
|
||||
contentArea.innerHTML = `
|
||||
<div class="audit-empty-state">
|
||||
<div class="audit-empty-icon">✓</div>
|
||||
<div style="font-size: 1.05rem; font-weight: 700; color: var(--text-main);">대기 중인 실사 내역이 없습니다</div>
|
||||
<div style="font-size: 0.8rem;">현장에서 스캐너로 자산을 스캔하면 실시간으로 여기에 등록됩니다.</div>
|
||||
</div>
|
||||
`;
|
||||
updateActionButtons();
|
||||
return;
|
||||
}
|
||||
|
||||
let tbodyRows = '';
|
||||
pendingData.forEach((row, i) => {
|
||||
// Format scanned date
|
||||
const dateStr = new Date(row.scanned_at).toLocaleString('ko-KR');
|
||||
|
||||
// Check if location actually changed
|
||||
const oldLocFull = row.old_location ? `${row.old_location} ${row.old_location_detail || ''}`.trim() : '미배치';
|
||||
const newLocFull = `${row.location_name} ${row.location_detail || ''}`.trim();
|
||||
const isDiff = oldLocFull !== newLocFull;
|
||||
|
||||
tbodyRows += `
|
||||
<tr>
|
||||
<td style="width: 40px; text-align: center;">
|
||||
<input type="checkbox" class="audit-checkbox row-select" data-id="${row.id}" />
|
||||
</td>
|
||||
<td>
|
||||
<span class="link-asset-code" data-index="${i}">${row.asset_code}</span>
|
||||
</td>
|
||||
<td>${row.asset_purpose || '-'}</td>
|
||||
<td><span class="badge" style="font-size: 11px;">${row.asset_type || 'IT자산'}</span></td>
|
||||
<td><span style="color: var(--text-muted);">${oldLocFull}</span></td>
|
||||
<td>
|
||||
<span class="${isDiff ? 'location-badge-diff' : 'location-badge-same'}">${newLocFull}</span>
|
||||
</td>
|
||||
<td style="color: var(--text-muted); font-size: 11px;">${dateStr}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
contentArea.innerHTML = `
|
||||
<table class="audit-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40px; text-align: center;">
|
||||
<input type="checkbox" class="audit-checkbox" id="chk-audit-all" />
|
||||
</th>
|
||||
<th>자산번호</th>
|
||||
<th>자산용도</th>
|
||||
<th>자산유형</th>
|
||||
<th>기존 위치</th>
|
||||
<th>실사 위치</th>
|
||||
<th>스캔 일시</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${tbodyRows}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
bindTableEvents();
|
||||
updateActionButtons();
|
||||
}
|
||||
|
||||
function bindHeaderEvents() {
|
||||
document.getElementById('btn-audit-refresh')?.addEventListener('click', () => fetchPendingList());
|
||||
|
||||
document.getElementById('btn-audit-approve')?.addEventListener('click', () => handleAction('approve'));
|
||||
document.getElementById('btn-audit-reject')?.addEventListener('click', () => handleAction('reject'));
|
||||
}
|
||||
|
||||
function bindTableEvents() {
|
||||
// Select All Checkbox
|
||||
const selectAllChk = document.getElementById('chk-audit-all') as HTMLInputElement;
|
||||
const rowCheckboxes = document.querySelectorAll('.row-select') as NodeListOf<HTMLInputElement>;
|
||||
|
||||
selectAllChk?.addEventListener('change', () => {
|
||||
rowCheckboxes.forEach(chk => {
|
||||
chk.checked = selectAllChk.checked;
|
||||
});
|
||||
updateActionButtons();
|
||||
});
|
||||
|
||||
rowCheckboxes.forEach(chk => {
|
||||
chk.addEventListener('change', () => {
|
||||
updateActionButtons();
|
||||
// Sync selectAll checkbox state
|
||||
const allChecked = Array.from(rowCheckboxes).every(c => c.checked);
|
||||
if (selectAllChk) selectAllChk.checked = allChecked;
|
||||
});
|
||||
});
|
||||
|
||||
// Asset Detail Modal linkage
|
||||
const assetLinks = document.querySelectorAll('.link-asset-code');
|
||||
assetLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
const idx = parseInt((e.target as HTMLElement).dataset.index!);
|
||||
const row = pendingData[idx];
|
||||
if (!row) return;
|
||||
|
||||
// Compile master array from state data to find full asset object
|
||||
const allHwAssets = [
|
||||
...(state.masterData.pc || []),
|
||||
...(state.masterData.server || []),
|
||||
...(state.masterData.storage || []),
|
||||
...(state.masterData.network || []),
|
||||
...(state.masterData.equipment || []),
|
||||
...(state.masterData.survey || []),
|
||||
...(state.masterData.officeSupplies || []),
|
||||
...(state.masterData.pcParts || [])
|
||||
];
|
||||
|
||||
const targetAsset = allHwAssets.find(a => a.asset_code === row.asset_code);
|
||||
if (targetAsset) {
|
||||
openHwModal(targetAsset, 'view');
|
||||
} else {
|
||||
alert(`자산 코드 [${row.asset_code}] 에 매칭되는 마스터 데이터가 존재하지 않습니다.`);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateActionButtons() {
|
||||
const selected = document.querySelectorAll('.row-select:checked');
|
||||
const approveBtn = document.getElementById('btn-audit-approve') as HTMLButtonElement;
|
||||
const rejectBtn = document.getElementById('btn-audit-reject') as HTMLButtonElement;
|
||||
|
||||
if (approveBtn && rejectBtn) {
|
||||
const isDisabled = selected.length === 0;
|
||||
approveBtn.disabled = isDisabled;
|
||||
rejectBtn.disabled = isDisabled;
|
||||
|
||||
approveBtn.textContent = `선택 승인 (${selected.length})`;
|
||||
rejectBtn.textContent = `선택 반려 (${selected.length})`;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAction(actionType: 'approve' | 'reject') {
|
||||
const selected = document.querySelectorAll('.row-select:checked') as NodeListOf<HTMLInputElement>;
|
||||
const ids = Array.from(selected).map(chk => parseInt(chk.dataset.id!));
|
||||
if (ids.length === 0) return;
|
||||
|
||||
const actionText = actionType === 'approve' ? '승인' : '반려';
|
||||
if (!confirm(`선택한 ${ids.length}건의 실사 내역을 최종 ${actionText} 처리할까요?`)) return;
|
||||
|
||||
const endpoint = actionType === 'approve' ? '/api/audit/approve' : '/api/audit/reject';
|
||||
|
||||
try {
|
||||
const res = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
pending_ids: ids,
|
||||
processed_by: 'ADMIN'
|
||||
})
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (res.ok && data.success) {
|
||||
alert(`성공적으로 ${actionText} 완료되었습니다.`);
|
||||
// Reload dashboard state to sync map_config/db coordinates changes
|
||||
await loadMasterDataFromDB();
|
||||
await fetchPendingList();
|
||||
} else {
|
||||
alert(`${actionText} 실패: ${data.error || '알 수 없는 서버 오류'}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`Failed to trigger audit ${actionType}:`, err);
|
||||
alert(`네트워크 통신 오류로 ${actionText} 처리가 실패했습니다.`);
|
||||
}
|
||||
}
|
||||
|
||||
// Run initial loading
|
||||
await loadAndRender();
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,291 +1,294 @@
|
||||
import { state } from '../core/state';
|
||||
import { openHwModal } from '../components/Modal/HWModal';
|
||||
import { ASSET_SCHEMA } from '../core/schema';
|
||||
import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
|
||||
|
||||
/**
|
||||
* 위치 중심 자산 현황 뷰 (Vercel Integrated)
|
||||
*/
|
||||
export async function renderLocationView(container: HTMLElement) {
|
||||
if (!container) return;
|
||||
|
||||
let currentLoc = '기술개발센터';
|
||||
let currentDetail = '서버실';
|
||||
let currentPage = 0;
|
||||
let mapConfig: any = {};
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/maps');
|
||||
mapConfig = await res.json();
|
||||
} catch (err) { console.error('Failed to load map config', err); }
|
||||
|
||||
const render = () => {
|
||||
const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail])
|
||||
? IMAGE_LOCATIONS[currentLoc][currentDetail]
|
||||
: [];
|
||||
const mapPath = locImages[currentPage] || '';
|
||||
|
||||
// 모든 하드웨어 카테고리에서 자산 검색
|
||||
const allHwAssets = [
|
||||
...state.masterData.pc,
|
||||
...state.masterData.server,
|
||||
...state.masterData.storage,
|
||||
...state.masterData.network,
|
||||
...state.masterData.equipment,
|
||||
...state.masterData.survey,
|
||||
...state.masterData.officeSupplies,
|
||||
...state.masterData.pcParts
|
||||
];
|
||||
|
||||
// map_config.json에 설정된 모든 박스를 복사해서 작업용으로 사용
|
||||
const tempBoxes = (mapConfig[mapPath] || []).map((b: any) => ({ ...b }));
|
||||
|
||||
// DB 데이터에서 현재 지도(mapPath) 및 위치와 좌표 정보(loc_x, loc_y)가 일치하는 자산 추출
|
||||
allHwAssets.forEach((asset: any) => {
|
||||
const photoPath = asset.location_photo || asset.loc_img || '';
|
||||
const hasCoords = asset.loc_x != null && asset.loc_y != null && asset.loc_x !== '' && asset.loc_y !== '' && asset.loc_x !== 'null' && asset.loc_y !== 'null';
|
||||
|
||||
if (hasCoords && photoPath.trim() === mapPath.trim()) {
|
||||
const ax = parseFloat(asset.loc_x);
|
||||
const ay = parseFloat(asset.loc_y);
|
||||
|
||||
// map_config.json에서 읽어온 박스들 중 x, y 좌표가 일치하는 빈 박스가 있는지 찾음 (오차범위 0.1 고려)
|
||||
const matchedBox = tempBoxes.find((b: any) => {
|
||||
const bx = parseFloat(b.x);
|
||||
const by = parseFloat(b.y);
|
||||
return Math.abs(bx - ax) < 0.1 && Math.abs(by - ay) < 0.1;
|
||||
});
|
||||
|
||||
if (matchedBox) {
|
||||
// 이미 매칭된 박스가 존재하고 asset_id가 비어있다면 해당 박스에 asset_id를 주입
|
||||
if (matchedBox.asset_id == null) {
|
||||
matchedBox.asset_id = asset.id;
|
||||
}
|
||||
} else {
|
||||
// 일치하는 기존 박스가 없을 때만 4x4 크기의 임시 박스로 동적 생성
|
||||
const alreadyMatched = tempBoxes.some((b: any) => b.asset_id === asset.id);
|
||||
if (!alreadyMatched) {
|
||||
tempBoxes.push({
|
||||
asset_id: asset.id,
|
||||
x: asset.loc_x,
|
||||
y: asset.loc_y,
|
||||
w: '4',
|
||||
h: '4',
|
||||
name: asset.asset_purpose || asset.asset_code || '미지정 자산'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 최종적으로 asset_id가 null이 아닌(자산이 정상 매핑되거나 갱신된) 박스들만 남겨서 렌더링
|
||||
const boxes = tempBoxes.filter((b: any) => b.asset_id != null);
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="location-view-wrapper">
|
||||
<!-- 상단 통합 바 (Unified Search Bar) -->
|
||||
<div class="location-filter-bar search-bar">
|
||||
<div class="search-item">
|
||||
<label class="list-view-toggle-label">
|
||||
<input type="checkbox" id="chk-list-view-loc" />
|
||||
목록보기
|
||||
</label>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>건물/위치</label>
|
||||
<select id="sel-loc-main">
|
||||
${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>상세 위치</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<select id="sel-loc-detail">
|
||||
${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
|
||||
</select>
|
||||
|
||||
<!-- 페이지네이션 -->
|
||||
${locImages.length > 1 ? `
|
||||
<div class="map-pagination-group">
|
||||
<div class="page-btns flex gap-1">
|
||||
<button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
|
||||
<button id="btn-next-page" class="btn btn-outline btn-sm" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
|
||||
</div>
|
||||
<span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="location-main-content">
|
||||
<!-- 지도 섹션 -->
|
||||
<div class="map-container-section">
|
||||
<div class="map-frame-wrapper">
|
||||
${mapPath ? `
|
||||
<img src="${mapPath}" id="main-map-img" class="map-image">
|
||||
<div id="box-overlay" class="map-overlay">
|
||||
${boxes.map((box: any, idx: number) => {
|
||||
const asset = allHwAssets.find(a => a.id === box.asset_id);
|
||||
const name = asset ? ((asset as any).asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
|
||||
// w, h가 없거나 너무 작으면 최소 크기(3%) 보장하여 영역으로 표시
|
||||
const width = Math.max(parseFloat(box.w || '3'), 3);
|
||||
const height = Math.max(parseFloat(box.h || '3'), 3);
|
||||
return `
|
||||
<div class="location-box-area"
|
||||
data-asset-id="${box.asset_id}"
|
||||
data-name="${name}"
|
||||
style="left:${box.x}%; top:${box.y}%; width:${width}%; height:${height}%;
|
||||
border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto; position: absolute;">
|
||||
</div>
|
||||
`}).join('')}
|
||||
</div>
|
||||
` : '<div class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 상세 정보 섹션 -->
|
||||
<div class="asset-list-section">
|
||||
<div class="section-header">
|
||||
<h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
|
||||
</div>
|
||||
<div id="loc-asset-table-container" class="mini-table-wrapper">
|
||||
<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const syncOverlaySize = () => {
|
||||
const img = container.querySelector('#main-map-img') as HTMLImageElement;
|
||||
const overlay = container.querySelector('#box-overlay') as HTMLElement;
|
||||
|
||||
if (img && overlay && img.complete) {
|
||||
overlay.style.width = img.clientWidth + 'px';
|
||||
overlay.style.height = img.clientHeight + 'px';
|
||||
overlay.style.left = img.offsetLeft + 'px';
|
||||
overlay.style.top = img.offsetTop + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
const img = container.querySelector('#main-map-img') as HTMLImageElement;
|
||||
if (img) {
|
||||
if (img.complete) {
|
||||
syncOverlaySize();
|
||||
setTimeout(syncOverlaySize, 50);
|
||||
} else {
|
||||
img.onload = syncOverlaySize;
|
||||
}
|
||||
}
|
||||
|
||||
window.removeEventListener('resize', syncOverlaySize);
|
||||
window.addEventListener('resize', syncOverlaySize);
|
||||
|
||||
const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
|
||||
selMain?.addEventListener('change', () => {
|
||||
currentLoc = selMain.value;
|
||||
currentDetail = LOCATION_DATA[currentLoc][0];
|
||||
currentPage = 0;
|
||||
render();
|
||||
});
|
||||
|
||||
const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement;
|
||||
selDetail?.addEventListener('change', () => {
|
||||
currentDetail = selDetail.value;
|
||||
currentPage = 0;
|
||||
render();
|
||||
});
|
||||
|
||||
container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
|
||||
container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
|
||||
|
||||
const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
|
||||
|
||||
if (chkBox) {
|
||||
chkBox.checked = state.viewMode === 'list';
|
||||
const handleToggle = () => {
|
||||
const isListMode = chkBox.checked;
|
||||
if (isListMode) {
|
||||
state.viewMode = 'list';
|
||||
} else {
|
||||
state.viewMode = 'location';
|
||||
}
|
||||
window.dispatchEvent(new Event('refresh-view'));
|
||||
};
|
||||
chkBox.addEventListener('change', handleToggle);
|
||||
}
|
||||
|
||||
container.querySelectorAll('.location-box-area').forEach(box => {
|
||||
box.addEventListener('click', () => {
|
||||
const assetId = box.getAttribute('data-asset-id');
|
||||
if (!assetId) return;
|
||||
|
||||
const targetAsset = allHwAssets.find(a => a.id === assetId);
|
||||
|
||||
if (targetAsset) renderAssetDetail(targetAsset);
|
||||
container.querySelectorAll('.location-box-area').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
|
||||
(box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const renderAssetDetail = (asset: any) => {
|
||||
const title = container.querySelector('#loc-list-title')!;
|
||||
const tableContainer = container.querySelector('#loc-asset-table-container')!;
|
||||
|
||||
title.innerHTML = `
|
||||
<div class="detail-header-actions">
|
||||
<div class="header-identity">
|
||||
<span class="asset-code-title">${asset.asset_code || '미부여'}</span>
|
||||
<span class="service-type-badge">${asset.service_type || '운영'}</span>
|
||||
<span class="asset-type-label">${asset.asset_type || 'PC'}</span>
|
||||
</div>
|
||||
<button id="btn-view-from-loc" class="btn btn-primary btn-sm">조회</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const fields = [
|
||||
{ label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
|
||||
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
|
||||
{ label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
|
||||
{ label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
|
||||
{ label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
|
||||
{ label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
|
||||
{ label: ASSET_SCHEMA.OS.ui, value: asset.os },
|
||||
{ label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
|
||||
{ label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
|
||||
{ label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true },
|
||||
{ label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
|
||||
{ label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
|
||||
{ label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool },
|
||||
{ label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
|
||||
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
|
||||
];
|
||||
|
||||
const sectionsHTML = `
|
||||
<div class="detail-section" style="margin-bottom: 0;">
|
||||
<div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
|
||||
${fields.map(f => `
|
||||
<div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
|
||||
<div class="detail-label-sm">${f.label}</div>
|
||||
<div class="detail-value-lg">${f.value || '-'}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
tableContainer.innerHTML = `
|
||||
<div class="asset-detail-sidebar">
|
||||
${sectionsHTML}
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.querySelector('#btn-view-from-loc')?.addEventListener('click', () => {
|
||||
openHwModal(asset, 'view');
|
||||
});
|
||||
};
|
||||
|
||||
render();
|
||||
}
|
||||
import { state } from '../core/state';
|
||||
import { openHwModal } from '../components/Modal/HWModal';
|
||||
import { ASSET_SCHEMA } from '../core/schema';
|
||||
import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
|
||||
|
||||
/**
|
||||
* 위치 중심 자산 현황 뷰 (Vercel Integrated)
|
||||
*/
|
||||
export async function renderLocationView(container: HTMLElement) {
|
||||
if (!container) return;
|
||||
|
||||
let currentLoc = '기술개발센터';
|
||||
let currentDetail = '서버실';
|
||||
let currentPage = 0;
|
||||
let mapConfig: any = {};
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/maps');
|
||||
mapConfig = await res.json();
|
||||
} catch (err) { console.error('Failed to load map config', err); }
|
||||
|
||||
const render = () => {
|
||||
const locImages = (IMAGE_LOCATIONS[currentLoc] && IMAGE_LOCATIONS[currentLoc][currentDetail])
|
||||
? IMAGE_LOCATIONS[currentLoc][currentDetail]
|
||||
: [];
|
||||
const mapPath = locImages[currentPage] || '';
|
||||
|
||||
// 모든 하드웨어 카테고리에서 자산 검색
|
||||
const allHwAssets = [
|
||||
...state.masterData.pc,
|
||||
...state.masterData.server,
|
||||
...state.masterData.storage,
|
||||
...state.masterData.network,
|
||||
...state.masterData.equipment,
|
||||
...state.masterData.survey,
|
||||
...state.masterData.officeSupplies,
|
||||
...state.masterData.pcParts
|
||||
];
|
||||
|
||||
// map_config.json에 설정된 모든 박스를 복사해서 작업용으로 사용
|
||||
const tempBoxes = (mapConfig[mapPath] || []).map((b: any) => ({ ...b }));
|
||||
|
||||
// DB 데이터에서 현재 지도(mapPath) 및 위치와 좌표 정보(loc_x, loc_y)가 일치하는 자산 추출
|
||||
allHwAssets.forEach((asset: any) => {
|
||||
const photoPath = asset.location_photo || asset.loc_img || '';
|
||||
const hasCoords = asset.loc_x != null && asset.loc_y != null && asset.loc_x !== '' && asset.loc_y !== '' && asset.loc_x !== 'null' && asset.loc_y !== 'null';
|
||||
|
||||
if (hasCoords && photoPath.trim() === mapPath.trim()) {
|
||||
const ax = parseFloat(asset.loc_x);
|
||||
const ay = parseFloat(asset.loc_y);
|
||||
|
||||
// map_config.json에서 읽어온 박스들 중 x, y 좌표가 일치하는 빈 박스가 있는지 찾음 (오차범위 0.1 고려)
|
||||
const matchedBox = tempBoxes.find((b: any) => {
|
||||
const bx = parseFloat(b.x);
|
||||
const by = parseFloat(b.y);
|
||||
return Math.abs(bx - ax) < 0.1 && Math.abs(by - ay) < 0.1;
|
||||
});
|
||||
|
||||
if (matchedBox) {
|
||||
// 이미 매칭된 박스가 존재하고 asset_id가 비어있다면 해당 박스에 asset_id를 주입
|
||||
if (matchedBox.asset_id == null) {
|
||||
matchedBox.asset_id = asset.id;
|
||||
}
|
||||
} else {
|
||||
// 일치하는 기존 박스가 없을 때만 4x4 크기의 임시 박스로 동적 생성
|
||||
const alreadyMatched = tempBoxes.some((b: any) => b.asset_id === asset.id);
|
||||
if (!alreadyMatched) {
|
||||
tempBoxes.push({
|
||||
asset_id: asset.id,
|
||||
x: asset.loc_x,
|
||||
y: asset.loc_y,
|
||||
w: '4',
|
||||
h: '4',
|
||||
name: asset.asset_purpose || asset.asset_code || '미지정 자산'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 최종적으로 asset_id가 null이 아닌(자산이 정상 매핑되거나 갱신된) 박스들만 남겨서 렌더링
|
||||
const boxes = tempBoxes.filter((b: any) => b.asset_id != null);
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="location-view-wrapper">
|
||||
<!-- 상단 통합 바 (Unified Search Bar) -->
|
||||
<div class="location-filter-bar search-bar">
|
||||
<div class="search-item">
|
||||
<label class="list-view-toggle-label">
|
||||
<input type="checkbox" id="chk-list-view-loc" />
|
||||
목록보기
|
||||
</label>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>건물/위치</label>
|
||||
<select id="sel-loc-main">
|
||||
${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>상세 위치</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<select id="sel-loc-detail">
|
||||
${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
|
||||
</select>
|
||||
|
||||
<!-- 페이지네이션 -->
|
||||
${locImages.length > 1 ? `
|
||||
<div class="map-pagination-group">
|
||||
<div class="page-btns flex gap-1">
|
||||
<button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
|
||||
<button id="btn-next-page" class="btn btn-outline btn-sm" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
|
||||
</div>
|
||||
<span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="location-main-content">
|
||||
<!-- 지도 섹션 -->
|
||||
<div class="map-container-section">
|
||||
<div class="map-frame-wrapper">
|
||||
${mapPath ? `
|
||||
<img src="${mapPath}" id="main-map-img" class="map-image">
|
||||
<div id="box-overlay" class="map-overlay">
|
||||
${boxes.map((box: any, idx: number) => {
|
||||
const asset = allHwAssets.find(a => a.id === box.asset_id);
|
||||
const name = asset ? ((asset as any).asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
|
||||
// w, h가 없거나 너무 작으면 최소 크기(3%) 보장하여 영역으로 표시
|
||||
const width = Math.max(parseFloat(box.w || '3'), 3);
|
||||
const height = Math.max(parseFloat(box.h || '3'), 3);
|
||||
return `
|
||||
<div class="location-box-area"
|
||||
data-asset-id="${box.asset_id}"
|
||||
data-name="${name}"
|
||||
style="left:${box.x}%; top:${box.y}%; width:${width}%; height:${height}%;
|
||||
border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto; position: absolute;">
|
||||
</div>
|
||||
`}).join('')}
|
||||
</div>
|
||||
` : '<div class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 상세 정보 섹션 -->
|
||||
<div class="asset-list-section">
|
||||
<div class="section-header">
|
||||
<h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
|
||||
</div>
|
||||
<div id="loc-asset-table-container" class="mini-table-wrapper">
|
||||
<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const syncOverlaySize = () => {
|
||||
const img = container.querySelector('#main-map-img') as HTMLImageElement;
|
||||
const overlay = container.querySelector('#box-overlay') as HTMLElement;
|
||||
|
||||
if (img && overlay && img.complete) {
|
||||
overlay.style.width = img.clientWidth + 'px';
|
||||
overlay.style.height = img.clientHeight + 'px';
|
||||
overlay.style.left = img.offsetLeft + 'px';
|
||||
overlay.style.top = img.offsetTop + 'px';
|
||||
}
|
||||
};
|
||||
|
||||
const img = container.querySelector('#main-map-img') as HTMLImageElement;
|
||||
if (img) {
|
||||
if (img.complete) {
|
||||
syncOverlaySize();
|
||||
setTimeout(syncOverlaySize, 50);
|
||||
} else {
|
||||
img.onload = syncOverlaySize;
|
||||
}
|
||||
}
|
||||
|
||||
window.removeEventListener('resize', syncOverlaySize);
|
||||
window.addEventListener('resize', syncOverlaySize);
|
||||
|
||||
const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
|
||||
selMain?.addEventListener('change', () => {
|
||||
currentLoc = selMain.value;
|
||||
currentDetail = LOCATION_DATA[currentLoc][0];
|
||||
currentPage = 0;
|
||||
render();
|
||||
});
|
||||
|
||||
const selDetail = container.querySelector('#sel-loc-detail') as HTMLSelectElement;
|
||||
selDetail?.addEventListener('change', () => {
|
||||
currentDetail = selDetail.value;
|
||||
currentPage = 0;
|
||||
render();
|
||||
});
|
||||
|
||||
container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
|
||||
container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
|
||||
|
||||
const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
|
||||
|
||||
if (chkBox) {
|
||||
chkBox.checked = state.viewMode === 'list';
|
||||
const handleToggle = () => {
|
||||
const isListMode = chkBox.checked;
|
||||
if (isListMode) {
|
||||
state.viewMode = 'list';
|
||||
} else {
|
||||
state.viewMode = 'location';
|
||||
}
|
||||
window.dispatchEvent(new Event('refresh-view'));
|
||||
};
|
||||
chkBox.addEventListener('change', handleToggle);
|
||||
}
|
||||
|
||||
container.querySelectorAll('.location-box-area').forEach(box => {
|
||||
box.addEventListener('click', () => {
|
||||
const assetId = box.getAttribute('data-asset-id');
|
||||
if (!assetId) return;
|
||||
|
||||
const targetAsset = allHwAssets.find(a => a.id === assetId);
|
||||
|
||||
if (targetAsset) renderAssetDetail(targetAsset);
|
||||
container.querySelectorAll('.location-box-area').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
|
||||
(box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const renderAssetDetail = (asset: any) => {
|
||||
const title = container.querySelector('#loc-list-title')!;
|
||||
const tableContainer = container.querySelector('#loc-asset-table-container')!;
|
||||
|
||||
title.innerHTML = `
|
||||
<div class="detail-header-actions">
|
||||
<div class="header-identity">
|
||||
<span class="asset-code-title">${asset.asset_code || '미부여'}</span>
|
||||
<span class="service-type-badge">${asset.service_type || '운영'}</span>
|
||||
<span class="asset-type-label">${asset.asset_type || 'PC'}</span>
|
||||
</div>
|
||||
<div style="display: inline-flex; align-items: center; gap: 0.5rem;">
|
||||
${asset.is_audit_approved ? `<span style="display: inline-flex; align-items: center; background-color: rgba(16, 185, 129, 0.08); color: #059669; border: 1px solid rgba(16, 185, 129, 0.18); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; height: 18px; line-height: 1; white-space: nowrap; vertical-align: middle;">승인완료</span>` : ''}
|
||||
<button id="btn-view-from-loc" class="btn btn-primary btn-sm">조회</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const fields = [
|
||||
{ label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
|
||||
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
|
||||
{ label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
|
||||
{ label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
|
||||
{ label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
|
||||
{ label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
|
||||
{ label: ASSET_SCHEMA.OS.ui, value: asset.os },
|
||||
{ label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
|
||||
{ label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
|
||||
{ label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true },
|
||||
{ label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
|
||||
{ label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
|
||||
{ label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool },
|
||||
{ label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
|
||||
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
|
||||
];
|
||||
|
||||
const sectionsHTML = `
|
||||
<div class="detail-section" style="margin-bottom: 0;">
|
||||
<div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
|
||||
${fields.map(f => `
|
||||
<div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
|
||||
<div class="detail-label-sm">${f.label}</div>
|
||||
<div class="detail-value-lg">${f.value || '-'}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
tableContainer.innerHTML = `
|
||||
<div class="asset-detail-sidebar">
|
||||
${sectionsHTML}
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.querySelector('#btn-view-from-loc')?.addEventListener('click', () => {
|
||||
openHwModal(asset, 'view');
|
||||
});
|
||||
};
|
||||
|
||||
render();
|
||||
}
|
||||
|
||||
@@ -1,299 +1,367 @@
|
||||
import { IMAGE_LOCATIONS } from '../components/Modal/SharedData';
|
||||
import { API_BASE_URL } from '../core/utils';
|
||||
import { createIcons, X, Save, Trash2, ChevronLeft, ChevronRight } from 'lucide';
|
||||
|
||||
export class MapEditor {
|
||||
private container: HTMLElement;
|
||||
private wrapper: HTMLElement;
|
||||
private img: HTMLImageElement;
|
||||
private boxListEl: HTMLElement;
|
||||
private pathLabel: HTMLElement;
|
||||
private statusEl: HTMLElement;
|
||||
private saveBtn: HTMLButtonElement;
|
||||
private fileSidebar: HTMLElement;
|
||||
|
||||
private allMapConfig: Record<string, any[]> = {};
|
||||
private boxes: any[] = [];
|
||||
private isDrawing: boolean = false;
|
||||
private startX: number = 0;
|
||||
private startY: number = 0;
|
||||
private currentBox: HTMLElement | null = null;
|
||||
private currentPath: string = '';
|
||||
private assetOptions: {id: string, name: string}[] = [];
|
||||
|
||||
constructor() {
|
||||
this.container = document.getElementById('container')!;
|
||||
this.wrapper = document.getElementById('wrapper')!;
|
||||
this.img = document.getElementById('target-img') as HTMLImageElement;
|
||||
this.boxListEl = document.getElementById('box-list')!;
|
||||
this.pathLabel = document.getElementById('current-path')!;
|
||||
this.statusEl = document.getElementById('save-status')!;
|
||||
this.saveBtn = document.getElementById('btn-save-server') as HTMLButtonElement;
|
||||
this.fileSidebar = document.getElementById('file-sidebar')!;
|
||||
}
|
||||
|
||||
public async init() {
|
||||
this.renderFileSidebar();
|
||||
await this.loadConfig();
|
||||
await this.loadAssets();
|
||||
this.bindEvents();
|
||||
this.selectFirstFile();
|
||||
createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
|
||||
}
|
||||
|
||||
private async loadAssets() {
|
||||
try {
|
||||
const res = await fetch(`/api/assets/master`);
|
||||
const masterData = await res.json();
|
||||
const allHw = [
|
||||
...(masterData.pc || []),
|
||||
...(masterData.server || []),
|
||||
...(masterData.storage || []),
|
||||
...(masterData.network || []),
|
||||
...(masterData.equipment || []),
|
||||
...(masterData.survey || []),
|
||||
...(masterData.officeSupplies || []),
|
||||
...(masterData.pcParts || [])
|
||||
];
|
||||
this.assetOptions = allHw.map(a => ({
|
||||
id: a.id,
|
||||
name: `[${a.asset_code}] ${a.asset_purpose || a.model_name || a.category}`
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Failed to load assets for mapping', err);
|
||||
}
|
||||
}
|
||||
|
||||
private renderFileSidebar() {
|
||||
let html = '';
|
||||
Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
|
||||
html += `<div class="folder-item">${bldg}</div>`;
|
||||
Object.entries(details).forEach(([detail, paths]) => {
|
||||
paths.forEach(path => {
|
||||
const fileName = path.split('/').pop() || path;
|
||||
html += `<div class="file-item" data-path="${path}">${fileName}</div>`;
|
||||
});
|
||||
});
|
||||
});
|
||||
this.fileSidebar.innerHTML = html;
|
||||
|
||||
this.fileSidebar.querySelectorAll('.file-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
this.fileSidebar.querySelectorAll('.file-item').forEach(i => i.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
this.renderCurrentFile();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private selectFirstFile() {
|
||||
const firstItem = this.fileSidebar.querySelector('.file-item') as HTMLElement;
|
||||
if (firstItem) {
|
||||
firstItem.classList.add('active');
|
||||
this.renderCurrentFile();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadConfig() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/maps`);
|
||||
this.allMapConfig = await res.json();
|
||||
} catch (err) {
|
||||
console.error('Failed to load config:', err);
|
||||
}
|
||||
}
|
||||
|
||||
private renderCurrentFile() {
|
||||
const activeItem = this.fileSidebar.querySelector('.file-item.active') as HTMLElement;
|
||||
if (!activeItem) return;
|
||||
|
||||
this.currentPath = activeItem.dataset.path || '';
|
||||
this.boxes = this.allMapConfig[this.currentPath] || [];
|
||||
this.pathLabel.textContent = this.currentPath;
|
||||
this.img.src = this.currentPath;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private bindEvents() {
|
||||
this.wrapper.addEventListener('mousedown', (e) => {
|
||||
if (e.button !== 0) return;
|
||||
this.isDrawing = true;
|
||||
const rect = this.wrapper.getBoundingClientRect();
|
||||
this.startX = e.clientX - rect.left;
|
||||
this.startY = e.clientY - rect.top;
|
||||
|
||||
this.currentBox = document.createElement('div');
|
||||
this.currentBox.className = 'draw-box';
|
||||
this.currentBox.style.left = this.startX + 'px';
|
||||
this.currentBox.style.top = this.startY + 'px';
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'box-label';
|
||||
label.textContent = '#' + (this.boxes.length + 1);
|
||||
this.currentBox.appendChild(label);
|
||||
|
||||
this.wrapper.appendChild(this.currentBox);
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!this.isDrawing || !this.currentBox) return;
|
||||
const rect = this.wrapper.getBoundingClientRect();
|
||||
const currentX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
|
||||
const currentY = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
|
||||
|
||||
const width = currentX - this.startX;
|
||||
const height = currentY - this.startY;
|
||||
|
||||
this.currentBox.style.width = Math.abs(width) + 'px';
|
||||
this.currentBox.style.height = Math.abs(height) + 'px';
|
||||
this.currentBox.style.left = (width > 0 ? this.startX : currentX) + 'px';
|
||||
this.currentBox.style.top = (height > 0 ? this.startY : currentY) + 'px';
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
if (!this.isDrawing || !this.currentBox) return;
|
||||
this.isDrawing = false;
|
||||
|
||||
const width = parseFloat(this.currentBox.style.width);
|
||||
const height = parseFloat(this.currentBox.style.height);
|
||||
|
||||
if (width > 3 && height > 3) {
|
||||
const rect = this.wrapper.getBoundingClientRect();
|
||||
const boxData = {
|
||||
x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
|
||||
y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
|
||||
w: (width / rect.width * 100).toFixed(2),
|
||||
h: (height / rect.height * 100).toFixed(2),
|
||||
asset_id: null
|
||||
};
|
||||
this.boxes.push(boxData);
|
||||
this.render();
|
||||
}
|
||||
|
||||
this.currentBox.remove();
|
||||
this.currentBox = null;
|
||||
});
|
||||
|
||||
(window as any).removeBox = (index: number) => {
|
||||
this.boxes.splice(index, 1);
|
||||
this.render();
|
||||
};
|
||||
|
||||
document.getElementById('btn-clear-all')?.addEventListener('click', () => {
|
||||
if(confirm('모든 박스를 삭제할까요?')) {
|
||||
this.boxes = [];
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('btn-save-server')?.addEventListener('click', () => this.saveToServer());
|
||||
}
|
||||
|
||||
private async saveToServer() {
|
||||
if (!this.currentPath) return;
|
||||
|
||||
try {
|
||||
this.saveBtn.disabled = true;
|
||||
this.saveBtn.textContent = '저장 중...';
|
||||
|
||||
const res = await fetch(`${API_BASE_URL}/api/maps/save`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ path: this.currentPath, boxes: this.boxes })
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
this.allMapConfig[this.currentPath] = [...this.boxes];
|
||||
this.statusEl.textContent = '✅ 서버 저장 완료 (' + new Date().toLocaleTimeString() + ')';
|
||||
setTimeout(() => this.statusEl.textContent = '', 3000);
|
||||
} else {
|
||||
alert('저장 실패!');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('서버 연결 오류!');
|
||||
} finally {
|
||||
this.saveBtn.disabled = false;
|
||||
this.saveBtn.textContent = '서버에 즉시 저장';
|
||||
}
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.boxListEl.innerHTML = '';
|
||||
const oldBoxes = this.wrapper.querySelectorAll('.placed-box');
|
||||
oldBoxes.forEach(b => b.remove());
|
||||
|
||||
this.boxes.forEach((box, i) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'placed-box';
|
||||
div.style.left = box.x + '%';
|
||||
div.style.top = box.y + '%';
|
||||
div.style.width = box.w + '%';
|
||||
div.style.height = box.h + '%';
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'box-label';
|
||||
label.textContent = '#' + (i + 1);
|
||||
div.appendChild(label);
|
||||
|
||||
this.wrapper.appendChild(div);
|
||||
|
||||
// Create asset options dropdown
|
||||
let optionsHtml = '<option value="">-- 자산 매핑 안 됨 --</option>';
|
||||
this.assetOptions.forEach(opt => {
|
||||
const selected = box.asset_id === opt.id ? 'selected' : '';
|
||||
optionsHtml += `<option value="${opt.id}" ${selected}>${opt.name}</option>`;
|
||||
});
|
||||
|
||||
const item = document.createElement('div');
|
||||
item.className = 'box-item';
|
||||
item.innerHTML = `
|
||||
<div class="box-header">
|
||||
<span class="box-index">#${i+1}</span>
|
||||
<button class="btn-del" onclick="removeBox(${i})">×</button>
|
||||
</div>
|
||||
<div class="box-inputs margin-bottom">
|
||||
<select data-index="${i}" data-prop="asset_id">
|
||||
${optionsHtml}
|
||||
</select>
|
||||
</div>
|
||||
<div class="box-inputs">
|
||||
<div class="input-group">
|
||||
<label>X</label>
|
||||
<input type="number" step="0.01" value="${box.x}" data-index="${i}" data-prop="x">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Y</label>
|
||||
<input type="number" step="0.01" value="${box.y}" data-index="${i}" data-prop="y">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>W</label>
|
||||
<input type="number" step="0.01" value="${box.w}" data-index="${i}" data-prop="w">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>H</label>
|
||||
<input type="number" step="0.01" value="${box.h}" data-index="${i}" data-prop="h">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.boxListEl.appendChild(item);
|
||||
});
|
||||
|
||||
// Add events to new inputs and selects
|
||||
this.boxListEl.querySelectorAll('input, select').forEach(input => {
|
||||
input.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement | HTMLSelectElement;
|
||||
const index = parseInt(target.dataset.index!);
|
||||
const prop = target.dataset.prop!;
|
||||
|
||||
if (this.boxes[index]) {
|
||||
if (prop === 'asset_id') {
|
||||
this.boxes[index][prop] = target.value || null;
|
||||
} else {
|
||||
this.boxes[index][prop] = parseFloat(target.value).toFixed(2);
|
||||
this.render(); // Re-render to update the map visual size
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
import { IMAGE_LOCATIONS } from '../components/Modal/SharedData';
|
||||
import { createIcons, X, Save, Trash2, ChevronLeft, ChevronRight } from 'lucide';
|
||||
import { QRPrinter } from '../core/qr_print';
|
||||
|
||||
export class MapEditor {
|
||||
private container: HTMLElement;
|
||||
private wrapper: HTMLElement;
|
||||
private img: HTMLImageElement;
|
||||
private boxListEl: HTMLElement;
|
||||
private pathLabel: HTMLElement;
|
||||
private statusEl: HTMLElement;
|
||||
private saveBtn: HTMLButtonElement;
|
||||
private fileSidebar: HTMLElement;
|
||||
|
||||
private allMapConfig: Record<string, any[]> = {};
|
||||
private boxes: any[] = [];
|
||||
private isDrawing: boolean = false;
|
||||
private startX: number = 0;
|
||||
private startY: number = 0;
|
||||
private currentBox: HTMLElement | null = null;
|
||||
private currentPath: string = '';
|
||||
private assetOptions: {id: string, name: string}[] = [];
|
||||
|
||||
constructor() {
|
||||
this.container = document.getElementById('container')!;
|
||||
this.wrapper = document.getElementById('wrapper')!;
|
||||
this.img = document.getElementById('target-img') as HTMLImageElement;
|
||||
this.boxListEl = document.getElementById('box-list')!;
|
||||
this.pathLabel = document.getElementById('current-path')!;
|
||||
this.statusEl = document.getElementById('save-status')!;
|
||||
this.saveBtn = document.getElementById('btn-save-server') as HTMLButtonElement;
|
||||
this.fileSidebar = document.getElementById('file-sidebar')!;
|
||||
}
|
||||
|
||||
public async init() {
|
||||
this.renderFileSidebar();
|
||||
await this.loadConfig();
|
||||
await this.loadAssets();
|
||||
this.bindEvents();
|
||||
this.selectFirstFile();
|
||||
createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
|
||||
}
|
||||
|
||||
private async loadAssets() {
|
||||
try {
|
||||
const res = await fetch('/api/assets/master');
|
||||
const masterData = await res.json();
|
||||
const allHw = [
|
||||
...(masterData.pc || []),
|
||||
...(masterData.server || []),
|
||||
...(masterData.storage || []),
|
||||
...(masterData.network || []),
|
||||
...(masterData.equipment || []),
|
||||
...(masterData.survey || []),
|
||||
...(masterData.officeSupplies || []),
|
||||
...(masterData.pcParts || [])
|
||||
];
|
||||
this.assetOptions = allHw.map(a => ({
|
||||
id: a.id,
|
||||
name: `[${a.asset_code}] ${a.asset_purpose || a.model_name || a.category}`
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Failed to load assets for mapping', err);
|
||||
}
|
||||
}
|
||||
|
||||
private renderFileSidebar() {
|
||||
let html = '';
|
||||
Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
|
||||
html += `<div class="folder-item">${bldg}</div>`;
|
||||
Object.entries(details).forEach(([detail, paths]) => {
|
||||
paths.forEach(path => {
|
||||
const fileName = path.split('/').pop() || path;
|
||||
html += `<div class="file-item" data-path="${path}">${fileName}</div>`;
|
||||
});
|
||||
});
|
||||
});
|
||||
this.fileSidebar.innerHTML = html;
|
||||
|
||||
this.fileSidebar.querySelectorAll('.file-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
this.fileSidebar.querySelectorAll('.file-item').forEach(i => i.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
this.renderCurrentFile();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private selectFirstFile() {
|
||||
const firstItem = this.fileSidebar.querySelector('.file-item') as HTMLElement;
|
||||
if (firstItem) {
|
||||
firstItem.classList.add('active');
|
||||
this.renderCurrentFile();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadConfig() {
|
||||
try {
|
||||
const res = await fetch('/api/maps');
|
||||
this.allMapConfig = await res.json();
|
||||
} catch (err) {
|
||||
console.error('Failed to load config:', err);
|
||||
}
|
||||
}
|
||||
|
||||
private renderCurrentFile() {
|
||||
const activeItem = this.fileSidebar.querySelector('.file-item.active') as HTMLElement;
|
||||
if (!activeItem) return;
|
||||
|
||||
this.currentPath = activeItem.dataset.path || '';
|
||||
this.boxes = this.allMapConfig[this.currentPath] || [];
|
||||
this.pathLabel.textContent = this.currentPath;
|
||||
this.img.src = this.currentPath;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private bindEvents() {
|
||||
this.wrapper.addEventListener('mousedown', (e) => {
|
||||
if (e.button !== 0) return;
|
||||
this.isDrawing = true;
|
||||
const rect = this.wrapper.getBoundingClientRect();
|
||||
this.startX = e.clientX - rect.left;
|
||||
this.startY = e.clientY - rect.top;
|
||||
|
||||
this.currentBox = document.createElement('div');
|
||||
this.currentBox.className = 'draw-box';
|
||||
this.currentBox.style.left = this.startX + 'px';
|
||||
this.currentBox.style.top = this.startY + 'px';
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'box-label';
|
||||
label.textContent = '#' + (this.boxes.length + 1);
|
||||
this.currentBox.appendChild(label);
|
||||
|
||||
this.wrapper.appendChild(this.currentBox);
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!this.isDrawing || !this.currentBox) return;
|
||||
const rect = this.wrapper.getBoundingClientRect();
|
||||
const currentX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
|
||||
const currentY = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
|
||||
|
||||
const width = currentX - this.startX;
|
||||
const height = currentY - this.startY;
|
||||
|
||||
this.currentBox.style.width = Math.abs(width) + 'px';
|
||||
this.currentBox.style.height = Math.abs(height) + 'px';
|
||||
this.currentBox.style.left = (width > 0 ? this.startX : currentX) + 'px';
|
||||
this.currentBox.style.top = (height > 0 ? this.startY : currentY) + 'px';
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
if (!this.isDrawing || !this.currentBox) return;
|
||||
this.isDrawing = false;
|
||||
|
||||
const width = parseFloat(this.currentBox.style.width);
|
||||
const height = parseFloat(this.currentBox.style.height);
|
||||
|
||||
if (width > 3 && height > 3) {
|
||||
const rect = this.wrapper.getBoundingClientRect();
|
||||
const boxData = {
|
||||
x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
|
||||
y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
|
||||
w: (width / rect.width * 100).toFixed(2),
|
||||
h: (height / rect.height * 100).toFixed(2),
|
||||
asset_id: null
|
||||
};
|
||||
this.boxes.push(boxData);
|
||||
this.render();
|
||||
}
|
||||
|
||||
this.currentBox.remove();
|
||||
this.currentBox = null;
|
||||
});
|
||||
|
||||
(window as any).removeBox = (index: number) => {
|
||||
this.boxes.splice(index, 1);
|
||||
this.render();
|
||||
};
|
||||
|
||||
document.getElementById('btn-clear-all')?.addEventListener('click', () => {
|
||||
if(confirm('모든 박스를 삭제할까요?')) {
|
||||
this.boxes = [];
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('btn-print-map-qrs')?.addEventListener('click', () => {
|
||||
if (this.boxes.length === 0) {
|
||||
alert('인쇄할 구역이 없습니다.');
|
||||
return;
|
||||
}
|
||||
const cleanKey = getCleanMapKey(this.currentPath);
|
||||
const locName = getLocationName(this.currentPath);
|
||||
|
||||
const items = this.boxes.map((box, index) => {
|
||||
const padIdx = String(index + 1).padStart(3, '0');
|
||||
const locCode = `LOC-${cleanKey}-${padIdx}`;
|
||||
const locDetail = getLocationDetail(this.currentPath, index);
|
||||
return {
|
||||
type: 'location' as const,
|
||||
code: locCode,
|
||||
title: '[ HM LOCATION ]',
|
||||
subtitle: locName,
|
||||
dept: locDetail
|
||||
};
|
||||
});
|
||||
|
||||
QRPrinter.print(items);
|
||||
});
|
||||
|
||||
document.getElementById('btn-save-server')?.addEventListener('click', () => this.saveToServer());
|
||||
}
|
||||
|
||||
private async saveToServer() {
|
||||
if (!this.currentPath) return;
|
||||
|
||||
try {
|
||||
this.saveBtn.disabled = true;
|
||||
this.saveBtn.textContent = '저장 중...';
|
||||
|
||||
const res = await fetch('/api/maps/save', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ path: this.currentPath, boxes: this.boxes })
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
this.allMapConfig[this.currentPath] = [...this.boxes];
|
||||
this.statusEl.textContent = '✅ 서버 저장 완료 (' + new Date().toLocaleTimeString() + ')';
|
||||
setTimeout(() => this.statusEl.textContent = '', 3000);
|
||||
} else {
|
||||
alert('저장 실패!');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('서버 연결 오류!');
|
||||
} finally {
|
||||
this.saveBtn.disabled = false;
|
||||
this.saveBtn.textContent = '서버에 즉시 저장';
|
||||
}
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.boxListEl.innerHTML = '';
|
||||
const oldBoxes = this.wrapper.querySelectorAll('.placed-box');
|
||||
oldBoxes.forEach(b => b.remove());
|
||||
|
||||
this.boxes.forEach((box, i) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'placed-box';
|
||||
div.style.left = box.x + '%';
|
||||
div.style.top = box.y + '%';
|
||||
div.style.width = box.w + '%';
|
||||
div.style.height = box.h + '%';
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'box-label';
|
||||
label.textContent = '#' + (i + 1);
|
||||
div.appendChild(label);
|
||||
|
||||
this.wrapper.appendChild(div);
|
||||
|
||||
// Create asset options dropdown
|
||||
let optionsHtml = '<option value="">-- 자산 매핑 안 됨 --</option>';
|
||||
this.assetOptions.forEach(opt => {
|
||||
const selected = box.asset_id === opt.id ? 'selected' : '';
|
||||
optionsHtml += `<option value="${opt.id}" ${selected}>${opt.name}</option>`;
|
||||
});
|
||||
|
||||
const item = document.createElement('div');
|
||||
item.className = 'box-item';
|
||||
item.innerHTML = `
|
||||
<div class="box-header">
|
||||
<span class="box-index">#${i+1}</span>
|
||||
<div style="display: flex; gap: 0.5rem; align-items: center;">
|
||||
<button class="btn btn-outline btn-sm" onclick="printBoxQR(${i})" style="padding: 2px 6px; font-size: 11px; margin: 0; cursor: pointer;">QR</button>
|
||||
<button class="btn-del" onclick="removeBox(${i})">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-inputs margin-bottom">
|
||||
<select data-index="${i}" data-prop="asset_id">
|
||||
${optionsHtml}
|
||||
</select>
|
||||
</div>
|
||||
<div class="box-inputs">
|
||||
<div class="input-group">
|
||||
<label>X</label>
|
||||
<input type="number" step="0.01" value="${box.x}" data-index="${i}" data-prop="x">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Y</label>
|
||||
<input type="number" step="0.01" value="${box.y}" data-index="${i}" data-prop="y">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>W</label>
|
||||
<input type="number" step="0.01" value="${box.w}" data-index="${i}" data-prop="w">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>H</label>
|
||||
<input type="number" step="0.01" value="${box.h}" data-index="${i}" data-prop="h">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.boxListEl.appendChild(item);
|
||||
});
|
||||
|
||||
// Add events to new inputs and selects
|
||||
this.boxListEl.querySelectorAll('input, select').forEach(input => {
|
||||
input.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement | HTMLSelectElement;
|
||||
const index = parseInt(target.dataset.index!);
|
||||
const prop = target.dataset.prop!;
|
||||
|
||||
if (this.boxes[index]) {
|
||||
if (prop === 'asset_id') {
|
||||
this.boxes[index][prop] = target.value || null;
|
||||
} else {
|
||||
this.boxes[index][prop] = parseFloat(target.value).toFixed(2);
|
||||
this.render(); // Re-render to update the map visual size
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
(window as any).printBoxQR = (index: number) => {
|
||||
const box = this.boxes[index];
|
||||
if (!box) return;
|
||||
const cleanKey = getCleanMapKey(this.currentPath);
|
||||
const padIdx = String(index + 1).padStart(3, '0');
|
||||
const locCode = `LOC-${cleanKey}-${padIdx}`;
|
||||
const locDetail = getLocationDetail(this.currentPath, index);
|
||||
const locName = getLocationName(this.currentPath);
|
||||
|
||||
QRPrinter.print([{
|
||||
type: 'location',
|
||||
code: locCode,
|
||||
title: '[ HM LOCATION ]',
|
||||
subtitle: locName,
|
||||
dept: locDetail
|
||||
}]);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getCleanMapKey(path: string) {
|
||||
let clean = path.replace('img/location_photo/', '').replace('.png', '');
|
||||
clean = clean.replace('서관', 'W').replace('동관', 'E');
|
||||
clean = clean.replace('한맥빌딩/MDF실/MDF_', 'HAN-MDF-');
|
||||
clean = clean.replace('기술개발센터/서버실/서버실_', 'DEV-SVR-');
|
||||
clean = clean.replace(/\//g, '-');
|
||||
return clean;
|
||||
}
|
||||
|
||||
function getLocationName(path: string) {
|
||||
if (path.includes('IDC')) return 'IDC';
|
||||
if (path.includes('한맥빌딩')) return '한맥빌딩';
|
||||
if (path.includes('기술개발센터')) return '기술개발센터';
|
||||
return '기타';
|
||||
}
|
||||
|
||||
function getLocationDetail(path: string, idx: number) {
|
||||
let clean = path.replace('img/location_photo/', '').replace('.png', '');
|
||||
let parts = clean.split('/');
|
||||
let lastPart = parts[parts.length - 1];
|
||||
return `${lastPart} 구역 자리 #${idx + 1}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user