BBIM 4D Gantt: Support multiple languages, human readable durations, add convenient Print Function with different Sheet Formats,

start improving overall page style; refactor code to split js and css code away from mustache file

src/blenderbim/blenderbim/bim/data/gantt/index.mustache

@@ -1,67 +1,53 @@
 <link href="jsgantt.css" rel="stylesheet" type="text/css"/>
+<link href="../../module/sequence/gantt/main.css" rel="stylesheet" type="text/css"/>
 <script src="jsgantt.js" type="text/javascript"></script>
-<style>
+<script type="text/javascript" src="../../module/sequence/gantt/index.js"></script>
-.gtaskcellwkend,
+<script>
-.gtaskcellcurrent,
+var json_data = `{{{json_data}}}`;
-.gminorheadingwkend {
-  background-color: #e1e1e1;
-}
-
-.gitemhighlight td {
-  background-color: #ffdaaa;
-}
-
-.gtaskblue {
-  background: #4281A4;
-}
-
-.gtaskred {
-  background: #C1666B;
-}
-
-.gtaskgreen {
-  background: #48A9A6;
-}
-
-.gtaskyellow {
-  background: #D4B483;
-}
-
-.gmainleft {
-  overflow: visible;
-  flex: 0 1 auto;
-}
-
-</style>
-<a href="#print" id="print">Print Mode</a>
-<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
-<script type="text/javascript">
-var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');
-g.setOptions({
-    vCaptionType: 'Caption',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,
-    vQuarterColWidth: 36,
-    vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tool tip box
-    vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',// Set format to dates in the "Major" header of the "Day" view
-    vWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" view
-    vLang: 'en',
-    vShowTaskInfoLink: 1, // Show link in tool tip (0/1)
-    vShowEndWeekDate: 0,  // Show/Hide the date for the last day of the week in header for daily
-    vUseSingleCell: 10000, // Set the threshold cell per table row (Helps performance for large data.
-    vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers,
-    vShowRes: false, // Disable the resource column.
-    vShowComp: false, // Disable the completion column.
-    vShowDur: false, // Disable the duration column, because jsgantt doesn't calculate durations the way we want.
-    vAdditionalHeaders: {ifcduration: {title: 'Duration'}},
-    vUseToolTip: false, // Disable tooltips.
-    vTotalHeight: 900,
-});
-document.getElementById('print').addEventListener('click', function() {
-    g.setTotalHeight("");
-    g.Draw();
-});
-var json_data = `
-{{{json_data}}}
-`;
-JSGantt.parseJSONString(json_data, g);
-g.Draw();
 </script>
+
+<div class="no-print">
+  <h4>Choose a language:
+  <select id="lang" class="sweet_button" onchange="set_language(event)">
+    <option value='cn'>Chinese (cn)</option>
+    <option value='cs'>Czech (cs)</option>
+    <option value='nl'>Dutch (Standard)</option>
+    <option value='en' selected>English (en)</option>
+    <option value='fr'>French (fr)</option>
+    <option value='de'>German (de)</option>
+    <option value='hu'>Hungarian (hu)</option>
+    <option value='id'>Indonesian (id)</option>
+    <option value='it'>Italian (it)</option>
+    <option value='ja'>Japanese (ja)</option>
+    <option value='pt'>Portuguese (pt)</option>
+    <option value='ru'>Russian (ru)</option>
+    <option value='es'>Spanish (es)</option>
+    <option value='sv'>Swedish (sv)</option>
+    <option value='tr'>Turkish (tr)</option>
+  </select>
+  <h4>
+  <div id="print_options">
+    <select class="sweet_button" id="print_page_size">
+      <option value="210,297">A4 Portrait</option>
+      <option value="297,210">A4 Landscape</option>
+      <option value="297,420">A3 Portrait</option>
+      <option value="420,297">A3 Landscape</option>
+      <option value="420,594">A2 Portrait</option>
+      <option value="594,420">A2 Landscape</option>
+      <option value="594,841">A1 Portrait</option>
+      <option value="841,594">A1 Landscape</option>
+      <option value="841,1189">A0 Portrait</option>
+      <option value="1189,841">A0 Landscape</option>
+    </select>
+  </div>
+  <br>
+</div>
+
+<div id="schedule-data"></div>
+<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
+
+<script>
+var name = `{{{name}}}`;
+setupPage(name);
+create_gantt_chart(json_data)
+</script>

src/blenderbim/blenderbim/bim/module/sequence/gantt/index.js

