document.addEventListener('DOMContentLoaded', function() {
    function updateStatus() {
        fetch('/api/status')
            .then(response => response.json())
            .then(data => {
                // WebClients
                const clientsUl = document.getElementById('clients');
                clientsUl.innerHTML = '';
                data.clients.forEach(client => {
                    const li = document.createElement('li');
                    li.textContent = client;
                    clientsUl.appendChild(li);
                });

                // Sender
                const sendersUl = document.getElementById('senderList');
                sendersUl.innerHTML = '';
                data.senders.forEach(sender => {
                    const li = document.createElement('li');
                    li.textContent = `${sender.name}: ${sender.status}`;
                    sendersUl.appendChild(li);
                });

                // Letzte Commands
                const commandsUl = document.getElementById('commandList');
                commandsUl.innerHTML = '';
                data.lastCommands.forEach(cmd => {
                    const li = document.createElement('li');
                    li.textContent = cmd;
                    commandsUl.appendChild(li);
                });

                // Letzte Pings
                const pingsUl = document.getElementById('pingList');
                pingsUl.innerHTML = '';
                data.lastPings.forEach(ping => {
                    const li = document.createElement('li');
                    li.textContent = ping;
                    pingsUl.appendChild(li);
                });
            })
            .catch(error => console.error('Error fetching status:', error));
    }

    // Initial load
    updateStatus();

    // Update every 5 seconds
    setInterval(updateStatus, 5000);
});