479 lines
21 KiB
JavaScript
479 lines
21 KiB
JavaScript
// GLOBAL VARS
|
|
var kolWidth = [22,22,80,100,80]; // default , days, months, years, weeks
|
|
var wPerDag =[21, 21, 2.5, 0.25, 2.5]; // default , days, months, years, weeks
|
|
var MSdag = 24 * 60 * 60 * 1000;
|
|
|
|
// var maandArray=['januari', 'februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december']
|
|
var maandArray2=['jan', 'feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
|
|
|
|
var Alles =[];
|
|
var projStart = new Date();
|
|
var projEind = new Date();
|
|
projEind.setYear(projEind.getYear() + 1);
|
|
var GanttStartDateXX = new Date(projStart.getFullYear(), projStart.getMonth(), projStart.getDate());
|
|
var graphMinX = 0;
|
|
var graphMaxX = 700
|
|
|
|
function getMinMaxX(periode){
|
|
graphMinX=Math.round( ( (projStart.getTime() - GanttStartDateXX.getTime() ) / MSdag ) * wPerDag[periode]);
|
|
graphMaxX=Math.round( ( (projEind.getTime() - GanttStartDateXX.getTime() ) / MSdag) * wPerDag[periode]);
|
|
};
|
|
|
|
// OBJECT CONSTRUCTORS
|
|
|
|
function taakbar(start, eind, duur, id, Index, pijlerID, periode, isPijler){
|
|
this.start = new Date (start.substring(6,10), (start.substring(3,5) -1), start.substring(0,2));
|
|
this.eind = new Date(eind.substring(6,10), (eind.substring(3,5) -1), eind.substring(0,2) ) ;
|
|
this.duur = duur;
|
|
this.periode = periode;
|
|
this.id = id;
|
|
this.Index = Index; // rowID is gelijk aan index
|
|
this.pijlerID = pijlerID ;
|
|
this.isPijler = isPijler;
|
|
|
|
this.width = Math.round( ( (this.eind.getTime() - this.start.getTime())/MSdag) * wPerDag[periode]);
|
|
this.width = Math.max(this.width,5); //minimum width in pixels
|
|
dagen = Math.ceil((this.start.getTime() - GanttStartDateXX.getTime())/ MSdag );
|
|
this.vLeft = dagen * wPerDag[this.periode];
|
|
|
|
this.html = "<div class=tbKlas style='width: 5px; ' > </div>" ;
|
|
this.getHtml = getHtml;
|
|
this.getNewSize= getNewSize;
|
|
if (isPijler){
|
|
this.minX = graphMinX;
|
|
this.maxX = graphMaxX;
|
|
}
|
|
else{
|
|
var self = this;
|
|
$.each(Alles, function(j,al){
|
|
if (al.isPijler && al.id == self.pijlerID) {
|
|
self.minX = al.vLeft
|
|
self.maxX= al.vLeft + al.width
|
|
return false;
|
|
}; //if al.isPIJler
|
|
}); // each
|
|
}; // else
|
|
function getNewSize(){
|
|
var dagen= Math.ceil((this.start.getTime() - GanttStartDateXX.getTime())/ MSdag );
|
|
this.vLeft= dagen * wPerDag[this.periode];
|
|
var days = Math.ceil((this.eind.getTime() - this.start.getTime())/MSdag);
|
|
var vWidth =(days * wPerDag[periode]);
|
|
$("#tbID" + this.Index).css('width',vWidth);
|
|
$("#tbID" + this.Index).css('left' , this.vLeft);
|
|
};
|
|
function getHtml (){
|
|
var vTop = (this.Index * 39) + 43;
|
|
// bepaal draggable/uitrekbaar
|
|
var strDraggable = "";
|
|
var strRek = '';
|
|
var PHead ='' ;
|
|
if( isPijler) {PHead = "tijdPijler"}
|
|
if (this.code != 'bg') {
|
|
strDraggable = 'OKdrag' ;
|
|
strRek = "OKrek" ;
|
|
}
|
|
var idNaam = "tbID" + this.Index;
|
|
this.html ="<div class='" + PHead + " tbKlas " +strDraggable + " " + strRek+ " ' " +
|
|
"id ='" + idNaam+ "' " +
|
|
"style='width:" + this.width + "px; top:" + vTop +"px;left: " + this.vLeft + "px; ' ></div>";
|
|
}; // if bij bereken html
|
|
}
|
|
|
|
//------------------------- functies --------------------------------------------
|
|
function XtoDate (Xpos, periode) {
|
|
var dagen =Math.round(Xpos /wPerDag[periode]);
|
|
var NewDate = new Date(GanttStartDateXX.getFullYear(), GanttStartDateXX.getMonth(), (GanttStartDateXX.getDate() + dagen) )
|
|
return NewDate;
|
|
};
|
|
function XtoDagen(aantalX, periode){
|
|
return aantalDagen = Math.round(aantalX / wPerDag[periode]);
|
|
}
|
|
function DatetoX(Datum, periode){
|
|
var dageninMS = (Datum.getTime() - GanttStartDateXX.getTime());
|
|
var dagen = dageninMS / MSdag;
|
|
var newX = Math.round(dagen * wPerDag[periode]);
|
|
return newX;
|
|
}
|
|
|
|
function BerekenActiviteit(tbalk, posLinks){
|
|
|
|
var Aindex=tbalk.id.substring(4, tbalk.id.length)
|
|
var periode =Alles[Aindex].periode;
|
|
var Taakobject = Alles[Aindex];
|
|
var SetAtX = posLinks.position.left;
|
|
var newStart = XtoDate(posLinks.position.left, periode);
|
|
var NuWidth = parseInt(( $(tbalk).css('width') ).replace('px','') ,10);
|
|
var newEind = XtoDate((posLinks.position.left + NuWidth) , periode);
|
|
var msg = '';
|
|
$.post("index.php/ijkpartituur/planning/MinMaxDag/"+ Taakobject.id,function(data){
|
|
var minstart = EngDatNaarDateObj(data.minStart);
|
|
var maxstart = EngDatNaarDateObj(data.maxStart);
|
|
var mineind = EngDatNaarDateObj(data.minEind);
|
|
var maxeind = EngDatNaarDateObj(data.maxEind);
|
|
if (newStart.getTime() < minstart.getTime()) {
|
|
msg +=" startdatum moet ten minste " + data.minStart + ' zijn; ';
|
|
newStart.setTime(minstart.getTime() )};
|
|
if (newStart.getTime() > maxstart.getTime()) {
|
|
msg += " startdatum mag maximaal "+ data.maxStart + ' zijn; ';
|
|
newStart.setTime(maxstart.getTime() )};
|
|
if (newEind.getTime() < mineind.getTime()) {
|
|
msg+= "einddatum moet ten minste " + data.minEind + ' zijn; ';
|
|
newEind.setTime(mineind.getTime() )};
|
|
if (newEind.getTime() >maxeind.getTime()) {
|
|
msg +="einddatum mag maximaal "+data.maxEind + ' zijn; ';
|
|
newEind.setTime(maxeind.getTime() )};
|
|
if (msg.length > 0) {
|
|
alert(msg);
|
|
};
|
|
Taakobject.start = newStart;
|
|
Taakobject.eind = newEind;
|
|
SetAtX = DatetoX(Taakobject.start, periode);
|
|
$(tbalk).css('left' , SetAtX);
|
|
var XvoorEind = DatetoX(newEind, periode)
|
|
Taakobject.width= (XvoorEind - SetAtX);
|
|
$(tbalk).css('width', Taakobject.width)
|
|
var submitData = { 'id' : Taakobject.id,
|
|
'start' : DateNaarNedDat(Taakobject.start),
|
|
"eind" : DateNaarNedDat(Taakobject.eind),
|
|
"duur" : Taakobject.duur}
|
|
$.post("index.php/ijkpartituur/planning/SaveTaakData", submitData);
|
|
},'json');
|
|
}
|
|
|
|
function HerberekenDragData(tbalk, posLinks){
|
|
var Aindex=tbalk.id.substring(4, tbalk.id.length)
|
|
var Taakobject = Alles[Aindex];
|
|
|
|
if (Taakobject.isPijler) {
|
|
BerekenStretchPijler(tbalk, Taakobject);
|
|
}
|
|
else {
|
|
BerekenActiviteit(tbalk,posLinks)
|
|
} ;
|
|
}
|
|
|
|
function BerekenStretchPijler (tbalk, Taakobject){
|
|
var periode = Taakobject.periode ;
|
|
var pijlerID = Taakobject.pijlerID;
|
|
var Pleft = parseInt(( $(tbalk).css('left') ).replace('px',''),10);
|
|
var Pwidth = parseInt(( $(tbalk).css('width') ).replace('px','') ,10);
|
|
var msg = '';
|
|
$.post("index.php/ijkpartituur/planning/MinMaxDagVoorPijler/" + pijlerID, function(data){
|
|
minStart = new Date(data.minStart.substr(0,4), (data.minStart.substr(5,2) - 1),data.minStart.substr(8,2) );
|
|
maxStart = new Date(data.maxStart.substr(0,4), (data.maxStart.substr(5,2) - 1),data.maxStart.substr(8,2) );
|
|
minEind = new Date(data.minEind.substr(0,4), (data.minEind.substr(5,2) - 1),data.minEind.substr(8,2) );
|
|
maxEind = new Date(data.maxEind.substr(0,4), (data.maxEind.substr(5,2) - 1),data.maxEind.substr(8,2) );
|
|
var newStart = XtoDate(Pleft, periode);
|
|
var newEind = XtoDate((Pleft + Pwidth) , periode);
|
|
if (newStart.getTime() < minStart.getTime()){
|
|
msg = "Start van pijler moet ten minste " + minStart + " zijn. ";
|
|
newStart.setTime(minStart.getTime());
|
|
};
|
|
if (newStart.getTime() > maxStart.getTime()) {
|
|
msg +=" start van pijler mag maximaal " + maxStart+ " zijn. ";
|
|
newStart.setTime(maxStart.getTime());
|
|
};
|
|
if (newEind.getTime() < minEind.getTime()){
|
|
msg += " eind van pijler moet ten minste " + minEind + " zijn. ";
|
|
newEind.setTime(minEind.getTime());
|
|
}
|
|
if (newEind.getTime() > maxEind.getTime()){
|
|
msg +=" eind van pijler mag maximaal " + maxEind + " zijn. ";
|
|
newEind.setTime(maxEind.getTime());
|
|
}
|
|
if (msg.length > 0) {
|
|
alert(msg);
|
|
};
|
|
Taakobject.start = newStart;
|
|
Taakobject.eind = newEind;
|
|
Pleft = DatetoX(Taakobject.start, periode);
|
|
$(tbalk).css('left' , Pleft);
|
|
var XvoorEind = DatetoX(newEind, periode) ;
|
|
Taakobject.width = (XvoorEind - Pleft);
|
|
$(tbalk).css('width', Taakobject.width)
|
|
|
|
var submitData = { 'id' : pijlerID,
|
|
'start' : DateNaarNedDat(Taakobject.start),
|
|
"eind" : DateNaarNedDat(Taakobject.eind)}
|
|
$.post("index.php/ijkpartituur/planning/SavePijlerData" , submitData);
|
|
// pas MaxX voor alle activiteiten aan!
|
|
$.each(Alles, function(i,p){
|
|
if (!(p.isPijler) && (p.pijlerID ==Taakobject.id ) ){
|
|
p.maxX =Pleft + Taakobject.width;
|
|
p.minX = Pleft;
|
|
} ; // if
|
|
});
|
|
//zet in Gantt de data voor de pijler
|
|
$.each(ls.ModelPlanning.GanttTaken(), function(i,p){
|
|
if (p.id == Taakobject.id) {
|
|
p.start(DateNaarNedDat(Taakobject.start))
|
|
p.eind(DateNaarNedDat(Taakobject.eind))
|
|
}
|
|
})
|
|
},'json');
|
|
}
|
|
|
|
function HerberekenDatum(tbalk, uidetails){
|
|
var Aindex=tbalk.id.substring(4, tbalk.id.length)
|
|
var Taakobject = Alles[Aindex];
|
|
|
|
if (Taakobject.isPijler) {
|
|
BerekenStretchPijler(tbalk, Taakobject);
|
|
} else {
|
|
BerekenActiviteit(tbalk, uidetails);
|
|
};
|
|
}
|
|
|
|
function MaakTaken (pijlerArray, periode){
|
|
$("#puttablehere").empty();
|
|
var counter = 0;
|
|
var isPijler= true;
|
|
getMinMaxX(periode);
|
|
$.each(pijlerArray, function(i,p) {
|
|
isPijler = true;
|
|
tb= new taakbar( p.start().replace(/-/g,'/'), p.eind().replace(/-/g,'/'),p.duur(), p.id, counter, p.id,periode, isPijler);
|
|
tb.getHtml();
|
|
Alles[counter]= tb;
|
|
counter ++;
|
|
$("#puttablehere").append(tb.html);
|
|
if (p.status() == 'o') {
|
|
$.each(p.taakLijst(), function(j,k){
|
|
isPijler = false;
|
|
tb= new taakbar( k.start().replace(/-/g,'/'), k.eind().replace(/-/g,'/'), k.duur(),k.id, counter, k.pijlerID,periode, isPijler);
|
|
tb.getHtml();
|
|
Alles[counter]= tb;
|
|
counter ++;
|
|
$("#puttablehere").append(tb.html);
|
|
}) ; // each taaklijst
|
|
} ; // if
|
|
}); // for each taken
|
|
$(".OKdrag").draggable({ axis: "x" ,
|
|
containment: $('#puttablehere'),
|
|
scroll: true,
|
|
"grid": [ wPerDag[periode] , 20 ],
|
|
stop:function(event, ui){HerberekenDragData(this, ui)}});
|
|
$(".OKrek").resizable({ghost:false,maxHeight:25,
|
|
minHeight:25, minWidth:1,
|
|
stop: function(event, ui){
|
|
HerberekenDatum(this, ui);
|
|
}
|
|
});
|
|
$("#puttablehere").append(' <div id="todayLine" ></div> ');
|
|
setCoordinatesToday(periode);
|
|
}
|
|
|
|
function MaakGanttTabel(periode ){
|
|
// periode: 1 = dag 2 =maand; 4 = week; 3 = jaar
|
|
|
|
$("#bgTable").empty();
|
|
var Today = new Date();
|
|
var graphStart;
|
|
|
|
if (Today.getTime() < projStart.getTime()) {
|
|
graphStart = new Date (Today.getFullYear(), Today.getMonth(), Today.getDate());
|
|
}
|
|
else {
|
|
graphStart = new Date(projStart.getFullYear(), projStart.getMonth(), projStart.getDate());
|
|
}
|
|
var graphEind = new Date(projEind.getFullYear(), projEind.getMonth(),projEind.getDate());
|
|
switch (periode){
|
|
case 1:
|
|
graphStart.setMonth(graphStart.getMonth() -1);
|
|
graphEind.setMonth(graphEind.getMonth() + 1);
|
|
break ;
|
|
case 2:
|
|
graphStart.setMonth(graphStart.getMonth() - 6);
|
|
graphEind.setMonth(graphEind.getMonth() + 6);
|
|
break;
|
|
case 3:
|
|
graphStart.setMonth(graphStart.getMonth() -12);
|
|
graphEind.setMonth(graphEind.getMonth() + 12);
|
|
break;
|
|
case 4:
|
|
graphStart.setMonth(graphStart.getMonth() -6);
|
|
graphEind.setMonth(graphEind.getMonth() + 6);
|
|
break;
|
|
default:
|
|
graphStart.setMonth(graphStart.getMonth() -1);
|
|
graphEind.setMonth(graphEind.getMonth() + 1);
|
|
}
|
|
// set de globale variabele in overeenstemming met graphStart
|
|
GanttStartDateXX = graphStart;
|
|
GanttStartDateXX.setDate(1) ;
|
|
graphStart.setDate(1);
|
|
var t1='';
|
|
var t2='';
|
|
var t3='';
|
|
var i=new Date(graphStart.getFullYear(), graphStart.getMonth(), graphStart.getDate());
|
|
var maand = 0;
|
|
var jaar = 0;
|
|
var lbl='';
|
|
var colcounter =0;
|
|
var colspan = 0;
|
|
var totdagen = 0;
|
|
|
|
while (i < graphEind){
|
|
switch (periode)
|
|
{ case 1:
|
|
maand = i.getMonth();
|
|
lbl=maandArray[maand] + " " + i.getFullYear();
|
|
colspan = GetDagen((maand+ 1), i.getFullYear()) ;
|
|
totdagen += colspan;
|
|
colcounter += colspan;
|
|
t1 +="<td class='gColHeader2' colspan='" + colspan + "'>" + lbl +"</td> ";
|
|
testdate=new Date(i);
|
|
for (var j=1; j<=colspan;j++){
|
|
testdate.setDate(j);
|
|
if (testdate.getDay() == 0 || testdate.getDay() ==6) {
|
|
t2 += "<td class='holyH gColHeader2' style='border-right:1px solid #ffffff; width:" + wPerDag[periode] +"px'>" + j +"</td>";
|
|
t3 += "<td class='gCell holy'> </td>";
|
|
}
|
|
else {
|
|
t2 += "<td class='gColHeader2' style='border-right:1px solid #ffffff; width:" + wPerDag[periode] +"px'>" + j +"</td>";
|
|
t3 += "<td class='gCell'> </td>" ;
|
|
};
|
|
};
|
|
i.setMonth(i.getMonth() + 1);
|
|
break; // einde case 1
|
|
case 2:
|
|
var colspan2 = 0;
|
|
var colspan = 0;
|
|
maand = i.getMonth() + 1;
|
|
|
|
lbl= i.getFullYear();
|
|
for (var j=maand; j<=12;j++){
|
|
dagen = GetDagen(j, i.getFullYear());
|
|
totdagen += dagen;
|
|
colspan += 1;
|
|
colcounter += 1;
|
|
t1 +="<td class='gColHeader2' >" + lbl +"</td> ";
|
|
t2 += "<td class='gColHeader2' style=' width:" + (dagen * wPerDag[periode]) + "px' >" + maandArray[(j - 1)] +"</td>";
|
|
t3 += "<td class='gCell'> </td>" ;
|
|
};
|
|
// t1 +="<td class='gColHeader2' colspan='" + colspan + "'>" + lbl +"</td> ";
|
|
i.setMonth (i.getMonth() + (12 - maand ) + 1);
|
|
break; // einde case 2
|
|
case 3:
|
|
colcounter += 1;
|
|
dagen=GetDagen(2,i.getFullYear());
|
|
dagen =337 + dagen;
|
|
totdagen += dagen;
|
|
t1 +="<td class='gColHeader2' style=' width:"+ (dagen * wPerDag[periode])+ "px '>" + " " +"</td> ";
|
|
t2 += "<td class='gColHeader2' >" + i.getFullYear() +"</td>";
|
|
t3 += "<td class='gCell'> </td>" ;
|
|
i.setMonth (i.getMonth() + (12 - maand ) + 1);
|
|
break;
|
|
case 4: lbl= i.getFullYear();
|
|
t1 +="<td class='gColHeader2'>" + lbl +"</td> ";
|
|
i.setMonth (i.getMonth() + 12);
|
|
break;
|
|
default: i = graphEind;
|
|
}
|
|
} // einde while
|
|
|
|
var tr1 = $("<tr>");
|
|
tr1.html(t1);
|
|
var tr2=$("<tr>");
|
|
tr2.html(t2);
|
|
var gTHead1=$("<thead>").append(tr1).append(tr2).addClass("gHead floatingHeader");
|
|
var wTabel = wPerDag[periode] * totdagen;
|
|
var table=$("<table class='gTable persist-area' id='bgTable' cellspacing=0 cellpadding= 0 cols='" + colcounter + "'>");
|
|
table.css({width: wTabel + "px"});
|
|
table.append(gTHead1);
|
|
// hier voor het aantal lege rijen vul de tabel aan
|
|
var rows= ls.ModelPlanning.GanttTaken().length;
|
|
$.each(ls.ModelPlanning.GanttTaken(), function(i,p){
|
|
rows+= p.taakLijst().length;
|
|
} ); //each
|
|
var matrix = '';
|
|
for (i=0; i<rows;i++){
|
|
matrix +='<tr>' + t3 + "</tr>";
|
|
}
|
|
table.append(matrix);
|
|
$(table).insertAfter('#puttablehere');
|
|
$("#puttablehere").css({width: wTabel + "px"});
|
|
setCoordinatesToday(periode);
|
|
// floatHeader();
|
|
}
|
|
|
|
// function UpdateTableHeaders() {
|
|
// consoleMSG('Inside');
|
|
// $(".persist-area").each(function() {
|
|
|
|
// var el = $(this),
|
|
// offset = el.offset(),
|
|
// scrollTop = $(window).scrollTop(),
|
|
// floatingHeader = $(".floatingHeader", this)
|
|
|
|
// if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
|
|
// floatingHeader.css({
|
|
// "visibility": "visible"
|
|
// });
|
|
// } else {
|
|
// floatingHeader.css({
|
|
// "visibility": "hidden"
|
|
// });
|
|
// };
|
|
// });
|
|
|
|
// }
|
|
|
|
// // DOM Ready
|
|
// //
|
|
// function floatHeader(){
|
|
|
|
// var clonedHeaderRow;
|
|
|
|
// $(".persist-area").each(function() {
|
|
// clonedHeaderRow = $(".persist-header", this);
|
|
// clonedHeaderRow
|
|
// .before(clonedHeaderRow.clone())
|
|
// .css("width", clonedHeaderRow.width())
|
|
// .addClass("floatingHeader");
|
|
|
|
// });
|
|
// }
|
|
|
|
|
|
function setCoordinatesToday(periode){
|
|
var inDag = new Date()
|
|
var vLeft = 0;
|
|
dagen= Math.ceil((inDag.getTime() - GanttStartDateXX.getTime()) / MSdag );
|
|
vLeft= (dagen - 0.5) * wPerDag[periode] ;
|
|
$('#todayLine').css('left', vLeft);
|
|
var lengte= ($('#bgTable tr').length -2 ) * 39;
|
|
$('#todayLine').css('height', lengte);
|
|
$('.dagenlijst').scrollLeft(vLeft);
|
|
}
|
|
|
|
function goToDay ( inputdag, periode){
|
|
if (inputdag == undefined) {inputdag = new Date();}
|
|
var inDag = new Date();
|
|
inDag.setDate(inputdag.substring(0,2));
|
|
inDag.setMonth((inputdag.substring(3,5) - 1) );
|
|
inDag.setYear(inputdag.substring(6,10));
|
|
var vLeft = parseInt(0,10);
|
|
dagen = Math.ceil((inDag.getTime() - GanttStartDateXX.getTime()) / MSdag );
|
|
vLeft = parseInt(Math.round(dagen * wPerDag[periode] ),10 );
|
|
|
|
// maar de dag moet in het midden komen, dus moet je de helft van de breedte van de div minder ver naar links:
|
|
vLeft = vLeft - 300;
|
|
if (vLeft < 0) vLeft =0;
|
|
var vWidth =$('#bgTable').css("width");
|
|
vWidth=vWidth.substring(0 , vWidth.length -2 );
|
|
if (vLeft > vWidth) vLeft = vWidth - 300;
|
|
$('div.dagenlijst').scrollLeft(parseInt(vLeft) ,10);
|
|
}
|
|
|
|
|
|
$(function(){
|
|
$(".dagenlijst").scroll(function(){
|
|
var tops = -($(".persist-area").position().top) + 35;
|
|
$(".floatingHeader").css('top', tops + 'px');
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// ------------------------------------ einde gantt ---------------------
|