305 lines
12 KiB
JavaScript
305 lines
12 KiB
JavaScript
class VNCServerApp {
|
|
constructor() {
|
|
this.apiBase = '/api/vncserver';
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.bindEvents();
|
|
this.loadServerList();
|
|
this.checkVNCStatus();
|
|
}
|
|
|
|
bindEvents() {
|
|
// 서버 추가 버튼
|
|
document.getElementById('addServerBtn').addEventListener('click', () => {
|
|
this.showServerModal();
|
|
});
|
|
|
|
// 모달 취소 버튼
|
|
document.getElementById('cancelBtn').addEventListener('click', () => {
|
|
this.hideServerModal();
|
|
});
|
|
|
|
// 서버 폼 제출
|
|
document.getElementById('serverForm').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
this.saveServer();
|
|
});
|
|
|
|
// 확인 모달 이벤트
|
|
document.getElementById('confirmCancel').addEventListener('click', () => {
|
|
this.hideConfirmModal();
|
|
});
|
|
|
|
document.getElementById('confirmOk').addEventListener('click', () => {
|
|
this.executeConfirmAction();
|
|
});
|
|
}
|
|
|
|
async loadServerList() {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/list`);
|
|
if (!response.ok) throw new Error('서버 목록을 불러올 수 없습니다.');
|
|
|
|
const servers = await response.json();
|
|
this.renderServerList(servers);
|
|
} catch (error) {
|
|
this.showError('서버 목록을 불러오는 중 오류가 발생했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
renderServerList(servers) {
|
|
const serverList = document.getElementById('serverList');
|
|
|
|
if (servers.length === 0) {
|
|
serverList.innerHTML = `
|
|
<div class="px-6 py-8 text-center text-gray-500">
|
|
<svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
<p>등록된 서버가 없습니다.</p>
|
|
<p class="text-sm">새 서버를 추가해보세요.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
serverList.innerHTML = servers.map(server => `
|
|
<div class="px-6 py-4 hover:bg-gray-50 transition duration-200">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
|
|
<h3 class="text-lg font-medium text-gray-900">${this.escapeHtml(server.user)}@${this.escapeHtml(server.ip)}</h3>
|
|
</div>
|
|
<div class="mt-2 text-sm text-gray-600">
|
|
<p><span class="font-medium">IP:</span> ${this.escapeHtml(server.ip)}</p>
|
|
${server.category ? `<p class="mt-1"><span class="font-medium">카테고리:</span> ${this.escapeHtml(server.category)}</p>` : ''}
|
|
${server.description ? `<p class="mt-1"><span class="font-medium">설명:</span> ${this.escapeHtml(server.description)}</p>` : ''}
|
|
${server.argument ? `<p class="mt-1"><span class="font-medium">인수:</span> ${this.escapeHtml(server.argument)}</p>` : ''}
|
|
</div>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button onclick="app.connectToServer('${this.escapeHtml(server.user)}', '${this.escapeHtml(server.ip)}')" class="bg-primary hover:bg-blue-700 text-white px-3 py-1 rounded text-sm transition duration-200">
|
|
연결
|
|
</button>
|
|
<button onclick="app.editServer('${this.escapeHtml(server.user)}', '${this.escapeHtml(server.ip)}')" class="bg-secondary hover:bg-gray-600 text-white px-3 py-1 rounded text-sm transition duration-200">
|
|
편집
|
|
</button>
|
|
<button onclick="app.deleteServer('${this.escapeHtml(server.user)}', '${this.escapeHtml(server.ip)}', '${this.escapeHtml(server.user)}@${this.escapeHtml(server.ip)}')" class="bg-danger hover:bg-red-700 text-white px-3 py-1 rounded text-sm transition duration-200">
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
async checkVNCStatus() {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/vnc-status`);
|
|
if (!response.ok) throw new Error('VNC 상태를 확인할 수 없습니다.');
|
|
|
|
const status = await response.json();
|
|
this.showVNCStatus(status);
|
|
} catch (error) {
|
|
this.showError('VNC 상태 확인 중 오류가 발생했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
showVNCStatus(status) {
|
|
const statusDiv = document.getElementById('status');
|
|
if (status.isInstalled) {
|
|
statusDiv.innerHTML = `
|
|
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
VNC Viewer가 설치되어 있습니다.
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
statusDiv.innerHTML = `
|
|
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
VNC Viewer가 설치되어 있지 않습니다. 경로: ${status.path}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
showServerModal(server = null) {
|
|
const modal = document.getElementById('serverModal');
|
|
const title = document.getElementById('modalTitle');
|
|
const form = document.getElementById('serverForm');
|
|
|
|
if (server) {
|
|
title.textContent = '서버 편집';
|
|
document.getElementById('serverUser').value = server.user;
|
|
document.getElementById('serverIp').value = server.ip;
|
|
document.getElementById('serverCategory').value = server.category || '';
|
|
document.getElementById('serverDescription').value = server.description || '';
|
|
document.getElementById('serverPassword').value = server.password || '';
|
|
document.getElementById('serverArgument').value = server.argument || '';
|
|
} else {
|
|
title.textContent = '서버 추가';
|
|
form.reset();
|
|
}
|
|
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
hideServerModal() {
|
|
document.getElementById('serverModal').classList.add('hidden');
|
|
}
|
|
|
|
async saveServer() {
|
|
const serverUser = document.getElementById('serverUser').value;
|
|
const serverIp = document.getElementById('serverIp').value;
|
|
const serverData = {
|
|
user: serverUser,
|
|
ip: serverIp,
|
|
category: document.getElementById('serverCategory').value,
|
|
description: document.getElementById('serverDescription').value,
|
|
password: document.getElementById('serverPassword').value,
|
|
argument: document.getElementById('serverArgument').value
|
|
};
|
|
|
|
try {
|
|
const url = serverUser && serverIp ? `${this.apiBase}/update` : `${this.apiBase}/add`;
|
|
const method = serverUser && serverIp ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(serverData)
|
|
});
|
|
|
|
if (!response.ok) throw new Error('서버 저장에 실패했습니다.');
|
|
|
|
const result = await response.json();
|
|
this.showSuccess(result.message);
|
|
this.hideServerModal();
|
|
this.loadServerList();
|
|
} catch (error) {
|
|
this.showError('서버 저장 중 오류가 발생했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async editServer(user, ip) {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/get/${encodeURIComponent(user)}/${encodeURIComponent(ip)}`);
|
|
if (!response.ok) throw new Error('서버 정보를 불러올 수 없습니다.');
|
|
|
|
const server = await response.json();
|
|
this.showServerModal(server);
|
|
} catch (error) {
|
|
this.showError('서버 정보를 불러오는 중 오류가 발생했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
deleteServer(user, ip, name) {
|
|
this.showConfirmModal(
|
|
`"${name}" 서버를 삭제하시겠습니까?`,
|
|
() => this.executeDeleteServer(user, ip)
|
|
);
|
|
}
|
|
|
|
async executeDeleteServer(user, ip) {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/delete/${encodeURIComponent(user)}/${encodeURIComponent(ip)}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('서버 삭제에 실패했습니다.');
|
|
|
|
const result = await response.json();
|
|
this.showSuccess(result.message);
|
|
this.loadServerList();
|
|
} catch (error) {
|
|
this.showError('서버 삭제 중 오류가 발생했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async connectToServer(user, ip) {
|
|
try {
|
|
const response = await fetch(`${this.apiBase}/connect/${encodeURIComponent(user)}/${encodeURIComponent(ip)}`, {
|
|
method: 'POST'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('VNC 연결에 실패했습니다.');
|
|
|
|
const result = await response.json();
|
|
this.showSuccess(result.message);
|
|
} catch (error) {
|
|
this.showError('VNC 연결 중 오류가 발생했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
showConfirmModal(message, onConfirm) {
|
|
document.getElementById('confirmMessage').textContent = message;
|
|
document.getElementById('confirmModal').classList.remove('hidden');
|
|
this.confirmAction = onConfirm;
|
|
}
|
|
|
|
hideConfirmModal() {
|
|
document.getElementById('confirmModal').classList.add('hidden');
|
|
this.confirmAction = null;
|
|
}
|
|
|
|
executeConfirmAction() {
|
|
if (this.confirmAction) {
|
|
this.confirmAction();
|
|
}
|
|
this.hideConfirmModal();
|
|
}
|
|
|
|
showSuccess(message) {
|
|
this.showNotification(message, 'success');
|
|
}
|
|
|
|
showError(message) {
|
|
this.showNotification(message, 'error');
|
|
}
|
|
|
|
showNotification(message, type) {
|
|
const notification = document.createElement('div');
|
|
notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white z-50 transition-all duration-300 transform translate-x-full ${
|
|
type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
|
}`;
|
|
notification.textContent = message;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
// 애니메이션
|
|
setTimeout(() => {
|
|
notification.classList.remove('translate-x-full');
|
|
}, 100);
|
|
|
|
// 자동 제거
|
|
setTimeout(() => {
|
|
notification.classList.add('translate-x-full');
|
|
setTimeout(() => {
|
|
document.body.removeChild(notification);
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
}
|
|
|
|
// 앱 초기화
|
|
const app = new VNCServerApp();
|