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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/assets/css/custom.css
  2. 858
      src/function/function.js
  3. 923
      src/function/ganttConfig.js

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

@ -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;

858
src/function/function.js
Unescape View File

@ -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 = "<div><input onkeyup='costPlanningChange(this)' type='text' min='" + min +
"' name='" + column.name + "'></div>";
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 = "<div><input onkeyup='costPlanningChange(this)' type='text' min='" + min +
"' name='" + column.name + "'></div>";
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 = "<div><input type='number' min='" + min +
"' max='" + max + "' name='" + column.name + "'></div>";
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 = "<div><input type='number' min='" + min +
"' max='" + max + "' name='" + column.name + "'></div>";
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] : "");
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");
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: "<div>" +
"<label>Lag <input type='number' class='lag-input' /></label>" +
"</div>",
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: "<div>" +
"<label>Lag <input type='number' class='lag-input' /></label>" +
"</div>",
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
if(str){
return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
return str
}

923
src/function/ganttConfig.js
View File

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