사이드바 브랜딩을 PharmQ Super Admin (PSA)로 업데이트
- base.html 상단 네비게이션 브랜딩 변경 - 팜큐 약국 관리 시스템 → PharmQ Super Admin (PSA) - UI 일관성 향상을 위한 브랜딩 통합 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
244
farmq-admin/templates/vnc_console.html
Normal file
244
farmq-admin/templates/vnc_console.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ vm_name }} - VNC 콘솔</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vnc-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vnc-toolbar {
|
||||
background: #2c3e50;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.vnc-screen {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.vnc-status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.btn-vnc {
|
||||
margin: 0 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#vnc-canvas {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.connection-info {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="vnc-container">
|
||||
<!-- VNC 툴바 -->
|
||||
<div class="vnc-toolbar">
|
||||
<div>
|
||||
<strong>🖥️ {{ vm_name }}</strong>
|
||||
<span class="connection-info">(VM {{ vmid }} @ {{ node }})</span>
|
||||
</div>
|
||||
|
||||
<div class="vnc-controls">
|
||||
<button id="fullscreen-btn" class="btn btn-sm btn-primary btn-vnc">
|
||||
<i class="fas fa-expand"></i> 전체화면
|
||||
</button>
|
||||
<button id="clipboard-btn" class="btn btn-sm btn-info btn-vnc">
|
||||
<i class="fas fa-clipboard"></i> 클립보드
|
||||
</button>
|
||||
<button id="ctrl-alt-del-btn" class="btn btn-sm btn-warning btn-vnc">
|
||||
<i class="fas fa-keyboard"></i> Ctrl+Alt+Del
|
||||
</button>
|
||||
<button id="disconnect-btn" class="btn btn-sm btn-danger btn-vnc">
|
||||
<i class="fas fa-times"></i> 연결종료
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VNC 화면 -->
|
||||
<div class="vnc-screen">
|
||||
<div id="vnc-status" class="vnc-status">
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">연결 중...</span>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h5>VNC 연결 중...</h5>
|
||||
<p>{{ vm_name }}에 연결하고 있습니다.</p>
|
||||
<small>WebSocket URL: {{ websocket_url[:50] }}...</small>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="vnc-canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CDN에서 noVNC 로드 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/noVNC/1.3.0/core/rfb.min.js"></script>
|
||||
|
||||
<!-- Bootstrap Icons -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
|
||||
<script>
|
||||
// VNC 연결 설정
|
||||
const websocketUrl = '{{ websocket_url }}';
|
||||
const vmName = '{{ vm_name }}';
|
||||
|
||||
let rfb;
|
||||
let isConnected = false;
|
||||
|
||||
// DOM 요소
|
||||
const statusDiv = document.getElementById('vnc-status');
|
||||
const canvas = document.getElementById('vnc-canvas');
|
||||
|
||||
// VNC 연결 시작
|
||||
function connectVNC() {
|
||||
try {
|
||||
console.log('VNC 연결 시도:', websocketUrl);
|
||||
|
||||
// RFB 객체 생성 (간소화된 설정)
|
||||
rfb = new RFB(canvas, websocketUrl);
|
||||
|
||||
// 이벤트 리스너 등록
|
||||
rfb.addEventListener('connect', onConnected);
|
||||
rfb.addEventListener('disconnect', onDisconnected);
|
||||
rfb.addEventListener('credentialsrequired', onCredentialsRequired);
|
||||
|
||||
// 화면 크기 자동 조정
|
||||
rfb.scaleViewport = true;
|
||||
rfb.resizeSession = false;
|
||||
|
||||
} catch (error) {
|
||||
console.error('VNC 연결 오류:', error);
|
||||
showStatus('❌ 연결 실패', 'VNC 연결 중 오류가 발생했습니다: ' + error.message, 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// 연결 성공
|
||||
function onConnected() {
|
||||
console.log('VNC 연결 성공');
|
||||
isConnected = true;
|
||||
statusDiv.style.display = 'none';
|
||||
canvas.style.display = 'block';
|
||||
}
|
||||
|
||||
// 연결 해제
|
||||
function onDisconnected(e) {
|
||||
console.log('VNC 연결 해제:', e.detail);
|
||||
isConnected = false;
|
||||
|
||||
if (e.detail.clean) {
|
||||
showStatus('🔌 연결 종료', '연결이 정상적으로 종료되었습니다.', 'info');
|
||||
} else {
|
||||
showStatus('❌ 연결 끊김', '연결이 예기치 않게 끊어졌습니다: ' + (e.detail.reason || 'Unknown'), 'warning');
|
||||
}
|
||||
}
|
||||
|
||||
// 인증 정보 필요
|
||||
function onCredentialsRequired() {
|
||||
console.log('VNC 인증 정보 필요');
|
||||
showStatus('🔐 인증 필요', 'VNC 서버에서 인증이 필요합니다.', 'warning');
|
||||
}
|
||||
|
||||
// 상태 표시
|
||||
function showStatus(title, message, type = 'info') {
|
||||
statusDiv.innerHTML = `
|
||||
<div class="alert alert-${type}" role="alert">
|
||||
<h5>${title}</h5>
|
||||
<p>${message}</p>
|
||||
<button class="btn btn-secondary" onclick="location.reload()">다시 시도</button>
|
||||
</div>
|
||||
`;
|
||||
statusDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
// 전체화면
|
||||
document.getElementById('fullscreen-btn').onclick = function() {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
document.body.requestFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
// 클립보드
|
||||
document.getElementById('clipboard-btn').onclick = function() {
|
||||
if (rfb && isConnected) {
|
||||
const text = prompt('클립보드에 보낼 텍스트를 입력하세요:');
|
||||
if (text) {
|
||||
rfb.clipboardPasteFrom(text);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Ctrl+Alt+Del 전송
|
||||
document.getElementById('ctrl-alt-del-btn').onclick = function() {
|
||||
if (rfb && isConnected) {
|
||||
rfb.sendCtrlAltDel();
|
||||
}
|
||||
};
|
||||
|
||||
// 연결 종료
|
||||
document.getElementById('disconnect-btn').onclick = function() {
|
||||
if (rfb) {
|
||||
rfb.disconnect();
|
||||
}
|
||||
window.close();
|
||||
};
|
||||
|
||||
// 페이지 로드 후 연결 시작
|
||||
window.addEventListener('load', function() {
|
||||
// noVNC 라이브러리 로드 확인
|
||||
if (typeof RFB === 'undefined') {
|
||||
showStatus('❌ 라이브러리 오류', 'noVNC 라이브러리를 로드할 수 없습니다.', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// 잠시 후 연결 시작
|
||||
setTimeout(connectVNC, 1000);
|
||||
});
|
||||
|
||||
// 페이지 종료 시 연결 해제
|
||||
window.addEventListener('beforeunload', function() {
|
||||
if (rfb) {
|
||||
rfb.disconnect();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user