surveyor_indonesia_gantt/view-mode/function/ganttConfig.js

const ganttId = getUrlParameter("gantt_id");
const readOnly = getUrlParameter("ro");
const proyekId = getUrlParameter("proyek_id");
let base_url = getUrlParameter("base_url");
const role_name = getUrlParameter("role_name");
const company_id = getUrlParameter("company_id");
const adwIntegrationUrl = "https://adw-api.ospro.id/api";

let userToVersionGanttId = 0
let activityId = 0;
let actionHappen = false;
let activityName = "";
let token = getUrlParameter("token");
if (!token || token == "") {
	token = `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpLWl1Lm9zcHJvLmlkXC9hcGlcL2xvZ2luIiwiaWF0IjoxNjQ2ODA3OTA4LCJleHAiOjE2NDY4OTQzMDgsIm5iZiI6MTY0NjgwNzkwOCwianRpIjoiNmdtcEx3cjlob1JFZ0hSNSIsInN1YiI6MSwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyJ9.1xB2rvTJ6Edf7l_8jRPOmoMYnf8f59Rd8jJghJ39xps`;
}
const axiosInstance = axios.create({
	headers: {
		"Authorization": `Bearer ${token}`,
		"Content-type": "application/json"
	}
});

axiosInstance.interceptors.request.use(async (config) => {
	try{
    if (config.url !== `${base_url}project/s-curve-command`) {
		  $("body").addClass("loading");
    }
	}
	catch(e)
	{
		$("body").removeClass("loading");
		alert('Error request' + e);
	}

	return config;
});

axiosInstance.interceptors.response.use(async (config) => {
	try {
    if (config.url !== `${base_url}project/s-curve-command`) {
		  $("body").removeClass("loading");
    }
	}
	catch(e)
	{
		$("body").removeClass("loading");
		alert('Error response' + e);
	}

	return config;
});

const HEADER = {
	headers:
	{
		'Authorization': `Bearer ${token}`,
		"Content-type": `application/json`
	}
};

$.ajaxSetup({
	headers: {
		"Content-Type": "application/json",
		"Authorization": `Bearer ${token}`
	}
});


$(document).ajaxStart(function(event) {
  var url = event.target.URL;
  if (url !== `${base_url}project/s-curve-command`) {
    $("body").addClass("loading");
  }
});

$(document).ajaxComplete(function(event) {
  var url = event.target.URL;
  if (url !== `${base_url}project/s-curve-command`) {
    $("body").removeClass("loading");
  }
});

gantt.plugins({
	drag_timeline: true,
	critical_path: true ,
	auto_scheduling: true
});

gantt.config.highlight_critical_path = true;
gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
gantt.config.auto_scheduling = true;
gantt.config.fit_tasks = true;
if (!base_url) {
	base_url = `https://api-iu.ospro.id/api/`;
}else{
	base_url = base_url+"/";
}
gantt.plugins({
	marker: true,
	fullscreen: true,
	overlay: true
});

// add today line
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
	start_date: new Date(),
	css: "today",
	text: "Today",
	title: dateToStr(new Date())
});
gantt.getMarker(markerId);

let no = 4; // for temporary change with last id in database m_activity

var formatter = gantt.ext.formatters.durationFormatter({
	enter: "day",
	store: "day",
	format: "auto"
});

var linksFormatter = gantt.ext.formatters.linkFormatter({ durationFormatter: formatter });

function satuanLabel(task){
	var value = task.satuan_id;
	var list = gantt.serverList("satuan");
	if(value){
		for(var i = 0; i < list.length; i++){
			if(list[i].key == parseInt(value)){
				return list[i].label;
			}
		}
	}
	return "";
}

function addWithoutParent() {
	var task = gantt.getTaskByIndex(0);

	let start_date = new Date();

	if (task) {
		start_date = task.start_date;
	}

	var taskId = gantt.addTask({
		id: no,
		text: `New Activity`,
		start_date: start_date,
		biaya: 10000,
		awaw: "wadad",
		duration: 7
	});

	gantt.selectTask(taskId);

	no = no + 1;
}

function addWithParent(id) {
	var task = gantt.getTask(id);

	let start_date = new Date();

	if (task) {
		start_date = task.start_date;
	}

	gantt.addTask({
		id: no,
		text: `New Activity`,
		start_date: start_date,
		duration: task.duration
	}, id);

	no = no + 1;
}

