449 lines
27 KiB
JavaScript
449 lines
27 KiB
JavaScript
$(function () {
|
|
var appliedBindings = false;
|
|
var totdagen = 365;
|
|
var projStartM;
|
|
var projEindM;
|
|
function MaakGanttAchtergrond(){
|
|
var self = ls.ModelMensen;
|
|
|
|
$("#bgTable2").remove();
|
|
$("#bgTable3").remove();
|
|
var Today = new Date();
|
|
var graphStart;
|
|
if (Today.getTime() < projStartM.getTime()) {
|
|
graphStart = new Date (Today.getFullYear(), Today.getMonth(), Today.getDate());
|
|
}
|
|
else {
|
|
graphStart = new Date(projStartM.getFullYear(), projStartM.getMonth(), 1);
|
|
}
|
|
var AddToEind = 1;
|
|
if (self.schuifwidth >= 66){AddToEind= 12};
|
|
dagen = GetDagen( projEindM.getMonth() + AddToEind, projEindM.getFullYear());
|
|
var graphEind = new Date(projEindM.getFullYear() + 1, projEindM.getMonth() + AddToEind,dagen);
|
|
GanttStartDateXX = graphStart;
|
|
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 colspandagen = 0;
|
|
totdagen = 0;
|
|
var bgColH = "#975796";
|
|
var bgColM = "#e9dce9";
|
|
while (i < graphEind){
|
|
switch (self.periode())
|
|
{ case 1:
|
|
maand = i.getMonth();
|
|
lbl=maandArray[maand] + " " + i.getFullYear();
|
|
colspan = GetDagen((maand+ 1), i.getFullYear()) ;
|
|
totdagen += colspan;
|
|
colcounter += colspan;
|
|
|
|
t1 +="<td class='gColHeader3' " +
|
|
"style='width: " + (colspan * self.dagwidth()) + "px' " +
|
|
"coldagen = " + colspan +
|
|
" colspan='" + colspan + "'>" + lbl +"</td> ";
|
|
testdate=new Date(i);
|
|
for (var j=1; j<=colspan;j++){
|
|
testdate.setDate(j);
|
|
if (bgColH == "#975796") {
|
|
bgColH ="#b669b5";
|
|
bgColM = "#f5eff5";
|
|
}
|
|
else {
|
|
bgColH = "#975796";
|
|
bgColM = "#e9dce9";
|
|
}
|
|
|
|
if (testdate.getDay() == 0 || testdate.getDay() ==6) {
|
|
t2 += "<td class='gCellM gColHeader4' style=' width:" + self.dagwidth() +"px; background-color: " + bgColH + "' dagen=1 >" + j +"</td>";
|
|
t3 += "<td class='gCellM holy' dagen=1 style='width:" + self.dagwidth() +"px;background-color: " + bgColM + "' > </td>";
|
|
}
|
|
else {
|
|
t2 += "<td class='gCellM gColHeader4' style=' width:" + self.dagwidth() +"px;background-color: " + bgColH + "' dagen =1>" + j +"</td>";
|
|
t3 += "<td class='gCellM' dagen=1 style='width:" + self.dagwidth() +"px;background-color: " + bgColM + "' > </td>" ;
|
|
};
|
|
};
|
|
i.setMonth(i.getMonth() + 1);
|
|
break; // einde case 1
|
|
case 2:
|
|
var colspan2 = 0;
|
|
var colspan = 0;
|
|
var colspandagen = 0;
|
|
maand = i.getMonth() + 1;
|
|
lbl= i.getFullYear();
|
|
|
|
for (var j=maand; j<=12;j++){
|
|
dagen = GetDagen(j, i.getFullYear());
|
|
totdagen += dagen;
|
|
colspandagen += dagen;
|
|
colspan += 1;
|
|
colcounter += 1;
|
|
if (bgColH == "#975796") {
|
|
bgColH ="#b669b5";
|
|
bgColM = "#f5eff5";
|
|
}
|
|
else {
|
|
bgColH = "#975796";
|
|
bgColM = "#e9dce9";
|
|
}
|
|
t2 += "<td class='gCellM gColHeader4' style=' width:" + (dagen * self.dagwidth())+ "px; background-color: " + bgColH + "' dagen=" + dagen+ " >" + maandArray2[(j - 1)] +"</td>";
|
|
t3 += "<td class='gCellM' dagen=" + dagen + " style='width:" + (dagen * self.dagwidth() ) +"px; background-color: " + bgColM + "' > </td>" ;
|
|
};
|
|
t1 +="<td class='gColHeader3' " +
|
|
" style='width:" + (colspandagen * self.dagwidth() ) +"px' " +
|
|
" coldagen = " + colspandagen +
|
|
" colspan ='" + colspan + "'>" + lbl +"</td> ";
|
|
i.setMonth (i.getMonth() + (12 - maand ) + 1);
|
|
break; // einde case 2
|
|
case 3:
|
|
colspandagen = 0;
|
|
colcounter += 1;
|
|
dagen=GetDagen(2,i.getFullYear());
|
|
dagen =337 + dagen;
|
|
colspandagen += dagen;
|
|
totdagen += dagen;
|
|
if (bgColH == "#975796") {
|
|
bgColH ="#b669b5";
|
|
bgColM = "#f5eff5";
|
|
}
|
|
else {
|
|
bgColH = "#975796";
|
|
bgColM = "#e9dce9";
|
|
}
|
|
t1 +="<td class='gColHeader3' " +
|
|
" style='width:" + (colspandagen * self.dagwidth() ) +"px' "+
|
|
" coldagen =" + dagen +
|
|
" dagen=" + dagen+ " > " + "</td> ";
|
|
t2 += "<td class='gCellM gColHeader4' dagen=" + dagen + " style=' width:"+ (dagen * self.dagwidth)+ " px ; background-color: " + bgColH + "'>" + i.getFullYear() +"</td>";
|
|
t3 += "<td class='gCellM' dagen=" +dagen + " style='width:" + (dagen * self.dagwidth()) +"px; background-color: " + bgColM + "'> </td>" ;
|
|
i.setMonth (i.getMonth() + (12 - maand ) + 1);
|
|
break;
|
|
case 4: lbl= i.getFullYear();
|
|
t1 +="<td class='gColHeader3'>" + lbl +"</td> ";
|
|
i.setMonth (i.getMonth() + 12);
|
|
break;
|
|
default: i = graphEind;
|
|
}
|
|
} // einde while
|
|
|
|
var wTabel = self.dagwidth() * totdagen;
|
|
var tr1 = $("<tr>");
|
|
tr1.html(t1);
|
|
var tr2=$("<tr>");
|
|
tr2.html(t2);
|
|
var gTHead1=$("<thead>").append(tr1).append(tr2);
|
|
|
|
var table=$("<table class='gTable' id='bgTable2' cellspacing=0 cellpadding= 0 cols='" + colcounter + "'>");
|
|
table.css({width: wTabel + "px"});
|
|
|
|
table.append(gTHead1);
|
|
$(table).insertAfter('#putheaderhere');
|
|
|
|
var matrix = '';
|
|
var rows =13;
|
|
for (i=0; i<rows;i++){
|
|
matrix +='<tr>' + t3 + "</tr>";
|
|
}
|
|
table=$("<table class='gTable' id='bgTable3' cellspacing=0 cellpadding= 0 cols='" + colcounter + "'>");
|
|
table.css({width: wTabel + "px"});
|
|
|
|
table.append(matrix);
|
|
$(table).insertAfter('#puttablehere2');
|
|
$("#puttablehere2").css({width: wTabel + "px"});
|
|
|
|
$(".scroller3").width((totdagen * self.dagwidth() ));
|
|
$(".lijnstuk").each(function(index){
|
|
$(this).width( $(this).attr('dagen') * self.dagwidth() );
|
|
});
|
|
CoordinatesToday(self.periode());
|
|
};
|
|
|
|
function CoordinatesToday(periode){
|
|
var self = ls.ModelMensen;
|
|
var inDag = new Date()
|
|
var startdag = new Date(projStartM.getFullYear(), projStartM.getMonth(),1);
|
|
var vLeft = 0;
|
|
dagen= Math.ceil((inDag.getTime() - startdag.getTime()) / MSdag );
|
|
vLeft= (dagen - 0.5) * self.dagwidth() ;
|
|
$('#todayLineM').css('left', vLeft);
|
|
$('#todayLineM').css('height', 430);
|
|
$("#todayLineM").attr("dagen",(dagen - 0.5) );
|
|
if (inDag.getTime() > startdag.getTime() && inDag.getTime() < projEindM.getTime()){
|
|
$('#scroller2').scrollLeft((vLeft - 20) );
|
|
} ;
|
|
};
|
|
$("#scroller2").scroll(function() {
|
|
$('#scroller1').scrollLeft($( "#scroller2") .scrollLeft()) ;
|
|
$(".holder3").scrollLeft($("#scroller2").scrollLeft());
|
|
});
|
|
$("#scroller1").scroll(function() {
|
|
$('#scroller2').scrollLeft($( "#scroller1") .scrollLeft()) ;
|
|
$(".holder3").scrollLeft($("#scroller1").scrollLeft());
|
|
});
|
|
|
|
fNewMens = function (m){
|
|
var self= this;
|
|
this.id = m.id;
|
|
this.naam = m.fullname;
|
|
this.takenC = ko.observableArray();
|
|
$.each(m.takenC, function(i,t){
|
|
self.takenC.push(t);
|
|
})
|
|
this.takenU = ko.observableArray();
|
|
$.each(m.takenU, function(i,t){
|
|
self.takenU.push(t);
|
|
})
|
|
|
|
var nums = new Array();
|
|
var dat1 = new Date(projStartM.getTime());
|
|
dat1.setDate(1);
|
|
var dat2 = new Date(projEindM.getTime());
|
|
|
|
// var i = 0;
|
|
while (dat1.getTime() <=dat2.getTime()){
|
|
var actcounter = 0;
|
|
var vacties = '';
|
|
var uacties ='';
|
|
$.each(m.takenC, function(i,t){
|
|
var datstart = new Date(t.start.substring(0,4), parseInt(t.start.substring(5,7) ,10)-1, t.start.substring(8,10));
|
|
var dateind =new Date(t.eind.substring(0,4), parseInt(t.eind.substring(5,7) ,10)-1, t.eind.substring(8,10));
|
|
if (dat1.getTime() >= datstart .getTime() &&
|
|
dat1.getTime() <= dateind.getTime() ) {
|
|
actcounter ++;
|
|
vacties += t.naam + ";";
|
|
}
|
|
}); // each
|
|
$.each(m.takenU, function(i,t){
|
|
var datstart = new Date(t.start.substring(0,4), parseInt(t.start.substring(5,7),10 )-1, t.start.substring(8,10));
|
|
var dateind =new Date(t.eind.substring(0,4), parseInt(t.eind.substring(5,7) ,10)-1, t.eind.substring(8,10));
|
|
if (dat1.getTime() >= datstart .getTime() &&
|
|
dat1.getTime() <= dateind.getTime() ) {
|
|
actcounter ++;
|
|
uacties += t.naam + ";" ;
|
|
}
|
|
}); // each
|
|
|
|
nums.push({counter : actcounter,
|
|
vacts : vacties,
|
|
uacts : uacties});
|
|
dat1.setDate(dat1.getDate() + 1);
|
|
i++;
|
|
}
|
|
this.html= "<div class='mensregel' id='m" + this.id + "' >"+
|
|
"<div style='float:left; width: 243px; overflow-x:hidden;'>" + this.naam+"</div>" +
|
|
"<div class='upholder3' style='float:left; height :15px; overflow-y:hidden; overflow-x:hidden' >" +
|
|
"<div class ='holder3' style='width: 680px;height:32px; overflow-y:hidden'>" +
|
|
"<div class='scroller3' style='width:1200px' > " ;
|
|
|
|
var dikte = 0;
|
|
if (nums[0] !==undefined) {dikte= nums[0].counter;};
|
|
var dagen = 0;
|
|
var self=this;
|
|
var colarray = ['576297', '576297','576297','576297','576297','576297','576297','576297','576297','576297'];
|
|
$.each(nums, function(i,n){
|
|
|
|
if (n.counter != dikte){
|
|
if (dikte > 10) {dikte = 10};
|
|
self.html += "<div class='lijnstuk' " +
|
|
"style='float:left;background-color: #" + colarray[(dikte-1)] + " ; height: " + (dikte * 2) + "px; margin-top:" + (10 - (dikte * 2)) + "px;width:" + (dagen * ls.ModelMensen.dagwidth() ) + "px;' " +
|
|
"title='dagen: " + dagen + " verantwoordelijk:" + vacts + " uitvoerende: " + uacts +"' " +
|
|
" dagen= " + dagen + "> </div>" ;
|
|
dagen = 1;
|
|
dikte = n.counter;
|
|
vacts = n.vacts;
|
|
uacts = n.uacts;
|
|
}
|
|
else {dagen = dagen + 1;
|
|
vacts = n.vacts;
|
|
uacts = n.uacts;}
|
|
})
|
|
if (dikte > 0){
|
|
this.html += "<div class='lijnstuk' " +
|
|
"style='float:left;background-color:#" + colarray[(dikte-1)] + "; height: " + (dikte * 2) + "px; margin-top:" + (10 - (dikte * 2)) + "px;width:" + (dagen * ls.ModelMensen.dagwidth() ) + "px;' " +
|
|
" dagen= " + dagen + "> </div>" ;
|
|
}
|
|
this.html += "</div></div></div></div> <div class=clearfix></div>"
|
|
};
|
|
|
|
$(document).on("click", ".mensregel", function () {
|
|
var sID = $(this).attr('id').substring(1);
|
|
var self= ls.ModelMensen;
|
|
$.each(self.mensen(), function(i,p){
|
|
if (p.id ==sID){
|
|
self.selectedMens(p);
|
|
return;
|
|
}; // if
|
|
}) ; //each
|
|
if ( $('#lsOverlay').css('display') == 'none' ) { $("#lsOverlay").fadeIn() };
|
|
$("#lsOverlay").css({'z-index': 500});
|
|
setDrag("#popMensActiviteiten")
|
|
$('#popMensActiviteiten').fadeIn();
|
|
$('#popMensActiviteiten').css({'z-index': 550});
|
|
});
|
|
|
|
|
|
ls.initMensen = function(){
|
|
if (ls.ModelMensen !== undefined) {
|
|
ls.ModelMensen.InitValues();
|
|
}
|
|
else {
|
|
|
|
ls.ModelMensen = {
|
|
schuifwidth : ko.observable(),
|
|
periode : ko.observable(2),
|
|
mensen : ko.observableArray([]),
|
|
selectedMens : ko.observable(),
|
|
deletable : ko.observable(true), // mag de gebruiker activiteiten bij gebruikers weghalen
|
|
|
|
InitValues : function(){
|
|
var self = ls.ModelMensen;
|
|
$('.mensregel').remove();
|
|
$('#periodeslider').slider();
|
|
$("#periodeslider").slider("option","animate","fast");
|
|
$("#periodeslider").slider("option", "value", 40);
|
|
self.schuifwidth(33.1);
|
|
$.post('index.php/ijkpartituur/partituur/getActievePartituur', function(data){
|
|
projStartM= new Date(data.partituur_start.substring(0,4), (data.partituur_start.substring(5,7)-1), data.partituur_start.substring(8,10));
|
|
|
|
projEindM= new Date(data.partituur_eind.substring(0,4), (data.partituur_eind.substring(5,7)-1), data.partituur_eind.substring(8,10));
|
|
MaakGanttAchtergrond();
|
|
|
|
$.post("index.php/ijkpartituur/mensen/getMensen", function(data){
|
|
self.mensen.removeAll();
|
|
|
|
$.each(data, function(i,p){
|
|
self.mensen.push(new fNewMens(p))
|
|
}) ; // for each
|
|
|
|
$.each(self.mensen(), function(i,m){
|
|
regel=m.html;
|
|
$(regel).insertAfter('#mensholder');
|
|
$("#m"+ m.id).css({top: ((i * 33) + 10) + "px"});
|
|
});
|
|
}, 'json');
|
|
},'json');
|
|
|
|
},
|
|
fDeleteVer : function(pID){
|
|
var self= ls.ModelMensen;
|
|
var VID = this.id;
|
|
var MID = pID;
|
|
var deze = this;
|
|
apprise("Weet u zeker dat u de koppeling van verantwoordelijke bij " + this.naam + " wilt verwijderen?", {verify: true, textYes: 'ja', textNo:'nee'}, function(ans){
|
|
if (ans){
|
|
$.post("index.php/ijkpartituur/mensen/deleteVer/" + VID + '/' + MID, function(data){
|
|
$.each(self.mensen(), function(i,p){
|
|
if (p.id == MID) {
|
|
var vtop = $("#m"+MID).css("top");
|
|
self.selectedMens().takenC.remove(deze);
|
|
self.mensen.remove(p);
|
|
$("#m" + MID).remove();
|
|
self.mensen.push(new fNewMens(data));
|
|
var Indexwaarde = self.mensen().length - 1;
|
|
regel=self.mensen()[Indexwaarde].html;
|
|
$(regel).insertAfter('#mensholder');
|
|
$("#m"+ MID).css('top', vtop);
|
|
return false;
|
|
}
|
|
})
|
|
},'json');
|
|
} // if
|
|
} ); // apprise
|
|
},
|
|
fDeleteUit : function(pID){
|
|
var self= ls.ModelMensen;
|
|
var UID = this.id;
|
|
var MID = pID;
|
|
var deze = this;
|
|
apprise("Weet u zeker dat u de koppeling van uitvoerende bij " + this.naam + " wilt verwijderen?", {verify: true, textYes: 'ja', textNo:'nee'}, function(ans){
|
|
if (ans){
|
|
$.post("index.php/ijkpartituur/mensen/deleteUit/" + UID + '/' + MID, function(data){
|
|
$.each(self.mensen(), function(i,p){
|
|
if (p.id == MID) {
|
|
var vtop = $("#m"+MID).css("top");
|
|
self.selectedMens().takenU.remove(deze);
|
|
self.mensen.remove(p);
|
|
$("#m" + MID).remove();
|
|
self.mensen.push(new fNewMens(data));
|
|
var Indexwaarde = self.mensen().length - 1;
|
|
regel=self.mensen()[Indexwaarde].html;
|
|
$(regel).insertAfter('#mensholder');
|
|
$("#m"+ MID).css('top', vtop);
|
|
return false;
|
|
}
|
|
})
|
|
},'json');
|
|
} // if
|
|
} ); // apprise
|
|
}
|
|
};// einde model definitie
|
|
|
|
$("#periodeslider").slider({ stop: function(event,ui){
|
|
var self= ls.ModelMensen;
|
|
var dagen = 0;
|
|
var wijd = 0;
|
|
self.schuifwidth( ui.value );
|
|
if (self.schuifwidth() < 5) {self.schuifwidth(5)};
|
|
|
|
if (self.schuifwidth() < 33 && (self.periode() != 1)) {
|
|
self.periode(1);
|
|
MaakGanttAchtergrond();
|
|
return ;
|
|
};
|
|
if (self.schuifwidth() >= 33 && self.schuifwidth() <= 66 && self.periode() != 2) {
|
|
self.periode(2);
|
|
MaakGanttAchtergrond();
|
|
return ;
|
|
};
|
|
if (self.schuifwidth() >66 && self.periode() != 3) {
|
|
self.periode(3);
|
|
MaakGanttAchtergrond();
|
|
return ;
|
|
};
|
|
$(".gColHeader4").each(function (i, p){
|
|
dagen = $(p).attr("dagen");
|
|
wijd= (dagen * self.dagwidth() );
|
|
$(p).width(wijd) ;
|
|
});
|
|
$(".gColHeader3").each(function(i,r){
|
|
wijd=(parseInt($(r).attr("coldagen") ,10 ) * self.dagwidth() ) ;
|
|
$(r).width(wijd);
|
|
});
|
|
$(".gCellM").each(function(i,q){
|
|
dagen = $(q).attr("dagen");
|
|
wijd= (dagen * self.dagwidth() );
|
|
$(q).width(wijd) ;
|
|
});
|
|
|
|
$("#bgTable2").width((totdagen * self.dagwidth() ));
|
|
$("#bgTable3").width((totdagen * self.dagwidth() ));
|
|
$(".scroller3").width((totdagen * self.dagwidth() ));
|
|
$(".lijnstuk").each(function(index){
|
|
$(this).width( $(this).attr('dagen') * self.dagwidth() );
|
|
});
|
|
$("#todayLineM").css({left: ($("#todayLineM").attr('dagen') * self.dagwidth() )});
|
|
}
|
|
});
|
|
ls.ModelMensen.dagwidth =ko.computed(function(){
|
|
var self=ls.ModelMensen;
|
|
if (self.schuifwidth() < 33) {
|
|
return self.schuifwidth(); };
|
|
if (self.schuifwidth() >= 33 && self.schuifwidth() < 66) {
|
|
return self.schuifwidth() / 30 ;};
|
|
if (self.schuifwidth() >= 66) {
|
|
return self.schuifwidth()/365 ;};
|
|
});
|
|
|
|
ls.ModelMensen.InitValues();
|
|
ko.applyBindings(ls.ModelMensen, document.getElementById("mensen-pagina"));
|
|
appliedBindings = true;
|
|
}; // else
|
|
}; //init
|
|
|
|
}); |