T157 Message info loaded in list

src/main/resources/static/css/main.css

@@ -155,13 +155,15 @@
 .menuItem {
     width: 174px;
     padding: 13px;
-    font-size: 24px;
-    text-align: center;
+    font-size: 12px;
+    text-align: left;
     margin-bottom: 5px;
     border: 1px solid lightgray;
     cursor: pointer;
 }
 
+
+
 .menuFactory {
     color: lightgray;
 }
@@ -175,8 +177,8 @@
 .menuItemSelected {
     width: 174px;
     padding: 13px;
-    font-size: 24px;
-    text-align: center;
+    font-size: 12px;
+    text-align: left;
     margin-bottom: 5px;
     border: 1px solid lightgray;
     background: gray;

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

@@ -6,7 +6,7 @@ function getData(uuid){
                         , json[0].messageBody
                         , json[0].httpStatus);
        fillHeaderTable(json[0].httpHeaders);
-
+       fillMessageList(json);
     });
 }
 
@@ -55,4 +55,18 @@ function generateHeaderTable(headers){
     return innerHTML;
 }
 
+function fillMessageList(json){
+    var innerHTML = generateMessageTileHtml(json[0].mockedResponseId, json[0].httpStatus, json[0].mediaType);
+    $("#listItems").append(innerHTML);
+}
+
+function generateMessageTileHtml(id, httpStatus, mediaType){
+    var innerHTML = '<div class="menuItem">' +
+        '<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;
+}
+
 $(document).ready(getData());