Merge pull request #2122 from netchampfaris/gantt

[gantt] progress resizable, today highlight

frappe/public/css/gantt.css

@@ -22,6 +22,10 @@
 .gantt #grid .tick.thick {
   stroke-width: 0.4;
 }
+.gantt #grid .today-highlight {
+  fill: #fcf8e3;
+  opacity: 0.5;
+}
 .gantt #arrow {
   fill: none;
   stroke: #333;

frappe/public/js/frappe/list/doclistview.js

@@ -455,13 +455,18 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 					bar_on_click: function (task) {
 						frappe.set_route('Form', task.doctype, task.id);
 					},
-					bar_on_datechange: function(task, start, end) {
-						update_date(task.id, field_map.start, start.format("YYYY-MM-DD"), function() {
-							update_date(task.id, field_map.end, end.format("YYYY-MM-DD"), function() {
+					bar_on_date_change: function(task, start, end) {
+						update_field(task.id, field_map.start, start.format("YYYY-MM-DD"), function() {
+							update_field(task.id, field_map.end, end.format("YYYY-MM-DD"), function() {
 								show_alert("Saved", 1);
 							});
 						});
 					},
+					bar_on_progress_change: function(task, progress) {
+						update_field(task.id, 'progress', progress, function() {
+							show_alert("Saved", 1);
+						});
+					},
 					on_viewmode_change: function(mode) {
 						me.list_settings.view_mode = mode;
 					}
@@ -506,7 +511,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 			})
 		});
 
-		function update_date(id, fieldname, value, callback) {
+		function update_field(id, fieldname, value, callback) {
 			frappe.call({
 				method: "frappe.client.set_value",
 				args: {

frappe/public/js/frappe/views/gantt.js

@@ -179,6 +179,7 @@ var Gantt = Class.extend({
 		this.make_grid_rows();
 		this.make_grid_header();
 		this.make_grid_ticks();
+		this.make_grid_highlights();
 	},
 	make_grid_background: function () {
 		var me = this;
@@ -264,6 +265,22 @@ var Gantt = Class.extend({
 			}
 		});
 	},
+	make_grid_highlights: function() {
+		var me = this;
+		//highlight today
+		if(me.view_mode === 'Day') {
+			var x = me.opts.label_width
+				+ moment().startOf('day').diff(me.start, 'hours')
+				/ me.opts.step * me.opts.column_width,
+			y = 0, //me.opts.header_height + me.opts.padding/2;
+			width = me.opts.column_width,
+			height = (me.opts.bar.height + me.opts.padding) * me.tasks.length
+				+ me.opts.header_height + me.opts.padding/2;
+			me.canvas.rect(x, y, width, height)
+				.addClass('today-highlight')
+				.appendTo(me.groups.grid);
+		}
+	},
 	make_dates: function() {
 		var me = this;
 
@@ -451,7 +468,8 @@ var Gantt = Class.extend({
 	setup_events: function() {
 		var me = this;
 		this._bars.forEach(function(bar) {
-			bar.events.on_date_change = me.events.bar_on_datechange;
+			bar.events.on_date_change = me.events.bar_on_date_change;
+			bar.events.on_progress_change = me.events.bar_on_progress_change;
 			bar.click(me.events.bar_on_click);
 		});
 	},
@@ -586,11 +604,19 @@ var Bar = Class.extend({
 			8, this.height - 2, this.corner_radius, this.corner_radius)
 			.addClass('handle left')
 			.appendTo(this.handle_group);
+		this.canvas.polygon(
+				bar.getX() + this.progress_width - 5, bar.getY() + bar.get("height"),
+				bar.getX() + this.progress_width + 5, bar.getY() + bar.get("height"),
+				bar.getX() + this.progress_width, bar.getY() + bar.get("height") - 8.66
+			)
+			.addClass('handle progress')
+			.appendTo(this.handle_group);
 	},
 	bind: function () {
 		// this.show_details();
 		this.bind_resize();
 		this.bind_drag();
+		this.bind_resize_progress();
 	},
 	show_details: function () {
 		var me = this;
@@ -721,6 +747,27 @@ var Bar = Class.extend({
 			bar.finaldx = 0;
 		}
 	},
+	bind_resize_progress: function() {
+		var me = this;
+		var bar_progress = me.group.select('.bar-progress');
+		var handle = me.group.select('.handle.progress');
+		handle.drag(onmove, onstart, onstop);
+
+		function onmove(dx, dy) {
+			bar_progress.attr("width", bar_progress.owidth + dx);
+			handle.transform("t"+dx+",0");
+			bar_progress.finaldx = dx;
+		}
+		function onstop() {
+			if(!bar_progress.finaldx) return;
+			me.progress_changed();
+			me.set_action_completed();
+		}
+		function onstart() {
+			bar_progress.owidth = bar_progress.getWidth();
+			bar_progress.finaldx = 0;
+		}
+	},
 	view_is: function(modes) {
 		var me = this;
 		if (typeof modes === 'string') {
@@ -758,13 +805,19 @@ var Bar = Class.extend({
 		});
 	},
 	date_changed: function() {
-		if(this.events.on_date_change) {
-			this.events.on_date_change(
-				this.task,
-				this.compute_start_date(),
-				this.compute_end_date()
-			);
-		}
+		this.events.on_date_change &&
+		this.events.on_date_change(
+			this.task,
+			this.compute_start_date(),
+			this.compute_end_date()
+		);
+	},
+	progress_changed: function() {
+		this.events.on_progress_change &&
+		this.events.on_progress_change(
+			this.task,
+			this.compute_progress()
+		);
 	},
 	set_action_completed: function() {
 		var me = this;
@@ -791,6 +844,11 @@ var Bar = Class.extend({
 			new_end_date = this.task._end.clone().add(this.gantt.step*shift, 'hours');
 		return new_end_date;
 	},
+	compute_progress: function() {
+		var bar = this.group.select('.bar'),
+			bar_progress = this.group.select('.bar-progress');
+		return bar_progress.getWidth() / bar.getWidth() * 100;
+	},
 	compute_x: function() {
 		var x = this.gantt.offset
 			+ (this.task._start.diff(this.gantt.start, 'hours')/this.gantt.step

frappe/public/less/gantt.less

@@ -26,6 +26,10 @@
 				stroke-width: 0.4;
 			}
 		}
+		.today-highlight {
+			fill: #fcf8e3;
+			opacity: 0.5;
+		}
 	}
 
 	#arrow {