From e7a44b77600569b707a39be3a03c784e6f157fd3 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 10 Sep 2021 11:29:54 +0200
Subject: [PATCH] Click event handled

---
 Desktop/UI/WebApp.js           | 53 +++++++++++++++++++++++++++++++---
 Desktop/WebServer/css/main.css | 20 ++++++++++++-
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/Desktop/UI/WebApp.js b/Desktop/UI/WebApp.js
index b92876eaf..8193036bc 100644
--- a/Desktop/UI/WebApp.js
+++ b/Desktop/UI/WebApp.js
@@ -17,6 +17,7 @@ function newWebApp() {
             setupRootObject(SA, 'SA')
             await UI.projects.socialTrading.modules.webSocketsClient.initialize()
             setupHomePage()
+            setupEventHandlers()
         } catch (err) {
             console.log('[ERROR] initialize -> err.stack = ' + err.stack)
         }
@@ -133,6 +134,39 @@ function newWebApp() {
         }
     }
 
+    function setupEventHandlers() {
+        /*
+        Add events to process button clicks.
+        */
+        document.addEventListener("click", function (e) {
+            userClicked(e)
+        })
+
+        function userClicked(event) {
+
+            if (event.target && event.target.nodeName === "BUTTON") {
+                switch (event.target.action) {
+                    case 'Follow Profile': {
+                        let span = document.getElementById('profile-to-follow-span-' + event.target.userProfileId)
+                        let button = document.getElementById('profile-to-follow-button-' + event.target.userProfileId)
+                        span.setAttribute("class", "profile-to-unfollow-span")
+                        button.setAttribute("class", "profile-to-unfollow-button")
+                        button.action = 'Unfollow Profile'
+                        break
+                    }
+                    case 'Unfollow Profile': {
+                        let span = document.getElementById('profile-to-follow-span-' + event.target.userProfileId)
+                        let button = document.getElementById('profile-to-follow-button-' + event.target.userProfileId)
+                        span.setAttribute("class", "profile-to-follow-span")
+                        button.setAttribute("class", "profile-to-follow-button")
+                        button.action = 'Follow Profile'
+                        break
+                    }
+                }
+            }
+        }
+    }
+
     function addWhoToFollowTable(profiles) {
 
         let contextCell = document.getElementById('who-to-follow-cell')
@@ -159,8 +193,6 @@ function newWebApp() {
         let table = document.createElement("table")
         let tblBody = document.createElement("tbody")
 
-
-
         let row = document.createElement("tr")
 
         {
@@ -177,8 +209,21 @@ function newWebApp() {
         }
         {
             let cell = document.createElement("td")
-            let cellText = document.createTextNode('Follow Button')
-            cell.appendChild(cellText)
+            let span = document.createElement("span")
+            let button = document.createElement("button")
+            let text = document.createTextNode('Follow')
+
+            span.setAttribute("id", "profile-to-follow-span-" + profile.userProfileId)
+            button.setAttribute("id", "profile-to-follow-button-" + profile.userProfileId)
+            button.action = 'Follow Profile'
+            button.userProfileId = profile.userProfileId
+
+            span.setAttribute("class", "profile-to-follow-span")
+            button.setAttribute("class", "profile-to-follow-button")
+
+            button.appendChild(text)
+            span.appendChild(button)
+            cell.appendChild(span)
             row.appendChild(cell)
         }
 
diff --git a/Desktop/WebServer/css/main.css b/Desktop/WebServer/css/main.css
index c162f99d6..189823dc1 100644
--- a/Desktop/WebServer/css/main.css
+++ b/Desktop/WebServer/css/main.css
@@ -60,7 +60,7 @@
   }
 
   .page-table {
-    pointer-events: none;
+    pointer-events: visible;
     position:fixed; 
     position: absolute; 
     top:0px; 
@@ -252,4 +252,22 @@
     color: #000;
     border-width: 0px;
     border-collapse: collapse;
+  }
+
+  .profile-to-follow-span {
+    float: right;
+  }
+
+  .profile-to-follow-button {
+    float: right;
+    background-color: green;
+  }
+
+  .profile-to-unfollow-span {
+    float: right;
+  }
+
+  .profile-to-unfollow-button {
+    float: right;
+    background-color: red;
   }
\ No newline at end of file