function clickGridButton(id, action) {
	switch (action) {
		case "edit":
			gantt.showLightbox(id);
			break;
		case "add":
			addWithParent(id);
			break;
		case "delete":
			gantt.confirm({
				title: gantt.locale.labels.confirm_deleting_title,
				text: gantt.locale.labels.confirm_deleting,
				callback: function (res) {
					if (res)
						gantt.deleteTask(id);
				}
			});
			break;
		case "upload":
			showDocuments(id);
			break;
		case "comment":
			showComments(id);
			break;
	}
}

function createColumnsConfig(selectedColumns){
	var newColumns = [];


	allColumns.forEach(function(column){
		// restore the action
		if(selectedColumns[column.name]){
			// if (column.name === 'action') {
			//     newColumns.push(column);
			// }
			newColumns.push(column);
		}
	});

	return newColumns;
}

var allColumns = [
	// { name: "kode_sortname", label: "Kode / Sortname",align: "center", min_width: 120, resize: true },
	{
		name: "text",
		label: "Activity",
		tree: true,
		min_width: 150,
		resize: true,
		template: function (text) {
			function truncateText(text, maxLength) {
				if (text.length > maxLength) {
					return text.substring(0, maxLength) + '...';
				}
				return text;
			}
			const truncatedText = truncateText(text.text, 30);
			return `<span title="${text.text}">${truncatedText}</span>`;
		}
	},
	// { name: "start_date", label: "Start Date", align: "center", min_width: 80, resize: true },
	// { name: "end_date", label: "Finish Date", align: "center", min_width: 80, resize: true },
	// { name: "duration", label: "Duration", align: "center", min_width: 50, resize: true },
	// { name: "rencana_biaya", label: "Cost Planning", align: "center", min_width: 100, resize: true, template: function (text) {
	// 	if(!text.rencana_biaya){
	// 		return
	// 	}
	// 	let rencana_biaya = text.rencana_biaya
	// 	return "Rp. "+ formatRupiah(rencana_biaya)
	// } },
	// { name: "cost_actual", label: "Cost Actual", align: "center", min_width: 100, template: function (text) {
	// 	if(!text.biaya_actual){
	// 		return
	// 	}
	// 	let biaya_actual = text.biaya_actual
	// 	return "Rp. "+ formatRupiah(biaya_actual)
	// } },
	// { name: "assign_hr", label: "Assign To", align: "center", min_width: 150, template: function (text) {
	// 	if(text.type=="project" || text.type=="milestone"){
	// 		return;
	// 	}
	// 	let html = ``;
	// 	var assign_hr = text.assign_hr
	// 	if(!assign_hr || !assign_hr.length){
	// 		html = `<span class="badge badge-pill badge-danger">Unassigned</span>`;
	// 	}else{
	// 		if(assign_hr.length==1){
	// 			html = `<span class="text-capitalize badge badge-pill badge-primary">${assign_hr[0]}</span>`;
	// 		}else{
	// 			assign_hr.forEach(function(val, index) {
	// 				html += `<span class="text-capitalize badge badge-primary mr-1">${val.substr(0, 1)}</span>`;
	// 			});
	// 		}
	// 	}
	// 	return `<div class="d-flex justify-content-center align-items-center" data-toggle="modal" data-target="#modal-hr" style="min-width:100%;height:100%;">
	// 				${html}
	// 			</div>`
	// }
	// },
	// { name: "material", label: "Material", align: "center", min_width: 150, resize: true, template: function (text) {
	// 	if(text.type=="project" || text.type=="milestone"){
	// 		return;
	// 	}
	// 	let html = ``;
	// 	var assign_material = text.assign_material

	// 	if(!assign_material || !assign_material.length){
	// 		html = `<span class="badge badge-pill badge-danger">Unassigned</span>`;
	// 	}else{
	// 		if(assign_material.length > 0 ){
	// 			html = `<span class="text-capitalize badge badge-pill badge-primary">Assigned</span>`;
	// 		}
	// 	}
	// 	return `<div class="d-flex justify-content-center align-items-center" data-toggle="modal" data-target="#modal-material" style="min-width:100%;height:100%;">
	// 				${html}
	// 			</div>`
	// } },
	// { name: "bobot_planning", label: "Bobot Activity (%)", align: "center", resize: true, min_width: 115, template: function (text) {
	// 	if(!text.bobot_planning){
	// 		return
	// 	}
	// 	let bobot_planning = parseFloat(text.bobot_planning);
	// 	return roundToTwo(bobot_planning);
	// } },
	// { name: "progress", label: "Actual Progress (%)", align: "center", min_width: 125, template: function (text) {
	// 	let progress = text.progress
	// 	progress = progress*100
	// 	return progress;
	// }, resize: true },
	// { name:"progress_actual", label: "Total Actual Progress (%)", align: "center", min_width: 150, template: function (text) {
	// 	let progress = text.progress
	// 	progress = progress*100
	// 	let bobot = text.bobot_planning
	// 	let actual = (progress*bobot) / 100
	// 	return roundToTwo(actual);
	// }, resize: true },
	// { name: "jumlah_pekerjaan", label: "Volume Plan", align: "center", min_width: 100, resize: true},
	// { name: "jobs_done", label: "Volume Actual", align: "center", min_width: 100, resize: true, template: function (text) {
	// 	if(text.type=="project" || text.type=="milestone"){
	// 		return;
	// 	}
	// 	let html = text.jobs_done ? text.jobs_done : 0;
	// 	return `<div class="d-flex justify-content-center align-items-center" data-toggle="modal" data-target="#modal_report_activity" style="min-width:100%;height:100%;">
	// 				${html}
	// 			</div>`
	// } },
	// { name: "updated_by", label: "Last Updated By", align: "center", min_width: 100, resize: true }
];

