connected clients list now works correctly with all pages

src/blenderbim/blenderbim/bim/data/webui/sioserver.py

@@ -44,6 +44,7 @@ class WebNamespace(socketio.AsyncNamespace):
     async def on_connect(self, sid, environ):
         print(f"Web client connected: {sid}")
         if blender_messages:
+            await sio.emit("connected_clients", list(blender_messages.keys()), namespace="/web", room=sid)
             await self.send_cached_messages(sid)
 
     async def on_disconnect(self, sid):
@@ -108,7 +109,7 @@ class BlenderNamespace(socketio.AsyncNamespace):
         await sio.emit("gantt_data", {"blenderId": sid, "data": data}, namespace="/web")
 
     async def on_drawings_data(self, sid, data):
-        print(f"Drawings directory from Blender client {sid}")
+        print(f"Drawings data from Blender client {sid}")
         print(data)
         blender_messages[sid]["drwings_data"] = data
         await sio.emit("drawings_data", {"blenderId": sid, "data": data}, namespace="/web")

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

@@ -127,7 +127,7 @@ nav ul li a.active {
     overflow-y: auto;
     overflow: hidden;
     transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
-    border: 1px solid var(--table-border-color);
+    border: 1px solid var(--border-color);
     background-color: var(--nav-bg-color);
     z-index: 1;
     opacity: 0;
@@ -146,7 +146,7 @@ nav ul li a.active {
 
 .client {
     padding: var(--margin-small);
-    border-bottom: 1px solid var(--table-border-color);
+    border-bottom: 1px solid var(--border-color);
     cursor: pointer;
 }
 
@@ -166,7 +166,7 @@ nav ul li a.active {
 }
 
 .client-detail {
-    border-bottom: 1px solid var(--table-border-color);
+    border-bottom: 1px solid var(--border-color);
     padding: var(--padding-small);
 }
 

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

@@ -157,7 +157,7 @@ nav ul li a.active {
     overflow-y: auto;
     overflow: hidden;
     transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
-    border: 1px solid var(--table-border-color);
+    border: 1px solid var(--details-border-color);
     background-color: var(--nav-bg-color);
     z-index: 1;
     opacity: 0;
@@ -176,7 +176,7 @@ nav ul li a.active {
 
 .client {
     padding: var(--margin-small);
-    border-bottom: 1px solid var(--table-border-color);
+    border-bottom: 1px solid var(--details-border-color);
     cursor: pointer;
 }
 
@@ -196,7 +196,7 @@ nav ul li a.active {
 }
 
 .client-detail {
-    border-bottom: 1px solid var(--table-border-color);
+    border-bottom: 1px solid var(--details-border-color);
     padding: var(--padding-small);
 }
 

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

@@ -30,9 +30,9 @@ function connectSocket() {
   socket.on("blender_connect", handleBlenderConnect);
   socket.on("blender_disconnect", handleBlenderDisconnect);
   socket.on("connect", handleWebConnect);
+  socket.on("connected_clients", handleConnectedClients);
   socket.on("drawings_data", handleDrawingsData);
   socket.on("svg_data", handleSvgData);
-  //   socket.on("default_data", handleDefaultData);
 }
 
 // function used to get drawings data from blenderbim
@@ -53,8 +53,22 @@ function handleBlenderConnect(blenderId) {
     connectedClients[blenderId] = {
       shown: false,
       ifc_file: "",
+      has_drawings: false,
     };
   }
+
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) + 1;
+  });
+
+  const msg = {
+    blenderId: blenderId,
+    sourcePage: "drawings",
+    operator: {
+      type: "getDrawings",
+    },
+  };
+  socket.emit("web_operator", msg);
 }
 
 // Function to handle 'blender_disconnect' event
@@ -70,6 +84,18 @@ function handleBlenderDisconnect(blenderId) {
   });
 }
 
