Projektarbeit-MYP/backend/debug-server/static/js/script.js

// DOM-Element-Referenzen
const navButtons = document.querySelectorAll('.nav-button');
const panels = document.querySelectorAll('.panel');

// Panel-Navigation
navButtons.forEach(button => {
    button.addEventListener('click', () => {
        const targetPanel = button.dataset.target;
        
        // Aktiven Button und Panel wechseln
        navButtons.forEach(btn => btn.classList.remove('active'));
        panels.forEach(panel => panel.classList.remove('active'));
        
        button.classList.add('active');
        document.getElementById(targetPanel).classList.add('active');
    });
});

// Automatische Aktualisierung der Daten
const updateInterval = 10000; // 10 Sekunden

// Initialisierung und erste Datenladung
document.addEventListener('DOMContentLoaded', () => {
    // Systemdaten laden
    loadSystemInfo();
    
    // Netzwerkdaten laden
    loadNetworkInfo();
    
    // Docker-Daten laden
    loadDockerInfo();
    
    // Backend-Status laden
    loadBackendStatus();
    
    // Event-Listener für die Netzwerk-Tools
    document.getElementById('ping-button').addEventListener('click', performPing);
    document.getElementById('traceroute-button').addEventListener('click', performTraceroute);
    document.getElementById('nslookup-button').addEventListener('click', performNSLookup);
    
    // Automatische Aktualisierung einrichten
    setInterval(() => {
        if (document.getElementById('system-panel').classList.contains('active')) {
            loadSystemInfo();
        } else if (document.getElementById('network-panel').classList.contains('active')) {
            loadNetworkInfo();
        } else if (document.getElementById('docker-panel').classList.contains('active')) {
            loadDockerInfo();
        } else if (document.getElementById('backend-panel').classList.contains('active')) {
            loadBackendStatus();
        }
    }, updateInterval);
});