gantt.config.columns = createColumnsConfig({
	kode_sortname: false,
	text: true,
	start_date: false,
	end_date: false,
	duration: false,
	rencana_biaya: false,
	cost_actual: false,
	assign_hr: false,
	material: false,
	bobot_planning: false,
	progress: false,
	progress_actual: false,
	jumlah_pekerjaan: false,
	jobs_done: false,
	updated_by: false
})

gantt.config.reorder_grid_columns = true;
gantt.config.resize_rows = true;
gantt.config.grid_resize = true; // pro edition
gantt.config.min_column_width = 50;
gantt.config.scale_height = 20;
gantt.config.order_branch = "marker";
gantt.config.order_branch_free = true;
gantt.config.open_tree_initially = true;

gantt.config.row_height = 30;
gantt.config.task_height = 20;

gantt.addTaskLayer({
	renderer: {
		render: function draw_planned(task) {
			if (task.planned_start && task.planned_end) {
				var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end);
				var el = document.createElement('div');
				el.className = 'baseline';
				// el.style.left = sizes.left + 'px';
				// el.style.width = sizes.width + 'px';
				// el.style.top = sizes.top + gantt.config.bar_height + 13 + 'px';
				el.style.left = sizes.left - 6 + 'px';
				el.style.width = sizes.width + 10+ 'px';
				el.style.height= sizes.height + 'px';
				// el.style.top = sizes.top + 1 + 'px';
				el.style.top = sizes.top + 2 + 'px';
				return el;
			}
			return false;
		},
		// define getRectangle in order to hook layer with the smart rendering
		getRectangle: function(task, view){
			if (task.planned_start && task.planned_end) {
				return gantt.getTaskPosition(task, task.planned_start, task.planned_end);
			}
			return null;
		}
	}
});

gantt.templates.task_class = function (start, end, task) {
	if (task.planned_end) {
		var classes = ['has-baseline'];
		if (end.getTime() > task.planned_end.getTime()) {
			classes.push('overdue');
		}
		return classes.join(' ');
	}
};
let dataOverdue = [];
gantt.templates.rightside_text = function (start, end, task) {
	if (task.planned_end) {
		if (end.getTime() > task.planned_end.getTime()) {
			// var overdue = Math.ceil(Math.abs((end.getTime() - task.planned_end.getTime()) / (24 * 60 * 60 * 1000)));
			// var text = "<b>Overdue: " + overdue + " days</b>";
			// return text;
            var plannedEndDate = gantt.calculateEndDate({
				start_date: task.start_date,
				duration: gantt.calculateDuration({
					start_date: task.start_date,
					end_date: task.planned_end
				})
			});
			var overdue = gantt.calculateDuration({
				start_date: plannedEndDate,
				end_date: end,
				task: task
			}, 'day');
      let found = dataOverdue.find((element) => element.id == task.id);
      if (!found) {
         dataOverdue.push({
            id: task.id,
            text: task.text,
            overdue: overdue
         })
      }
      window.parent.postMessage({ type: 'dataOverdueUpdate', dataOverdue: dataOverdue }, '*');
			var text = "<b style='color: red;'>Overdue: " + overdue + " days</b>";
			return text;
		}
	}
};

