You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
540 lines
15 KiB
540 lines
15 KiB
const ganttId = getUrlParameter("gantt_id"); |
|
const readOnly = getUrlParameter("ro"); |
|
const proyekId = getUrlParameter("proyek_id"); |
|
let base_url = getUrlParameter("base_url"); |
|
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 }, |
|
// { 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(' '); |
|
} |
|
}; |
|
|
|
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'); |
|
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("week"); |
|
|
|
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); |
|
});
|
|
|