now shows ifc file name before table

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

@@ -38,7 +38,7 @@ class WebNamespace(socketio.AsyncNamespace):
     async def on_operator(self, sid, data):
         print(f"Web client {sid} operator: {data}")
         json_data = json.loads(data)
-        # need to add event listeners in blenderbim side for event web_operator
+        # TODO: need to add event listeners in blenderbim side for event web_operator
         # await sio.emit("web_operator", json_data, namespace="/blender", room=json_data["blenderId"])
 
 
@@ -68,10 +68,10 @@ class BlenderNamespace(socketio.AsyncNamespace):
     async def on_default_data(self, sid, data):
         print(f"Default data from Blender client {sid}: {data}")
         # blender_messages[sid] = data
-        await sio.emit("default_data", {"blenderId": sid, "data": data}, namespace="/web")
+        # await sio.emit("default_data", {"blenderId": sid, "data": data}, namespace="/web")
 
     async def on_csv_data(self, sid, data):
-        print(f"CSV data from Blender client {sid}: {data}")
+        print(f"CSV data from Blender client {sid}:")
         # Store the message and forward it to the web client
         blender_messages[sid] = data
         await sio.emit("csv_data", {"blenderId": sid, "data": data}, namespace="/web")

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

@@ -6,18 +6,20 @@ body {
     font-family: Arial, sans-serif;
 }
 
-#messages {
-    margin: 20px;
+#container {
+    margin-top: 20px;
+    margin-bottom: 20px
 }
 
-.message {
-    background-color: #3c3c3c;
-    padding: 10px;
-    margin-bottom: 10px;
-    border-radius: 5px;
-    color: #ffffff;
+.table-container {
+    margin-bottom: 40px;
+    /* Space between tables */
 }
 
 .csv-table {
-    margin-top: 20px;
+    margin-top: 10px;
+}
+
+h3 {
+    margin-top: 0;
 }

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

@@ -4,29 +4,41 @@ $(document).ready(function () {
   const socket = io(url);
   console.log("socket: ", socket);
 
-  connectedClients = [];
+  const connectedClients = {};
+
+  function addTableElement(blenderId, csvData, filename) {
+    const tableContainer = $("<div></div>")
+      .addClass("table-container")
+      .attr("id", "container-" + blenderId);
+
+    const tableTitle = $("<h3></h3>")
+      .attr("id", "title-" + blenderId)
+      .text(filename)
+      .css("margin-bottom", "10px");
 
-  function addTableElement(blenderId, csvData) {
     const tableDiv = $("<div></div>")
       .addClass("csv-table")
       .attr("id", "table-" + blenderId);
-    $("#container").append(tableDiv);
+
+    tableContainer.append(tableTitle);
+    tableContainer.append(tableDiv);
+    $("#container").append(tableContainer);
 
     var table = new Tabulator("#table-" + blenderId, {
+      height: "400px",
       index: "GlobalId",
       data: csvData,
       importFormat: "csv",
       autoColumns: true,
       selectableRows: 1,
       layout: "fitColumns",
-      // selectableRowsRangeMode: "click",
     });
 
     table.on("rowSelected", function (row) {
       var index = row.getIndex(); // the guid of the object
       var tableId = row.getTable().element.id.substr(6);
 
-      msg = JSON.stringify({
+      const msg = JSON.stringify({
         operator_type: "selection",
         blenderId: tableId,
         guid: index,
@@ -35,21 +47,22 @@ $(document).ready(function () {
     });
   }
 
-  function updateTableElement(blenderId, csvData) {
+  function updateTableElement(blenderId, csvData, filename) {
     const table = Tabulator.findTable("#table-" + blenderId)[0];
     if (table) {
       table.replaceData(csvData, { importFormat: "csv" });
+      $("#title-" + blenderId).text(filename); // Update the title
     }
   }
 
   function removeTableElement(blenderId) {
-    $("#table-" + blenderId).remove();
+    $("#container-" + blenderId).remove();
   }
 
   socket.on("blender_connect", (blenderId) => {
     console.log("blender_connect: ", blenderId);
     if (!connectedClients.hasOwnProperty(blenderId)) {
-      connectedClients[blenderId] = false; // No data shown yet
+      connectedClients[blenderId] = { shown: false, ifc_file: "" };
     }
   });
 
@@ -63,19 +76,20 @@ $(document).ready(function () {
 
   socket.on("csv_data", (data) => {
     const blenderId = data["blenderId"];
-    const csvData = data["data"];
+    const csvData = data["data"]["data"];
+    const filename = data["data"]["IFC_File"];
     console.log(data);
 
     if (connectedClients.hasOwnProperty(blenderId)) {
-      if (!connectedClients[blenderId]) {
-        addTableElement(blenderId, csvData);
-        connectedClients[blenderId] = true; // Data has been shown
+      if (!connectedClients[blenderId].shown) {
+        addTableElement(blenderId, csvData, filename);
+        connectedClients[blenderId] = { shown: true, ifc_file: filename };
       } else {
-        updateTableElement(blenderId, csvData);
+        updateTableElement(blenderId, csvData, filename);
       }
     } else {
-      connectedClients[blenderId] = true;
-      addTableElement(blenderId, csvData);
+      connectedClients[blenderId] = { shown: true, ifc_file: filename };
+      addTableElement(blenderId, csvData, filename);
     }
   });
 });

src/blenderbim/blenderbim/tool/web.py

@@ -122,6 +122,11 @@ class Web(blenderbim.core.tool.Web):
     @classmethod
     def send_webui_data(cls, data, event="data", namespace="/blender"):
         global ws_thread
+        # TODO: find a better way to include ifc_filename with the csv data
+        data = {
+            "IFC_File": bpy.context.scene.BIMProperties.ifc_file,
+            "data": data,
+        }
         if ws_thread is not None and bpy.context.scene.WebProperties.is_connected:
             ws_thread.run_coro(cls.sio_send(data, event, namespace))