My code is becoming quite bloated as I use a lot of custom layers, it’s not best practice to have to individually declare each layer I want to add. I was wondering if it was possible to create the tasks on the Gantt using a loop from an object array? I have attempted to do this, but I can’t get it to work. There are no errors returned but the various layers don’t render. Can anyone offer some help on this?
//Gantt Initilisation and config
document.addEventListener("DOMContentLoaded", function (event) {
// specifying the date format
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.config.readonly = true;
// initializing gantt
gantt.init("positionsReport");
// initiating data loading
gantt.load("/api/data/get");
// initializing dataProcessor
var dp = new gantt.dataProcessor("/api/");
gantt.attachEvent("onTaskLoading", function (task) {
task.options_start = gantt.date.parseDate(task.options_start, "xml_date");
task.options_end = gantt.date.parseDate(task.options_end, "xml_date");
task.f2_onhire = gantt.date.parseDate(task.f2_onhire, "xml_date");
task.f2_offhire = gantt.date.parseDate(task.f2_offhire, "xml_date");
task.f3_onhire = gantt.date.parseDate(task.f3_onhire, "xml_date");
task.f3_offhire = gantt.date.parseDate(task.f3_offhire, "xml_date");
return true;
});
gantt.config.show_unscheduled = true;
gantt.config.task_height = 35;
gantt.config.row_height = 35;
//Fixture Layers
gantt.addTaskLayer(function draw_planned(task) {
var fixtureArray = [
{
onhire: task.start_date,
offhire: task.end_date,
charterer: task.current_charterer
},
{
onhire: task.f2_onhire,
offhire: task.f2_offhire,
charterer: task.f2_charterer
},
{
onhire: task.f3_onhire,
offhire: task.f3_offhire,
charterer: task.f3_charterer
}
];
console.log(fixtureArray)
for (i = 0; i < fixtureArray.length; i++) {
var sizes = gantt.getTaskPosition(fixtureArray, fixtureArray.onhire, fixtureArray.offhire);
var el = document.createElement('div');
el.className = 'baseline gantt_task_content event-data';
return el;
}
return false;
});
gantt.config.columns = [
{ name: "text", tree: false, width: 150, resize: true, align: "left", label: "Vessel" },
{ name: "start_date", align: "center", width: 150, resize: true, align: "left", label: "Onhire" },
{ name: "duration", align: "center", width: 70, resize: true, hide: true }
];
gantt.templates.tooltip_text = function (start, end, task) {
var s = moment(start).format("DD/MM/YYYY");
var e = moment(end).format("DD/MM/YYYY");
return "<b>Charterer: </b>" + task.current_charterer + "<br/><b>Start: </b>" + s + "<br /><b>End: </b>" + e;
};
gantt.templates.task_text = function (start, end, task) {
return "<b>" + task.current_charterer + "</b>";
};
//Month format
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%M";
//View
gantt.config.start_date = new Date(2019, 01, 01);
gantt.config.end_date = new Date(2020, 01, 01);
// and attaching it to gantt
dp.init(gantt);
// setting the REST mode for dataProcessor
dp.setTransactionMode("REST");
});