Overigen/monpas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1e array

Browse Source
This commit is contained in:
Monique
2022-08-30 17:01:49 +02:00
parent 653b59c7ec
commit 5f1f6c8690
4 changed files with 520 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/views/monpas/pages/ontwikkel.php
+117 -55
View File
@@ -1,3 +1,4 @@
<div class="col-sm-12 mainpagina" id ="pagontwikkel">
<div data-bind="visible: !ingevuld()"> De geselecteerde lijst is (nog) niet ingevuld.</div>
@@ -186,64 +187,125 @@
</h4>
</div>
<table style="width: 100%;">
<colgroup>
<col style="width: 25px">
<col >
<col span='11' style="width: 35px">
</colgroup>
<tr>
<td colspan=7 style="text-align:right; padding-right: 15px"> <b>huidige situatie</b><br/> &nbsp;</td>
<td></td>
<td colspan =5 > <b> gewenste situatie</b><br/> &nbsp;</td>
<tr>
<tr class="modal-header">
<td style="width: 25px"></td>
<td><?=$labels['Ykpunten']?> </td>
<td style=" text-align:center" class="rood"> 1</td>
<td style=" text-align:center" class="oranje"> 2</td>
<td style=" text-align:center" class="groen"> 3</td>
<td style=" text-align:center" class="blauw"> 4</td>
<td style=" text-align:center; background-color: #808080;" > </td>
<td style="background-color:#ffffff"></td>
<td style="text-align:center" class="rood" > 1</td>
<td style=" text-align:center" class="oranje" > 2</td>
<td style="text-align:center" class="groen" > 3</td>
<td style="text-align:center" class="blauw" > 4</td>
<td style="text-align:center; background-color: #808080; " > </td>
</tr>
<tbody data-bind="foreach : results">
<tr class=" fixedH" >
<td class="allborders"
data-bind="text: nummer,
style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}"
style="text-align:right; padding-right:3px; vertical-align:top">
</td>
<td style="vertical-align:top; "
class="allborders fixedH clickable"
data-bind=" click: $parent.fToonToelichting, style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}">
<span data-bind="text: omschrijving"></span>
<span data-bind="visible: disabled == 'T'" > (Uitgezet.)</span>
<span data-bind="visible: disabled == 'F' && disablentv == 'T'" > (Niet van toepassing.)</span>
<table style="width: 100%; margin-bottom: 40px;">
<colgroup>
<col style="width: 25px">
<col >
<col span='11' style="width: 35px">
</colgroup>
<tr>
<td colspan=7 style="text-align:right; padding-right: 15px"> <b>huidige situatie</b><br/> &nbsp;</td>
<td></td>
<td colspan =5 > <b> gewenste situatie</b><br/> &nbsp;</td>
<tr>
<tr class="modal-header">
<td style="width: 25px"></td>
<td><?=$labels['Ykpunten']?> </td>
<td style=" text-align:center" class="rood"> 1</td>
<td style=" text-align:center" class="oranje"> 2</td>
<td style=" text-align:center" class="groen"> 3</td>
<td style=" text-align:center" class="blauw"> 4</td>
<td style=" text-align:center; background-color: #808080;" > </td>
<td style="background-color:#ffffff"></td>
<td style="text-align:center" class="rood" > 1</td>
<td style=" text-align:center" class="oranje" > 2</td>
<td style="text-align:center" class="groen" > 3</td>
<td style="text-align:center" class="blauw" > 4</td>
<td style="text-align:center; background-color: #808080; " > </td>
</tr>
<tbody data-bind="foreach : results">
<tr class=" fixedH" >
<td class="allborders"
data-bind="text: nummer,
style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}"
style="text-align:right; padding-right:3px; vertical-align:top">
</td>
<td style="vertical-align:top; "
class="allborders fixedH clickable"
data-bind=" click: $parent.fToonToelichting, style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}">
<span data-bind="text: omschrijving"></span>
<span data-bind="visible: disabled == 'T'" > (Uitgezet.)</span>
<span data-bind="visible: disabled == 'F' && disablentv == 'T'" > (Niet van toepassing.)</span>
</td>
<td class="allborders" ><div class="cirkel" data-bind="css: {'rood' : huidig() == 1}"></div></td>
<td class="allborders"><div class="cirkel" data-bind="css: {'oranje' : huidig() == 2}"></div></td>
<td class="allborders"><div class="cirkel" data-bind="css: {'groen' : huidig() == 3}"></div></td>
<td class="allborders"><div class="cirkel" data-bind="css: {'blauw' : huidig() == 4}"></div></td>
<td class="allborders"><div class="cirkel" data-bind="css: {'grijs' : huidig() == 5}"></div></td>
</td>
<td class="allborders" ><div class="cirkel" data-bind="css: {'rood' : huidig() == 1}"></div></td>
<td class="allborders"><div class="cirkel" data-bind="css: {'oranje' : huidig() == 2}"></div></td>
<td class="allborders"><div class="cirkel" data-bind="css: {'groen' : huidig() == 3}"></div></td>
<td class="allborders"><div class="cirkel" data-bind="css: {'blauw' : huidig() == 4}"></div></td>
<td class="allborders"><div class="cirkel" data-bind="css: {'grijs' : huidig() == 5}"></div></td>
<td style="border-bottom:none; border-top:none"></td>
<td style="border-bottom:none; border-top:none"></td>
<td class="allborders" data-bind="click: $parent.fUpdateGewenst.bind($data,1)"><div class="cirkel" data-bind="css: {'rood' : gewenst() == 1}"> </div></td>
<td class="allborders" data-bind="click: $parent.fUpdateGewenst.bind($data,2)"><div class="cirkel" data-bind="css: {'oranje' : gewenst() == 2}"> </div></td>
<td class="allborders" data-bind="click: $parent.fUpdateGewenst.bind($data,3)"><div class="cirkel" data-bind="css: {'groen' : gewenst() == 3}"> </div></td>
<td class="allborders" data-bind="click: $parent.fUpdateGewenst.bind($data,4)"><div class="cirkel" data-bind="css: {'blauw' : gewenst() == 4}"> </div></td>
<td class="allborders" ><div class="cirkel" data-bind="css: {'grijs' : gewenst() == 5}"> </div></td>
</tr>
</tbody>
</table>
<td class="allborders" data-bind="click: $parent.fUpdateGewenst.bind($data,1)"><div class="cirkel" data-bind="css: {'rood' : gewenst() == 1}"> </div></td>
<td class="allborders" data-bind="click: $parent.fUpdateGewenst.bind($data,2)"><div class="cirkel" data-bind="css: {'oranje' : gewenst() == 2}"> </div></td>
<td class="allborders" data-bind="click: $parent.fUpdateGewenst.bind($data,3)"><div class="cirkel" data-bind="css: {'groen' : gewenst() == 3}"> </div></td>
<td class="allborders" data-bind="click: $parent.fUpdateGewenst.bind($data,4)"><div class="cirkel" data-bind="css: {'blauw' : gewenst() == 4}"> </div></td>
<td class="allborders" ><div class="cirkel" data-bind="css: {'grijs' : gewenst() == 5}"> </div></td>
</tr>
</tbody>
</table>
</div> <!-- grote blok rechts -->
</div> <!-- grote blok rechts -->
<div >
<div style="height: 30px; width:160px; background-color: #808080; display: inline-block;
border: 1px solid #0A246A; ">
</div>
<div style="height: 30px; width:160px; display: inline-block; background-color: #e08885;
border: 1px solid #0A246A; "></div>
<div style="height: 30px; width:160px; display: inline-block; background-color: #ffcc80;
border: 1px solid #0A246A; "></div>
<div style="height: 30px; width:160px; display: inline-block; background-color: #9fdf9f;
border: 1px solid #0A246A; "></div>
<div style="height: 30px; width:160px; display: inline-block; background-color: #99d6ff;
border: 1px solid #0A246A;"></div>
</div>
<ul id="people" data-bind='template: { name: "personTmpl", foreach: omgevingen }'>
</ul>
<script id="personTmpl" type="text/html">
<li class="draggable" draggable="true" data-bind="event:{
dragstart: function(data, event){
$(event.target).addClass('dragSource')
$root.drag_start_index($index());
return $(event.target).hasClass('draggable');},
dragend: function(data, event){
$root.drag_start_index(-1);
$(event.target).removeClass('dragSource')
return true;
},
dragover: function(data, event){event.preventDefault();},
dragenter: function(data, event){
$root.drag_target_index($index());
var element = $(event.target)
if(element.hasClass('draggable'))
element.toggleClass('dragover');
event.preventDefault();
},
dragleave: function(data, event, $index){
var element = $(event.target)
if(element.hasClass('draggable'))
element.toggleClass('dragover');
event.preventDefault();
},
drop: function(data, event){
$(event.target).removeClass('dragover');
console.log('swap', $root.drag_start_index(), $root.drag_target_index() )
$root.fWissel($root.drag_start_index(), $root.drag_target_index())
}
}">
<!-- <div data-bind="text: afbeelding"></div>-->
<div data-bind='attr: {class: afbeelding}'></div>
</li>
</script>
<!-- drag and drop-->
</div>
public/css/monpas/main.css
+192
View File
@@ -210,6 +210,176 @@ button.delete{
cursor: pointer;
box-shadow:none;
}
.school{
background-image: url('/css/images/school-flag-solid.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.handschudden{
background-image: url('/css/images/handshake-simple-solid.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.vasthouden{
background-image: url('/css/images/hands-holding-child-solid.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.splitsing{
background-image: url('/css/images/arrows-split-up-and-left-solid.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.ondersteuning{
background-image: url('/css/images/person-chalkboard-solid.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.omgevingZwart{
background-image: url('/css/images/omgevingZwart.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.omgevingGrijs{
background-image: url('/css/images/omgevingGrijs.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.omgevingRood{
background-image: url('/css/images/omgevingRood.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.omgevingOranje{
background-image: url('/css/images/omgevingOranje.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.omgevingGroen{
background-image: url('/css/images/omgevingGroen.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.omgevingBlauw{
background-image: url('/css/images/omgevingBlauw.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.leeg{
background-image: url('/css/images/leeg.png');
margin-right: 1px;
background-color: rgba(255, 255, 255, 0);
background-repeat: no-repeat;
background-size: 35px 35px;
background-position:center;
width: 30px;
height: 30px;
border: medium none;
cursor: pointer;
box-shadow:none;
}
.mainpagina{
display:none;
}
@@ -1278,3 +1448,25 @@ z-index: 50;
box-shadow: none;
}
.draggable {
display: inline-block;
width: 160px;
height: 40px;
padding-left: 10px;
}
.dragSource{
opacity : .4;
}
.dragover{
border-style: dashed;
background-color: #f8f8f8;
}
.trash{
border:1px solid red;
background-color: pink;
text-align:center;
}
public/js/monpas/models/modulebalkmodel.js
+2
View File
@@ -34,6 +34,7 @@ ls.initModulebalkModel = function(){
selectedSchooljaar : ko.observableArray([]),
initBindings :function(){
console.log(vandaag, "vandaag")
var self = ls.ModulebalkModel;
if (!ko.dataFor(document.getElementById('modulebalk')) ) {
@@ -74,6 +75,7 @@ ls.initModulebalkModel = function(){
self.schooljaren.push(new fAddSchooljaar(p));
}); // each
$.each(self.schooljaren(), function (j, k) {
if (vandaag >= new Date(k.start + "T00:00:00") &&
vandaag <= new Date(k.eind + "T00:00:00")) {
self.selectedSchooljaar(k);
public/js/monpas/models/ontwikkelmodel.js
+209 -20
View File
@@ -87,33 +87,74 @@ ls.initOntwikkelModel = function(){
}
,this)
}
function fAddResult(p){
function fAddResult(p) {
var dit = this;
this.ijkpuntid = p.ijkpunt_id;
this.wensid = 0;
this.ijkpuntid = p.ijkpunt_id;
this.wensid = 0;
// if (p.gewenstid) { this.wensid = p.gewenstid; }
this.scoretype = p.scoretype;
this.disabled = p.disabled;
this.disablentv = p.disablenvt;
this.huidig = ko.observable( p.huidig);
if(p.disabled == 'T' || p.disablenvt == 'T') this.huidig(5)
this.scoretype = p.scoretype;
this.disabled = p.disabled;
this.disablentv = p.disablenvt;
this.huidig = ko.observable(p.huidig);
if (p.disabled == 'T' || p.disablenvt == 'T') this.huidig(5)
// observable is niet nodig maar dit was eerst een computed
this.gewenst = ko.observable(3);
if (p.gewenst) {this.gewenst(p.gewenst)};
if(p.disabled == 'T' || p.disablenvt == 'T') this.gewenst(5)
this.nummer = p.nummer;
this.omschrijving = p.omschrijving;
this.toelichting = p.toelichting;
this.aantalscholen = p.aantalscholen;
this.gewenst = ko.observable(3);
if (p.gewenst) {
this.gewenst(p.gewenst)
}
;
if (p.disabled == 'T' || p.disablenvt == 'T') this.gewenst(5)
this.nummer = p.nummer;
this.omschrijving = p.omschrijving;
this.toelichting = p.toelichting;
this.aantalscholen = p.aantalscholen;
// this.gewenstIcons = ko.observable(0);
// if (p.gewenst) {
// this.gewenstIcons(p.gewenst)
// }
// if(dit.gewenstIcons() == 5) dit.gewenstIcons(0);
//
// this.omgevingen = ko.observableArray();
// this.saveOmgevingen = ko.observableArray([]);
// if (Number(this.nummer) == 5) {
// for (var i = 0; i < 5; i++) {
//
// if (i == Number(dit.gewenstIcons())) {
// dit.omgevingen.push('huisje')
// switch(i){
// case 0: dit.omgevingen.push('omgevingGrijs');
// break;
// case 1: dit.omgevingen.push('omgevingRood');
// break;
// case 2: dit.omgevingen.push('omgevingOranje');
// break;
// case 3: dit.omgevingen.push('omgevingGroen');
// break;
// case 4: dit.omgevingen.push('omgevingBlauw');
// break;
// }
//
// }else {
// dit.omgevingen.push( 'leeg')
// }
// }
// }
}
// function fAddIcoon(afbeelding){
// this.afbeelding = ko.observable(afbeelding)
// }
function fIcoon(afbeelding) {
this.afbeelding = ko.observable(afbeelding);
}
if (ls.OntwikkelModel !== undefined){
ls.OntwikkelModel.initModel();
}
@@ -137,6 +178,27 @@ ls.initOntwikkelModel = function(){
ingevuld : ko.observable(false),
bezig : ko.observable(false),
verberg : ko.observable(false),
// drag_start_index5 : ko.observable(0),
// drag_target_index5 : ko.observable(0),
// omgevingen : ko.observableArray([new fAddIcoon("omgevingGrijs"), new fAddIcoon("leeg"),new fAddIcoon("leeg"),new fAddIcoon("leeg"),new fAddIcoon("leeg"), ]),
//
// dragging : ko.computed(function() {
// if(ls.OntwikkelModel && ls.OntwikkelModel.drag_start_index5()) {
// return ls.OntwikkelModel.drag_start_index5() >= 0;
// }
// }),
drag_start_index : ko.observable(),
drag_target_index : ko.observable(),
dragging : ko.computed(function() {
if(ls.OntwikkelModel) {
return ls.OntwikkelModel.drag_start_index() >= 0;
}
}),
omgevingen : ko.observableArray([new fIcoon("omgevingGrijs"), new fIcoon("leeg"), new fIcoon("leeg"), new fIcoon("leeg"), new fIcoon("leeg")]),
basis : ko.observableArray([new fIcoon("omgevingGrijs"), new fIcoon("omgevingRood"), new fIcoon("omgevingOranje"), new fIcoon("omgevingGroen"), new fIcoon("omgevingBlauw")]),
initBindings :function(){
var self = ls.OntwikkelModel;
@@ -148,6 +210,7 @@ ls.initOntwikkelModel = function(){
initModel: function() {
var self = ls.OntwikkelModel;
$.post("index.php/monpas/rapijkpunten/checkLevel", function(data){
if(data){
if(data === 1)
@@ -261,7 +324,7 @@ ls.initOntwikkelModel = function(){
self.selectedOrgversion("")
}
if(self.selectedOrgversion().soort == '4' && self.selectedOrgversion().vorm == '2' && self. usernivo() <= 1){
if(self.orgsoort()== '4' && self.selectedOrgversion().vorm == '2' && self. usernivo() <= 1){
self.verberg(false);
}
else{
@@ -357,10 +420,45 @@ ls.initOntwikkelModel = function(){
self.results.removeAll();
if (data){
$.each(data.scores, function(i,p){
self.results.push(new fAddResult(p));
self.ingevuld(true);
})
// $.each(data.scores, function(i,p){
// if(p.gewenst){
// if (Number(p.gewenst) == 5) self.drag_start_index5(0);
// else{
// self.drag_start_index5(Number(p.gewenst))
// }
// for(var s = 0; s < 5; s++){
// if(s== self.drag_start_index5()){
// switch(s){
// case 0: self.omgevingen.push('omgevingGrijs')
// break;
// case 1: self.omgevingen.push('omgevingRood')
// break;
// case 2: self.omgevingen.push('omgevingOranje');
// break;
// case 3: self.omgevingen.push('omgevingGroen');
// break;
// case 4: self.omgevingen.push('omgevingBlauw');
// break;
// }
//
// }else{ self.omgevingen.push('leeg')
//
// }
// }
//
// }
//
// })
self.fGetWriteAutorisatie();
}
@@ -456,6 +554,97 @@ ls.initOntwikkelModel = function(){
};// If wensids
},'json') ;
},
// fDragstart: function(data, event, index){
// var self= ls.OntwikkelModel;
// console.log("in event", event)
// console.log("in data", data)
// console.log("index", index);
// // $(event.target).addClass('dragSource')
// self.drag_start_index5(index);
// return $(event.target).hasClass('draggable');
// },
//
// fDragend: function($data, event){
// var self= ls.OntwikkelModel;
//
// self.drag_start_index5(-1);
// $(event.target).removeClass('dragSource')
// return true;
// },
// fDragover: function($data, event){
// event.preventDefault();
// },
//
// fDragenter: function($data, event, index){
// var self= ls.OntwikkelModel;
// self.drag_target_index5(index);
//
// var element = $(event.target)
// if(element.hasClass('draggable'))
// element.toggleClass('dragover');
// event.preventDefault();
// },
//
// fDragleave: function($data, event){
// var element = $(event.target)
//
// if(element.hasClass('draggable'))
// element.toggleClass('dragover');
// event.preventDefault();
// },
//
// fDrop: function($data, event){
// var self= ls.OntwikkelModel;
//
// $(event.target).removeClass('dragover');
// self.fDragAndDrop(self.drag_start_index5(), self.drag_target_index5())
// },
//
// fDragAndDrop: function(from, to){
//
// var self=ls.OntwikkelModel;
// console.log(from, "from")
// console.log(to, "to")
// if (to > self.omgevingen().length - 1 || to < 0) return;
//
// var fromObj = self.omgevingen()[from]
// var toObj = self.omgevingen()[to]
//
// self.omgevingen()[to] = fromObj;
// self.omgevingen()[from] = toObj;
// console.log(fromObj, "toObj")
// self.omgevingen.valueHasMutated();
// },
trash : function(index) {
var self = ls.OntwikkelModel;
self.people.splice(index, 1)
},
fWissel : function(from, to) {
var self = ls.OntwikkelModel;
if (to > self.omgevingen().length - 1 || to < 0) return;
var fromObj = self.basis()[to];//grisd blokje op 0
var toObj = self.omgevingen()[to];// leeg blokje op 3
self.omgevingen()[from] = toObj; //wordt leeg blokje op 0
self.omgevingen()[to] = fromObj; //wordt grijsblokje op 3 moet worden groen blokje op s
self.omgevingen.valueHasMutated()
},
fPrintOntwikkelmatrix: function(){
var self = ls.OntwikkelModel;
var orgid = self.selectedOrg().id;