102 lines
4 KiB
HTML
102 lines
4 KiB
HTML
{% extends "sidebar.html" %}
|
||
|
||
{% block title %}AstraOS — Konsole: {{ bot.name }}{% endblock %}
|
||
|
||
{% block head %}
|
||
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
||
<style>
|
||
#console-output {
|
||
font-family: 'Courier New', Courier, monospace;
|
||
background-color: #0d1117;
|
||
color: #c9d1d9;
|
||
height: 60vh;
|
||
overflow-y: auto;
|
||
padding: 1rem;
|
||
border-radius: 0.5rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
.log-line { white-space: pre-wrap; word-break: break-all; }
|
||
.log-stdout { color: #c9d1d9; }
|
||
.log-stderr { color: #ff7b72; }
|
||
.log-system { color: #58a6ff; font-style: italic; }
|
||
.log-error { color: #f85149; font-weight: bold; }
|
||
|
||
/* Toggle Switch */
|
||
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
|
||
.switch input { opacity: 0; width: 0; height: 0; }
|
||
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4a5568; transition: .4s; border-radius: 34px; }
|
||
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
|
||
input:checked + .slider { background-color: #28a745; }
|
||
input:checked + .slider:before { transform: translateX(26px); }
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<header class="flex justify-between items-center mb-6">
|
||
<div>
|
||
<a href="{{ url_for('discord_bots') }}" class="text-sm {% if maintenance_active %}text-yellow-400 hover:text-yellow-300{% else %}text-purple-400 hover:text-purple-300{% endif %}">‹ Zurück zur Übersicht</a>
|
||
<h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Konsole: {{ bot.name }}</h2>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<span id="status-indicator" class="px-3 py-1 text-sm font-semibold rounded-full
|
||
{% if bot.status == 'running' %}bg-green-500/20 text-green-300{% else %}bg-red-500/20 text-red-300{% endif %}">
|
||
{{ bot.status }}
|
||
</span>
|
||
<label class="switch">
|
||
<input type="checkbox" id="bot-toggle" {% if bot.status == 'running' %}checked{% endif %}>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="console-output">
|
||
<div class="log-line log-system">Initialisiere Konsolenverbindung...</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const socket = io();
|
||
const consoleOutput = document.getElementById('console-output');
|
||
const botToggle = document.getElementById('bot-toggle');
|
||
const statusIndicator = document.getElementById('status-indicator');
|
||
const botId = "{{ bot._id }}";
|
||
|
||
function addLog(log) {
|
||
const line = document.createElement('div');
|
||
line.className = `log-line log-${log.type}`;
|
||
line.textContent = log.data;
|
||
consoleOutput.appendChild(line);
|
||
consoleOutput.scrollTop = consoleOutput.scrollHeight;
|
||
}
|
||
|
||
socket.on('connect', () => {
|
||
socket.emit('join_console', { bot_id: botId });
|
||
});
|
||
|
||
socket.on('console_output', (log) => {
|
||
addLog(log);
|
||
});
|
||
|
||
socket.on('status_update', (data) => {
|
||
if (data.bot_id === botId) {
|
||
statusIndicator.textContent = data.status;
|
||
statusIndicator.className = `px-3 py-1 text-sm font-semibold rounded-full ${data.status === 'running' ? 'bg-green-500/20 text-green-300' : 'bg-red-500/20 text-red-300'}`;
|
||
botToggle.checked = data.status === 'running';
|
||
}
|
||
});
|
||
|
||
botToggle.addEventListener('change', () => {
|
||
const action = botToggle.checked ? 'start' : 'stop';
|
||
addLog({type: 'system', data: `Sende '${action}' Befehl...`});
|
||
socket.emit('toggle_bot', { bot_id: botId, action: action });
|
||
});
|
||
|
||
window.addEventListener('beforeunload', () => {
|
||
socket.emit('leave_console', { bot_id: botId });
|
||
socket.disconnect();
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %}
|
||
|