Glassvision/IfcOpenShell
1
0
Fork 0
mirror of https://github.com/IfcOpenShell/IfcOpenShell.git synced 2026-08-10 09:48:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
start improving overall page style; refactor code to split js and css code away from mustache file
This commit is contained in:
Sigma Dimensions
2023-05-02 17:27:47 +01:00
parent 47711f723f
commit dee0b5cdb9
4 changed files with 232 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blenderbim/blenderbim/bim/data/gantt/index.mustache
+50 -64
View File
@@ -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>
.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;
}
</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 type="text/javascript" src="../../module/sequence/gantt/index.js"></script>
<script>
var json_data = `{{{json_data}}}`;
</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
+57
View File
@@ -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
+122
View File
@@ -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
+3 -2
View File
@@ -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