Improve adding headers to frontend

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;