Initial commit

Frontend/scripts.js

@@ -0,0 +1,156 @@
+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";
+    }
+}
+
+//Set default text in grey
+function setDefaultContent(element, text) {
+    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;
+        }
+    }
+}
+
+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(text, checkXML, checkTransform){
+    var xmlData = document.getElementById("xmlArea").value.trim();
+    var transformData = document.getElementById("transformArea").value.trim();
+    
+    var empty = false;
+    if (defaultStrings.includes(xmlData) && checkXML) {
+            document.getElementById("xmlArea").style.backgroundColor = color_red;
+            xmlData = "";
+            empty = true;
+    }
+    if (defaultStrings.includes(transformData) && checkTransform) {
+        document.getElementById("transformArea").style.backgroundColor = color_red;
+        empty = true;
+    }
+    if (!empty) {
+        restRequest(text);
+    }else{
+        document.getElementById("resultArea").value = "No data provided!";
+        return false;
+    }
+    
+}
+
+//Form REST request, send, receive and display in resultArea
+async function restRequest(text) {
+    const escapeChar = "specialEscapeChar";
+    // const addr = "http://localhost:8081/" + text;
+    const addr = "http://gordon.zipper.release11.com:8081/" + text;
+    
+    var xmlData = document.getElementById("xmlArea").value.trim();
+    var transformData = document.getElementById("transformArea").value.trim();
+
+    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);
+
+    
+
+    await fetch(request).then(response => {
+        console.log(response.status);
+        response.text().then(function (text) {
+            console.log(text);
+            var result = JSON.parse(text);
+            document.getElementById("resultArea").value = result.result;
+            document.getElementById("procinfo").innerText = ' Computed using '.concat(" ", result.processor);
+            if (response.ok) {
+                document.getElementById("procinfo").innerText = document.getElementById("procinfo").innerText.concat(" in ", result.time, "ms");
+                procinfo.style.color = "#30aa58";
+            } else {
+                procinfo.style.color = "#aa3030";
+            }
+        });
+
+    });
+}