From 190e36131ef1cfa847b85ec2e709743df47995e6 Mon Sep 17 00:00:00 2001
From: modzeleg <g.modzelewski@protonmail.com>
Date: Tue, 6 Apr 2021 18:06:30 +0200
Subject: [PATCH] First tile correctly generated

---
 src/main/resources/static/html/mock.html     |  9 ++++----
 src/main/resources/static/js/datatransfer.js | 23 +++++++++++++++-----
 src/main/resources/static/js/fiddle.js       |  5 +++++
 target/classes/static/html/mock.html         |  9 ++++----
 target/classes/static/js/datatransfer.js     | 23 +++++++++++++++-----
 target/classes/static/js/fiddle.js           |  5 +++++
 6 files changed, 54 insertions(+), 20 deletions(-)
 create mode 100644 src/main/resources/static/js/fiddle.js
 create mode 100644 target/classes/static/js/fiddle.js

diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index 577e3d0..23edf81 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -130,7 +130,7 @@
                     <h2>Message List</h2>
                 </div>
                 <!-- tile list -->
-                <div>
+                <div id="listItems">
                     <div class="tile active">
                         <div class="content">
                             <div class="display-space-between">
@@ -138,9 +138,7 @@
                                     <p>Id: 1</p>
                                     <p>Status: 200</p>
                                 </div>
-                                <div>
-                                    <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
-                                </div>
+                                <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
                             </div>
                         </div>
                     </div>
@@ -152,7 +150,7 @@
                                     <p>Status: 200</p>
                                 </div>
                                 <div>
-                                    <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
+                                    <button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button>
                                 </div>
                             </div>
                         </div>
@@ -228,5 +226,6 @@
     <script type="text/javascript" src="/js/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
     <script type="text/javascript" src="/js/historyloader.js"></script>
+    <script type="text/javascript" src="/js/fiddle.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/static/js/datatransfer.js b/src/main/resources/static/js/datatransfer.js
index d39162c..573fbaa 100644
--- a/src/main/resources/static/js/datatransfer.js
+++ b/src/main/resources/static/js/datatransfer.js
@@ -356,13 +356,26 @@ function selectMessage(id){
     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="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' +
-        '<table><tr><td>Id: '+ id +'</td></tr>' +
-        '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
-        '</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">&times;</div>' +
-        '<div style="clear: both;"></div>';
+    var innerHTML = '' +
+    '<div class="tile">' +
+        '<div class="content">' +
+            '<div class="display-space-between">' +
+                '<div class="centered-vertically">' +
+                    '<p>Id: ' + id + '</p>' +
+                    '<p>Status: ' + httpStatus + '</p>' +
+                '</div>' +
+                '<div>' +
+                    '<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>' +
+                '</div>' +
+            '</div>' +
+        '</div>' +
+    '</div>';
     return innerHTML;
 }
 
diff --git a/src/main/resources/static/js/fiddle.js b/src/main/resources/static/js/fiddle.js
new file mode 100644
index 0000000..9fd89dc
--- /dev/null
+++ b/src/main/resources/static/js/fiddle.js
@@ -0,0 +1,5 @@
+const deleteParent = function(){
+    $(this).closest('div.tile').remove();
+}
+
+$('#test1').click(deleteParent);
\ No newline at end of file
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index 577e3d0..23edf81 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -130,7 +130,7 @@
                     <h2>Message List</h2>
                 </div>
                 <!-- tile list -->
-                <div>
+                <div id="listItems">
                     <div class="tile active">
                         <div class="content">
                             <div class="display-space-between">
@@ -138,9 +138,7 @@
                                     <p>Id: 1</p>
                                     <p>Status: 200</p>
                                 </div>
-                                <div>
-                                    <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
-                                </div>
+                                <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
                             </div>
                         </div>
                     </div>
@@ -152,7 +150,7 @@
                                     <p>Status: 200</p>
                                 </div>
                                 <div>
-                                    <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
+                                    <button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button>
                                 </div>
                             </div>
                         </div>
@@ -228,5 +226,6 @@
     <script type="text/javascript" src="/js/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
     <script type="text/javascript" src="/js/historyloader.js"></script>
+    <script type="text/javascript" src="/js/fiddle.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/target/classes/static/js/datatransfer.js b/target/classes/static/js/datatransfer.js
index d39162c..573fbaa 100644
--- a/target/classes/static/js/datatransfer.js
+++ b/target/classes/static/js/datatransfer.js
@@ -356,13 +356,26 @@ function selectMessage(id){
     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="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' +
-        '<table><tr><td>Id: '+ id +'</td></tr>' +
-        '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
-        '</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">&times;</div>' +
-        '<div style="clear: both;"></div>';
+    var innerHTML = '' +
+    '<div class="tile">' +
+        '<div class="content">' +
+            '<div class="display-space-between">' +
+                '<div class="centered-vertically">' +
+                    '<p>Id: ' + id + '</p>' +
+                    '<p>Status: ' + httpStatus + '</p>' +
+                '</div>' +
+                '<div>' +
+                    '<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>' +
+                '</div>' +
+            '</div>' +
+        '</div>' +
+    '</div>';
     return innerHTML;
 }
 
diff --git a/target/classes/static/js/fiddle.js b/target/classes/static/js/fiddle.js
new file mode 100644
index 0000000..9fd89dc
--- /dev/null
+++ b/target/classes/static/js/fiddle.js
@@ -0,0 +1,5 @@
+const deleteParent = function(){
+    $(this).closest('div.tile').remove();
+}
+
+$('#test1').click(deleteParent);
\ No newline at end of file