edit drawings html/css/js

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

@@ -199,7 +199,7 @@ nav ul li a.active {
 
 .right {
     background-color: var(--bg-color);
-    /* Light gray background for the right part */
+    border: 1px solid var(--border-color);
 }
 
 .panel {
@@ -207,15 +207,20 @@ nav ul li a.active {
     border: 1px solid var(--border-color);
     padding: 10px;
     flex-grow: 1;
-    /* Take the remaining space */
     display: flex;
     flex-direction: column;
 }
 
 .card-header,
-.card {
+.card-body {
     background-color: var(--bg-color);
     border: 1px solid var(--border-color);
+    overflow: auto;
+}
+
+.card {
+    background-color: var(--nav-bg-color);
+    overflow: auto;
 }
 
 #dropdown-menu:focus {
@@ -231,5 +236,5 @@ nav ul li a.active {
 
 .btn,
 .btn:hover {
-    color: var(--text-color);
+    color: var(--nav-link-hover-color);
 }

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

@@ -1,5 +1,4 @@
-// keeps track of blenders connected in form of
-// {shown:bool, filename:string, headers:array}
+// keeps track of blenders connected
 const connectedClients = {};
 let socket;
 
@@ -21,12 +20,36 @@ function connectSocket() {
   console.log("socket: ", socket);
 
   // Register socket event handlers
-  //   socket.on("blender_connect", handleBlenderConnect);
-  //   socket.on("blender_disconnect", handleBlenderDisconnect);
+  socket.on("blender_connect", handleBlenderConnect);
+  socket.on("blender_disconnect", handleBlenderDisconnect);
   //   socket.on("csv_data", handleCsvData);
   //   socket.on("default_data", handleDefaultData);
 }
 
+// Function to handle 'blender_connect' event
+function handleBlenderConnect(blenderId) {
+  console.log("blender_connect: ", blenderId);
+  if (!connectedClients.hasOwnProperty(blenderId)) {
+    connectedClients[blenderId] = {
+      shown: false,
+      filename: "",
+    };
+  }
+}
+
+// Function to handle 'blender_disconnect' event
+function handleBlenderDisconnect(blenderId) {
+  console.log("blender_disconnect: ", blenderId);
+  if (connectedClients.hasOwnProperty(blenderId)) {
+    delete connectedClients[blenderId];
+    removeGanttElement(blenderId);
+  }
+
+  $("#blender-count").text(function (i, text) {
+    return parseInt(text, 10) - 1;
+  });
+}
+
 function setTheme(theme) {
   var stylesheet = $("#tabulator-stylesheet");
   if (theme === "light") {

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

@@ -61,18 +61,18 @@
         <!-- Panel with sub-panels -->
         <div class="panel">
           <div id="accordion">
-            <div class="card">
+            <div class="card pb-2">
               <div class="card-header" id="headingOne">
                 <button
                   class="btn p-0"
                   data-toggle="collapse"
                   data-target="#collapseOne"
                 >
-                  Sub-panel 1
+                  Drawings
                 </button>
               </div>
 
-              <div id="collapseOne" class="collapse">
+              <div id="collapseOne" class="collapse show">
                 <div class="card-body">
                   <ul class="sub-panel" id="sub-panel-1"></ul>
                 </div>
@@ -85,10 +85,10 @@
                   data-toggle="collapse"
                   data-target="#collapseTwo"
                 >
-                  Sub-panel 2
+                  Sheets
                 </button>
               </div>
-              <div id="collapseTwo" class="collapse">
+              <div id="collapseTwo" class="collapse show">
                 <div class="card-body">
                   <ul class="sub-panel" id="sub-panel-2"></ul>
                 </div>
@@ -98,9 +98,7 @@
         </div>
       </div>
       <div class="col-10 right p-3">
-        <!-- Elements for the right part go here -->
-        <h1>Right Part</h1>
-        <p>This is the right part of the container.</p>
+        <div id="svg-container"></div>
       </div>
     </div>
   </body>