ordo
/
surveyor_indonesia_gantt
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

improve ui&ux

pull/1/head
Muhammad Sulaiman Yusuf 2 years ago
parent
d6722401b9
commit
eaeb0a7be4
3 changed files with 903 additions and 902 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/assets/css/custom.css
  2. 870
      src/function/function.js
  3. 923
      src/function/ganttConfig.js

12
src/assets/css/custom.css
Unescape View File

@ -11,7 +11,7 @@
/* Turn off scrollbar when body element has the loading class */ /* Turn off scrollbar when body element has the loading class */
body.loading{ body.loading{
overflow: hidden; overflow: hidden;
} }
/* Make spinner image visible when body element has the loading class */ /* Make spinner image visible when body element has the loading class */
body.loading .loading-overlay{ body.loading .loading-overlay{
@ -19,10 +19,10 @@ body.loading .loading-overlay{
} }
.container-header { .container-header {
background-color: #3DB9D3; background-color: #3DB9D380;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 5px; padding: 2px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -165,7 +165,7 @@ table.dataTable th {
font-size: 14px; font-size: 14px;
} }
/* .holidays{ /* .holidays{
background: #f4f7f4 !important; background: #f4f7f4 !important;
} */ } */
@ -235,7 +235,7 @@ table.dataTable th {
} }
.gantt_task_line, .baseline { .gantt_task_line, .baseline {
border-radius:4px; border-radius:4px;
} }
#map_activity { #map_activity {
@ -243,4 +243,4 @@ table.dataTable th {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
width: 100vw; width: 100vw;
} }

870
src/function/function.js
Unescape View File