+function handleConnectedClients(data) {
+  $("#blender-count").text(data.length);
+  console.log(data);
+  data.forEach(function (id) {
+    connectedClients[id] = {
+      shown: false,
+      ifc_file: "",
+      has_drawings: false,
+    };
+  });
+}
+
 function handleDrawingsData(data) {
   const blenderId = data["blenderId"];
 
@@ -81,6 +107,8 @@ function handleDrawingsData(data) {
 
   allDrawings[filename] = { drawings: drawings, sheets: sheets };
 
+  const hasDrawings = drawings.length > 0 || sheets.length > 0;
+
   console.log(connectedClients);
 
   if (connectedClients.hasOwnProperty(blenderId)) {
@@ -88,6 +116,7 @@ function handleDrawingsData(data) {
       connectedClients[blenderId] = {
         shown: true,
         ifc_file: filename,
+        has_drawings: hasDrawings,
       };
       addSelectOption(blenderId, filename);
     } else {
@@ -97,6 +126,7 @@ function handleDrawingsData(data) {
     connectedClients[blenderId] = {
       shown: true,
       ifc_file: filename,
+      has_drawings: hasDrawings,
     };
     addSelectOption(blenderId, filename);
   }
@@ -208,15 +238,18 @@ function toggleClientList() {
   }
 
   clientList.empty();
+  var counter = 0;
 
   $.each(connectedClients, function (id, client) {
-    if (!client.shown) return;
+    counter++;
 
     const dropdownIcon = $("<i>")
       .addClass("fas fa-chevron-down")
       .css("margin-left", "0.5rem");
 
-    const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
+    const clientDiv = $("<div>")
+      .addClass("client")
+      .text(client.ifc_file || "Blender " + counter);
 
     clientDiv.append(dropdownIcon);
 
@@ -229,26 +262,19 @@ function toggleClientList() {
       clientDetailsDiv.append(clientId);
     }
 
-    if (client.headers && client.headers.length) {
+    if (!client.has_drawings) {
-      const clientHeaders = $("<div>")
+      const clientShown = $("<div>")
         .addClass("client-detail")
-        .text(`Table Headers: ${client.headers.join(", ")}`);
+        .text("No drawings exist for this IFC File yet");
-
+      clientDetailsDiv.append(clientShown);
-      const scrollButton = $("<button>")
+    } else {
-        .addClass("scroll-button")
+      const clientNumbers = $("<div>")
-        .text("Scroll to Table")
+        .addClass("client-detail")
-        .on("click", function () {
+        .text(
-          $("html, body").animate(
+          `${allDrawings[client.ifc_file].drawings.length} Drawing(s), 
-            {
+          ${allDrawings[client.ifc_file].sheets.length} Sheet(s)`
-              scrollTop: $("#table-" + id).offset().top,
+        );
-            },
+      clientDetailsDiv.append(clientNumbers);
-            600
-          );
-          clientList.removeClass("show");
-        });
-
-      clientDetailsDiv.append(clientHeaders);
-      clientDetailsDiv.append(scrollButton);
     }
 
     clientDiv.append(clientDetailsDiv);

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

@@ -37,6 +37,7 @@ function connectSocket() {
   // Register socket event handlers
   socket.on("blender_connect", handleBlenderConnect);
   socket.on("blender_disconnect", handleBlenderDisconnect);
+  socket.on("connected_clients", handleConnectedClients);
   socket.on("gantt_data", handleGanttData);
   socket.on("default_data", handleDefaultData);
 }
@@ -51,6 +52,10 @@ function handleBlenderConnect(blenderId) {
       ganttTasks: {},
     };
   }
+
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) + 1;
+  });
 }
 
 // Function to handle 'blender_disconnect' event
@@ -66,6 +71,18 @@ function handleBlenderDisconnect(blenderId) {
   });
 }
 
