T157 message selection added

src/main/resources/static/js/datatransfer.js

@@ -2,18 +2,28 @@ var json;
 function getData(uuid){
     $.getJSON('http://localhost:8097/mock/json', function(data) {
         json = data;
+        console.log("Json received");
         fillMessageList();
-        initializeMock(json, 0)
+        console.log("List initiated");
+        loadMessage(json[0].mockedResponseId);
+        console.log("Message loaded");
+        // initializeMock(json, 0)
     });
 }
 
-function initializeMock(json, id){
-    fillStaticFields(json[id].clientUUID
-        , json[id].mockedResponseId
-        , json[id].mediaType
-        , json[id].messageBody
-        , json[id].httpStatus);
-    fillHeaderTable(json[id].httpHeaders);
+function clearMock(){
+    fillStaticFields('','','','');
+    $('#headerTable').html('');
+}
+
+function initializeMock(index){
+    clearMock();
+    fillStaticFields(json[index].clientUUID
+        , json[index].mockedResponseId
+        , json[index].mediaType
+        , json[index].messageBody
+        , json[index].httpStatus);
+    fillHeaderTable(json[index].httpHeaders);
 }
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){
@@ -70,10 +80,36 @@ function fillMessageList(){
     $("#listItems").append(innerHTML);
 }
 
+function loadMessage(id){
+    for(let i=0; i<json.length; i++){
+        if(id == json[i].mockedResponseId){
+            console.log("Message found");
+            initializeMock(i);
+            console.log("Fields initialized");
+            selectMessage(id);
+            console.log("Selection complete");
+            return;
+        }
+    }
+    console.log("Message not found");
+}
+
+function selectMessage(id){
+    console.log("Selecting message...");
+    $(".menuItemSelected").on("click");
+    $(".menuItemSelected").addClass("menuItem");
+    $(".menuItemSelected").removeClass("menuItemSelected");
+    console.log("Selected message deselected");
+    let itemId = '#item_'+id;
+    $(itemId).off("click");
+    $(itemId).addClass("menuItemSelected");
+    $(itemId).removeClass("menuItem");
+    console.log("Selected message selected");
+}
+
 function generateMessageTileHtml(id, httpStatus, mediaType){
-    var innerHTML = '<div class="menuItem" id="item' + id + '">' +
+    var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="loadMessage('+ id +')">' +
         '<table><tr><td>Id: '+ id +'</td></tr>' +
-        // '<tr><td>Content-type: '+mediaType+'</td></tr>' +
         '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
         '</table></div>';
     return innerHTML;