@ -1,524 +1,524 @@
function getUrlParameter(sParam) { function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1), var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'), sURLVariables = sPageURL.split('&'),
sParameterName, sParameterName,
i; i;
for (i = 0; i < sURLVariables.length; i++) { for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('='); sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) { if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]); return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
} }
} }
return false; return false;
}; };
function getCodeLinkByType(type) function getCodeLinkByType(type)
{ {
type = parseInt(type); type = parseInt(type);
switch (type) { switch (type) {
case 1: case 1:
return "SS"; return "SS";
break; break;
case 2: case 2:
return "FF"; return "FF";
break; break;
case 3: case 3:
return "SF"; return "SF";
break; break;
default: default:
return "FS"; return "FS";
break; break;
} }
} }
var getInput = function(node){ var getInput = function(node){
return node.querySelector("input"); return node.querySelector("input");
}; };
gantt.config.editor_types.costPlanningEditor = { gantt.config.editor_types.costPlanningEditor = {
show: function (id, column, config, placeholder) { show: function (id, column, config, placeholder) {
var min = config.min || 0 var min = config.min || 0
var html = "<div><input onkeyup='costPlanningChange(this)' type='text' min='" + min + var html = "<div><input onkeyup='costPlanningChange(this)' type='text' min='" + min +
"' name='" + column.name + "'></div>"; "' name='" + column.name + "'></div>";
placeholder.innerHTML = html; placeholder.innerHTML = html;
}, },
hide: function () { hide: function () {
}, },
set_value: function (value, id, column, node) { set_value: function (value, id, column, node) {
getInput(node).value = value; getInput(node).value = value;
}, },
get_value: function (id, column, node) { get_value: function (id, column, node) {
return getInput(node).value || 0; return getInput(node).value || 0;
}, },
is_changed: function (value, id, column, node) { is_changed: function (value, id, column, node) {
var currentValue = this.get_value(id, column, node); var currentValue = this.get_value(id, column, node);
return value !== currentValue; return value !== currentValue;
}, },
is_valid: function (value, id, column, node) { is_valid: function (value, id, column, node) {
return true; return true;
}, },
focus: function (node) { focus: function (node) {
var input = getInput(node); var input = getInput(node);
if (!input) { if (!input) {
return; return;
} }
if (input.focus) { if (input.focus) {
input.focus(); input.focus();
} }
if (input.select) { if (input.select) {
input.select(); input.select();
} }
} }
}; };
gantt.config.editor_types.progressCustom = { gantt.config.editor_types.progressCustom = {
show: function (id, column, config, placeholder) { show: function (id, column, config, placeholder) {
var min = config.min || 0, var min = config.min || 0,
max = config.max || 100; max = config.max || 100;
var html = "<div><input type='number' min='" + min + var html = "<div><input type='number' min='" + min +
"' max='" + max + "' name='" + column.name + "'></div>"; "' max='" + max + "' name='" + column.name + "'></div>";
placeholder.innerHTML = html; placeholder.innerHTML = html;
}, },
hide: function () { hide: function () {
}, },
set_value: function (value, id, column, node) { set_value: function (value, id, column, node) {
value = value*100 value = value*100
getInput(node).value = value; getInput(node).value = value;
}, },
get_value: function (id, column, node) { get_value: function (id, column, node) {
return getInput(node).value || 0; return getInput(node).value || 0;
}, },
is_changed: function (value, id, column, node) { is_changed: function (value, id, column, node) {
var currentValue = this.get_value(id, column, node); var currentValue = this.get_value(id, column, node);
return Number(value) !== Number(currentValue); return Number(value) !== Number(currentValue);
}, },
is_valid: function (value, id, column, node) { is_valid: function (value, id, column, node) {
return !isNaN(parseInt(value, 10)); return !isNaN(parseInt(value, 10));
}, },
focus: function (node) { focus: function (node) {
var input = getInput(node); var input = getInput(node);
if (!input) { if (!input) {
return; return;
} }
if (input.focus) { if (input.focus) {
input.focus(); input.focus();
} }
if (input.select) { if (input.select) {
input.select(); input.select();
} }
} }
}; };
function initializationProject(){ function initializationProject(){
let projectId = getUrlParameter("proyek_id"); let projectId = getUrlParameter("proyek_id");
if(projectId && projectId > 0){ if(projectId && projectId > 0){
$.ajax({ $.ajax({
url: `${base_url}project/edit/${projectId}`, url: `${base_url}project/edit/${projectId}`,
type:"GET", type:"GET",
success: function (result) { success: function (result) {
let data = result.data; let data = result.data;
let projectName = data.nama; let projectName = data.nama;
$("#project-name-header").html(projectName); // $("#project-name-header").html(projectName);
}, },
error: function (data) { error: function (data) {
actionHappen = false; actionHappen = false;
} }
}); });
} }
} }
function getSatuan(){ function getSatuan(){
$.ajax({ $.ajax({
url: `${base_url}satuan/list`, url: `${base_url}satuan/list`,
type:"GET", type:"GET",
success: function (result) { success: function (result) {
let satuanList = []; let satuanList = [];
let resSatuan = result.data || [] let resSatuan = result.data || []
resSatuan.map((val, index) => { resSatuan.map((val, index) => {
let satuan = { let satuan = {
key:val.id, key:val.id,
label:val.name, label:val.name,
text:val.name text:val.name
} }
satuanList.push(satuan) satuanList.push(satuan)
}); });
if(satuanList.length > 0){ if(satuanList.length > 0){
gantt.updateCollection("satuan", satuanList); gantt.updateCollection("satuan", satuanList);
gantt.refreshData(); gantt.refreshData();
gantt.render(); gantt.render();
} }
}, },
error: function (data) { error: function (data) {
} }
}); });
} }
function updateActivity(id) function updateActivity(id)
{ {
$.ajax({ $.ajax({
url: `${base_url}task/get-update/${id}`, url: `${base_url}task/get-update/${id}`,
type:"GET", type:"GET",
success: function (result) { success: function (result) {
let data = result.data; let data = result.data;
gantt.getTask(id).assign_hr = data.assign_hr; gantt.getTask(id).assign_hr = data.assign_hr;
gantt.getTask(id).assign_material = data.assign_material; gantt.getTask(id).assign_material = data.assign_material;
gantt.getTask(id).assign_tools = data.assign_tools; gantt.getTask(id).assign_tools = data.assign_tools;
gantt.getTask(id).bobot_planning = data.bobot_planning; gantt.getTask(id).bobot_planning = data.bobot_planning;
gantt.getTask(id).rencana_biaya = data.rencana_biaya; gantt.getTask(id).rencana_biaya = data.rencana_biaya;
gantt.getTask(id).biaya_actual = data.biaya_actual; gantt.getTask(id).biaya_actual = data.biaya_actual;
gantt.getTask(id).progress = data.progress; gantt.getTask(id).progress = data.progress;
gantt.getTask(id).jobs_done = data.jobs_done ? data.jobs_done : 0; gantt.getTask(id).jobs_done = data.jobs_done ? data.jobs_done : 0;
gantt.updateTask(id); gantt.updateTask(id);
actionHappen = false; actionHappen = false;
}, },
error: function (data) { error: function (data) {
actionHappen = false; actionHappen = false;
} }
}); });
} }
/* Fungsi format ribuan label*/ /* Fungsi format ribuan label*/
function formatRupiah(n) { function formatRupiah(n) {
var parts=n.toString().split("."); var parts=n.toString().split(".");
return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".") + (parts[1] ? "," + parts[1] : ""); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".") + (parts[1] ? "," + parts[1] : "");
} }
/* Fungsi format ribuan inputan*/ /* Fungsi format ribuan inputan*/
function formatRibuanInput(angka, prefix) function formatRibuanInput(angka, prefix)
{ {
var number_string = angka.replace(/[^,\d]/g, '').toString(), var number_string = angka.replace(/[^,\d]/g, '').toString(),
split = number_string.split(','), split = number_string.split(','),
sisa = split[0].length % 3, sisa = split[0].length % 3,
rupiah = split[0].substr(0, sisa), rupiah = split[0].substr(0, sisa),
ribuan = split[0].substr(sisa).match(/\d{3}/gi); ribuan = split[0].substr(sisa).match(/\d{3}/gi);
if (ribuan) { if (ribuan) {
separator = sisa ? '.' : ''; separator = sisa ? '.' : '';
rupiah += separator + ribuan.join('.'); rupiah += separator + ribuan.join('.');
} }
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah; rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : ''); return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
} }
/* Fungsi replace titik, untuk save ke DB*/ /* Fungsi replace titik, untuk save ke DB*/
function formatReplaceTitikRibuan(param){ function formatReplaceTitikRibuan(param){
let myStr = param; let myStr = param;
let newStr = myStr.replace(/\./g, ''); let newStr = myStr.replace(/\./g, '');
return newStr; return newStr;
} }
function formatDate(params){ function formatDate(params){
let today = new Date(params); let today = new Date(params);
let yyyy = today.getFullYear(); let yyyy = today.getFullYear();
let mm = today.getMonth() + 1; // Months start at 0! let mm = today.getMonth() + 1; // Months start at 0!
let dd = today.getDate(); let dd = today.getDate();
if (dd < 10) dd = '0' + dd; if (dd < 10) dd = '0' + dd;
if (mm < 10) mm = '0' + mm; if (mm < 10) mm = '0' + mm;
today = dd + '/' + mm + '/' + yyyy; today = dd + '/' + mm + '/' + yyyy;
return today; return today;
} }
function roundToTwo(num) { function roundToTwo(num) {
return +(Math.round(num + "e+2") + "e-2"); return +(Math.round(num + "e+2") + "e-2");
} }
function initialProperty() function initialProperty()
{ {
$.ajax({ $.ajax({
url: `${base_url}user-to-version-gantt/get-by-gantt/${ganttId}`, url: `${base_url}user-to-version-gantt/get-by-gantt/${ganttId}`,
type:"GET", type:"GET",
success: function (result) { success: function (result) {
let data = result.data; let data = result.data;
if(data.status && data.status=="not have"){ if(data.status && data.status=="not have"){
toggleCollapseTasks(); toggleCollapseTasks();
}else{ }else{
if(data.id){ if(data.id){
userToVersionGanttId = data.id userToVersionGanttId = data.id
} }
if(data.critical_path){ if(data.critical_path){
gantt.config.highlight_critical_path = true; gantt.config.highlight_critical_path = true;
$("#critalPathBox").prop("checked", true); $("#critalPathBox").prop("checked", true);
} }
if(data.auto_schedule){ if(data.auto_schedule){
gantt.config.auto_schedule = true; gantt.config.auto_schedule = true;
$("#autoSchedule").prop("checked", true); $("#autoSchedule").prop("checked", true);
} }
if(data.zoom){ if(data.zoom){
gantt.ext.zoom.setLevel(data.zoom); gantt.ext.zoom.setLevel(data.zoom);
$('input[value="'+data.zoom+'"]').prop("checked", true); $('input[value="'+data.zoom+'"]').prop("checked", true);
} }
if(data.task_open){ if(data.task_open){
gantt.eachTask(function(task){ gantt.eachTask(function(task){
task.$open = true; task.$open = true;
}); });
toggleTasks = "Collapse"; toggleTasks = "Collapse";
$("#gantt_toggle_task_btn").prop('title', 'Collapse Activities'); $("#gantt_toggle_task_btn").prop('title', 'Collapse Activities');
$("#gantt_toggle_task_btn").children().removeClass('fa-expand-alt'); $("#gantt_toggle_task_btn").children().removeClass('fa-expand-alt');
$("#gantt_toggle_task_btn").children().addClass('fa-compress-alt'); $("#gantt_toggle_task_btn").children().addClass('fa-compress-alt');
}else{ }else{
toggleCollapseTasks(); toggleCollapseTasks();
} }
gantt.render(); gantt.render();
} }
}, },
error: function (data) { error: function (data) {
} }
}); });
} }
function initializationColumn() function initializationColumn()
{ {
$.ajax({ $.ajax({
url: `${base_url}gantt-show-hide/get-by-gantt/${ganttId}`, url: `${base_url}gantt-show-hide/get-by-gantt/${ganttId}`,
type:"GET", type:"GET",
success: function (result) { success: function (result) {
let data = result.data; let data = result.data;
if(data.status=="not yet have"){ if(data.status=="not yet have"){
addShowHideColumn(); addShowHideColumn();
}else if(data.status=="not have access"){ }else if(data.status=="not have access"){
}else{ }else{
setUpForShowHideColumn(data); setUpForShowHideColumn(data);
} }
}, },
error: function (data) { error: function (data) {
} }
}); });
} }
$(document).ready(function () { $(document).ready(function () {
$("#critalPathBox").on("change", function (){ $("#critalPathBox").on("change", function (){
let checked = $(this).is(":checked"); let checked = $(this).is(":checked");
if(checked){ if(checked){
gantt.config.highlight_critical_path = true; gantt.config.highlight_critical_path = true;
updateProperty({critical_path:true}) updateProperty({critical_path:true})
}else{ }else{
gantt.config.highlight_critical_path = false; gantt.config.highlight_critical_path = false;
updateProperty({critical_path:false}) updateProperty({critical_path:false})
} }
gantt.render(); gantt.render();
}); });
$("#autoSchedule").on("change", function (){ $("#autoSchedule").on("change", function (){
let checked = $(this).is(":checked"); let checked = $(this).is(":checked");
if(checked){ if(checked){
gantt.config.auto_schedule = true; gantt.config.auto_schedule = true;
updateProperty({auto_schedule:true}) updateProperty({auto_schedule:true})
}else{ }else{
gantt.config.auto_schedule = false; gantt.config.auto_schedule = false;
updateProperty({auto_schedule:false}) updateProperty({auto_schedule:false})
} }
gantt.render(); gantt.render();
}); });
}); });
function linkLagEditor(){ function linkLagEditor(){
function endPopup(){ function endPopup(){
modal = null; modal = null;
editLinkId = null; editLinkId = null;
} }
function cancelEditLink(){ function cancelEditLink(){
endPopup() endPopup()
} }
function deleteLink(){ function deleteLink(){
gantt.deleteLink(editLinkId); gantt.deleteLink(editLinkId);
endPopup() endPopup()
} }
function saveLink(){ function saveLink(){
var link = gantt.getLink(editLinkId); var link = gantt.getLink(editLinkId);
var lagValue = modal.querySelector(".lag-input").value; var lagValue = modal.querySelector(".lag-input").value;
if(!isNaN(parseInt(lagValue, 10))){ if(!isNaN(parseInt(lagValue, 10))){
link.lag = parseInt(lagValue, 10); link.lag = parseInt(lagValue, 10);
} }
gantt.updateLink(link.id); gantt.updateLink(link.id);
if(gantt.autoSchedule){ if(gantt.autoSchedule){
gantt.autoSchedule(link.source); gantt.autoSchedule(link.source);
} }
endPopup(); endPopup();
} }
var modal; var modal;
var editLinkId; var editLinkId;
gantt.attachEvent("onLinkDblClick", function(id,e){ gantt.attachEvent("onLinkDblClick", function(id,e){
editLinkId = id; editLinkId = id;
var link = gantt.getLink(id); var link = gantt.getLink(id);
var linkTitle; var linkTitle;
switch(link.type){ switch(link.type){
case gantt.config.links.finish_to_start: case gantt.config.links.finish_to_start:
linkTitle = "FS"; linkTitle = "FS";
break; break;
case gantt.config.links.finish_to_finish: case gantt.config.links.finish_to_finish:
linkTitle = "FF"; linkTitle = "FF";
break; break;
case gantt.config.links.start_to_start: case gantt.config.links.start_to_start:
linkTitle = "SS"; linkTitle = "SS";
break; break;
case gantt.config.links.start_to_finish: case gantt.config.links.start_to_finish:
linkTitle = "SF"; linkTitle = "SF";
break; break;
} }
linkTitle += " " + gantt.getTask(link.source).text + " -> " + gantt.getTask(link.target).text; linkTitle += " " + gantt.getTask(link.source).text + " -> " + gantt.getTask(link.target).text;
modal = gantt.modalbox({ modal = gantt.modalbox({
title: linkTitle, title: linkTitle,
text: "<div>" + text: "<div>" +
"<label>Lag <input type='number' class='lag-input' /></label>" + "<label>Lag <input type='number' class='lag-input' /></label>" +
"</div>", "</div>",
buttons: [ buttons: [
{label:"Save", css:"link-save-btn", value:"save"}, {label:"Save", css:"link-save-btn", value:"save"},
{label:"Cancel", css:"link-cancel-btn", value:"cancel"}, {label:"Cancel", css:"link-cancel-btn", value:"cancel"},
{label:"Delete", css:"link-delete-btn", value:"delete"} {label:"Delete", css:"link-delete-btn", value:"delete"}
], ],
width: "500px", width: "500px",
type: "popup-css-class-here", type: "popup-css-class-here",
callback: function(result){ callback: function(result){
switch(result){ switch(result){
case "save": case "save":
saveLink(); saveLink();
break; break;
case "cancel": case "cancel":
cancelEditLink(); cancelEditLink();
break; break;
case "delete": case "delete":
deleteLink(); deleteLink();
break; break;
} }
} }
}); });
modal.querySelector(".lag-input").value = link.lag || 0; modal.querySelector(".lag-input").value = link.lag || 0;
//any custom logic here //any custom logic here
return false; return false;
}); });
} }
function addShowHideColumn() function addShowHideColumn()
{ {
let allColumn = []; let allColumn = [];
allColumns.forEach(function(column){ allColumns.forEach(function(column){
allColumn.push(column.name); allColumn.push(column.name);
}); });
submitShowHideColumn(allColumn); submitShowHideColumn(allColumn);
} }
function submitShowHideColumn(allColumn) function submitShowHideColumn(allColumn)
{ {
let payload = { let payload = {
version_gantt_id:ganttId, version_gantt_id:ganttId,
columns:allColumn columns:allColumn
} }
$.ajax({ $.ajax({
data: JSON.stringify(payload), data: JSON.stringify(payload),
url: `${base_url}gantt-show-hide/add`, url: `${base_url}gantt-show-hide/add`,
type: "POST", type: "POST",
processData: false, processData: false,
contentType: false, contentType: false,
success: function (data) { success: function (data) {
}, },
error: function (data) { error: function (data) {
} }
}); });
} }
function setUpForShowHideColumn(data) function setUpForShowHideColumn(data)
{ {
let columns = data || [] let columns = data || []
let configColumn = {} let configColumn = {}
columns.map((val, index) => { columns.map((val, index) => {
configColumn[val.column_name] = val.show configColumn[val.column_name] = val.show
}); });
gantt.config.columns = createColumnsConfig(configColumn); gantt.config.columns = createColumnsConfig(configColumn);
gantt.render(); gantt.render();
} }
function updateShowHideColumn(data) function updateShowHideColumn(data)
{ {
let payload = { let payload = {
columns:data columns:data
} }
$.ajax({ $.ajax({
data: JSON.stringify(payload), data: JSON.stringify(payload),
url: `${base_url}gantt-show-hide/update/${ganttId}`, url: `${base_url}gantt-show-hide/update/${ganttId}`,
type: "POST", type: "POST",
processData: false, processData: false,
contentType: false, contentType: false,
success: function (data) { success: function (data) {
console.log(data); console.log(data);
}, },
error: function (data) { error: function (data) {
console.log(data); console.log(data);
} }
}); });
} }
function updateProperty(payload){ function updateProperty(payload){
if(userToVersionGanttId > 0 && readOnly && parseInt(readOnly)==0){ if(userToVersionGanttId > 0 && readOnly && parseInt(readOnly)==0){
$.ajax({ $.ajax({
data: JSON.stringify(payload), data: JSON.stringify(payload),
url: `${base_url}user-to-version-gantt/update/${userToVersionGanttId}`, url: `${base_url}user-to-version-gantt/update/${userToVersionGanttId}`,
type: "PUT", type: "PUT",
processData: false, processData: false,
contentType: false, contentType: false,
success: function (data) { success: function (data) {
}, },
error: function (data) { error: function (data) {
} }
}); });
} }
} }
function costPlanningChange(e){ function costPlanningChange(e){
let value = e.value; let value = e.value;
value = replaceAll(value, ".", "") value = replaceAll(value, ".", "")
value = replaceAll(value, ",", ".") value = replaceAll(value, ",", ".")
let newValue = formatRupiah(value); let newValue = formatRupiah(value);
$(e).val(newValue) $(e).val(newValue)
} }
function escapeRegExp(string) { function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
} }
function replaceAll(str, find, replace) { function replaceAll(str, find, replace) {
if(str){ if(str){
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace); return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
} }
return str return str
} }

923
src/function/ganttConfig.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save