var ws;
var thisURL = window.location;

//HTML-ELemente get
var searchContent = new URLSearchParams (thisURL.search);

var ipInputForm = document.getElementById('iIpInputForm');
var exerciseListContainer = document.getElementById('ExerciseList');

webSocketConnect = function () {

    ws = new WebSocket (document.getElementById("IpInputForm").value);
    ws.onopen = function () {
        document.getElementById("IpInputForm").classList.replace("border-danger", "border-success");
        document.getElementById('ButtonContainer').hidden = false;                          
    }
    
    ws.onmessage = function (msg) {
        console.log(msg)
        document.getElementById('ListContainer').hidden = false;
        var object = (JSON.parse(msg.data)).data;
        object.forEach((item, index, array) => {
            var exerciseEntry = document.createElement('li');
            var managementList = document.createElement('ul');
            managementList.id = object[index].exerciseId;
            managementList.className = "list-lvl2";
            exerciseEntry.innerHTML = "Exercise: " + object[index].exerciseId;
            exerciseListContainer.appendChild(exerciseEntry);                           //Reihenfolge?
            exerciseListContainer.appendChild(managementList);                          //Reihenfolge?
            (object[index].services).forEach((item, index2, array) => {
                var managementListContainer = document.getElementById (object[index].exerciseId);
                var managementEntry = document.createElement('li');
                var portList = document.createElement('ul');
                portList.id = object[index].exerciseId + object[index].services[index2].name;
                portList.className = "list-lvl3";
                managementEntry.innerHTML = "Service: " + object[index].services[index2].name;
                managementListContainer.appendChild(managementEntry);                   //Reihenfolge?
                managementListContainer.appendChild(portList);                          //Reihenfolge?
                (object[index].services[index2].ports).forEach((item, index3, array) => {
                    //Query String konstruieren
                    var queryString = new URLSearchParams();
                    queryString.append ('exc', object[index].exerciseId);
                    queryString.append ('svc', object[index].services[index2].nameAbbrevation);
                    queryString.append ('port', object[index].services[index2].ports[index3].number);
                    queryString.append ('typeid', object[index].services[index2].ports[index3].typeId);
                    var portListContainer = document.getElementById (object[index].exerciseId + object[index].services[index2].name);
                    //Port-Element erstellen
                    var portLink = document.createElement('a');
                    portLink.href = 'wsTool.html' + '?' + queryString;
                    portLink.innerHTML = object[index].services[index2].ports[index3].number;
                    var portEntry = document.createElement('li');
                    portEntry.innerHTML = "Port: ";
                    portEntry.innerHTML += '<a href=' + portLink.toString() +' target="_blank">'+ object[index].services[index2].ports[index3].number; +'</a>';
                    portEntry.innerHTML += " | TypeID: "+object[index].services[index2].ports[index3].typeId+" ";
                    portEntry.innerHTML += " | Properties: "+object[index].services[index2].ports[index3].properties;
                    portListContainer.appendChild(portEntry);
                });
            });
        });
    }
    ws.onclose = function () {
        document.getElementById("IpInputForm").classList.replace("border-success", "border-danger");
    }

}

function servicePortsInformationRequest() {

    ws.send(JSON.stringify({
        type: "servicePortsInformationRequest",
        uuid: "UUID"
    }));
}