Frontend/assets/css/tools/mock/common.css

@@ -7,6 +7,7 @@
 @import url('r11modal.css');
 @import url('r11flexbox.css');
 @import url('r11popup.css');
+@import url('../../highlight.css');
 
 @font-face {
     font-family: 'Material Icons';

Frontend/assets/css/tools/mock/r11popup.css

@@ -16,6 +16,9 @@
 
 .popup-body{
     min-width: 33%;
+    max-width: 60%;
+    max-height: 70%;
+    overflow: scroll;
     background-color: white;
     box-shadow: 10px 10px 5px lightblue;
     min-height: 45%;
@@ -47,6 +50,14 @@
     display:none;
 }
 
+.hidden-popup-type{
+    display: none;
+}
+
+#history-request-body{
+    text-align: justify;
+}
+
 @keyframes blur {
     0% {
       backdrop-filter: blur(0px);

Frontend/assets/css/tools/mock/r11tables.css

@@ -70,15 +70,23 @@
     color: white;
 }
 
+.table-default td{
+    text-align: center;
+}
+
 #header-table tr td {
     border: 1px black solid;
-    padding: 1%;
+    padding: 1.5%;
+    
 }
 
 #header-table{
     border-collapse: collapse;
+    width: 100%;
+    height: 100%;
 }
 
 #historyTable, td{
     padding: 1%;
+    overflow-x: scroll;
 }

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

@@ -46,15 +46,25 @@ function historyToHtml(){
     for(let i=0; i<iterations; i++){
         let style = i%2==0 ? ' class="even"' : '';
         innerHTML += '<tr' + style + '>' +
-            '<td>' + historyJson[i].dateTimeStamp + '</td>' +
+            '<td>' + parseTimeStamp(historyJson[i].dateTimeStamp) + '</td>' +
             '<td>' + historyJson[i].httpMethod + '</td>' +
-            '<td>' + historyJson[i].requestBody + '</td>' +
+            '<td>' + parseRequestBody(historyJson[i].requestBody, i) + '</td>' +
             '<td> <button id="'+i+'" class="showHeaderButton" onClick="showHeadersHistory(this);"> Show headers </button> </td>' + 
         '</tr>';
     }
     return innerHTML;
 }
 
+function parseRequestBody(requestBody,i){
+    return requestBody.length == 0 ?
+     "No request body" :
+     '<button id="'+i+'" class="showRequestBodyButton" onClick="showRequestBody(this);"> Show request body </button>'
+}
+
+function parseTimeStamp(timeStamp){
+    return timeStamp.substring(0,19).replace('T',' ');
+}
+
 function parseHeaders(pos){
     parsedJson = new Map();
     headers = historyJson[pos].headers

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

@@ -0,0 +1,34 @@
+
+function switchPopups (neededPopupOption) { 
+    $('.hiddable-popup-option').addClass('hidden-popup-type');
+    $('#'+neededPopupOption).removeClass('hidden-popup-type');
+ }
+
+function showPopup(){
+    $('.popup-flex').removeClass('hiddable-container');
+}
+
+function hidePopup(){
+    $('.popup-flex').addClass('hiddable-container');
+    $('.hiddable-popup-option').addClass('hidden-popup-type');
+}
+
+/*
+* Event listener that's close the popup when user clicks out of a popup.
+*/
+
+window.addEventListener(
+    'click' ,
+    (clickedElement) => {
+        if(!document.getElementById('popup-body').contains(clickedElement.target) && clickedElement.target.className == 'popup-flex' ) {
+            hidePopup();
+        }
+    }
+);
+
+$('.popup-button-close').click(
+    () => {
+        hidePopup();
+        $('.hiddable-popup-option').addClass('hidden-popup-type')
+    }
+);

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' ,
+function showRequestBody(element){
-        (clickedElement) => {
+    requestBody = "";
-            console.log(clickedElement.target);
+    historyRequestBody = historyJson[element.id].requestBody;
-            if(!document.getElementById('header-history-popup').contains(clickedElement.target) && clickedElement.target.className == 'popup-flex' ) {
+    console.log(historyRequestBody);
-                $('.popup-flex').addClass('hiddable-container');
+    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;

Frontend/tools/mock.html

@@ -10,11 +10,11 @@
 </head>
 <body>
         <div class="popup-flex hiddable-container"> 
-            <div class="popup-body" id="header-history-popup">
+            <div class="popup-body" id="popup-body">
                 <div class="popup-button-close-container">
                     <button type="button" class="popup-button-close"> X </button>
                 </div>
-                <div class="popup-header-table">
+                <div class="popup-header-table hiddable-popup-option" id="history-headers-table">
                     <table id="header-table">
                         <thead>
                             <tr>
@@ -32,6 +32,11 @@
                         </tbody>
                     </table>
                 </div>
+                <div class="popup-request-body hiddable-popup-option" id="history-request-body">
+                    <pre class="code-content" id="history-request-body-content">
+                        <code id="code-highlight-content"></code>
+                    </pre>
+                </div>
             </div>
         </div>
     <div class="container">
@@ -329,5 +334,9 @@
     <script type="text/javascript" src="../assets/scripts/tools/mock/datatransfer.js"></script>
     <script type="text/javascript" src="../assets/scripts/tools/mock/historyloader.js"></script>
     <script type="text/javascript" src="../assets/scripts/tools/mock/fiddle.js"></script>
+    <script type="text/javascript" src="../assets/scripts/tools/mock/popup.js"></script>
+    <script type="text/javascript" src="../assets/scripts/tools/xmlFormatter.js"></script>
+    <script type="text/javascript" src="../assets/scripts/tools/highlight.js"></script>
+    <script type="text/javascript" src="../assets/scripts/common/hljs.min.js"></script>
 </body>
 </html>