From ec3dc71c0ea45598604bcea2b89f6f4425bfa8ae Mon Sep 17 00:00:00 2001
From: Ziad-I <68874104+Ziad-I@users.noreply.github.com>
Date: Sun, 28 Jul 2024 21:04:16 +0300
Subject: [PATCH] add showing of drawings' and sheets' names

---
 .../bim/data/webui/static/js/drawings.js      | 42 ++++++++++++++++++-
 .../bim/data/webui/templates/drawings.html    | 13 +++---
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
index 39c5f30b49..51f8fe3137 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js
@@ -11,6 +11,7 @@ $(document).ready(function () {
   var theme = localStorage.getItem("theme") || systemTheme;
   setTheme(theme);
 
+  $("#dropdown-menu").change(displayDrawingsNames);
   connectSocket();
 });
 
@@ -74,13 +75,15 @@ function handleDrawingsData(data) {
 
   allDrawings[filename] = { drawings: drawings, sheets: sheets };
 
+  console.log(connectedClients);
+
   if (connectedClients.hasOwnProperty(blenderId)) {
     if (!connectedClients[blenderId].shown) {
       connectedClients[blenderId] = {
         shown: true,
         ifc_file: filename,
       };
-      // add(blenderId, data, filename);
+      addSelectOption(blenderId, filename);
     } else {
       // update(blenderId, data, filename);
     }
@@ -89,10 +92,45 @@ function handleDrawingsData(data) {
       shown: true,
       ifc_file: filename,
     };
-    // add(blenderId, data, filename);
+    addSelectOption(blenderId, filename);
   }
 }
 
+function addSelectOption(blenderId, filename) {
+  const filenameOption = $("<option></option>")
+    .attr("id", "blender" + blenderId)
+    .val(filename)
+    .text(filename);
+  $("#dropdown-menu").append(filenameOption);
+}
+
+function displayDrawingsNames() {
+  ifcFile = $("#dropdown-menu").val();
+
+  drawings = allDrawings[ifcFile].drawings;
+  sheets = allDrawings[ifcFile].sheets;
+
+  function createLabel(text, index, type) {
+    var label = $("<li></lio>")
+      .text(text)
+      .attr("id", index)
+      .click(function () {
+        console.log("ID:", $(this).attr("id"), "Name:", text);
+      });
+
+    if (type === "drawing") $("#drawings-sub-panel").append(label);
+    else if (type === "sheet") $("#sheets-sub-panel").append(label);
+  }
+
+  drawings.forEach(function (drawing, index) {
+    createLabel(drawing.name, index, "drawing");
+  });
+
+  sheets.forEach(function (sheet, index) {
+    createLabel(sheet.name, index, "sheet");
+  });
+}
+
 function setTheme(theme) {
   if (theme === "light") {
     $("html").removeClass("dark").addClass("light");
diff --git a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
index ff190fbaaa..d02612709b 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
+++ b/src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html
@@ -55,10 +55,10 @@
       <div class="col-2 left">
         <!-- Dropdown menu -->
         <div class="dropdown mb-3">
-          <label for="dropdown-menu">IFC File</label>
+          <label for="dropdown-menu">IFC File:</label>
           <select class="p-0 pl-2" id="dropdown-menu">
             <!-- IFC files will be dynamically populated here -->
-            <option value="" selected disabled hidden>Select IFC File</option>
+            <option value="" selected disabled hidden>IFC File</option>
           </select>
         </div>
         <!-- Panel with sub-panels -->
@@ -77,16 +77,13 @@
 
               <div id="collapseOne" class="collapse show">
                 <div class="card-body">
-                  <div class="sub-panel" id="sub-panel-1">
-                    <label>Item 1</label>
-                    <label>Item 2</label>
-                    <label>Item 3</label>
+                  <div class="sub-panel pl-2" id="drawings-sub-panel">
                     <!-- Drawings will be dynamically populated here -->
                   </div>
                 </div>
               </div>
             </div>
-            <div class="card">
+            <div class="card pb-2">
               <div class="card-header overflow-hidden" id="headingTwo">
                 <button
                   class="btn p-0 w-100 text-left"
@@ -98,7 +95,7 @@
               </div>
               <div id="collapseTwo" class="collapse show">
                 <div class="card-body">
-                  <ul class="sub-panel" id="sub-panel-2">
+                  <ul class="sub-panel pl-2" id="sheets-sub-panel">
                     <!-- Sheets will be dynamically populated here -->
                   </ul>
                 </div>