release11-tools/Frontend/assets/scripts/tools/scripts.js

var defaultStrings = [];
const color_grey = "#6b6b6b";
const color_red = "#ff8f8f";

//Remove default text and set color to black
function clearDefaultContent(element, text) {
    if (element.value == text) {
        element.value = "";
        element.style.color = "#000000";
        element.style.backgroundColor = "#ffffff";
    }
}

function clearDataField(){
    document.getElementById("xmlArea").value = "";
    document.getElementById("xmlArea").style.color = null;
    document.getElementById("xmlArea").style.backgroundColor = null;
    
    document.getElementById("transformArea").value = "";
    document.getElementById("transformArea").style.color = null;
    document.getElementById("transformArea").style.backgroundColor = null;
}

function fillDefaultXML(element) {
    if(element.classList.contains("active")){
        const serverAddress = window.location.protocol + "//" + window.location.hostname + ":8086";
        clearDefaultContent(document.getElementById("xmlArea"), "Insert XML here");
        fetch(serverAddress + "/assets/samples/sampleXml.xml")
            .then(response => response.text())
            .then((exampleData) => {
                document.getElementById("xmlArea").value = exampleData;
                document.getElementById("xmlArea").style.backgroundColor = null;
            })
            }
        }

//Set default text in grey
function setDefaultContent(element, text) {6543
    if (element.value == "") {
        var id = element.getAttribute('id');
        if (!defaultStrings.includes(text)) {
            defaultStrings.push(text);
        }
        if (id == "xmlArea") {
            element.style.color = color_grey;
            element.value = text;
        }
        if (id == "transformArea") {
            element.style.color = color_grey;
            element.value = text;
        }
        if (id == "jsonArea") {
            element.style.color = color_grey;
            element.value = text;
        }
    }
}

function hideList(collList) {
    for (i = 0; i < collList.length; i++) {
        if (collList[i].nextElementSibling !== null) {
            collList[i].nextElementSibling.style.maxHeight = null;
            collList[i].nextElementSibling.classList.toggle("collapsibleDataExpanded", false);
        }
        collList[i].style.display = 'none';
        collList[i].classList.remove("collapsibleActive");
    }
}

function checkDefault(text){
    return defaultStrings.includes(text);
}

function showList(collList) {
    for (i = 0; i < collList.length; i++) {
        collList[i].style.display = 'block';
    }
}

function smoothFoldElement(element, toogleState, toggleParrent){
    if (toogleState) {
        console.log("DUPA");
        if(toggleParrent){
            element.parentElement.style.maxHeight = "0px";
        }
        
        element.classList.toggle("active", false);
        var subLists = collapsibleData.getElementsByClassName("collapsibleData");
        for (j = 0; j < subLists.length; j++) {
            subLists[j].style.maxHeight = null;
        }
    } else {
        collapsibleData.parentElement.style.maxHeight = (collapsibleData.parentElement.scrollHeight) + "px";
        collapsibleData.classList.toggle("active", true);
        if (collapsibleData.parentElement.classList.contains("collapsibleData") && collapsibleData.parentElement.classList.contains("active")) {
            collapsibleData.parentElement.style.maxHeight = (collapsibleData.parentElement.scrollHeight + collapsibleData.scrollHeight) + "px";
        }
    }
}

//Set tooltip info, function is called by onClick handlers
function refreshTooltip() {
    var resizeList = document.getElementsByClassName("collapsibleData");
    console.log("collDataList: " + resizeList.length)
    document.getElementById("processorTooltipInfo").innerText = procInfo;
    document.getElementById("xsltelementsheader").innerText = XSLTheader;
}



function performRequest(endpoint, checkXML, checkTransform){
    const sourceId = "xmlArea";
    const transformId = "transformArea";
    var xmlData = document.getElementById(sourceId).value.trim();
    var transformData = document.getElementById(transformId).value.trim();
    
    var port = 8081;
    if (getProcessor() == "libxml") {
        port = 8082;
    }

    var empty = false;
    if (defaultStrings.includes(xmlData) && checkXML) {
            document.getElementById(sourceId).style.backgroundColor = color_red;
            xmlData = "";
            empty = true;
    }
    if (defaultStrings.includes(transformData) && checkTransform) {
        document.getElementById(transformId).style.backgroundColor = color_red;
        empty = true;
    }
    if (!empty) {
        restRequest(port, endpoint, xmlData, transformData).then(function(result) {
            document.getElementById("resultArea").value = result.result;
            document.getElementById("procinfo").innerText = ' Computed using '.concat(" ", result.processor);
            if (result.status = "OK") {
                document.getElementById("procinfo").innerText = document.getElementById("procinfo").innerText.concat(" in ", result.time, "ms");
                procinfo.style.color = "#30aa58";
            } else {
                procinfo.style.color = "#aa3030";
            }
        });
    }else{
        document.getElementById("resultArea").value = "No data provided!";
        return false;
    }
    
}

function performFormatRequest(endpoint, checkXML, sourceId, targetId){
    const sourceElement = document.getElementById(sourceId);
    const targetElement = document.getElementById(targetId);
    const infoElement = document.getElementById("formatinfo");
    const port = 8082;
    var xmlData = sourceElement.value.trim();
    
    var empty = false;
    if (defaultStrings.includes(xmlData) && checkXML) {
            sourceElement.style.backgroundColor = color_red;
            xmlData = "";
            empty = true;
    }

    if (!empty) {
        restRequest(port, endpoint, xmlData, "").then(function(result) {
            console.log(result);
            if (result.status == "OK") {
                targetElement.value = result.result;
                targetElement.style.backgroundColor = null;
                infoElement.innerText = ' Computed'.concat(" in ", result.time, "ms.");
                infoElement.style.color = "#30aa58";
            }
            else {
                targetElement.style.backgroundColor = color_red;
                infoElement.innerText = result.result;
                infoElement.style.color = "#aa3030";
            }
            
        });
    }
    
}


//Form REST request, send and return received data
async function restRequest(port, endpoint, xmlData, transformData) {
    const escapeChar = "specialEscapeChar";
    
    const addr = window.location.protocol + "//" + window.location.hostname + ":" + port + "/" + endpoint;

    if(defaultStrings.includes(xmlData)){
        xmlData = "<empty/>";
    }

    // var data = xmlData.concat(escapeChar, transformData);

    // const url = addr.concat("?escapechar=", escapeChar, "&processor=", getProcInfo());

    var jsonData = JSON.stringify({
        "data" : xmlData,
        "process" : transformData,
        "processor" : getProcessor(),
        "version" : getVersion()
    });
    // console.log(jsonData);
    var init = {
        headers: new Headers({
        }),
        body: jsonData,
        // body: data,
        method: "POST"
    };
    var request = new Request(addr, init);

    
    var result = await fetch(request).then(response => {
        return response.text().then(function(text) {
            return JSON.parse(text);
        });
        
    });
    return result;
}