From eaeb0a7be4259db3e16675f3df17046a6ea7ccf2 Mon Sep 17 00:00:00 2001 From: Muhammad Sulaiman Yusuf Date: Wed, 7 Sep 2022 11:41:15 +0700 Subject: [PATCH] improve ui&ux --- src/assets/css/custom.css | 12 +- src/function/function.js | 870 ++++++++++++++++----------------- src/function/ganttConfig.js | 923 ++++++++++++++++++------------------ 3 files changed, 903 insertions(+), 902 deletions(-) diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 04df4cd..aa72f20 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -11,7 +11,7 @@ /* Turn off scrollbar when body element has the loading class */ body.loading{ - overflow: hidden; + overflow: hidden; } /* Make spinner image visible when body element has the loading class */ body.loading .loading-overlay{ @@ -19,10 +19,10 @@ body.loading .loading-overlay{ } .container-header { - background-color: #3DB9D3; + background-color: #3DB9D380; width: 100%; box-sizing: border-box; - padding: 5px; + padding: 2px; display: flex; justify-content: space-between; align-items: center; @@ -165,7 +165,7 @@ table.dataTable th { font-size: 14px; } -/* .holidays{ +/* .holidays{ background: #f4f7f4 !important; } */ @@ -235,7 +235,7 @@ table.dataTable th { } .gantt_task_line, .baseline { - border-radius:4px; + border-radius:4px; } #map_activity { @@ -243,4 +243,4 @@ table.dataTable th { max-width: 100%; max-height: 100%; width: 100vw; -} \ No newline at end of file +} diff --git a/src/function/function.js b/src/function/function.js index 59578f7..35f4d40 100644 --- a/src/function/function.js +++ b/src/function/function.js @@ -1,524 +1,524 @@ function getUrlParameter(sParam) { - var sPageURL = window.location.search.substring(1), - sURLVariables = sPageURL.split('&'), - sParameterName, - i; - - for (i = 0; i < sURLVariables.length; i++) { - sParameterName = sURLVariables[i].split('='); - - if (sParameterName[0] === sParam) { - return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]); - } - } - return false; + var sPageURL = window.location.search.substring(1), + sURLVariables = sPageURL.split('&'), + sParameterName, + i; + + for (i = 0; i < sURLVariables.length; i++) { + sParameterName = sURLVariables[i].split('='); + + if (sParameterName[0] === sParam) { + return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]); + } + } + return false; }; function getCodeLinkByType(type) { - type = parseInt(type); - switch (type) { - case 1: - return "SS"; - break; - case 2: - return "FF"; - break; - case 3: - return "SF"; - break; - default: - return "FS"; - break; - } + type = parseInt(type); + switch (type) { + case 1: + return "SS"; + break; + case 2: + return "FF"; + break; + case 3: + return "SF"; + break; + default: + return "FS"; + break; + } } var getInput = function(node){ - return node.querySelector("input"); + return node.querySelector("input"); }; gantt.config.editor_types.costPlanningEditor = { - show: function (id, column, config, placeholder) { - var min = config.min || 0 - - var html = "
"; - placeholder.innerHTML = html; - }, - hide: function () { - }, - set_value: function (value, id, column, node) { - getInput(node).value = value; - }, - get_value: function (id, column, node) { - return getInput(node).value || 0; - }, - is_changed: function (value, id, column, node) { - var currentValue = this.get_value(id, column, node); - return value !== currentValue; - }, - is_valid: function (value, id, column, node) { - return true; - }, - focus: function (node) { - var input = getInput(node); - if (!input) { - return; - } - if (input.focus) { - input.focus(); - } - - if (input.select) { - input.select(); - } - } + show: function (id, column, config, placeholder) { + var min = config.min || 0 + + var html = "
"; + placeholder.innerHTML = html; + }, + hide: function () { + }, + set_value: function (value, id, column, node) { + getInput(node).value = value; + }, + get_value: function (id, column, node) { + return getInput(node).value || 0; + }, + is_changed: function (value, id, column, node) { + var currentValue = this.get_value(id, column, node); + return value !== currentValue; + }, + is_valid: function (value, id, column, node) { + return true; + }, + focus: function (node) { + var input = getInput(node); + if (!input) { + return; + } + if (input.focus) { + input.focus(); + } + + if (input.select) { + input.select(); + } + } }; - + gantt.config.editor_types.progressCustom = { - show: function (id, column, config, placeholder) { - var min = config.min || 0, - max = config.max || 100; - - var html = "
"; - placeholder.innerHTML = html; - }, - hide: function () { - }, - set_value: function (value, id, column, node) { - value = value*100 - getInput(node).value = value; - }, - get_value: function (id, column, node) { - return getInput(node).value || 0; - }, - is_changed: function (value, id, column, node) { - var currentValue = this.get_value(id, column, node); - return Number(value) !== Number(currentValue); - }, - is_valid: function (value, id, column, node) { - return !isNaN(parseInt(value, 10)); - }, - focus: function (node) { - var input = getInput(node); - if (!input) { - return; - } - if (input.focus) { - input.focus(); - } - - if (input.select) { - input.select(); - } - } + show: function (id, column, config, placeholder) { + var min = config.min || 0, + max = config.max || 100; + + var html = "
"; + placeholder.innerHTML = html; + }, + hide: function () { + }, + set_value: function (value, id, column, node) { + value = value*100 + getInput(node).value = value; + }, + get_value: function (id, column, node) { + return getInput(node).value || 0; + }, + is_changed: function (value, id, column, node) { + var currentValue = this.get_value(id, column, node); + return Number(value) !== Number(currentValue); + }, + is_valid: function (value, id, column, node) { + return !isNaN(parseInt(value, 10)); + }, + focus: function (node) { + var input = getInput(node); + if (!input) { + return; + } + if (input.focus) { + input.focus(); + } + + if (input.select) { + input.select(); + } + } }; function initializationProject(){ - let projectId = getUrlParameter("proyek_id"); - if(projectId && projectId > 0){ - $.ajax({ - url: `${base_url}project/edit/${projectId}`, - type:"GET", - success: function (result) { - let data = result.data; - let projectName = data.nama; - $("#project-name-header").html(projectName); - }, - error: function (data) { - actionHappen = false; - } - }); - } + let projectId = getUrlParameter("proyek_id"); + if(projectId && projectId > 0){ + $.ajax({ + url: `${base_url}project/edit/${projectId}`, + type:"GET", + success: function (result) { + let data = result.data; + let projectName = data.nama; + // $("#project-name-header").html(projectName); + }, + error: function (data) { + actionHappen = false; + } + }); + } } function getSatuan(){ - $.ajax({ - url: `${base_url}satuan/list`, - type:"GET", - success: function (result) { - let satuanList = []; - let resSatuan = result.data || [] - resSatuan.map((val, index) => { - let satuan = { - key:val.id, - label:val.name, - text:val.name - } - satuanList.push(satuan) - }); - if(satuanList.length > 0){ - gantt.updateCollection("satuan", satuanList); - gantt.refreshData(); - gantt.render(); - } - }, - error: function (data) { - - } - }); + $.ajax({ + url: `${base_url}satuan/list`, + type:"GET", + success: function (result) { + let satuanList = []; + let resSatuan = result.data || [] + resSatuan.map((val, index) => { + let satuan = { + key:val.id, + label:val.name, + text:val.name + } + satuanList.push(satuan) + }); + if(satuanList.length > 0){ + gantt.updateCollection("satuan", satuanList); + gantt.refreshData(); + gantt.render(); + } + }, + error: function (data) { + + } + }); } function updateActivity(id) { - $.ajax({ - url: `${base_url}task/get-update/${id}`, - type:"GET", - success: function (result) { - let data = result.data; - gantt.getTask(id).assign_hr = data.assign_hr; - gantt.getTask(id).assign_material = data.assign_material; - gantt.getTask(id).assign_tools = data.assign_tools; - gantt.getTask(id).bobot_planning = data.bobot_planning; - gantt.getTask(id).rencana_biaya = data.rencana_biaya; - gantt.getTask(id).biaya_actual = data.biaya_actual; - gantt.getTask(id).progress = data.progress; - gantt.getTask(id).jobs_done = data.jobs_done ? data.jobs_done : 0; - gantt.updateTask(id); - actionHappen = false; - }, - error: function (data) { - actionHappen = false; - } - }); + $.ajax({ + url: `${base_url}task/get-update/${id}`, + type:"GET", + success: function (result) { + let data = result.data; + gantt.getTask(id).assign_hr = data.assign_hr; + gantt.getTask(id).assign_material = data.assign_material; + gantt.getTask(id).assign_tools = data.assign_tools; + gantt.getTask(id).bobot_planning = data.bobot_planning; + gantt.getTask(id).rencana_biaya = data.rencana_biaya; + gantt.getTask(id).biaya_actual = data.biaya_actual; + gantt.getTask(id).progress = data.progress; + gantt.getTask(id).jobs_done = data.jobs_done ? data.jobs_done : 0; + gantt.updateTask(id); + actionHappen = false; + }, + error: function (data) { + actionHappen = false; + } + }); } /* Fungsi format ribuan label*/ -function formatRupiah(n) { - var parts=n.toString().split("."); - return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".") + (parts[1] ? "," + parts[1] : ""); +function formatRupiah(n) { + var parts=n.toString().split("."); + return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".") + (parts[1] ? "," + parts[1] : ""); } /* Fungsi format ribuan inputan*/ function formatRibuanInput(angka, prefix) { - var number_string = angka.replace(/[^,\d]/g, '').toString(), - split = number_string.split(','), - sisa = split[0].length % 3, - rupiah = split[0].substr(0, sisa), - ribuan = split[0].substr(sisa).match(/\d{3}/gi); - - if (ribuan) { - separator = sisa ? '.' : ''; - rupiah += separator + ribuan.join('.'); - } - - rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah; - return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : ''); + var number_string = angka.replace(/[^,\d]/g, '').toString(), + split = number_string.split(','), + sisa = split[0].length % 3, + rupiah = split[0].substr(0, sisa), + ribuan = split[0].substr(sisa).match(/\d{3}/gi); + + if (ribuan) { + separator = sisa ? '.' : ''; + rupiah += separator + ribuan.join('.'); + } + + rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah; + return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : ''); } /* Fungsi replace titik, untuk save ke DB*/ function formatReplaceTitikRibuan(param){ - let myStr = param; - let newStr = myStr.replace(/\./g, ''); - return newStr; + let myStr = param; + let newStr = myStr.replace(/\./g, ''); + return newStr; } function formatDate(params){ - let today = new Date(params); - let yyyy = today.getFullYear(); - let mm = today.getMonth() + 1; // Months start at 0! - let dd = today.getDate(); + let today = new Date(params); + let yyyy = today.getFullYear(); + let mm = today.getMonth() + 1; // Months start at 0! + let dd = today.getDate(); - if (dd < 10) dd = '0' + dd; - if (mm < 10) mm = '0' + mm; + if (dd < 10) dd = '0' + dd; + if (mm < 10) mm = '0' + mm; - today = dd + '/' + mm + '/' + yyyy; - return today; + today = dd + '/' + mm + '/' + yyyy; + return today; } -function roundToTwo(num) { - return +(Math.round(num + "e+2") + "e-2"); +function roundToTwo(num) { + return +(Math.round(num + "e+2") + "e-2"); } function initialProperty() { - $.ajax({ - url: `${base_url}user-to-version-gantt/get-by-gantt/${ganttId}`, - type:"GET", - success: function (result) { - let data = result.data; - if(data.status && data.status=="not have"){ - toggleCollapseTasks(); - }else{ - if(data.id){ - userToVersionGanttId = data.id - } - - if(data.critical_path){ - gantt.config.highlight_critical_path = true; - $("#critalPathBox").prop("checked", true); - } - - if(data.auto_schedule){ - gantt.config.auto_schedule = true; - $("#autoSchedule").prop("checked", true); - } - - if(data.zoom){ - gantt.ext.zoom.setLevel(data.zoom); - $('input[value="'+data.zoom+'"]').prop("checked", true); - } - - if(data.task_open){ - gantt.eachTask(function(task){ - task.$open = true; - }); - toggleTasks = "Collapse"; - $("#gantt_toggle_task_btn").prop('title', 'Collapse Activities'); - $("#gantt_toggle_task_btn").children().removeClass('fa-expand-alt'); - $("#gantt_toggle_task_btn").children().addClass('fa-compress-alt'); - }else{ - toggleCollapseTasks(); - } - - gantt.render(); - } - }, - error: function (data) { - - } - }); + $.ajax({ + url: `${base_url}user-to-version-gantt/get-by-gantt/${ganttId}`, + type:"GET", + success: function (result) { + let data = result.data; + if(data.status && data.status=="not have"){ + toggleCollapseTasks(); + }else{ + if(data.id){ + userToVersionGanttId = data.id + } + + if(data.critical_path){ + gantt.config.highlight_critical_path = true; + $("#critalPathBox").prop("checked", true); + } + + if(data.auto_schedule){ + gantt.config.auto_schedule = true; + $("#autoSchedule").prop("checked", true); + } + + if(data.zoom){ + gantt.ext.zoom.setLevel(data.zoom); + $('input[value="'+data.zoom+'"]').prop("checked", true); + } + + if(data.task_open){ + gantt.eachTask(function(task){ + task.$open = true; + }); + toggleTasks = "Collapse"; + $("#gantt_toggle_task_btn").prop('title', 'Collapse Activities'); + $("#gantt_toggle_task_btn").children().removeClass('fa-expand-alt'); + $("#gantt_toggle_task_btn").children().addClass('fa-compress-alt'); + }else{ + toggleCollapseTasks(); + } + + gantt.render(); + } + }, + error: function (data) { + + } + }); } function initializationColumn() { - $.ajax({ - url: `${base_url}gantt-show-hide/get-by-gantt/${ganttId}`, - type:"GET", - success: function (result) { - let data = result.data; - if(data.status=="not yet have"){ - addShowHideColumn(); - }else if(data.status=="not have access"){ - - }else{ - setUpForShowHideColumn(data); - } - }, - error: function (data) { - - } - }); + $.ajax({ + url: `${base_url}gantt-show-hide/get-by-gantt/${ganttId}`, + type:"GET", + success: function (result) { + let data = result.data; + if(data.status=="not yet have"){ + addShowHideColumn(); + }else if(data.status=="not have access"){ + + }else{ + setUpForShowHideColumn(data); + } + }, + error: function (data) { + + } + }); } $(document).ready(function () { - $("#critalPathBox").on("change", function (){ - let checked = $(this).is(":checked"); - if(checked){ - gantt.config.highlight_critical_path = true; - updateProperty({critical_path:true}) - }else{ - gantt.config.highlight_critical_path = false; - updateProperty({critical_path:false}) - } - gantt.render(); - }); - - $("#autoSchedule").on("change", function (){ - let checked = $(this).is(":checked"); - if(checked){ - gantt.config.auto_schedule = true; - updateProperty({auto_schedule:true}) - }else{ - gantt.config.auto_schedule = false; - updateProperty({auto_schedule:false}) - } - gantt.render(); - }); + $("#critalPathBox").on("change", function (){ + let checked = $(this).is(":checked"); + if(checked){ + gantt.config.highlight_critical_path = true; + updateProperty({critical_path:true}) + }else{ + gantt.config.highlight_critical_path = false; + updateProperty({critical_path:false}) + } + gantt.render(); + }); + + $("#autoSchedule").on("change", function (){ + let checked = $(this).is(":checked"); + if(checked){ + gantt.config.auto_schedule = true; + updateProperty({auto_schedule:true}) + }else{ + gantt.config.auto_schedule = false; + updateProperty({auto_schedule:false}) + } + gantt.render(); + }); }); function linkLagEditor(){ - - function endPopup(){ - modal = null; - editLinkId = null; - } - function cancelEditLink(){ - endPopup() - } - - function deleteLink(){ - gantt.deleteLink(editLinkId); - endPopup() - } - - function saveLink(){ - var link = gantt.getLink(editLinkId); - - var lagValue = modal.querySelector(".lag-input").value; - if(!isNaN(parseInt(lagValue, 10))){ - link.lag = parseInt(lagValue, 10); - } - - gantt.updateLink(link.id); - if(gantt.autoSchedule){ - gantt.autoSchedule(link.source); - } - endPopup(); - } - - - - var modal; - var editLinkId; - gantt.attachEvent("onLinkDblClick", function(id,e){ - editLinkId = id; - var link = gantt.getLink(id); - var linkTitle; - switch(link.type){ - case gantt.config.links.finish_to_start: - linkTitle = "FS"; - break; - case gantt.config.links.finish_to_finish: - linkTitle = "FF"; - break; - case gantt.config.links.start_to_start: - linkTitle = "SS"; - break; - case gantt.config.links.start_to_finish: - linkTitle = "SF"; - break; - } - - linkTitle += " " + gantt.getTask(link.source).text + " -> " + gantt.getTask(link.target).text; - - modal = gantt.modalbox({ - title: linkTitle, - text: "
" + - "" + - "
", - buttons: [ - {label:"Save", css:"link-save-btn", value:"save"}, - {label:"Cancel", css:"link-cancel-btn", value:"cancel"}, - {label:"Delete", css:"link-delete-btn", value:"delete"} - ], - width: "500px", - type: "popup-css-class-here", - callback: function(result){ - switch(result){ - case "save": - saveLink(); - break; - case "cancel": - cancelEditLink(); - break; - - case "delete": - deleteLink(); - break; - } - } - }); - - modal.querySelector(".lag-input").value = link.lag || 0; - - //any custom logic here - return false; - }); - + + function endPopup(){ + modal = null; + editLinkId = null; + } + function cancelEditLink(){ + endPopup() + } + + function deleteLink(){ + gantt.deleteLink(editLinkId); + endPopup() + } + + function saveLink(){ + var link = gantt.getLink(editLinkId); + + var lagValue = modal.querySelector(".lag-input").value; + if(!isNaN(parseInt(lagValue, 10))){ + link.lag = parseInt(lagValue, 10); + } + + gantt.updateLink(link.id); + if(gantt.autoSchedule){ + gantt.autoSchedule(link.source); + } + endPopup(); + } + + + + var modal; + var editLinkId; + gantt.attachEvent("onLinkDblClick", function(id,e){ + editLinkId = id; + var link = gantt.getLink(id); + var linkTitle; + switch(link.type){ + case gantt.config.links.finish_to_start: + linkTitle = "FS"; + break; + case gantt.config.links.finish_to_finish: + linkTitle = "FF"; + break; + case gantt.config.links.start_to_start: + linkTitle = "SS"; + break; + case gantt.config.links.start_to_finish: + linkTitle = "SF"; + break; + } + + linkTitle += " " + gantt.getTask(link.source).text + " -> " + gantt.getTask(link.target).text; + + modal = gantt.modalbox({ + title: linkTitle, + text: "
" + + "" + + "
", + buttons: [ + {label:"Save", css:"link-save-btn", value:"save"}, + {label:"Cancel", css:"link-cancel-btn", value:"cancel"}, + {label:"Delete", css:"link-delete-btn", value:"delete"} + ], + width: "500px", + type: "popup-css-class-here", + callback: function(result){ + switch(result){ + case "save": + saveLink(); + break; + case "cancel": + cancelEditLink(); + break; + + case "delete": + deleteLink(); + break; + } + } + }); + + modal.querySelector(".lag-input").value = link.lag || 0; + + //any custom logic here + return false; + }); + } function addShowHideColumn() { - let allColumn = []; - allColumns.forEach(function(column){ - allColumn.push(column.name); - }); - submitShowHideColumn(allColumn); + let allColumn = []; + allColumns.forEach(function(column){ + allColumn.push(column.name); + }); + submitShowHideColumn(allColumn); } function submitShowHideColumn(allColumn) { - let payload = { - version_gantt_id:ganttId, - columns:allColumn - } - - $.ajax({ - data: JSON.stringify(payload), - url: `${base_url}gantt-show-hide/add`, - type: "POST", - processData: false, - contentType: false, - success: function (data) { - - }, - error: function (data) { - - } - }); + let payload = { + version_gantt_id:ganttId, + columns:allColumn + } + + $.ajax({ + data: JSON.stringify(payload), + url: `${base_url}gantt-show-hide/add`, + type: "POST", + processData: false, + contentType: false, + success: function (data) { + + }, + error: function (data) { + + } + }); } function setUpForShowHideColumn(data) { - let columns = data || [] + let columns = data || [] - let configColumn = {} + let configColumn = {} - columns.map((val, index) => { - configColumn[val.column_name] = val.show - }); + columns.map((val, index) => { + configColumn[val.column_name] = val.show + }); - gantt.config.columns = createColumnsConfig(configColumn); + gantt.config.columns = createColumnsConfig(configColumn); - gantt.render(); + gantt.render(); } function updateShowHideColumn(data) { - let payload = { - columns:data - } - - $.ajax({ - data: JSON.stringify(payload), - url: `${base_url}gantt-show-hide/update/${ganttId}`, - type: "POST", - processData: false, - contentType: false, - success: function (data) { - console.log(data); - }, - error: function (data) { - console.log(data); - } - }); + let payload = { + columns:data + } + + $.ajax({ + data: JSON.stringify(payload), + url: `${base_url}gantt-show-hide/update/${ganttId}`, + type: "POST", + processData: false, + contentType: false, + success: function (data) { + console.log(data); + }, + error: function (data) { + console.log(data); + } + }); } function updateProperty(payload){ - if(userToVersionGanttId > 0 && readOnly && parseInt(readOnly)==0){ - $.ajax({ - data: JSON.stringify(payload), - url: `${base_url}user-to-version-gantt/update/${userToVersionGanttId}`, - type: "PUT", - processData: false, - contentType: false, - success: function (data) { - }, - error: function (data) { - } - }); - } + if(userToVersionGanttId > 0 && readOnly && parseInt(readOnly)==0){ + $.ajax({ + data: JSON.stringify(payload), + url: `${base_url}user-to-version-gantt/update/${userToVersionGanttId}`, + type: "PUT", + processData: false, + contentType: false, + success: function (data) { + }, + error: function (data) { + } + }); + } } function costPlanningChange(e){ - let value = e.value; - value = replaceAll(value, ".", "") - value = replaceAll(value, ",", ".") - let newValue = formatRupiah(value); - $(e).val(newValue) + let value = e.value; + value = replaceAll(value, ".", "") + value = replaceAll(value, ",", ".") + let newValue = formatRupiah(value); + $(e).val(newValue) } function escapeRegExp(string) { - return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } function replaceAll(str, find, replace) { - if(str){ - return str.replace(new RegExp(escapeRegExp(find), 'g'), replace); - } - return str -} \ No newline at end of file + if(str){ + return str.replace(new RegExp(escapeRegExp(find), 'g'), replace); + } + return str +} diff --git a/src/function/ganttConfig.js b/src/function/ganttConfig.js index dfd728a..991c35a 100644 --- a/src/function/ganttConfig.js +++ b/src/function/ganttConfig.js @@ -10,69 +10,69 @@ let actionHappen = false; let activityName = ""; let token = getUrlParameter("token"); if (!token || token == "") { - token = `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpLWl1Lm9zcHJvLmlkXC9hcGlcL2xvZ2luIiwiaWF0IjoxNjQ2ODA3OTA4LCJleHAiOjE2NDY4OTQzMDgsIm5iZiI6MTY0NjgwNzkwOCwianRpIjoiNmdtcEx3cjlob1JFZ0hSNSIsInN1YiI6MSwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyJ9.1xB2rvTJ6Edf7l_8jRPOmoMYnf8f59Rd8jJghJ39xps`; + token = `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpLWl1Lm9zcHJvLmlkXC9hcGlcL2xvZ2luIiwiaWF0IjoxNjQ2ODA3OTA4LCJleHAiOjE2NDY4OTQzMDgsIm5iZiI6MTY0NjgwNzkwOCwianRpIjoiNmdtcEx3cjlob1JFZ0hSNSIsInN1YiI6MSwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyJ9.1xB2rvTJ6Edf7l_8jRPOmoMYnf8f59Rd8jJghJ39xps`; } const axiosInstance = axios.create({ - headers: { - "Authorization": `Bearer ${token}`, - "Content-type": "application/json" - } + headers: { + "Authorization": `Bearer ${token}`, + "Content-type": "application/json" + } }); axiosInstance.interceptors.request.use(async (config) => { - try{ - $("body").addClass("loading"); - } - catch(e) - { - $("body").removeClass("loading"); - alert('Error request' + e); - } - - return config; + try{ + $("body").addClass("loading"); + } + catch(e) + { + $("body").removeClass("loading"); + alert('Error request' + e); + } + + return config; }); axiosInstance.interceptors.response.use(async (config) => { - try { - $("body").removeClass("loading"); - } - catch(e) - { - $("body").removeClass("loading"); - alert('Error response' + e); - } - - return config; + try { + $("body").removeClass("loading"); + } + catch(e) + { + $("body").removeClass("loading"); + alert('Error response' + e); + } + + return config; }); const HEADER = { - headers: - { - 'Authorization': `Bearer ${token}`, - "Content-type": `application/json` - } + headers: + { + 'Authorization': `Bearer ${token}`, + "Content-type": `application/json` + } }; $.ajaxSetup({ - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${token}` - } + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${token}` + } }); $(document).on({ - ajaxStart: function(){ - $("body").addClass("loading"); - }, - ajaxStop: function(){ - $("body").removeClass("loading"); - } + ajaxStart: function(){ + $("body").addClass("loading"); + }, + ajaxStop: function(){ + $("body").removeClass("loading"); + } }); gantt.plugins({ - drag_timeline: true, - critical_path: true , - auto_scheduling: true + drag_timeline: true, + critical_path: true , + auto_scheduling: true }); // gantt.templates.parse_date = function (date) { @@ -86,48 +86,48 @@ 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/`; - // console.log("cek base url 2",base_url) + base_url = `https://api-iu.ospro.id/api/`; + // console.log("cek base url 2",base_url) }else{ - base_url = base_url+"/"; + base_url = base_url+"/"; } // console.log("cek base url 3",base_url) // gantt plugins gantt.plugins({ - marker: true, + marker: true, fullscreen: 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()) + start_date: new Date(), + css: "today", + text: "Today", + title: dateToStr(new Date()) }); gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...} var colHeader = '
', - colContent = function (task) { - var hasChild = gantt.hasChild(task.id); - var optionsContent = '
'; - optionsContent += ' '; - optionsContent += ' '; - optionsContent += ' '; - optionsContent += !hasChild ? ' ' : ''; - optionsContent += !hasChild ? ' ' : ''; - optionsContent += !hasChild ? ' ' : ''; - optionsContent += '
'; - return (optionsContent); - }; + colContent = function (task) { + var hasChild = gantt.hasChild(task.id); + var optionsContent = '
'; + optionsContent += ' '; + optionsContent += ' '; + optionsContent += ' '; + optionsContent += !hasChild ? ' ' : ''; + optionsContent += !hasChild ? ' ' : ''; + optionsContent += !hasChild ? ' ' : ''; + optionsContent += '
'; + return (optionsContent); + }; 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" + enter: "day", + store: "day", + format: "auto" }); var progressEditor = {type: "progressCustom", map_to: "progress", min:0, max: 100}; @@ -135,280 +135,280 @@ var costPlanningEditor = {type: "costPlanningEditor", map_to: "rencana_biaya", m 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 ""; + 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 ""; } const editor = { - text: { type: "text", map_to: "text" }, - kode_sortname: { type: "text", map_to: "kode_sortname" }, - start_date: { type: "date", map_to: "start_date", min: new Date(2018, 0, 1) }, - end_date: { type: "date", map_to: "end_date", min: new Date(2018, 0, 1) }, - duration: { type: "duration", map_to: "duration", min: 0, max: 365, formatter: formatter }, - cost: { type: "number", map_to: "rencana_biaya", min: 0 }, - costActual: { type: "number", map_to: "biaya_actual", min: 0 }, - status: { type: "text", map_to: "status" }, - job_count: { type: "number", map_to: "jumlah_pekerjaan", min: 0 }, - job_unit: { type: "text", map_to: "satuan", min: 0 }, - bobot_planning:{ type: "number", map_to: "bobot_planning", min: 0 }, - human_resource: (`
-     -
`), - satuan:{type: "select", map_to: "satuan_id", options:gantt.serverList("satuan")} + text: { type: "text", map_to: "text" }, + kode_sortname: { type: "text", map_to: "kode_sortname" }, + start_date: { type: "date", map_to: "start_date", min: new Date(2018, 0, 1) }, + end_date: { type: "date", map_to: "end_date", min: new Date(2018, 0, 1) }, + duration: { type: "duration", map_to: "duration", min: 0, max: 365, formatter: formatter }, + cost: { type: "number", map_to: "rencana_biaya", min: 0 }, + costActual: { type: "number", map_to: "biaya_actual", min: 0 }, + status: { type: "text", map_to: "status" }, + job_count: { type: "number", map_to: "jumlah_pekerjaan", min: 0 }, + job_unit: { type: "text", map_to: "satuan", min: 0 }, + bobot_planning:{ type: "number", map_to: "bobot_planning", min: 0 }, + human_resource: (`
+     +
`), + satuan:{type: "select", map_to: "satuan_id", options:gantt.serverList("satuan")} } function addWithoutParent() { - var task = gantt.getTaskByIndex(0); + var task = gantt.getTaskByIndex(0); - let start_date = new Date(); + let start_date = new Date(); - if (task) { - start_date = task.start_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 - }); + var taskId = gantt.addTask({ + id: no, + text: `New Activity`, + start_date: start_date, + biaya: 10000, + awaw: "wadad", + duration: 7 + }); - gantt.selectTask(taskId); + gantt.selectTask(taskId); - no = no + 1; + no = no + 1; } function addWithParent(id) { - var task = gantt.getTask(id); + var task = gantt.getTask(id); - let start_date = new Date(); + let start_date = new Date(); - if (task) { - start_date = task.start_date; - } + if (task) { + start_date = task.start_date; + } - gantt.addTask({ - id: no, - text: `New Activity`, - start_date: start_date, - duration: task.duration - }, id); + gantt.addTask({ + id: no, + text: `New Activity`, + start_date: start_date, + duration: task.duration + }, id); - no = no + 1; + 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; - } + 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 = []; + var newColumns = []; - allColumns.forEach(function(column){ - // restore the action - if(selectedColumns[column.name]){ - // if (column.name === 'action') { - // newColumns.push(column); - // } - newColumns.push(column); - } - }); + allColumns.forEach(function(column){ + // restore the action + if(selectedColumns[column.name]){ + // if (column.name === 'action') { + // newColumns.push(column); + // } + newColumns.push(column); + } + }); - return newColumns; + return newColumns; } var allColumns = [ - { name: "action", label: colHeader, align: "left", min_width: 115, template: colContent, resize: true }, - { name: "kode_sortname", label: "Kode / Sortname",align: "center", min_width: 120, editor: editor.kode_sortname, resize: true }, - { name: "text", label: "Activity", tree: true, min_width: 150, editor: editor.text, resize: true }, - { name: "start_date", label: "Start Date", align: "center", min_width: 80, editor: editor.start_date, resize: true }, - { name: "end_date", label: "Finish Date", align: "center", min_width: 80, editor: editor.end_date, resize: true }, - { name: "duration", label: "Duration", align: "center", min_width: 50, editor: editor.duration, resize: true }, - { name: "rencana_biaya", label: "Cost Planning", align: "center", min_width: 100, editor: costPlanningEditor, 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, editor: editor.costActual, resize: true, 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, resize: true, 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 = `Unassigned`; - }else{ - if(assign_hr.length==1){ - html = `${assign_hr[0]}`; - }else{ - assign_hr.forEach(function(val, index) { - html += `${val.substr(0, 1)}`; - }); - } - } - return `
- ${html} -
` - } - }, - { 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 = `Unassigned`; - }else{ - if(assign_material.length > 0 ){ - html = `Assigned`; - } - } - return `
- ${html} -
` - } }, - { name: "tools", label: "Tools", align: "center", min_width: 150, resize: true, template: function (text) { - if(text.type=="project" || text.type=="milestone"){ - return; - } - let html = ``; - var assign_tools = text.assign_tools - - if(!assign_tools || !assign_tools.length){ - // html = `Unassigned`; - }else{ - if(assign_tools.length > 0 ){ - html = `Assigned`; - } - } - return `
- ${html} -
` - } }, - // { name: "status", label: "Status", align: "center", editor: editor.status, resize: true }, - { 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); - // console.log("bobot_planning", bobot_planning); - return roundToTwo(bobot_planning); - } }, - { name: "progress", label: "Actual Progress (%)", align: "center", editor: progressEditor, 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, editor:editor.job_count }, - { 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 `
- ${html} -
` - } }, - { name: "satuan", label: "UOM", align: "center", min_width: 100, resize: true, editor:editor.satuan, template: satuanLabel }, - { - name: "predecessor", label: "Predecessor", align: "center", min_width: 100, template: function (text) { - let links = text.$target - let dataRes = ``; - let no = 0; - if (links.length > 0) { - links.map((val, index) => { - if (no > 0) { - dataRes += `, `; - } - let link = gantt.getLink(val); - let type = getCodeLinkByType(link.type); - let source = link.source; - var wbs_code = gantt.getWBSCode(gantt.getTask(source)); - dataRes += wbs_code + type; - no = no + 1; - }); - } - return dataRes; - }, resize: true - }, - { name: "updated_by", label: "Last Updated By", align: "center", min_width: 100, resize: true } + { name: "action", label: colHeader, align: "left", min_width: 115, template: colContent, resize: true }, + { name: "kode_sortname", label: "Kode / Sortname",align: "center", min_width: 120, editor: editor.kode_sortname, resize: true }, + { name: "text", label: "Activity", tree: true, min_width: 150, editor: editor.text, resize: true }, + { name: "start_date", label: "Start Date", align: "center", min_width: 80, editor: editor.start_date, resize: true }, + { name: "end_date", label: "Finish Date", align: "center", min_width: 80, editor: editor.end_date, resize: true }, + { name: "duration", label: "Duration", align: "center", min_width: 50, editor: editor.duration, 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, resize: true, 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, resize: true, 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 = `Unassigned`; + }else{ + if(assign_hr.length==1){ + html = `${assign_hr[0]}`; + }else{ + assign_hr.forEach(function(val, index) { + html += `${val.substr(0, 1)}`; + }); + } + } + return `
+ ${html} +
` + } + }, + { 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 = `Unassigned`; + }else{ + if(assign_material.length > 0 ){ + html = `Assigned`; + } + } + return `
+ ${html} +
` + } }, + { name: "tools", label: "Tools", align: "center", min_width: 150, resize: true, template: function (text) { + if(text.type=="project" || text.type=="milestone"){ + return; + } + let html = ``; + var assign_tools = text.assign_tools + + if(!assign_tools || !assign_tools.length){ + // html = `Unassigned`; + }else{ + if(assign_tools.length > 0 ){ + html = `Assigned`; + } + } + return `
+ ${html} +
` + } }, + // { name: "status", label: "Status", align: "center", editor: editor.status, resize: true }, + { 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); + // console.log("bobot_planning", bobot_planning); + return roundToTwo(bobot_planning); + } }, + { name: "progress", label: "Actual Progress (%)", align: "center", editor: progressEditor, 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, editor:editor.job_count }, + { 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 `
+ ${html} +
` + } }, + { name: "satuan", label: "UOM", align: "center", min_width: 100, resize: true, editor:editor.satuan, template: satuanLabel }, + { + name: "predecessor", label: "Predecessor", align: "center", min_width: 100, template: function (text) { + let links = text.$target + let dataRes = ``; + let no = 0; + if (links.length > 0) { + links.map((val, index) => { + if (no > 0) { + dataRes += `, `; + } + let link = gantt.getLink(val); + let type = getCodeLinkByType(link.type); + let source = link.source; + var wbs_code = gantt.getWBSCode(gantt.getTask(source)); + dataRes += wbs_code + type; + no = no + 1; + }); + } + return dataRes; + }, resize: true + }, + { name: "updated_by", label: "Last Updated By", align: "center", min_width: 100, resize: true } ]; // set default to show (true) , hide (false) gantt.config.columns = createColumnsConfig({ - action: true, - kode_sortname: true, - text: true, - // planned_start: true, - // planned_end: true, - start_date: true, - end_date: true, - duration: true, - rencana_biaya: true, - cost_actual: true, - assign_hr: true, - material: true, - tools: true, - bobot_planning: true, - progress: true, - progress_actual: true, - jumlah_pekerjaan: true, - jobs_done:true, - satuan: true, - predecessor: true, - updated_by: true + action: true, + kode_sortname: true, + text: true, + // planned_start: true, + // planned_end: true, + start_date: true, + end_date: true, + duration: true, + rencana_biaya: true, + cost_actual: true, + assign_hr: true, + material: true, + tools: true, + bobot_planning: true, + progress: true, + progress_actual: true, + jumlah_pekerjaan: true, + jobs_done:true, + satuan: true, + predecessor: true, + updated_by: true }) gantt.config.reorder_grid_columns = true; @@ -443,90 +443,93 @@ gantt.config.task_height = 20; // gantt.locale.labels.section_baseline = "Planned"; // adding baseline display 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; - } - } + 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(' '); - } + 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 = "Overdue: " + overdue + " days"; - return text; - } - } + 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 = "Overdue: " + overdue + " days"; + 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; + 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 = 30; 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: 1 }, - { - rows: [ - { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" }, - { view: "scrollbar", id: "scrollHor", group: "horizontal" } - ] - }, - { view: "scrollbar", id: "scrollVer" } - ] + 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" } + ] + }, + ] }; + // custom folder, file, collapse icons on activity gantt.templates.grid_folder = function (item) { - // return "
"; - return ""; + // return "
"; + return ""; }; gantt.templates.grid_file = function (item) { - // return "
"; - return ""; + // return "
"; + return ""; }; // Set workdays @@ -534,117 +537,115 @@ 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 ""; + 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 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 "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate) + " " + year; - // }}, - {unit: "week", step: 1, format: function (date) { - var weekNum = gantt.date.date_to_str("%W")(date); - return "W#" + weekNum; - }}, - {unit: "month", format: "%F, %Y"}, - // {unit: "day", step: 1, format: "%j %D"} - ] - }, - { - name:"month", - scale_height: 50, - min_column_width:120, - scales:[ - {unit: "month", format: "%F, %Y"}, - // {unit: "week", format: "Week #%W"}, - // {unit: "day", step: 1, format: "%j %D"} - ] - }, - // { - // name:"quarter", - // height: 50, - // min_column_width:90, - // scales:[ - // {unit: "month", step: 1, format: "%M"}, - // { - // unit: "quarter", step: 1, format: function (date) { - // var dateToStr = gantt.date.date_to_str("%M"); - // var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day"); - // return dateToStr(date) + " - " + dateToStr(endDate); - // } - // } - // ] - // }, - // { - // name:"year", - // scale_height: 50, - // min_column_width: 30, - // scales:[ - // {unit: "year", step: 1, format: "%Y"} - // ] - // } - ] + 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 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 "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate) + " " + year; + // }}, + {unit: "week", step: 1, format: function (date) { + var weekNum = gantt.date.date_to_str("%W")(date); + return "W#" + weekNum; + }}, + {unit: "month", format: "%F, %Y"}, + // {unit: "day", step: 1, format: "%j %D"} + ] + }, + { + name:"month", + scale_height: 50, + min_column_width:120, + scales:[ + {unit: "month", format: "%F, %Y"}, + // {unit: "week", format: "Week #%W"}, + // {unit: "day", step: 1, format: "%j %D"} + ] + }, + // { + // name:"quarter", + // height: 50, + // min_column_width:90, + // scales:[ + // {unit: "month", step: 1, format: "%M"}, + // { + // unit: "quarter", step: 1, format: function (date) { + // var dateToStr = gantt.date.date_to_str("%M"); + // var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day"); + // return dateToStr(date) + " - " + dateToStr(endDate); + // } + // } + // ] + // }, + // { + // name:"year", + // scale_height: 50, + // min_column_width: 30, + // scales:[ + // {unit: "year", step: 1, format: "%Y"} + // ] + // } + ] }; gantt.ext.zoom.init(zoomConfig); gantt.ext.zoom.setLevel("month"); // trigger when zoomIn and zoomOut clicked gantt.ext.zoom.attachEvent("onAfterZoom", function(level, config){ - document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true; + document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true; }) function zoomIn(){ - gantt.ext.zoom.zoomIn(); + gantt.ext.zoom.zoomIn(); } function zoomOut(){ - gantt.ext.zoom.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); - }; + radios[i].onclick = function (event) { + updateProperty({zoom:event.target.value}); + gantt.ext.zoom.setLevel(event.target.value); + }; } // end Zoom Scale function -gantt.config.scroll_size = 100; - // gantt initialization $(document).ready(function () { - initializationProject(); - getSatuan(); - gantt.init("gantt_here"); - linkLagEditor(); - setTimeout(initializationColumn, 4500); - setTimeout(initialProperty, 4500); + initializationProject(); + getSatuan(); + gantt.init("gantt_here"); + linkLagEditor(); + setTimeout(initializationColumn, 4500); + setTimeout(initialProperty, 4500); });