Fixed history problem, and improve mock services frontend

Backend/mocked-services/src/main/java/com/r11/tools/model/RequestHistory.java

@@ -25,11 +25,11 @@ import java.util.Map;
 @AllArgsConstructor
 @RedisHash("mockHistory")
 public class RequestHistory implements Comparable<RequestHistory>, Serializable {
-
+    @Id
+    private String id;
     @DateTimeFormat(pattern = "yyyy-MM-ddTHH:mm:ss")
     private LocalDateTime dateTimeStamp;
     @Indexed
-    @Id
     private String clientUUID;
     private Map<String,String> headers;
     private HttpMethod httpMethod;

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

@@ -2,9 +2,7 @@ var clientUUID = '';
 var advancedDisplayed = false;
 var json = {};
 var jsonIndex = 0;
-var htable_row = 0;
 var host = window.location.protocol + "//" + window.location.hostname + ":8097";
-var dataModified = false;
 
 const C_UUID = 'mock-uuid';
 const C_ADV = 'advanced-mode';
@@ -15,9 +13,6 @@ const color_grey = "#6b6b6b";
 const setModified = function(){
     setDataModified();
 }
-const setOrigin = function(){
-    setDataOrigin();
-}
 
 const getUpdate = function(){
     updateData();
@@ -26,12 +21,50 @@ const dataRefresh = function(){
     getData();
 }
 
+/*
+    Listeners segment
+*/
+
+$(document).on('change', '.data-field', setModified);
+
+$('#btn-save').click( 
+    () => {
+        disableSaveButton();
+    }
+    );
+    
+$('#btn-newRow').click(
+    ()=> {
+        newRowInput();
+        setDataModified();
+    }   
+    );
+
+/*
+    Functions segment
+*/
+
+function disableSaveButton(){
+    $('#btn-save').removeClass('active');
+    $('#btn-save').off();
+}
+
+function createLink(uuid){
+    var link =  host + '/api/mock/r/'+uuid;
+    return link;
+}
+
+
+function onLoad(){
+    loadCookies();
+    getData();
+}
+
 function getData(){
     $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
-        console.log(data)
         json = data;
+        loadFetchedMessage();
         initializeUUID();
-        loadMessage();
     });
 }
 
@@ -52,13 +85,6 @@ function initializeUUID(){
     }
 }
 
