Added request body

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

@@ -33,11 +33,6 @@ const historyFilterSwitch = function(){
 $("#optional").click(changeAdvancedVisibility);
 $('#historyTab').click(showHistory);
 $('#btn-history-filter').click(historyFilterSwitch);
-$('.popup-button-close').click(
-    () => {
-        $('.popup-flex').addClass('hiddable-container');
-    }
-);
 
 
 const tabitem = $('.tabitem');
@@ -77,19 +72,55 @@ function showHeadersHistory(element){
         '</tr>'
     }
    );
-
-    $('.popup-flex').removeClass('hiddable-container');
     document.getElementById('header-history-table-body').innerHTML = historyTable;
+    switchPopups('history-headers-table');
+    showPopup();
 }
-    window.addEventListener(
-        'click' ,
-        (clickedElement) => {
-            console.log(clickedElement.target);
-            if(!document.getElementById('header-history-popup').contains(clickedElement.target) && clickedElement.target.className == 'popup-flex' ) {
-                $('.popup-flex').addClass('hiddable-container');
-            }
+
+function showRequestBody(element){
+    requestBody = "";
+    historyRequestBody = historyJson[element.id].requestBody;
+    console.log(historyRequestBody);
+    switch(historyJson[element.id].headers["content-type"]){
+        case "application/json":{
+            const address = window.location.protocol + "//" + window.location.hostname + ":" + 8081 + "/json/formatting"
+            fetch(address, {
+                method: 'POST',
+                body: historyRequestBody
+            })
+                .then(async (response) => {
+                    const promise = response.json();
+                    if (!response.ok) {
+                        throw Error(await promise);
+                    }
+                    return promise;
+                })
+                .then((data) => {
+                    requestBody = '<code class="language=json">'+data.data+'</code>';
+                    document.getElementById('history-request-body-content').innerHTML = requestBody;
+                    hljs.highlightElement(document.getElementById('history-request-body-content'));
+                })
+                .catch((error) => {
+                    console.error('Error:', error);
+                });
+            break;
         }
-    );
+        case "application/xml":{
+            document.getElementById('code-highlight-content').innerText = historyRequestBody;
+            highlightSyntax('code-highlight-content');
+            break;
+        }
+
+        default:{
+            requestBody = '<code>'+historyRequestBody+'</code>'
+            document.getElementById('history-request-body-content').innerText = requestBody;
+            hljs.highlightElement(document.getElementById('history-request-body-content'));
+        }
+    }
+    switchPopups('history-request-body');
+    showPopup();
+}
+
 function focusInTip(element){
     showTip(element);
     focusedField = true;