Refactor of History module (#184)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #184
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/assets/scripts/tools/mock/uianimation.js

@@ -35,7 +35,6 @@ $('#historyTab').click(showHistory);
 $('#btn-history-filter').click(historyFilterSwitch);
 
 
-
 const tabitem = $('.tabitem');
 function showHistory(){
     $('#headersTab').click(showHeaders);
@@ -52,8 +51,6 @@ function initializeHistory(){
     getLast24hHistoryData();
 }
 
-
-
 function showHeaders(){
     $('#historyTab').click(showHistory);
     tabitem.removeClass('active');
@@ -63,6 +60,109 @@ function showHeaders(){
     $('#headersTab').off('click');
 }
 
+function showHeadersHistory(element){
+   historyTable = '';
+   headers = parseHeaders(element.id)
+   headers.forEach(
+    (value,key) => {
+        historyTable +=
+        '<tr>' +
+        '<td class="history-header-name">'+ key + '</td>' +
+        '<td class="history-header-value">'+ value + '</td>' +
+        '</tr>'
+    }
+   );
+    document.getElementById('header-history-table-body').innerHTML = historyTable;
+    switchPopups('history-headers-table');
+    showPopup();
+}
+
+async function formatJSON(json) {
+    const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting";
+
+    var init = {
+        body: json,
+        method: "POST"
+    };
+    var request = new Request(address, init);
+    
+    var result = await fetch(request).then(response => {
+        return response.text().then(function (text) {
+            var json = JSON.parse(text);
+            json.status = response.status;
+            return json;
+        });
+        
+    });
+    return result;
+}
+
+async function formatXML(xml) {
+    const address = window.location.protocol + "//" + window.location.hostname + ":" + 8082 + "/prettify";
+    var data = {
+        data: xml,
+        process: "",
+        processor: "libxml",
+        version: "1.0"
+    }
+
+    var init = {
+        body: JSON.stringify(data),
+        method: "POST"
+    };
+    var request = new Request(address, init);
+    
+    var result = await fetch(request).then(response => {
+        return response.text().then(function (text) {
+            return JSON.parse(text);
+        });
+        
+    });
+    return result;
+}
+
+function showRequestBody(element){
+    var historyRequestBody = historyJson[element.id].requestBody;
+    const popupContent = document.getElementById('code-highlight-content')
+    
+    document.getElementById('code-highlight-content').innerText = "Loading...";
+    switch(historyJson[element.id].headers["content-type"]){
+        case "application/json":{
+            formatJSON(historyRequestBody).then(function(result) {
+                
+                if (result.status == "200") {
+                    popupContent.innerText = result.data;
+                    highlightSyntax('code-highlight-content');
+                }
+                else {
+                    popupContent.innerText = historyRequestBody;
+                }
+            });
+            break;
+        }
+        case "application/xml":{
+            formatXML(historyRequestBody).then(function(result) {
+                if (result.status == "OK") {
+                    popupContent.innerText = result.result;
+                    highlightSyntax('code-highlight-content');
+                }
+                else {
+                    popupContent.innerText = historyRequestBody;
+                }
+                
+            });
+            
+            break;
+        }
+        default:{
+            popupContent.innerText = historyRequestBody;
+            highlightSyntax('code-highlight-content');
+        }
+    }
+    switchPopups('history-request-body');
+    showPopup();
+}
+
 function focusInTip(element){
     showTip(element);
     focusedField = true;
@@ -73,6 +173,10 @@ function focusOutTip(element){
     hidTip(element);
 }
 
+function refreshHistoryRecords(){
+    getLast24hHistoryData();
+}
+
 function hidTip(element){
     if(focusedField) return;
     $('#'+element).removeClass('active');