@@ -0,0 +1,57 @@
+let g;
+
+function create_gantt_chart(json_data) {
+    g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'week');
+    g.setOptions({
+        vCaptionType: 'Caption',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,
+        vQuarterColWidth: 36,
+        vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tool tip box
+        vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',// Set format to dates in the "Major" header of the "Day" view
+        vWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" view
+        vLang: "en",
+        vShowTaskInfoLink: 1, // Show link in tool tip (0/1)
+        vShowEndWeekDate: 0,  // Show/Hide the date for the last day of the week in header for daily
+        vUseSingleCell: 10000, // Set the threshold cell per table row (Helps performance for large data.
+        vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers,
+        vShowRes: false, // Disable the resource column.
+        vShowComp: false, // Disable the completion column.
+        vShowDur: false, // Disable the duration column, because jsgantt doesn't calculate durations the way we want.
+        vAdditionalHeaders: {ifcduration: {title: 'Duration'}},
+        vUseToolTip: false, // Disable tooltips.
+        vTotalHeight: 900,
+    });
+    JSGantt.parseJSONString(json_data, g);
+    g.Draw();
+}
+function set_language(e){
+    lang = e && e.target ? e.target.value : "en";
+    g.setOptions({
+        vLang: lang,
+    });
+    g.Draw();
+}
+
+function setupPage(name){
+    let print_button = document.createElement("button");
+    print_button.id = "print-schedule";
+    print_button.innerHTML = "Print";
+    print_button.addEventListener("click", function(){
+        g.setTotalHeight("");
+        g.Draw();
+        var values = document.getElementById("print_page_size").value.split(",")
+        let css = 
+            "@media print {\n        @page {\n          size: " + values[0] + "mm " + values[1] + "mm;\n        }\n        /* set gantt container to the same width as the page */\n        .gantt {\n            width: " + values[0] + "mm;\n        }\n    };";
+        g.printChart(values[0], values[1], css);
+        g.setTotalHeight(900);
+        g.Draw();
+    });
+    document.getElementById("print_options").appendChild(print_button);
+
+    // add a nice layout to show the schedule name
+    let schedule_name = document.createElement("h1");
+    // create string to say "Schedule: <name>"
+    let schedule_name_string = document.createTextNode("Schedule: " + name);
+    // add the string to the h1 element
+    schedule_name.appendChild(schedule_name_string);
+    document.getElementById("schedule-data").appendChild(schedule_name);
+}

src/blenderbim/blenderbim/bim/module/sequence/gantt/main.css

@@ -0,0 +1,122 @@
+.gtaskcellwkend,
+.gtaskcellcurrent,
+.gminorheadingwkend {
+  background-color: #e1e1e1;
+}
+
+.gitemhighlight td {
+  background-color: #ffdaaa;
+}
+
+.gtaskblue {
+  background: #4281A4;
+}
+
+.gtaskred {
+  background: #C1666B;
+}
+
+.gtaskgreen {
+  background: #48A9A6;
+}
+
+.gtaskyellow {
+  background: #D4B483;
+}
+
+.gmainleft {
+  overflow: visible;
+  flex: 0 1 auto;
+}
+
+.gname.ggroupitem {
+  background-color: #4c92ec;
+  font-weight: bold;
+}
+
+.gtaskcellwkend,
+.gtaskcellcurrent,
+.gminorheadingwkend {
+  background-color: #e1e1e1;
+}
+
+.gitemhighlight td {
+  background-color: #ffdaaa;
+}
+
+.gtaskblue {
+  background: #4281A4;
+}
+
+.gtaskred {
+  background: #C1666B;
+}
+
+.gtaskgreen {
+  background: #48A9A6;
+}
+
+.gtaskyellow {
+  background: #D4B483;
+}
+
+.gmainleft {
+  resize: horizontal;
+  height:100%;
+  overflow-x: visible;
+  flex: 0 1 auto;
+}
+
+.gmainright {
+  height:100%;
+  overflow: auto;
+  font-size: 1.5rem;
+}
+
+.gcaption {
+  /* github style header 3 */
+  font-size: 0.75rem;
+  font-weight: 200;
+  line-height: 1.25;
+  color: black;
+}
+
+.gchartgrid {
+  background-color: transparent;
+  height: fit-content;
+}
+
+.gchartcontainer {
+  border: 1px solid #e1e1e1;
+  height: fit-content;
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+button, .sweet_button {
+  border: none;
+  background-color: #ffffff;
+  color: black;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1rem;
+  margin: 0.25rem 0.5rem;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  /* add shadow */
+  box-shadow: 0 0 0.7rem rgba(95, 95, 95, 0.4);
+}
+
+h4 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 1.25;
+  color: black;
+}
+

src/blenderbim/blenderbim/tool/sequence.py

@@ -1498,7 +1498,7 @@ class Sequence(blenderbim.core.tool.Sequence):
             "pParent": task.Nests[0].RelatingObject.id() if task.Nests else 0,
             "pOpen": 1,
             "pCost": 1,
-            "ifcduration": task_time.ScheduleDuration if task_time else "",
+            "ifcduration": str(ifcopenshell.util.date.ifc2datetime(task_time.ScheduleDuration)) if (task_time and task_time.ScheduleDuration) else "",
         }
 
         if task_time and task_time.IsCritical:
@@ -1519,9 +1519,10 @@ class Sequence(blenderbim.core.tool.Sequence):
 
     @classmethod
     def generate_gantt_browser_chart(cls, task_json):
+        active_work_schedule = cls.get_active_work_schedule()
         with open(os.path.join(bpy.context.scene.BIMProperties.data_dir, "gantt", "index.html"), "w") as f:
             with open(os.path.join(bpy.context.scene.BIMProperties.data_dir, "gantt", "index.mustache"), "r") as t:
-                f.write(pystache.render(t.read(), {"json_data": json.dumps(task_json)}))
+                f.write(pystache.render(t.read(), {"json_data": json.dumps(task_json), "name":active_work_schedule.Name or "Unnamed"}))
         webbrowser.open("file://" + os.path.join(bpy.context.scene.BIMProperties.data_dir, "gantt", "index.html"))
 
     @classmethod