Improve adding headers to frontend

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

@@ -0,0 +1,93 @@
+.popup-flex:not(.hiddable-container){
+    animation: blur 0.5s ease-in-out ;
+    animation-fill-mode: forwards;
+}
+.popup-flex:has(.hiddable-container){
+    animation: deblur 0.3s ease-in-out ;
+    animation-direction: reverse;
+    animation-fill-mode: forwards;
+}
+.popup-flex{
+    display: flex; 
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    z-index: 50;
+    flex-direction: column;
+    gap: 2%;
+    position: fixed;
+    justify-content: center;
+}
+
+.popup-body{
+    min-width: 33%;
+    background-color: white;
+    box-shadow: 10px 10px 5px lightblue;
+    min-height: 45%;
+    border-radius: 1em;
+    text-align: center;
+    padding: 10px 15px 15px 15px;
+    color: black;
+    border: 1px #2A93B0 solid;
+}
+
+.popup-button-close-container{
+    text-align: right;
+    margin-right: 2%;
+    margin-top: 1%;
+    font-size: xx-large;
+    font-weight: bold;
+}
+
+.popup-button-close{
+    background: padding-box;
+    border: 0;
+}
+
+.popup-button-close:hover{
+    color: #2A93B0;
+}
+
+.hiddable-container{
+    display:none;
+}
+
+
+#header-table tr td {
+    border: 1px black solid;
+    padding: 1%;
+}
+
+#header-table{
+    border-collapse: collapse;
+}
+
+@keyframes blur {
+    0% {
+      backdrop-filter: blur(0px);
+    }
+  
+    50% {
+      backdrop-filter: blur(5px);
+    }
+  
+    100% {
+      backdrop-filter: blur(10px);
+    }
+  }
+
+@keyframes deblur {
+    0%{
+        backdrop-filter: blur(10px);
+      }
+    
+      50% {
+        backdrop-filter: blur(5px);
+      }
+    
+      100% {
+        backdrop-filter: blur(0px);
+        display: none;
+      }
+    
+}

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

@@ -470,7 +470,7 @@ function selectMessage(id){
     $('.tile[tileid="'+id+'"]').addClass("active");
     
     initializeHistory();
-    refreshHeaderTable(innerHTML);
+    refreshHeaderTable(document.innerHTML);
 }
 
 

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

@@ -29,7 +29,6 @@ function loadHistory(dateFrom, dateTo){
         contentType: "application/json"
     }).done(function(data){
         historyJson = data;
-        console.log(data);
         displayHistory();
     });
 }
@@ -37,7 +36,6 @@ function loadHistory(dateFrom, dateTo){
 function getLast24hHistoryData(){
     $.getJSON(host + '/api/event/' + clientUUID + '/' + lastId, function(data){
         historyJson = data;
-        console.log(data);
         displayHistory();
     });
 }
@@ -51,27 +49,18 @@ function historyToHtml(){
             '<td>' + historyJson[i].dateTimeStamp + '</td>' +
             '<td>' + historyJson[i].httpMethod + '</td>' +
             '<td>' + historyJson[i].requestBody + '</td>' +
-            '<td>' +
-            '<th> Header Name </th>' +
-            '<th> Header Value </th>' +
-            historyJson[i].headers.forEach(
-
-            )
-            + '</td>'
-            '<td>' + parseHeaders(historyJson[i].headers) + '</td>' +
+            '<td> <button id="'+i+'" class="showHeaderButton" onClick="showHeadersHistory(this);"> Show headers </button> </td>' + 
         '</tr>';
     }
     return innerHTML;
 }
 
-function parseHeaders(json){
-    console.log(json);
-    parsedJson = "";
-    Object.keys( json ).forEach(
-        (key) => {
-            console.log(key);
-            console.log(json.key)
-            parsedJson += key + " : " + json[key] + "\n";
+function parseHeaders(pos){
+    parsedJson = new Map();
+    headers = historyJson[pos].headers
+    Object.keys( headers ).forEach(
+        (jsonKey) => {
+            parsedJson.set( jsonKey , headers[jsonKey] );
         }
     )
     return parsedJson;

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

@@ -33,7 +33,11 @@ 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');
@@ -52,8 +56,6 @@ function initializeHistory(){
     getLast24hHistoryData();
 }
 
-
-
 function showHeaders(){
     $('#historyTab').click(showHistory);
     tabitem.removeClass('active');
@@ -63,6 +65,23 @@ function showHeaders(){
     $('#headersTab').off('click');
 }
 
+function showHeadersHistory(element){
+   historyTable = '';
+   headers = parseHeaders(element.id)
+   headers.forEach(
+    (value,key) => {
+        historyTable +=
+        '<tr>' +
+        '<td>'+ key + '</td>' +
+        '<td>'+ value + '</td>' +
+        '</tr>'
+    }
+   );
+
+    $('.popup-flex').removeClass('hiddable-container');
+    document.getElementById('header-history-table-body').innerHTML = historyTable;
+}
+
 function focusInTip(element){
     showTip(element);
     focusedField = true;

Frontend/tools/mock.html

@@ -6,9 +6,35 @@
     <link rel="stylesheet" href="../assets/css/tools/mock/fontello.css" type="text/css">
     <link rel="stylesheet" href="../assets/css/tools/mock/main.css" type="text/css">
     <link rel="stylesheet" href="../assets/css/tools/mock/common.css" type="text/css">
+    <link rel="stylesheet" href="../assets/css/tools/mock/r11popup.css" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body>
+        <div class="popup-flex hiddable-container"> 
+            <div class="popup-body">
+                <div class="popup-button-close-container">
+                    <button type="button" class="popup-button-close"> X </button>
+                </div>
+                <div class="popup-header-table">
+                    <table id="header-table">
+                        <thead>
+                            <tr>
+                                <th>
+                                    Header Name
+                                </th>
+
+                                <th>
+                                    Header Value
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody id="header-history-table-body">
+
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
     <div class="container">
         <div class="tool extended">
             <div class="tool-context">
@@ -151,7 +177,7 @@
                                                     <th>Timestamp</th>
                                                     <th>Method</th>
                                                     <th>Request Body</th>
-                                                    <th>Request Headers</th>
+                                                    <th>Headers</th>
                                                 </tr>
                                             </thead>
                                             <tbody>