56 lines
2.1 KiB
PHP
56 lines
2.1 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Konsole – {{ $vm->name }}</title>
|
||
@vite(['resources/css/app.css'])
|
||
<style>
|
||
html, body { height: 100%; margin: 0; background: #0f172a; }
|
||
#screen { width: 100%; height: calc(100vh - 48px); }
|
||
.toolbar { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; background: #1e293b; color: #e2e8f0; font-family: system-ui, sans-serif; font-size: 14px; }
|
||
.toolbar a { color: #22d3ee; text-decoration: none; }
|
||
#status { color: #94a3b8; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="toolbar">
|
||
<span><strong>{{ $vm->displayName() }}</strong> – noVNC</span>
|
||
<span id="status">Verbinde…</span>
|
||
<a href="{{ route('vms.show', $vm) }}">← Zurück zur VM</a>
|
||
</div>
|
||
<div id="screen"></div>
|
||
|
||
<script type="module">
|
||
import RFB from 'https://cdn.jsdelivr.net/npm/@novnc/novnc@1.5.0/core/rfb.js';
|
||
|
||
const wsUrl = @json($wsUrl);
|
||
const statusEl = document.getElementById('status');
|
||
const screen = document.getElementById('screen');
|
||
|
||
try {
|
||
const rfb = new RFB(screen, wsUrl, {
|
||
wsProtocols: ['binary'],
|
||
});
|
||
rfb.scaleViewport = true;
|
||
rfb.resizeSession = true;
|
||
|
||
rfb.addEventListener('connect', () => { statusEl.textContent = 'Verbunden'; statusEl.style.color = '#34d399'; });
|
||
rfb.addEventListener('disconnect', (e) => {
|
||
statusEl.textContent = e.detail.clean ? 'Getrennt' : 'Verbindung verloren';
|
||
statusEl.style.color = '#f87171';
|
||
});
|
||
rfb.addEventListener('credentialsrequired', () => { statusEl.textContent = 'Anmeldung erforderlich'; });
|
||
|
||
window.addEventListener('beforeunload', () => rfb.disconnect());
|
||
} catch (err) {
|
||
statusEl.textContent = 'Fehler: ' + err.message;
|
||
statusEl.style.color = '#f87171';
|
||
}
|
||
</script>
|
||
<p style="position:fixed;bottom:8px;left:8px;font-size:11px;color:#64748b;max-width:400px">
|
||
Hinweis: Der Browser muss Proxmox unter {{ parse_url(config('hosting.proxmox.console_ws_url') ?: config('hosting.proxmox.url'), PHP_URL_HOST) }} erreichen können.
|
||
</p>
|
||
</body>
|
||
</html>
|