add connected list to gantt chart page

src/blenderbim/blenderbim/bim/data/webui/static/css/gantt.css

@@ -1,13 +1,17 @@
 :root {
     --font-family: Arial, sans-serif;
+    --base-font-size: 16px;
+    --margin-tiny: 0.125rem;
     --margin-small: 0.625rem;
     --margin-medium: 1.25rem;
     --margin-large: 2.5rem;
-    --padding-small: 0.125rem;
+    --padding-tiny: 0.125rem;
+    --padding-small: 0.625rem;
     --padding-medium: 1rem;
     --font-size-small: 1rem;
     --font-size-large: 1.2rem;
     --logo-height: 2.5rem;
+    --nav-height: 2.5rem;
     --folder-collapse-font-size: 0.75rem;
     --folder-collapse-font-family: Courier, "Courier New", monospace;
     --box-shadow: 0 0 0.7rem #5f5f5f66;
@@ -31,6 +35,7 @@
     --group-item-bg-color: #4b4b4b;
     --input-bg-color: #3b3b3b;
     --input-border-color: #000;
+    --details-border-color: #464444;
 }
 
 :root.light {
@@ -42,6 +47,7 @@
     --nav-link-color: #000000;
     --nav-link-hover-color: #38a63d;
     --warning-color: #FF4500;
+    --details-border-color: #222;
 }
 
 html {
@@ -107,7 +113,7 @@ nav ul li a.active {
 .warning {
     color: var(--warning-color);
     margin-bottom: var(--margin-small);
-    padding: var(--padding-small);
+    padding: var(--padding-tiny);
     display: none;
 }
 
@@ -141,6 +147,74 @@ nav ul li a.active {
     outline: none;
 }
 
+#client-list {
+    position: absolute;
+    top: calc(0 + var(--nav-height));
+    overflow-y: auto;
+    overflow: hidden;
+    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
+    border: 1px solid var(--table-border-color);
+    background-color: var(--nav-bg-color);
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    width: auto;
+}
+
+#client-list.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+#connected-list-div {
+    display: inline-block;
+}
+
+.client {
+    padding: var(--margin-small);
+    border-bottom: 1px solid var(--table-border-color);
+    cursor: pointer;
+}
+
+.client-details {
+    max-height: 0;
+    overflow: hidden;
+    padding-left: var(--padding-small);
+    transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
+    background-color: var(--nav-bg-color);
+    margin-top: var(--margin-tiny);
+    opacity: 0;
+}
+
+.client-details.show {
+    max-height: none;
+    padding: var(--padding-small);
+    opacity: 1;
+}
+
+.client-detail {
+    border-bottom: 1px solid var(--table-border-color);
+    padding: var(--padding-small);
+}
+
+#show-connected-button {
+    width: auto;
+    background-color: var(--bg-color);
+    border: none;
+    font-size: var(--base-font-size);
+}
+
+#show-connected-button:hover,
+.scroll-button:hover {
+    cursor: pointer;
+}
+
+.scroll-button {
+    font-size: var(--base-font-size);
+    margin-left: var(--margin-tiny);
+    margin-top: var(--margin-small);
+}
+
 .gantt-info {
     margin: 0.5rem;
     font-size: var(--font-size-small);

src/blenderbim/blenderbim/bim/data/webui/static/css/index.css

@@ -1,12 +1,13 @@
 :root {
     --font-family: Arial, sans-serif;
-    --margin-tiny: 0.125;
+    --base-font-size: 16px;
+    --margin-tiny: 0.125rem;
     --margin-small: 0.625rem;
     --margin-medium: 1.25rem;
     --margin-large: 2.5rem;
+    --padding-tiny: 0.125rem;
     --padding-small: 0.625rem;
     --padding-medium: 1rem;
-    --warning-padding: 0.125rem;
     --font-size-large: 1.2rem;
     --logo-height: 2.5rem;
     --nav-height: 2.5rem;
@@ -100,7 +101,7 @@ nav ul li a.active {
 .warning {
     color: var(--warning-color);
     margin-bottom: var(--margin-small);
-    padding: var(--warning-padding);
+    padding: var(--padding-tiny);
     display: none;
 }
 

src/blenderbim/blenderbim/bim/data/webui/static/js/gantt.js

@@ -60,6 +60,10 @@ function handleBlenderDisconnect(blenderId) {
     delete connectedClients[blenderId];
     removeGanttElement(blenderId);
   }
+
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) - 1;
+  });
 }
 
 // Function to handle 'gantt_data' event
