59 lines
1.9 KiB
HTML
59 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Fester Cockpit</title>
|
|
<link rel="stylesheet" href="../../style.css">
|
|
<style>
|
|
body { margin: 0; font-family: Arial, sans-serif; background: #1e1e1e; color: #eee; }
|
|
header { background: #2c2c2c; padding: 10px; font-size: 1.2em; display: flex; align-items: center; }
|
|
header h1 { flex: 1; margin: 0; font-weight: normal; }
|
|
#tabs { display: flex; background: #252525; }
|
|
.tab { flex: 1; text-align: center; padding: 10px; cursor: pointer; }
|
|
.tab.active { background: #3a3a3a; }
|
|
iframe { border: none; width: 100%; height: calc(100vh - 80px); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Fester Cockpit</h1>
|
|
</header>
|
|
|
|
<div id="tabs">
|
|
<div class="tab active" data-target="live_dag">Live DAG</div>
|
|
<div class="tab" data-target="replay">Replay / Debugger</div>
|
|
</div>
|
|
|
|
<iframe id="cockpit-frame" src="../../ui/live_dag.html"></iframe>
|
|
|
|
<script src="./targets.js"></script>
|
|
<script>
|
|
// Tab switching logic
|
|
const tabs = document.querySelectorAll('.tab');
|
|
const iframe = document.getElementById('cockpit-frame');
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
iframe.src = tab.dataset.target === 'live_dag' ? '../../ui/live_dag.html' : '../../ui/replay.html';
|
|
});
|
|
});
|
|
|
|
// Initialize WebSocket connection and dispatch events to iframe
|
|
const ws = new WebSocket(`ws://${window.location.hostname}:8080/ws`);
|
|
ws.onopen = () => console.log("Cockpit WS connected");
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
// Forward event to iframe
|
|
iframe.contentWindow.postMessage(data, '*');
|
|
} catch (err) {
|
|
console.error("Invalid WS event", err);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|