T161 messages are removed. Snapshot 1.0

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

@@ -157,7 +157,8 @@
 }
 
 .menuItem {
-    width: 180px;
+    float: left;
+    width: 150px;
     padding: 10px;
     height: 42px;
     font-size: 14px;
@@ -180,7 +181,8 @@
 }
 
 .menuItemSelected {
-    width: 180px;
+    float: left;
+    width: 150px;
     padding: 10px;
     height: 42px;
     font-size: 14px;
@@ -192,6 +194,14 @@
     font-weight: 400;
 }
 
+.btn-del-MenuItem {
+    float: left;
+    font-size: 24px;
+    color: red;
+    text-align: center;
+
+}
+
 #headerTable {
     margin-top: 40px;
     margin-bottom: 20px;

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

@@ -1,6 +1,3 @@
-//TODO: Add button to add new header
-//TODO: Update cookie when displayed message is changed
-//TODO: Add delete buttons for headers
 //TODO: Add delete buttons for messages
 var clientUUID;
 var json;
@@ -8,7 +5,6 @@ var jsonIndex = 0;
 var htable_row = 0;
 const C_UUID = 'mock-uuid';
 function getData(){
-    // sleep(5000);
     loadCookies();
     $.getJSON('http://localhost:8097/mock/json/'+clientUUID, function(data) {
         json = data;
@@ -76,6 +72,16 @@ function addMessage(){
     getData();
 }
 
+function removeTile(id){
+    var jsonObject = findJsonById(id);
+    $.ajax({
+        url: 'http://localhost:8097/mock/json/'+clientUUID + '/' + id,
+        type: 'DELETE',
+        success: getData(),
+    });
+    getData();
+}
+
 
 function clearMock(){
     fillStaticFields('','','','');
@@ -177,6 +183,17 @@ function fillMessageList(){
     $("#listItems").append(innerHTML);
 }
 
+
+//TODO: Implement methods where its possible
+function findJsonById(id){
+    return json[findJsonIndexById(id)];
+}
+
+function findJsonIndexById(id){
+    for(let i=0; i<json.length; i++)
+        if(id == json[i].mockedResponseId) return i;
+}
+
 function loadMessage(id){
     for(let i=0; i<json.length; i++){
         if(id == json[i].mockedResponseId){
@@ -209,14 +226,16 @@ function generateMessageTileHtml(id, httpStatus, mediaType){
     var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="loadMessage('+ id +')">' +
         '<table><tr><td>Id: '+ id +'</td></tr>' +
         '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
-        '</table></div>';
+        '</table></div><div class="btn-del-MenuItem" onclick="removeTile(' + id + ')">X</div>' +
+        '<div style="clear: both;"></div>';
     return innerHTML;
 }
 
+
+
 function onbuild(){
     getData();
     sleep(1000);
-    // $('#btn-save').bind('click', generateJson);
 }
 
 $(document).ready(onbuild());
@@ -243,7 +262,6 @@ function generateJson(){
     return newJson;
 }
 
-// $("table tr").eq(row).find("td").eq(i%2).append("<img src='"+dataJson[i].imagen+"' width='100'/>");
 
 function convertTableToJson(){
     var rows = $('.httpStatusValue');