gantt.attachEvent("onTaskLoading", function(task){
	task.planned_start = gantt.date.parseDate(task.planned_start, "xml_date");
	task.planned_end = gantt.date.parseDate(task.planned_end, "xml_date");
	return true;
});


gantt.config.autoscroll = true;
gantt.config.scroll_size = 50;
gantt.config.layout = {
	css: "gantt_container",
	cols: [
		{
			width: 400,
			min_width: 300,
			rows: [
				{ view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },
				{ view: "scrollbar", id: "gridScroll", group: "horizontal" }
			]
		},
		{ resizer: true, width: 3 },
		{
			rows: [
				{ view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer", scrollable: true},
				{ view: "scrollbar", id: "scrollHor", group: "horizontal" }
			]
		},
		{ view: "scrollbar", id: "scrollVer" }
	]
};

gantt.templates.grid_folder = function (item) {
	return "";
};
gantt.templates.grid_file = function (item) {
	return "";
};

gantt.config.work_time = true;
gantt.config.duration_unit = "day";

gantt.templates.timeline_cell_class = function (task, date) {
	if (!gantt.isWorkTime(date, 'day')) {
		return ("holidays");
	}
	return "";
};

// Zoom Scales
var zoomConfig = {
	levels: [
		{
			name:"day",
			scale_height: 50,
			min_column_width:50,
			scales:[
				{unit: "week", step: 1, format: function (date) {
					var dateToStr = gantt.date.date_to_str("%d %M");
					var endDate = gantt.date.add(date, -6, "day");
					var weekNum = gantt.date.date_to_str("%W")(date);
					var year = gantt.date.date_to_str("%Y")(date);
					return "W#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate) + " " + year;
				}},
				{unit: "day", step: 1, format: "%d %M"}
			]
		},
		{
			name:"week",
			scale_height: 50,
			min_column_width:50,
			scales:[
				{unit: "week", step: 1, format: function (date) {
					var weekNum = gantt.date.date_to_str("%W")(date);
					return "W#" + weekNum;
				}},
				{unit: "month", format: "%F, %Y"},
			]
		},
		{
			name:"month",
			scale_height: 50,
			min_column_width:120,
			scales:[
				{unit: "month", format: "%F, %Y"},
			]
		},
	]
};
gantt.ext.zoom.init(zoomConfig);
gantt.ext.zoom.setLevel("month");

function zoomIn(){
	gantt.ext.zoom.zoomIn();
}
function zoomOut(){
	gantt.ext.zoom.zoomOut()
}

var radios = document.getElementsByName("scale");
for (var i = 0; i < radios.length; i++) {
	radios[i].onclick = function (event) {
		updateProperty({zoom:event.target.value});
		gantt.ext.zoom.setLevel(event.target.value);
	};
}
// end Zoom Scale function
//
//
// GANTT PERFORMANCE CONFIG RECOMMENDATION
gantt.config.scales = [
	{unit: "month", step: 1, format: "%F, %Y"},
	{unit: "week", step: 1, format: function (date) {
		return "Week #" + gantt.date.getWeek(date);
	}},
	{unit: "day", step: 1, format: "%D", css: function(date) {
		if(!gantt.isWorkTime({ date: date, unit: "day"})){
			return "weekend"
		}
	}}
];
gantt.config.show_task_cells = false;
gantt.config.static_background = true;
gantt.config.branch_loading = true;
gantt.config.smart_scales = true;

// gantt initialization
$(document).ready(function () {
	initializationProject();
	getSatuan();
	gantt.init("gantt_here");
	linkLagEditor();
	setTimeout(initializationColumn, 4500);
	setTimeout(initialProperty, 4500);
});