Merge pull request 'bema/func/#35' (#72) from bema/func/#35 into dev

Reviewed-on: R11/release11-tools-web#72

Frontend/assets/css/tools/r11form.css

@@ -330,6 +330,10 @@
     height: 300px;
 }
 
+.textarea-800 {
+    height: 800px;
+}
+
 .centered-content {
     display: flex;
     justify-content: center;

Frontend/assets/scripts/tools/scripts.js

@@ -96,22 +96,38 @@ function refreshTooltip() {
     document.getElementById("xsltelementsheader").innerText = XSLTheader;
 }
 
+
+
 function performRequest(endpoint, checkXML, checkTransform){
-    var xmlData = document.getElementById("xmlArea").value.trim();
+    var xmlData = document.getElementById(sourceId).value.trim();
-    var transformData = document.getElementById("transformArea").value.trim();
+    var transformData = document.getElementById(targetId).value.trim();
     
+    var port = 8081
+    if (getProcessor() == "libxml") {
+        port = 8082
+    }
+
     var empty = false;
     if (defaultStrings.includes(xmlData) && checkXML) {
-            document.getElementById("xmlArea").style.backgroundColor = color_red;
+            document.getElementById(sourceId).style.backgroundColor = color_red;
             xmlData = "";
             empty = true;
     }
     if (defaultStrings.includes(transformData) && checkTransform) {
-        document.getElementById("transformArea").style.backgroundColor = color_red;
+        document.getElementById(targetId).style.backgroundColor = color_red;
         empty = true;
     }
     if (!empty) {
-        restRequest(endpoint, xmlData, transformData);
+        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;
@@ -119,33 +135,35 @@ function performRequest(endpoint, checkXML, checkTransform){
     
 }
 
-function performFormatRequest(endpoint, checkXML){
+function performFormatRequest(endpoint, checkXML, sourceId, targetId){
-    var xmlData = document.getElementById("xmlArea").value.trim();
+    const port = 8082;
+    var xmlData = document.getElementById(sourceId).value.trim();
     
     var empty = false;
     if (defaultStrings.includes(xmlData) && checkXML) {
-            document.getElementById("xmlArea").style.backgroundColor = color_red;
+            document.getElementById(sourceId).style.backgroundColor = color_red;
             xmlData = "";
             empty = true;
     }
+
     if (!empty) {
-        restRequest(endpoint, xmlData, null);
+        restRequest(port, endpoint, xmlData, "").then(function(result) {
+            document.getElementById(targetId).value = result.result;
+            
+        });
     }else{
-        document.getElementById("resultArea").value = "No data provided!";
+        document.getElementById(targetId).value = "No data provided!";
         return false;
     }
     
 }
 
 
-//Form REST request, send, receive and display in resultArea
+//Form REST request, send and return received data
-async function restRequest(endpoint, xmlData, transformData) {
+async function restRequest(port, endpoint, xmlData, transformData) {
     const escapeChar = "specialEscapeChar";
-    var port = ":8081/"
+    
-    if (getProcessor() == "libxml") {
+    const addr = window.location.protocol + "//" + window.location.hostname + ":" + port + "/" + endpoint;
-        port = ":8082/"
-    }
-    const addr = window.location.protocol + "//" + window.location.hostname + port + endpoint;
 
     if(defaultStrings.includes(xmlData)){
         xmlData = "<empty/>";
@@ -172,21 +190,11 @@ async function restRequest(endpoint, xmlData, transformData) {
     var request = new Request(addr, init);
 
     
-
+    var result = await fetch(request).then(response => {
-    await fetch(request).then(response => {
+        return response.text().then(function(text) {
-        console.log(response.status);
+            return JSON.parse(text);
-        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";
-            }
         });
-
+        
     });
+    return result;
 }

Frontend/tools/formatter.html

@@ -24,20 +24,15 @@
 
                 <label for="xmlArea"><b>Insert your XML:</b></label>
                 <textarea id="xmlArea" name="xmlArea" rows="15"
-                    class="textarea-300 bordered-field vertically-resizeable max-width"
+                    class="textarea-800 bordered-field vertically-resizeable max-width"
                     onblur="setDefaultContent(this, 'Insert XML here');"
                     onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
                 <br><br>
                 <button id="requestButton" class="max-width block-label action-button active"
-                    onclick="performFormatRequest('prettifypost', true)">Prettify XML</button>
+                    onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Prettify XML</button>
                 <button id="requestButton" class="max-width block-label action-button active"
-                    onclick="performFormatRequest('minimizepost', true)">Minimize XML</button>
+                    onclick="performFormatRequest('minimizepost', true, 'xmlArea', 'xmlArea')">Minimize XML</button>
-                <br><br>
+                
-
-                <label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
-                <textarea id="resultArea" name="resultArea" rows="2"
-                    class="bordered-field textarea-300 vert2ically-resizeable max-width" style="margin-bottom: 50px;"></textarea>
-
             </div>
         </div>
         <div class="tooltip-window rwd-hideable">

Frontend/tools/xpath.html

@@ -37,8 +37,10 @@
                         </select>
                     </div>
                     <div>
-                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
+                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
                             onclick="clearDataField()">Clear</button>
+                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
+                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
                         <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
                             onclick="fillDefaultXML(this)">Insert default XML</button>
                     </div>

Frontend/tools/xsd.html

@@ -26,8 +26,10 @@
                 </select>
                     </div>
                     <div>
-                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
+                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
                             onclick="clearDataField()">Clear</button>
+                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
+                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
                         <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
                             onclick="fillDefaultXML(this)">Insert default XML</button>
                     </div>

Frontend/tools/xslt.html

@@ -26,8 +26,10 @@
                 </select>
                     </div>
                     <div>
-                        <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
+                        <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
                             onclick="clearDataField()">Clear</button>
+                        <button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
+                            onclick="performFormatRequest('prettifypost', true, 'xmlArea', 'xmlArea')">Format XML</button>
                         <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
                             onclick="fillDefaultXML(this)">Insert default XML</button>
                     </div>