+function handleConnectedClients(data) {
+  $("#blender-count").text(data.length);
+  console.log(data);
+  data.forEach(function (id) {
+    connectedClients[id] = {
+      shown: false,
+      workSchedule: {},
+      ganttTasks: {},
+    };
+  });
+}
+
 // Function to handle 'gantt_data' event
 function handleGanttData(data) {
   const blenderId = data["blenderId"];
@@ -75,7 +92,6 @@ function handleGanttData(data) {
   const filename = data["data"]["ifc_file"];
   const ganttTasks = data["data"]["gantt_data"]["tasks"];
   const ganttWorkSched = data["data"]["gantt_data"]["work_schedule"];
-  // const ganttWorkSched = {};
 
   if (connectedClients.hasOwnProperty(blenderId)) {
     if (!connectedClients[blenderId].shown) {
@@ -111,10 +127,6 @@ 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);
@@ -402,15 +414,17 @@ function toggleClientList() {
   }
 
   clientList.empty();
+  var counter = 0;
 
   $.each(connectedClients, function (id, client) {
-    if (!client.shown) return;
+    counter++;
-
     const dropdownIcon = $("<i>")
       .addClass("fas fa-chevron-down")
       .css("margin-left", "0.5rem");
 
-    const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
+    const clientDiv = $("<div>")
+      .addClass("client")
+      .text(client.ifc_file || "Blender " + counter);
 
     clientDiv.append(dropdownIcon);
 
@@ -423,6 +437,13 @@ function toggleClientList() {
       clientDetailsDiv.append(clientId);
     }
 
+    if (!client.shown) {
+      const clientShown = $("<div>")
+        .addClass("client-detail")
+        .text("No work schedule exported for this Blender yet");
+      clientDetailsDiv.append(clientShown);
+    }
+
     if (client.workSchedule && client.gantt) {
       const clientScheduleName = $("<div>")
         .addClass("client-detail")
@@ -441,9 +462,7 @@ function toggleClientList() {
         .text("Scroll to Gantt Chart")
         .on("click", function () {
           $("html, body").animate(
-            {
+            { scrollTop: $("#gantt-" + id).offset().top },
-              scrollTop: $("#gantt-" + id).offset().top,
-            },
             600
           );
           clientList.removeClass("show");

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

@@ -23,6 +23,7 @@ function connectSocket() {
   // Register socket event handlers
   socket.on("blender_connect", handleBlenderConnect);
   socket.on("blender_disconnect", handleBlenderDisconnect);
+  socket.on("connected_clients", handleConnectedClients);
   socket.on("csv_data", handleCsvData);
   socket.on("default_data", handleDefaultData);
 }
@@ -33,6 +34,9 @@ function handleBlenderConnect(blenderId) {
   if (!connectedClients.hasOwnProperty(blenderId)) {
     connectedClients[blenderId] = { shown: false, ifc_file: "" };
   }
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) + 1;
+  });
 }
 
 // Function to handle 'blender_disconnect' event
@@ -48,6 +52,14 @@ function handleBlenderDisconnect(blenderId) {
   });
 }
 
+function handleConnectedClients(data) {
+  $("#blender-count").text(data.length);
+  console.log(data);
+  data.forEach(function (id) {
+    connectedClients[id] = { shown: false, ifc_file: "" };
+  });
+}
+
 // Function to handle 'csv_data' event
 function handleCsvData(data) {
   const blenderId = data["blenderId"];
@@ -85,10 +97,6 @@ function handleDefaultData(data) {
 
 // Function to add a new table with data and filename
 function addTableElement(blenderId, csvData, filename) {
-  $("#blender-count").text(function (i, text) {
-    return parseInt(text, 10) + 1;
-  });
-
   // store headers of the csv data
   const firstLine = csvData.indexOf("\n");
   const csvHeaders = csvData.substring(0, firstLine).split(",");
@@ -292,15 +300,18 @@ function toggleClientList() {
   }
 
   clientList.empty();
+  var counter = 0;
 
   $.each(connectedClients, function (id, client) {
-    if (!client.shown) return;
+    counter++;
 
     const dropdownIcon = $("<i>")
       .addClass("fas fa-chevron-down")
       .css("margin-left", "0.5rem");
 
-    const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
+    const clientDiv = $("<div>")
+      .addClass("client")
+      .text(client.ifc_file || "Blender " + counter);
 
     clientDiv.append(dropdownIcon);
 
@@ -313,6 +324,13 @@ function toggleClientList() {
       clientDetailsDiv.append(clientId);
     }
 
+    if (!client.shown) {
+      const clientShown = $("<div>")
+        .addClass("client-detail")
+        .text("No CSV exported for this Blender yet");
+      clientDetailsDiv.append(clientShown);
+    }
+
     if (client.headers && client.headers.length) {
       const clientHeaders = $("<div>")
         .addClass("client-detail")
@@ -323,9 +341,7 @@ function toggleClientList() {
         .text("Scroll to Table")
         .on("click", function () {
           $("html, body").animate(
-            {
+            { scrollTop: $("#table-" + id).offset().top },
-              scrollTop: $("#table-" + id).offset().top,
-            },
             600
           );
           clientList.removeClass("show");