@@ -77,6 +81,7 @@ function handleGanttData(data) {
     if (!connectedClients[blenderId].shown) {
       connectedClients[blenderId] = {
         shown: true,
+        ifc_file: filename,
         ganttTasks: ganttTasks,
         workSchedule: ganttWorkSched,
       };
@@ -89,6 +94,7 @@ function handleGanttData(data) {
   } else {
     connectedClients[blenderId] = {
       shown: true,
+      ifc_file: filename,
       ganttTasks: ganttTasks,
       workSchedule: ganttWorkSched,
     };
@@ -105,6 +111,10 @@ function handleDefaultData(data) {
 
 // Function to add a new gantt with data and filename
 function addGanttElement(blenderId, tasks, workSched, filename) {
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) + 1;
+  });
+
   const ganttContainer = $("<div></div>")
     .addClass("gantt-container")
     .attr("id", "container-" + blenderId);
@@ -382,3 +392,75 @@ function toggleTheme() {
     setTheme("dark");
   }
 }
+
+function toggleClientList() {
+  var clientList = $("#client-list");
+
+  if (clientList.hasClass("show")) {
+    clientList.removeClass("show");
+    return;
+  }
+
+  clientList.empty();
+
+  $.each(connectedClients, function (id, client) {
+    if (!client.shown) return;
+
+    const dropdownIcon = $("<i>")
+      .addClass("fas fa-chevron-down")
+      .css("margin-left", "0.5rem");
+
+    const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
+
+    clientDiv.append(dropdownIcon);
+
+    const clientDetailsDiv = $("<div>").addClass("client-details");
+
+    if (id) {
+      const clientId = $("<div>")
+        .addClass("client-detail")
+        .text(`Blender ID: ${id}`);
+      clientDetailsDiv.append(clientId);
+    }
+
+    if (client.workSchedule && client.gantt) {
+      const clientScheduleName = $("<div>")
+        .addClass("client-detail")
+        .text(`Schedule Name: ${client.workSchedule.Name}`);
+
+      const clientScheduleDate = $("<div>")
+        .addClass("client-detail")
+        .text(
+          `Schedule Date: ${new Date(
+            client.workSchedule.CreationDate
+          ).toLocaleDateString()}`
+        );
+
+      const scrollButton = $("<button>")
+        .addClass("scroll-button")
+        .text("Scroll to Gantt Chart")
+        .on("click", function () {
+          $("html, body").animate(
+            {
+              scrollTop: $("#gantt-" + id).offset().top,
+            },
+            600
+          );
+          clientList.removeClass("show");
+        });
+
+      clientDetailsDiv.append(clientScheduleName);
+      clientDetailsDiv.append(clientScheduleDate);
+      clientDetailsDiv.append(scrollButton);
+    }
+
+    clientDiv.append(clientDetailsDiv);
+
+    clientDiv.on("click", function () {
+      clientDetailsDiv.toggleClass("show");
+    });
+
+    clientList.append(clientDiv);
+  });
+  clientList.addClass("show");
+}

src/blenderbim/blenderbim/bim/data/webui/static/js/index.js

@@ -42,6 +42,10 @@ function handleBlenderDisconnect(blenderId) {
     delete connectedClients[blenderId];
     removeTableElement(blenderId);
   }
+
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) - 1;
+  });
 }
 
 // Function to handle 'csv_data' event
@@ -294,7 +298,7 @@ function toggleClientList() {
 
     const dropdownIcon = $("<i>")
       .addClass("fas fa-chevron-down")
-      .css("margin-left", "8px");
+      .css("margin-left", "0.5rem");
 
     const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
 

src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html

@@ -39,6 +39,14 @@
         <i class="fas fa-moon"></i>
       </button>
     </nav>
+    <div id="connected-list-div">
+      <button id="show-connected-button" onclick="toggleClientList()">
+        Connected Blenders:
+        <span id="blender-count">0</span>
+        <i class="fas fa-chevron-down"></i>
+      </button>
+      <div id="client-list"></div>
+    </div>
     <div id="container"></div>
   </body>
 </html>