Amkor/VNCServerList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

..

Browse Source
This commit is contained in:
backuppc
2025-07-07 17:44:59 +09:00
parent 5a0ff2e3ad
commit d537030eb3
10 changed files with 435 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
Web/wwwroot/js/app.js
View File

@@ -16,17 +16,37 @@ class VNCServerApp {
this.showServerModal();
});
// 설정 버튼
document.getElementById('settingsBtn').addEventListener('click', () => {
this.showSettingsModal();
});
// 모달 취소 버튼
document.getElementById('cancelBtn').addEventListener('click', () => {
this.hideServerModal();
});
document.getElementById('settingsCancelBtn').addEventListener('click', () => {
this.hideSettingsModal();
});
// 서버 폼 제출
document.getElementById('serverForm').addEventListener('submit', (e) => {
e.preventDefault();
this.saveServer();
});
// 설정 폼 제출
document.getElementById('settingsForm').addEventListener('submit', (e) => {
e.preventDefault();
this.saveSettings();
});
// VNC 경로 찾아보기 버튼
document.getElementById('browseVncBtn').addEventListener('click', () => {
this.browseVNCViewer();
});
// 확인 모달 이벤트
document.getElementById('confirmCancel').addEventListener('click', () => {
this.hideConfirmModal();
@@ -98,12 +118,15 @@ class VNCServerApp {
async checkVNCStatus() {
try {
console.log('VNC 상태 확인 시작...'); // 디버깅용
const response = await fetch(`${this.apiBase}/vnc-status`);
if (!response.ok) throw new Error('VNC 상태를 확인할 수 없습니다.');
const status = await response.json();
console.log('VNC 상태:', status); // 디버깅용
this.showVNCStatus(status);
} catch (error) {
console.error('VNC 상태 확인 오류:', error); // 디버깅용
this.showError('VNC 상태 확인 중 오류가 발생했습니다: ' + error.message);
}
}
@@ -113,22 +136,28 @@ class VNCServerApp {
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 class="flex items-center justify-between">
<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>
<button onclick="app.showSettingsModal()" class="text-green-600 hover:text-green-800 text-sm underline">설정 변경</button>
</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 class="flex items-center justify-between">
<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>
<button onclick="app.showSettingsModal()" class="text-red-600 hover:text-red-800 text-sm underline">설정</button>
</div>
</div>
`;
@@ -160,6 +189,106 @@ class VNCServerApp {
document.getElementById('serverModal').classList.add('hidden');
}
showSettingsModal() {
console.log('설정 모달 열기 시작'); // 디버깅용
this.loadSettings();
document.getElementById('settingsModal').classList.remove('hidden');
console.log('설정 모달 열기 완료'); // 디버깅용
}
hideSettingsModal() {
document.getElementById('settingsModal').classList.add('hidden');
}
async loadSettings() {
try {
console.log('설정 로드 시작...'); // 디버깅용
const response = await fetch(`${this.apiBase}/settings`);
console.log('설정 로드 응답 상태:', response.status); // 디버깅용
if (!response.ok) throw new Error('설정을 불러올 수 없습니다.');
const settings = await response.json();
console.log('로드된 설정:', settings); // 디버깅용
console.log('VNC 경로:', settings.vncViewerPath); // 디버깅용
console.log('웹 포트:', settings.webServerPort); // 디버깅용
const vncPathElement = document.getElementById('vncViewerPath');
const webPortElement = document.getElementById('webServerPort');
console.log('VNC 경로 요소:', vncPathElement); // 디버깅용
console.log('웹 포트 요소:', webPortElement); // 디버깅용
vncPathElement.value = settings.vncViewerPath || '';
webPortElement.value = settings.webServerPort || 8080;
console.log('설정 로드 완료'); // 디버깅용
console.log('설정된 VNC 경로 값:', vncPathElement.value); // 디버깅용
console.log('설정된 웹 포트 값:', webPortElement.value); // 디버깅용
} catch (error) {
console.error('설정 로드 오류:', error); // 디버깅용
this.showError('설정을 불러오는 중 오류가 발생했습니다: ' + error.message);
}
}
async saveSettings() {
const vncPath = document.getElementById('vncViewerPath').value;
const webPort = parseInt(document.getElementById('webServerPort').value);
const settings = {
vncViewerPath: vncPath,
webServerPort: webPort
};
console.log('저장할 설정:', settings); // 디버깅용
console.log('VNC 경로 값:', vncPath); // 디버깅용
console.log('웹 포트 값:', webPort); // 디버깅용
try {
const response = await fetch(`${this.apiBase}/settings`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(settings)
});
console.log('응답 상태:', response.status); // 디버깅용
if (!response.ok) {
const errorText = await response.text();
throw new Error(`설정 저장에 실패했습니다. 상태: ${response.status}, 응답: ${errorText}`);
}
const result = await response.json();
console.log('저장 결과:', result); // 디버깅용
this.showSuccess(result.message);
this.hideSettingsModal();
this.checkVNCStatus(); // VNC 상태 다시 확인
} catch (error) {
console.error('설정 저장 오류:', error); // 디버깅용
this.showError('설정 저장 중 오류가 발생했습니다: ' + error.message);
}
}
browseVNCViewer() {
// C#의 OpenFileDialog 호출
if (window.chrome && window.chrome.webview) {
// WebView2 환경에서 C# 메서드 호출
window.chrome.webview.postMessage('OPEN_FILE_DIALOG');
} else {
// 일반 브라우저에서는 수동 입력 안내
this.showError('WebView2 환경에서만 파일 선택이 가능합니다. 경로를 수동으로 입력해주세요.');
}
}
// C#에서 호출하는 함수
receiveFilePath(filePath) {
document.getElementById('vncViewerPath').value = filePath;
this.showSuccess('VNC Viewer 경로가 설정되었습니다.');
}
async saveServer() {
const serverUser = document.getElementById('serverUser').value;
const serverIp = document.getElementById('serverIp').value;
@@ -302,4 +431,9 @@ class VNCServerApp {
}
// 앱 초기화
const app = new VNCServerApp();
const app = new VNCServerApp();
// C#에서 호출할 수 있도록 전역 함수로 등록
window.receiveFilePath = function(filePath) {
app.receiveFilePath(filePath);
};