var searchContent = new URLSearchParams (window.location.search);
var exc = searchContent.get('exc');
var buttonsAdded = false;
var headCellBuilt = false;

export function getLongName () {
    return "Participant Management";
}

export function createButtons (webSocket) {
    //Container
    if (!buttonsAdded){
        (document.getElementById ("RequestButtonContainer")).innerHTML = `<div class='px-3 pt-2 h5'>Dieser Port empfängt Positonsdaten der Exercise ${exc}.</div>`
        buttonsAdded = true;
    } 
}


//Positionsdaten tabellarisch abbilden
var table = document.createElement ("table");
var tHead = document.createElement ("thead");
var tBody = document.createElement ("tbody");
tBody.id = 'tBody';

//leert den Table-Body mit allen bisherigen Positionen durch Clear-Button
document.getElementById("ClearBtn").addEventListener ('click', function () {
    document.getElementById("tBody").innerHTML = "";
});

export function decryptMessage (message) {
    document.getElementById("OutputContainer").hidden = false
    //erstellt Table body einmalig
    table.classList.add("table","table-hover", "table-condensed");
    var headRow = document.createElement ("tr");
    var keys = new Map;
    var keyIndexCounter = 0;
    if (!headCellBuilt) {
        for (var key in JSON.parse(message.data)) {
            var headCell = headRow.insertCell(keys.get(key));
            headCell.innerHTML = key;
            keys.set(key, keyIndexCounter);
            keyIndexCounter++;
        }
        headCellBuilt = true;
        tHead.appendChild (headRow);
        table.appendChild (tHead);
    }
    //fuegt Table Body je Positonsmeldung an
    var bodyRow = document.createElement ("tr");
    for (var key in JSON.parse(message.data)) {
        var bodyCell = bodyRow.insertCell(keys.get(key));
        bodyCell.innerHTML = JSON.parse(message.data)[key];
        }
    tBody.appendChild (bodyRow)     
    table.appendChild (tBody);
    document.getElementById("Output").appendChild (table);
}