// API-Anfragen
async function fetchData(endpoint) {
    try {
        const response = await fetch(endpoint);
        if (!response.ok) {
            throw new Error(`HTTP-Fehler! Status: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error(`Fehler beim Abrufen von ${endpoint}:`, error);
        return null;
    }
}

// System-Informationen laden
async function loadSystemInfo() {
    const data = await fetchData('/systeminfo');
    if (!data) return;
    
    // Betriebssystem-Info aktualisieren
    document.getElementById('platform-info').innerHTML = `
        <p><strong>Plattform:</strong> ${data.platform}</p>
        <p><strong>Python Version:</strong> ${data.python_version}</p>
        <p><strong>Betriebszeit:</strong> ${data.uptime}</p>
    `;
    
    // Hardware-Info aktualisieren
    document.getElementById('hardware-info').innerHTML = `
        <p><strong>Prozessor:</strong> ${data.processor}</p>
        <p><strong>Architektur:</strong> ${data.architecture}</p>
    `;
    
    // Speicher-Info aktualisieren
    document.getElementById('memory-info').innerHTML = `
        <p><strong>Gesamt:</strong> ${data.memory.total}</p>
        <p><strong>Verwendet:</strong> ${data.memory.used} (${data.memory.percent}%)</p>
        <p><strong>Frei:</strong> ${data.memory.free}</p>
    `;
    document.getElementById('memory-bar').style.width = `${data.memory.percent}%`;
    document.getElementById('memory-bar').style.backgroundColor = getColorByPercentage(data.memory.percent);
    
    // Festplatten-Info aktualisieren
    document.getElementById('disk-info').innerHTML = `
        <p><strong>Gesamt:</strong> ${data.disk.total}</p>
        <p><strong>Verwendet:</strong> ${data.disk.used} (${data.disk.percent}%)</p>
        <p><strong>Frei:</strong> ${data.disk.free}</p>
    `;
    document.getElementById('disk-bar').style.width = `${data.disk.percent}%`;
    document.getElementById('disk-bar').style.backgroundColor = getColorByPercentage(data.disk.percent);
}

// Netzwerk-Informationen laden
async function loadNetworkInfo() {
    const data = await fetchData('/network');
    if (!data) return;
    
    // Netzwerkschnittstellen aktualisieren
    let interfacesHTML = '<table><tr><th>Schnittstelle</th><th>IP-Adresse</th><th>Netzmaske</th><th>Broadcast</th></tr>';
    for (const [name, info] of Object.entries(data.interfaces)) {
        interfacesHTML += `
            <tr>
                <td>${name}</td>
                <td>${info.ip}</td>
                <td>${info.netmask}</td>
                <td>${info.broadcast}</td>
            </tr>
        `;
    }
    interfacesHTML += '</table>';
    document.getElementById('network-interfaces').innerHTML = interfacesHTML;
    
    // DNS-Server aktualisieren
    let dnsHTML = '<ul>';
    for (const server of data.dns_servers) {
        dnsHTML += `<li>${server}</li>`;
    }
    dnsHTML += '</ul>';
    document.getElementById('dns-servers').innerHTML = dnsHTML;
    
    // Gateway aktualisieren
    document.getElementById('default-gateway').innerHTML = `<p>${data.gateway}</p>`;
    
    // Aktive Verbindungen aktualisieren
    if (data.connections && data.connections.length > 0) {
        let connectionsHTML = '<table><tr><th>Lokale Adresse</th><th>Remote-Adresse</th><th>Status</th><th>PID</th></tr>';
        for (const conn of data.connections) {
            connectionsHTML += `
                <tr>
                    <td>${conn.local_address}</td>
                    <td>${conn.remote_address}</td>
                    <td>${conn.status}</td>
                    <td>${conn.pid}</td>
                </tr>
            `;
        }
        connectionsHTML += '</table>';
        document.getElementById('active-connections').innerHTML = connectionsHTML;
    } else {
        document.getElementById('active-connections').innerHTML = '<p>Keine aktiven Verbindungen gefunden.</p>';
    }
}

// Docker-Informationen laden
async function loadDockerInfo() {
    const data = await fetchData('/docker');
    if (!data) return;
    
    // Docker-Status aktualisieren
    if (data.installed) {
        document.getElementById('docker-status').innerHTML = `
            <p><span class="status status-online">Installiert</span></p>
            <p><strong>Version:</strong> ${data.version}</p>
        `;
        
        // Container aktualisieren
        if (data.containers && data.containers.length > 0) {
            let containersHTML = '<table><tr><th>ID</th><th>Name</th><th>Image</th><th>Status</th><th>Ports</th></tr>';
            for (const container of data.containers) {
                containersHTML += `
                    <tr>
                        <td>${container.id}</td>
                        <td>${container.name}</td>
                        <td>${container.image}</td>
                        <td>${container.status}</td>
                        <td>${container.ports}</td>
                    </tr>
                `;
            }
            containersHTML += '</table>';
            document.getElementById('docker-containers').innerHTML = containersHTML;
        } else {
            document.getElementById('docker-containers').innerHTML = '<p>Keine laufenden Container gefunden.</p>';
        }
    } else {
        document.getElementById('docker-status').innerHTML = '<p><span class="status status-offline">Nicht installiert</span></p>';
        document.getElementById('docker-containers').innerHTML = '<p>Docker ist nicht installiert oder nicht zugänglich.</p>';
    }
}

// Backend-Status laden
async function loadBackendStatus() {
    const data = await fetchData('/backend-status');
    if (!data) return;
    
    let statusHTML = '';
    if (data.status === 'online') {
        statusHTML = `
            <p>Status: <span class="status status-online">Online</span></p>
            <p><strong>Port:</strong> ${data.port}</p>
        `;
    } else if (data.status === 'offline') {
        statusHTML = `
            <p>Status: <span class="status status-offline">Offline</span></p>
            <p><strong>Port:</strong> ${data.port}</p>
            <p><strong>Fehlercode:</strong> ${data.error_code}</p>
        `;
    } else {
        statusHTML = `
            <p>Status: <span class="status status-warning">Fehler</span></p>
            <p><strong>Nachricht:</strong> ${data.message}</p>
        `;
    }
    document.getElementById('main-backend-status').innerHTML = statusHTML;
}

// Netzwerk-Tools
async function performPing() {
    const hostInput = document.getElementById('ping-host');
    const resultElement = document.getElementById('ping-result');
    const host = hostInput.value.trim();
    
    if (!host) {
        resultElement.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein.';
        return;
    }
    
    resultElement.textContent = 'Ping wird ausgeführt...';
    
    const data = await fetchData(`/ping/${encodeURIComponent(host)}`);
    if (!data) {
        resultElement.textContent = 'Fehler beim Ausführen des Ping-Befehls.';
        return;
    }
    
    if (data.success) {
        resultElement.textContent = data.output;
    } else {
        resultElement.textContent = `Fehler: ${data.error || 'Unbekannter Fehler'}`;
    }
}

async function performTraceroute() {
    const hostInput = document.getElementById('traceroute-host');
    const resultElement = document.getElementById('traceroute-result');
    const host = hostInput.value.trim();
    
    if (!host) {
        resultElement.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein.';
        return;
    }
    
    resultElement.textContent = 'Traceroute wird ausgeführt...';
    
    const data = await fetchData(`/traceroute/${encodeURIComponent(host)}`);
    if (!data) {
        resultElement.textContent = 'Fehler beim Ausführen des Traceroute-Befehls.';
        return;
    }
    
    if (data.success) {
        resultElement.textContent = data.output;
    } else {
        resultElement.textContent = `Fehler: ${data.error || 'Unbekannter Fehler'}`;
    }
}

async function performNSLookup() {
    const hostInput = document.getElementById('nslookup-host');
    const resultElement = document.getElementById('nslookup-result');
    const host = hostInput.value.trim();
    
    if (!host) {
        resultElement.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein.';
        return;
    }
    
    resultElement.textContent = 'DNS-Abfrage wird ausgeführt...';
    
    const data = await fetchData(`/nslookup/${encodeURIComponent(host)}`);
    if (!data) {
        resultElement.textContent = 'Fehler beim Ausführen des NSLookup-Befehls.';
        return;
    }
    
    if (data.success) {
        resultElement.textContent = data.output;
    } else {
        resultElement.textContent = `Fehler: ${data.error || 'Unbekannter Fehler'}`;
    }
}

// Hilfsfunktionen
function getColorByPercentage(percent) {
    // Farbverlauf von Grün über Gelb nach Rot
    if (percent < 70) {
        return 'var(--success-color)';
    } else if (percent < 90) {
        return 'var(--warning-color)';
    } else {
        return 'var(--danger-color)';
    }
}