Added new functionality to the inspect button per agent, now it shows the...

Added new functionality to the inspect button per agent, now it shows the ranking list in the right bottom panel

resources/views/app/dashboard.blade.php

@@ -74,10 +74,12 @@
                             class="btn btn-primary btn-sm">
                                 {{ $name }}
                             </button>
-                            <a href="/app/ranking/{{ $name }}"
-                            class="btn btn-secondary btn-sm">
+<!--                            <a href="/app/ranking/{{ $name }}"
+                            class="btn btn-secondary btn-sm"> -->
+                            <button id="{{ $name }}_search" class="btn btn-secondary btn-sm">
                                 <i class="fas fa-search"></i>
-                            </a>
+                            </button>
+<!--                            </a> -->
                         </td>
                     </tr>
                     @endforeach
@@ -146,8 +148,18 @@
     json_elements.forEach(function (arrayItem){
         var name = arrayItem.name;
         var reload_countdown = 300;
+        //add the EventListener to the Agent search button to display the rank listing
+        var agent_search_name = name + "_search";
+        document.getElementById(agent_search_name).addEventListener("click", function () {
+            var ranking_url = "ranking/" + name;
+            //load the html of a page into the given container
+            load_ranking_html(container, ranking_url);
+        })
+        //add the EventListener to the Agent buttons for drawing the Bubble Graphs
         document.getElementById(name).addEventListener("click", function () {
+            //draw the Bubble graph for the given agent in the given container
             drawBubbleGraph(name, container);
+            //set the refresh interval
             setInterval(function() {
                 reload_countdown -= 1;
                 $('#reload-countdown').text(reload_countdown);
@@ -161,6 +173,35 @@
         });
     })
 
+    async function load_ranking_html(container, url) {
+        //d3.select(container).select("svg").remove();
+        clearContent(container.id);
+        var url_as_html = await fetchHtmlAsText(url);
+        const document = new DOMParser().parseFromString(url_as_html, 'text/html');
+        //remove the redundant bubble and radar buttons from the loaded document
+        var fs_bubble_button = document.getElementById("fullscreen_bubble_button");
+        fs_bubble_button.parentNode.removeChild(fs_bubble_button);
+        var fs_radar_button = document.getElementById("fullscreen_radar_button");
+        fs_radar_button.parentNode.removeChild(fs_radar_button);
+        //get the main part of the HTML and set it to the innerHTML of the container
+        const main = document.getElementsByTagName("main")[0];
+        console.log(main);
+        container.innerHTML = main.innerHTML;
+    }
+
+    async function fetchHtmlAsText(url) {
+        const response = await fetch(url);
+        return await response.text();
+    }
+
+    function clearContent(elementID) {
+        var div = document.getElementById(elementID);
+
+        while(div.firstChild) {
+            div.removeChild(div.lastChild);
+        }
+    }
+
     @include('scripts.bubble-script')
 </script>