split addGanttElement function into smaller functions

for code organization and readability

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

@@ -165,18 +165,8 @@ function handleDefaultData(data) {
 
 // Function to add a new gantt with data and filename
 function addGanttElement(blenderId, tasks, workSched, filename) {
-  const ganttContainer = $("<div></div>")
+  function createWorkSchedDiv(blenderId, workSched) {
-    .addClass("gantt-container")
-    .attr("id", "container-" + blenderId);
-
-  const ganttTitle = $("<h3></h3>")
-    .attr("id", "title-" + blenderId)
-    .text(filename)
-    .addClass("no-print")
-    .css("margin-bottom", "10px");
-
     const workSchedDiv = $("<div></div>").attr("id", "workSched" + blenderId);
-
     const scheduleTable = $("<table></table>")
       .addClass("no-print table-description")
       .attr("id", "workSchedTable-" + blenderId)
@@ -201,34 +191,34 @@ function addGanttElement(blenderId, tasks, workSched, filename) {
         toggleButton.text(buttonText);
       });
 
-  var ganttInfoDiv = $("<div></div>")
+    workSchedDiv.append(toggleButton);
+    workSchedDiv.append(scheduleTable);
+
+    return workSchedDiv;
+  }
+
+  function createGanttInfoDiv(blenderId, workSched) {
+    const ganttInfoDiv = $("<div></div>")
       .addClass("gantt-info")
       .attr("id", "gantt-info-" + blenderId);
 
     const scheduleName = $("<span></span>").text("Schedule: " + workSched.Name);
-
     const createdOn = $("<span></span>")
       .text("Created: " + new Date(workSched.CreationDate).toLocaleDateString())
       .css("float", "right");
 
+    ganttInfoDiv.append(scheduleName);
+    ganttInfoDiv.append(createdOn);
+
+    return ganttInfoDiv;
+  }
+
+  function createGantt(blenderId, tasks) {
     const ganttDiv = $("<div></div>")
       .addClass("gantt-chart")
       .attr("id", "gantt-" + blenderId);
 
-  ganttInfoDiv.append(scheduleName);
+    let g = new JSGantt.GanttChart(ganttDiv[0], "week");
-  ganttInfoDiv.append(createdOn);
-
-  workSchedDiv.append(toggleButton);
-  workSchedDiv.append(scheduleTable);
-
-  ganttContainer.append(ganttTitle);
-  ganttContainer.append(workSchedDiv);
-  ganttContainer.append(ganttInfoDiv);
-  ganttContainer.append(ganttDiv);
-
-  $("#container").append(ganttContainer);
-
-  let g = new JSGantt.GanttChart($("#gantt-" + blenderId)[0], "week");
     g.setOptions({
       vCaptionType: "Caption", // Set to Show Caption : None,Caption,Resource,Duration,Complete,
       vQuarterColWidth: 36,
@@ -264,19 +254,24 @@ function addGanttElement(blenderId, tasks, workSched, filename) {
         additional_category: editValue,
       },
     });
+
     JSGantt.addJSONTask(g, tasks);
     g.setEditable(true);
     g.Draw();
 
     connectedClients[blenderId]["gantt"] = g;
 
-  let printButton = $("<button>", {
+    return ganttDiv;
+  }
+
+  function createPrint(blenderId) {
+    const printButton = $("<button>", {
       id: "print-btn-" + blenderId,
       html: "Print",
       class: "btn no-print",
     });
 
-  let printOptions = $("<select>", {
+    const printOptions = $("<select>", {
       id: "print-options-" + blenderId,
       class: "no-print",
     });
@@ -291,7 +286,6 @@ function addGanttElement(blenderId, tasks, workSched, filename) {
     });
 
     printButton.on("click", function () {
-    // make it only the corresponding gantt chart is printed
       $(".gantt-chart").removeClass("no-print");
       $(".gantt-chart")
         .not("#gantt-" + blenderId)
@@ -301,39 +295,56 @@ function addGanttElement(blenderId, tasks, workSched, filename) {
         .not("#gantt-info-" + blenderId)
         .addClass("no-print");
 
-    var values = $("#print-options-" + blenderId)
+      const values = printOptions.val().split(",");
-      .val()
-      .split(",");
 
+      const g = connectedClients[blenderId]["gantt"];
       g.setEditable(false);
       g.setTotalHeight("");
       g.Draw();
 
-    addEventListener("afterprint", (event) => {
+      addEventListener("afterprint", () => g.setEditable(true));
-      g.setEditable(true);
+
-    });
+      let css = `@media print {
+            @page {
+                size: ${values[0]}mm ${values[1]}mm;
+            }
+            body, p, span, h1, h2, h3, h4, h5, h6, div, a, li, td, th, * {
+                color: black !important;
+            }
+        }`;
 
-    let css =
-      "@media print {\n" +
-      "    @page {\n" +
-      "        size: " +
-      values[0] +
-      "mm " +
-      values[1] +
-      "mm;\n" +
-      "    }\n" +
-      "    /* Make all text black */\n" +
-      "    body, p, span, h1, h2, h3, h4, h5, h6, div, a, li, td, th, * {\n" +
-      "        color: black !important;\n" +
-      "    }\n" +
-      "}";
       g.printChart(values[0], values[1], css);
       g.setTotalHeight(900);
       g.Draw();
     });
 
+    return { printButton, printOptions };
+  }
+
+  const ganttContainer = $("<div></div>")
+    .addClass("gantt-container")
+    .attr("id", "container-" + blenderId);
+
+  const ganttTitle = $("<h3></h3>")
+    .attr("id", "title-" + blenderId)
+    .text(filename)
+    .addClass("no-print")
+    .css("margin-bottom", "0.875rem");
+
+  const workSchedDiv = createWorkSchedDiv(blenderId, workSched);
+  const ganttInfoDiv = createGanttInfoDiv(blenderId, workSched);
+  const ganttDiv = createGantt(blenderId, tasks);
+  const { printButton, printOptions } = createPrint(blenderId);
+
+  ganttContainer.append(ganttTitle);
+  ganttContainer.append(workSchedDiv);
+  ganttContainer.append(ganttInfoDiv);
+  ganttContainer.append(ganttDiv);
+
   ganttContainer.append(printOptions);
   ganttContainer.append(printButton);
+
+  $("#container").append(ganttContainer);
 }
 
 // Function to update gantt and filename
@@ -357,7 +368,6 @@ function updateGanttElement(blenderId, tasks, workSched, filename) {
   g.Draw();
 
   $("#title-" + blenderId).text(filename);
-  $("#warning-" + blenderId).css("display", "none");
 }
 
 // Function to remove gantt element