Adding Tasks in Frappe Gantt

In response to https://github.com/frappe/gantt/issues/44

by George Obregon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-gantt.min.js"></script>
<div class="container">
  <svg id="gantt"></svg>  
</div>
<button id="add-task">Add Tasks</button>

CSS

body {
  font-family: sans-serif;
  background: #ccc;
}

.container {
  overflow: scroll;
}

JavaScript

var names = [
  ["Redesign website", [0, 7]],
  ["Write new content", [1, 4]],
  ["Apply new styles", [3, 6]],
  ["Review", [7, 7]],
  ["Deploy", [8, 9]],
  ["Go Live!", [10, 10]]
];

var tasks = names.map(function(name, i) {
	var today = new Date();
  var start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  var end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  start.setDate(today.getDate() + name[1][0]);
  end.setDate(today.getDate() + name[1][1]);
  return {
    start: start,
    end: end,
    name: name[0],
    id: "Task " + i,
    progress: parseInt(Math.random() * 100, 10)
  }
});

tasks[1].progress = 0;
tasks[1].dependencies = "Task 0";
tasks[2].dependencies = "Task 1";
tasks[3].dependencies = "Task 2";
tasks[5].dependencies = "Task 4";
tasks[5].custom_class = "bar-milestone";

var gantt_chart = Gantt('#gantt', tasks);

gantt_chart.change_view_mode('Quarter Day');

document.getElementById('add-task').addEventListener('click', function() {
	var task = RandomTask('Task 5');
	tasks.push(task);
  gantt_chart.refresh(tasks);
});

function RandomTask(deps) {
  var start = new Date();
  start.setDate(start.getDate() + 11 + randomInt(2));
  
  var end = new Date();
  end.setDate(start.getDate() + randomInt(7));
      
  return {
  	start: start,
    end: end,
    name: 'Party',
    id: 'Task ' + tasks.length,
    progress: randomInt(100),
    dependencies: deps
  };
  
}

function randomInt(limit) {
	return Math.floor(Math.random() * limit);
}