bardelman-dhtmlx-gantt-redux
Version:
An open source JavaScript Gantt chart that helps you illustrate a project schedule in a nice-looking chart.
202 lines (177 loc) • 8.07 kB
HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Auto-Schedule From Project End (backward)</title>
<script src="../../codebase/dhtmlxgantt.js?v=9.0.10"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=9.0.10">
<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.weekend {
background: var(--dhx-gantt-base-colors-background-alt);
}
[data-column-name='constraint_type'] .gantt_tree_content {
padding: 1px;
line-height: 17px;
white-space: normal;
text-align: right;
box-sizing: border-box;
}
.gantt_grid_editor_placeholder[data-column-name='constraint_type'] select {
line-height: 20px;
white-space: normal;
}
/*
.constraint-marker {
position: absolute;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 56px;
height: 56px;
margin-top: -11px;
opacity: 0.4;
z-index: 1;
background: url("../common/constraint-arrow.svg") center no-repeat;
background-size: cover;
}
.constraint-marker.earliest-start {
margin-left: -53px;
}
.constraint-marker.latest-end {
margin-left: -3px;
transform: rotate(180deg);
} */
.gantt_link_control {
z-index: 1;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
gantt.plugins({
auto_scheduling: true,
marker: true
});
gantt.templates.scale_cell_class = function (date) {
if (!gantt.isWorkTime(date)) {
return "weekend";
}
};
gantt.templates.timeline_cell_class = function (item, date) {
if (!gantt.isWorkTime(date)) {
return "weekend";
}
};
gantt.config.work_time = true;
gantt.config.auto_scheduling = {
enabled: true,
show_constraints: true,
strict: true
};
gantt.config.schedule_from_end = true;
gantt.config.project_end = new Date(2024, 3, 30);
gantt.addMarker({
start_date: gantt.config.project_end,
text: "project end"
});
gantt.config.date_format = "%d-%m-%Y";
gantt.config.fit_tasks = true;
gantt.config.min_column_width = 45;
var textEditor = { type: "text", map_to: "text" };
var dateEditor = { type: "date", map_to: "start_date", min: new Date(2023, 0, 1), max: new Date(2025, 0, 1) };
var durationEditor = { type: "number", map_to: "duration", min: 0, max: 100 };
var constraintTypeEditor = {
type: "select", map_to: "constraint_type", options: [
{ key: "asap", label: gantt.locale.labels.asap },
{ key: "alap", label: gantt.locale.labels.alap },
{ key: "snet", label: gantt.locale.labels.snet },
{ key: "snlt", label: gantt.locale.labels.snlt },
{ key: "fnet", label: gantt.locale.labels.fnet },
{ key: "fnlt", label: gantt.locale.labels.fnlt },
{ key: "mso", label: gantt.locale.labels.mso },
{ key: "mfo", label: gantt.locale.labels.mfo }
]
};
var constraintDateEditor = { type: "date", map_to: "constraint_date", min: new Date(2023, 0, 1), max: new Date(2025, 0, 1) };
gantt.config.columns = [
{ name: "text", tree: true, width: '*', resize: true, width: 150, editor: textEditor },
{ name: "start_date", align: "center", resize: true, width: 150, editor: dateEditor },
{ name: "duration", align: "center", width: 80, resize: true, editor: durationEditor },
{
name: "constraint_type", align: "center", width: 100, template: function (task) {
return gantt.locale.labels[gantt.getConstraintType(task)];
}, resize: true, editor: constraintTypeEditor
},
{
name: "constraint_date", align: "center", width: 120, template: function (task) {
var constraintTypes = gantt.config.constraint_types;
if (task.constraint_date && task.constraint_type != constraintTypes.ASAP && task.constraint_type != constraintTypes.ALAP) {
return gantt.templates.task_date(task.constraint_date);
}
return "";
}, resize: true, editor: constraintDateEditor
},
{ name: "add", width: 44 }
];
gantt.config.lightbox.sections = [
{ name: "description", height: 38, map_to: "text", type: "textarea", focus: true },
{ name: "constraint", type: "constraint" },
{ name: "time", type: "duration", map_to: "auto" }
];
gantt.attachEvent("onAfterTaskAutoSchedule", function (task, new_date, link, predecessor) {
var reason = "";
if (predecessor) {
reason = predecessor.text;
} else {
var constraint = gantt.getConstraintType(task);
reason = gantt.locale.labels[constraint];
}
var predecessor = predecessor ? predecessor : { text: task.constraint_type };
console.log("<b>" + task.text + "</b> has been rescheduled to " + gantt.templates.task_date(new_date) + " due to <b>" + reason + "</b> constraint");
});
gantt.message({ text: "Project is scheduled as late as possible from the project end date", expire: -1 });
gantt.message({ text: "The constraints affect the task scheduling", expire: -1 });
gantt.init("gantt_here");
gantt.parse({
data: [
{ id: 1, text: "Project #1", type: "project", progress: 0.6, open: true },
{ id: 2, text: "Task #1", start_date: "02-04-2023", duration: "5", parent: "1", progress: 1, open: true },
{ id: 3, text: "Task #2", start_date: "03-04-2023", type: "project", parent: "1", progress: 0.5, open: true },
{ id: 4, text: "Task #3", start_date: "02-04-2023", type: "project", duration: "6", parent: "1", progress: 0.8, open: true },
{ id: 5, text: "Task #4", type: "project", parent: "1", progress: 0.2, open: true },
{ id: 6, text: "Final milestone", start_date: "15-04-2023", type: "milestone", parent: "1", progress: 0, open: true },
{ id: 7, text: "Task #2.1", start_date: "03-04-2023", duration: "2", constraint_date: "26-04-2024", constraint_type: "mfo", parent: "3", progress: 1, open: true },
{ id: 8, text: "Task #2.2", start_date: "06-04-2023", duration: "3", constraint_date: "16-04-2024", constraint_type: "fnet", parent: "3", progress: 0.8, open: true },
{ id: 9, text: "Task #2.3", start_date: "10-04-2023", duration: "4", constraint_date: "19-04-2024", constraint_type: "fnlt", parent: "3", progress: 0.2, open: true },
{ id: 10, text: "Task #2.4", start_date: "10-04-2023", duration: "3", parent: "3", progress: 0, open: true },
{ id: 11, text: "Task #2.5", start_date: "10-04-2023", duration: "2", parent: "3", progress: 0, open: true },
{ id: 12, text: "Task #3.1", start_date: "25-04-2023", duration: "2", constraint_date: "16-04-2024", constraint_type: "mso", parent: "4", progress: 1, open: true },
{ id: 13, text: "Task #3.2", start_date: "25-04-2023", duration: "3", constraint_date: "17-04-2024", constraint_type: "snet", parent: "4", progress: 0.8, open: true },
{ id: 14, text: "Task #3.3", start_date: "10-04-2023", duration: "4", constraint_date: "12-04-2024", constraint_type: "snlt", parent: "4", progress: 0.2, open: true },
{ id: 15, text: "Task #3.4", start_date: "10-04-2023", duration: "3", constraint_type: "asap", parent: "4", progress: 0, open: true },
{ id: 16, text: "Task #3.5", start_date: "10-04-2023", duration: "2", parent: "4", progress: 0, open: true },
{ id: 17, text: "Task #4.1", start_date: "02-04-2023", duration: "4", parent: "5", progress: 0.5, open: true },
{ id: 18, text: "Task #4.2", start_date: "02-04-2023", duration: "4", parent: "5", progress: 0.1, open: true },
{ id: 19, text: "Mediate milestone", start_date: "14-04-2023", type: "milestone", parent: "5", progress: 0, open: true }
],
links: [
{ id: "2", source: "5", target: "6", type: "0" },
{ id: "3", source: "7", target: "8", type: "0" },
{ id: "4", source: "8", target: "9", type: "0" },
{ id: "5", source: "9", target: "10", type: "0" },
{ id: "6", source: "10", target: "11", type: "0" },
{ id: "7", source: "12", target: "13", type: "0" },
{ id: "8", source: "13", target: "14", type: "0" },
{ id: "9", source: "14", target: "15", type: "0" },
{ id: "10", source: "15", target: "16", type: "0" },
]
});
gantt.showTask(9)
</script>
</body>