jetsum_dhtmlx_gantt
Version:
An open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.
118 lines (107 loc) • 3.55 kB
HTML
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Resources control</title>
<script src="../../codebase/dhtmlxgantt.js?v=7.1.9"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:regular,medium,thin,bold">
<link rel="stylesheet" href="../../codebase/skins/dhtmlxgantt_material.css?v=7.1.9">
<script src="../common/testdata.js?v=7.1.9"></script>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100vh'></div>
<script>
gantt.plugins({
tooltip: true
});
var usageMap = [
{ key: 1, label: "wood", unit: "box" },
{ key: 2, label: "water", unit: "liter" },
{ key: 3, label: "grain", unit: "lbs",
options: [
{ key: 1, label: "10" },
{ key: 2, label: "20" },
{ key: 3, label: "30" }
]
}
];
var roomsMap = [
{ key: 1, label: "room 1", unit: "hours" },
{ key: 2, label: "room 2", unit: "hours" },
{ key: 3, label: "room 3", unit: "hours" }
];
var helper = {
getArrayForTemplate: function(resourcesUsed, resourcesDefinition) {
return resourcesUsed.map(function(entry) {
var value = entry.value;
var currentResource = helper.getItemById(resourcesDefinition, entry.resource_id);
if (currentResource.options) {
value = helper.getItemById(currentResource.options, entry.value).label;
}
return currentResource.label + ": " + value + " " + currentResource.unit;
});
},
getItemById: function(resources, id) {
var result = resources.filter(function(option) {
return option.key == id;
});
return result[0];
}
}
gantt.config.grid_width = 580;
gantt.config.add_column = false;
gantt.config.columns = [
{ name: "text", label: "Task name", tree: true, width: 200 },
{ name: "start_date", label: "Start time", align: "center" },
{ name: "duration", label: "Duration", align: "center" },
{
name: "resources", label: "Resources",
template: function (item) {
if (!item.usage) return "";
return helper.getArrayForTemplate(item.usage, usageMap).join("; ");
}
},
{
name: "rooms", label: "Rooms",
template: function (item) {
if (!item.rooms) return "";
return helper.getArrayForTemplate(item.rooms, roomsMap).join("; ");
}
}
];
gantt.locale.labels.section_priority = "Priority";
gantt.locale.labels.section_resources = "Resources";
gantt.locale.labels.section_rooms = "Rooms";
gantt.config.lightbox.sections = [
{ name: "description", height: 38, map_to: "text", type: "textarea", focus: true },
{
name: "priority", height: 22, map_to: "priority", type: "select", options: [
{key: 1, label: "High"},
{key: 2, label: "Normal"},
{key: 3, label: "Low"}
]
},
{ name: "time", type: "duration", map_to: "auto" },
{
name: "resources", type: "resources", map_to: "usage", options: usageMap
},
{
name: "rooms", type: "resources", map_to: "rooms", options: roomsMap
}
];
gantt.templates.tooltip_text = function(start, end, task) {
var tooltip = "";
tooltip += "<b>Task:</b> "+task.text+"<br/>";
tooltip += "<b>Duration:</b> " + task.duration + "<br/>";
if (task.usage && task.usage.length > 0) {
tooltip += "<b>Resources:</b><br/>" + helper.getArrayForTemplate(task.usage, usageMap).join("<br/>");
}
if (task.rooms && task.rooms.length > 0) {
tooltip += "<b>Rooms:</b><br/>" + helper.getArrayForTemplate(task.rooms, roomsMap).join("<br/>");
}
return tooltip;
};
gantt.init("gantt_here");
gantt.parse(users_data);
gantt.showLightbox(1);
</script>
</body>