From cf13656133fd7b7627a983a62a4059fe749a40a0 Mon Sep 17 00:00:00 2001
From: modzeleg <g.modzelewski@protonmail.com>
Date: Wed, 7 Apr 2021 16:38:41 +0200
Subject: [PATCH] Message loaded and tile selected

---
 .../resources/static/css/commons/r11form.css  |  1 +
 src/main/resources/static/html/mock.html      | 28 ++-----------------
 src/main/resources/static/js/datatransfer.js  | 27 ++++++++++--------
 target/classes/static/css/commons/r11form.css |  1 +
 target/classes/static/html/mock.html          | 28 ++-----------------
 target/classes/static/js/datatransfer.js      | 27 ++++++++++--------
 6 files changed, 38 insertions(+), 74 deletions(-)

diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
index 4e1d3c9..fb5da6f 100644
--- a/src/main/resources/static/css/commons/r11form.css
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -172,6 +172,7 @@
     background: #00000070;
     color: white;
     filter: none;
+    pointer-events: none;
 }
 
 .tile .content {
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index 23edf81..732456a 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -131,18 +131,7 @@
                 </div>
                 <!-- tile list -->
                 <div id="listItems">
-                    <div class="tile active">
-                        <div class="content">
-                            <div class="display-space-between">
-                                <div class="centered-vertically">
-                                    <p>Id: 1</p>
-                                    <p>Status: 200</p>
-                                </div>
-                                <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="tile">
+                    <!-- <div class="tile">
                         <div class="content">
                             <div class="display-space-between">
                                 <div class="centered-vertically">
@@ -154,20 +143,7 @@
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="tile">
-                        <div class="content">
-                            <div class="display-space-between">
-                                <div class="centered-vertically">
-                                    <p>Id: 3</p>
-                                    <p>Status: 200</p>
-                                </div>
-                                <div>
-                                    <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/src/main/resources/static/js/datatransfer.js b/src/main/resources/static/js/datatransfer.js
index 573fbaa..59b0c9a 100644
--- a/src/main/resources/static/js/datatransfer.js
+++ b/src/main/resources/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">' +
diff --git a/target/classes/static/css/commons/r11form.css b/target/classes/static/css/commons/r11form.css
index 4e1d3c9..fb5da6f 100644
--- a/target/classes/static/css/commons/r11form.css
+++ b/target/classes/static/css/commons/r11form.css
@@ -172,6 +172,7 @@
     background: #00000070;
     color: white;
     filter: none;
+    pointer-events: none;
 }
 
 .tile .content {
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index 23edf81..732456a 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -131,18 +131,7 @@
                 </div>
                 <!-- tile list -->
                 <div id="listItems">
-                    <div class="tile active">
-                        <div class="content">
-                            <div class="display-space-between">
-                                <div class="centered-vertically">
-                                    <p>Id: 1</p>
-                                    <p>Status: 200</p>
-                                </div>
-                                <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="tile">
+                    <!-- <div class="tile">
                         <div class="content">
                             <div class="display-space-between">
                                 <div class="centered-vertically">
@@ -154,20 +143,7 @@
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="tile">
-                        <div class="content">
-                            <div class="display-space-between">
-                                <div class="centered-vertically">
-                                    <p>Id: 3</p>
-                                    <p>Status: 200</p>
-                                </div>
-                                <div>
-                                    <button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
         </div>
diff --git a/target/classes/static/js/datatransfer.js b/target/classes/static/js/datatransfer.js
index 573fbaa..59b0c9a 100644
--- a/target/classes/static/js/datatransfer.js
+++ b/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">' +