-function getDomain(){
-    var url = window.location.href;
-    var arr = url.split("/");
-    var result = arr[0] + "//" + arr[2];
-    return result;
-}
-
 function httpStatusInvalid(){
     value = $('#httpStatus').val();
     return value == '';
@@ -71,19 +97,9 @@ function setDataModified(){
         document.getElementById("httpStatus").style.backgroundColor = color_red;
         return;
     }
-    dataModified = true;
-    $('#btn-save').addClass('active');
-    $('#btn-save').click(getUpdate);
-    document.getElementById("httpStatus").style.backgroundColor = null;
-}
-
-//Adding change listener to fields
-$('.data-field').change(setModified);
-
-function setDataOrigin(){
-    dataModified = false;
-    $('#btn-save').removeClass('active');
-    $('#btn-save').off();
+        $('#btn-save').addClass('active');
+        $('#btn-save').click(getUpdate);
+        document.getElementById("httpStatus").style.backgroundColor = null;
 }
 
 function getCookie(cname) {
@@ -103,10 +119,9 @@ function getCookie(cname) {
 }
 
 function updateData(){
-    var updatedJson = generateJson();
+    var updatedJson = createRequestBody();
     const dataSaved = function () {
-        setDataOrigin();
-        loadMessage();
+        loadFetchedMessage();
         savedModalDisplay();
     }
     $.ajax({
@@ -115,22 +130,18 @@ function updateData(){
         data: JSON.stringify(updatedJson, null, 2),
         contentType: "application/json",
     }).done(dataSaved);
+    disableSaveButton();
 }
 
-function clearMock(){
-    fillStaticFields('','','','');
-    htable_row = 0;
-    $('#httpStatusValues').html('');
-}
-
-function initializeMock(){
-        clearMock();
-        fillStaticFields(
-            json.clientUUID,
-            json.contentType,
-            json.messageBody,
-            json.httpStatus);
-        fillHeaderTable(json.httpHeaders);
+function loadFetchedMessage(){
+    fillStaticFields(
+        json.clientUUID,
+        json.contentType,
+        json.messageBody,
+        json.httpStatus);
+    fillHeaderTable(json.httpHeaders);
+    initializeHistory();
+    refreshHeaderTable(document.innerHTML);
 }
 
 function fillStaticFields(uuid, contentType, body, httpStatus){
@@ -142,11 +153,6 @@ function fillStaticFields(uuid, contentType, body, httpStatus){
     $('#bodyEditor').val(body);
 }
 
-function createLink(uuid){
-    var link =  host + '/api/mock/r/'+uuid;
-    return link;
-}
-
 function fillHeaderTable(headers){
     var innerHTML = buildHeaderMapHtml(headers);
     refreshHeaderTable(innerHTML);
@@ -154,10 +160,9 @@ function fillHeaderTable(headers){
 
 function refreshHeaderTable(html){
     $('#headerMapTable').html(html);
-    $('.table-map').change(function(){setDataModified()});
     $('.btn-hashmap').click(function(){
-        $(this).closest('tr').remove();
         setDataModified();
+        $(this).closest('tr').remove();
     })
 }
 
@@ -176,19 +181,16 @@ function addRow(key, value){
     refreshHeaderTable(headersMapHtml);
 }
 
-const newRowInput = function(){
+function newRowInput(){
     const hName = $('#headerKeyInput');
     const hValue = $('#headerValueInput');
     if(checkIfInputValid(hName.val()) && checkIfInputValid(hValue.val())){
         addRow(hName.val(), hValue.val());
         hName.val(null);
         hValue.val(null);
-        setDataModified();
     }
 }
 
-$('#btn-newRow').click(newRowInput);
-
 function checkIfInputValid(input){
     return !(input == '' || input == null || input == undefined);
 }
@@ -219,34 +221,11 @@ function buildRowHtml(key, value){
     '</tr>';
 }
 
-function loadMessage(){
-    setCookie();
-    setDataOrigin();
-    initializeMock();
-    selectMessage();
-}
-
-
-function selectMessage(){
-    initializeHistory();
-    refreshHeaderTable(document.innerHTML);
-}
-
-const onbuild = function(){
-    loadCookies();
-    getData();
-    if(advancedDisplayed) {
-        changeAdvancedVisibility();
-    }
-}
-
-$(document).ready(onbuild);
-
 function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-function generateJson(){
+function createRequestBody(){
     var newJson =
         {
             clientUUID: json.clientUUID,

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

@@ -227,19 +227,5 @@ $('#btnSave').focusin(function(){focusInTip('btnSaveTip')});
 $('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
 $('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});
 
-$('#new-tile').mouseover(function(){showTip('btn-newTileTip');});
-$('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')});
-$('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')});
-
 $('#listItems').mouseover(function(){showTip('messagesTip');});
-$('#listItems').mouseleave(function(){hidTip('messagesTip')});
-
-
-$('#uuid-edit-field').mouseover(function(){ showTip('UUIDFieldTip') });
-$('#uuid-edit-field').mouseleave(function(){ hidTip('UUIDFieldTip') });
-
-$('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') });
-$('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') });
-
-$('#editableBlock').mouseover( function(){ showTip('UUIDEditionTip') } );
-$('#editableBlock').mouseleave(function(){ hidTip('UUIDEditionTip') });
+$('#listItems').mouseleave(function(){hidTip('messagesTip')});

Frontend/tools/mock.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="../assets/css/tools/mock/common.css" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
-<body>
+<body onload="onLoad()">
     <div class="popup-flex hiddable-container"> 
         <div class="popup-body" id="popup-body">
             <div class="popup-button-close-container">