Message loaded and tile selected

target/classes/static/js/datatransfer.js

@@ -295,6 +295,7 @@ function addRow(){
     setDataModified();
 }
 
+
 function fillMessageList(){
     $("#listItems").html('');
     var innerHTML = '';
@@ -302,6 +303,11 @@ function fillMessageList(){
         innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
     }
     $("#listItems").append(innerHTML);
+    $('.tile').click(function(e) {
+        const id = parseInt(e.target.tileId)
+        loadMessage(id);
+    });
+    // $('.btn-tile').click(tileRemoval);
 }
 
 
@@ -343,27 +349,26 @@ function loadMessage(id){
     console.log("Message not found");
 }
 
+// TODO: Add click() when generating tiles
+const tileOnclick = function (){
+
+}
+
 function selectMessage(id){
+    const tiles = $('.tile');
     console.log("Selecting message...");
-    $(".menuItemSelected").on("click");
-    $(".menuItemSelected").addClass("menuItem");
-    $(".menuItemSelected").removeClass("menuItemSelected");
+    tiles.removeClass("active");
     console.log("Selected message deselected");
-    let itemId = '#item_'+id;
-    $(itemId).off("click");
-    $(itemId).addClass("menuItemSelected");
-    $(itemId).removeClass("menuItem");
+    $('.tile[tileid="'+id+'"]').addClass("active");
     console.log("Selected message selected");
 }
 
-const tileRemoval = function(){
-    $(this).closest('div.tile').remove();
-}
+
 
 // TODO: Modify html for tiles
 function generateMessageTileHtml(id, httpStatus, mediaType){
     var innerHTML = '' +
-    '<div class="tile">' +
+    '<div tileid="' + id + '" class="tile">' +
         '<div class="content">' +
             '<div class="display-space-between">' +
                 '<div class="centered-vertically">' +