diff --git a/Frontend/assets/css/tools/mock/r11popup.css b/Frontend/assets/css/tools/mock/r11popup.css
new file mode 100644
index 0000000..06946c6
--- /dev/null
+++ b/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;
+ }
+
+}
diff --git a/Frontend/assets/scripts/tools/mock/datatransfer.js b/Frontend/assets/scripts/tools/mock/datatransfer.js
index 922d5eb..34945a2 100644
--- a/Frontend/assets/scripts/tools/mock/datatransfer.js
+++ b/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);
}
diff --git a/Frontend/assets/scripts/tools/mock/historyloader.js b/Frontend/assets/scripts/tools/mock/historyloader.js
index 4031f81..48e26d4 100644
--- a/Frontend/assets/scripts/tools/mock/historyloader.js
+++ b/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(){
'| ' + historyJson[i].dateTimeStamp + ' | ' +
'' + historyJson[i].httpMethod + ' | ' +
'' + historyJson[i].requestBody + ' | ' +
- '' +
- ' | Header Name | ' +
- ' Header Value | ' +
- historyJson[i].headers.forEach(
-
- )
- + ''
- '' + parseHeaders(historyJson[i].headers) + ' | ' +
+ ' | ' +
'';
}
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;
diff --git a/Frontend/assets/scripts/tools/mock/uianimation.js b/Frontend/assets/scripts/tools/mock/uianimation.js
index 46dfb20..954078f 100644
--- a/Frontend/assets/scripts/tools/mock/uianimation.js
+++ b/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 +=
+ '' +
+ '| '+ key + ' | ' +
+ ''+ value + ' | ' +
+ '
'
+ }
+ );
+
+ $('.popup-flex').removeClass('hiddable-container');
+ document.getElementById('header-history-table-body').innerHTML = historyTable;
+}
+
function focusInTip(element){
showTip(element);
focusedField = true;
diff --git a/Frontend/tools/mock.html b/Frontend/tools/mock.html
index 07ef039..d9a4500 100644
--- a/Frontend/tools/mock.html
+++ b/Frontend/tools/mock.html
@@ -6,9 +6,35 @@
+
+