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

Merge branch 'feature/draganddrop' into develop

Browse Source 
# Conflicts:
#	application/core/MY_Controller.php
This commit is contained in:
Monique
2022-09-29 10:40:21 +02:00
parent ffd213d350 51f2ae654f
commit e8fd10435f
22 changed files with 1215 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/views/monpas/pages/ontwikkel.php
+53 -58
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>
@@ -168,10 +169,35 @@
<div id="hierhetverschilhuidiggewenst">
<h4><?=$labels['ijkpuntadvies']?> </h4>
<ul data-bind="foreach: results" style="list-style-type:none; margin:0; padding:0;">
<li data-bind="visible: gewenst() > huidig(), text: nummer + '. ' + omschrijving"></li>
<ul data-bind="foreach: adviezen" style="list-style-type:none; margin:0; padding:0;">
<li data-bind="text: nummer + '. ' + omschrijving"></li>
</ul>
</div>
<div style="margin-top: 50px;">
<h4>Legenda</h4>
<table>
<tr>
<td style="width: 75px; background-color: #e08885; "></td>
<td style="padding: 3px;"> zwak</td>
</tr>
<tr>
<td style="width: 75px; background-color: #ffcc80 "></td>
<td style="padding: 3px;"> onvoldoende</td>
</tr>
<tr>
<td style="width: 75px; background-color: #9fdf9f; "></td>
<td style="padding: 3px;"> voldoende</td>
</tr>
<tr>
<td style="width: 75px; background-color: #99d6ff; "></td>
<td style="padding: 3px;"> goed</td>
</tr>
<tr>
<td style="width: 75px; background-color:#808080 "></td>
<td style="padding: 3px;"> nvt</td>
</tr>
</table>
</div>
</div> <!-- col md 4 -->
<div class="col-sm-12 col-md-9">
<div data-bind = "visible: orgversions().length > 0">
@@ -182,68 +208,37 @@
value : selectedOrgversion,
event : {change: fChangeVersion2}">
</select>
<button class="printer" style="margin-left: 30px" data-bind="click: fPrintOntwikkelmatrix"></button>
<button class="printer" style="display: inline-block" data-bind="click: fPrintOntwikkelmatrix"></button>
</h4>
<!-- ko if: instrument() && instrument() == 730 -->
<div >
<div><input type="radio" name="DragDrop" value="dragdrop" data-bind="checked: selectedAgenda, click: "/> toon drag and drop agenda</div>
<div><input type="radio" name="DragDrop" value="standaard" data-bind="checked: selectedAgenda"/> toon standaard agenda</div>
</div>
<!--/ko-->
</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>
</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>
</div >
<div class="col-sm-12 col-md-9">
<div data-bind="visible: selectedAgenda() =='standaard' ">
<?php $this->load->view("monpas/pages/partials/_tabel_agenda"); ?>
</div>
<div data-bind="visible: selectedAgenda() == 'dragdrop' ">
<?php $this->load->view("monpas/pages/partials/_draganddrop_agenda"); ?>
</div>
<!-- grote blok rechts -->
</div>
<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>
</div> <!-- grote blok rechts -->
<!-- drag and drop-->
</div>
application/views/monpas/pages/partials/_draganddrop_agenda.php
+171
View File
@@ -0,0 +1,171 @@
<div class="row">
<h4>Huidige situatie</h4>
<div class="col-xs-12">
<table style=" margin-bottom: 40px; width: 100%">
<tr class="modal-header">
<td style="width: 5%">nr.</td>
<td style="width:70%;"><?=$labels['Ykpunten']?> </td>
<td style="width: 5%; text-align:center" class="rood"> 1</td>
<td style="width: 5%; text-align:center" class="oranje"> 2</td>
<td style=";width: 5% text-align:center" class="groen"> 3</td>
<td style="width: 5% text-align:center" class="blauw"> 4</td>
<td style="width: 5%; 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>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row" >
<h4>Gewenste situatie</h4>
<div class="col-xs-5" >
<table style="width: 100%; ">
<tr>
<td class="allborders"
style="width: 12%; padding: 2px; height: 20px; vertical-align: top;
background-color: #6F0B3D; color:#f1f4f7; border-right: none; "
>nr.
</td>
<td class="allborders"
style=" width: 90%; vertical-align: top; padding: 2px; height: 20px;background-color: #6F0B3D;
color:#f1f4f7; border-left: none; "
> <?=$labels['Ykpunten']?>
</td>
</tr>
<!-- ko foreach: results -->
<tr>
<td class="allborders"
style="width: 10%; text-align: right; padding: 3px; height: 56px; vertical-align: top"
data-bind="text: nummer, style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}">
</td>
<td class="allborders clickable "
style=" width: 90%; vertical-align: top; padding: 3px; height: 56px; "
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>
</tr>
<!--/ko-->
</table>
</div>
<div class="col-xs-7" >
<div style=" height: 27px; width:19%; background-color: #808080; color:#f1f4f7; text-align: center; display: inline-block;">&nbsp</div>
<div style=" height: 27px; width:19%; display: inline-block; background-color: #e08885; color:#f1f4f7; text-align: center">1</div>
<div style=" height: 27px; width:19%; display: inline-block; background-color: #ffcc80;color:#f1f4f7;text-align: center">2</div>
<div style=" height: 27px; width:19%; display: inline-block; background-color: #9fdf9f;color:#f1f4f7;text-align: center">3</div>
<div style=" height: 27px; width:19%; display: inline-block; background-color: #99d6ff;color:#f1f4f7;text-align: center">4</div>
<div id="acceptatie" data-bind=" foreach: acceptaties ">
<div class="draggable" draggable="true"
data-bind="event:{
dragstart : $root.fDragstart.bind($data, event, $index(), 'ACC'),
dragend : $root.fDragend.bind($data, event, $index()),
dragover : $root.fDragover.bind($data, event ),
dragenter : $root.fDragenter.bind($data, event, $index(), 'ACC'),
dragleave : $root.fDragleave.bind($data, event),
drop : $root.fDrop.bind($data, event, $index(), 'ACC' )
}">
<!-- <div data-bind="text: afbeelding"></div>-->
<div data-bind='attr: {class: afbeelding}'></div>
</div>
</div>
<div id="betrokken" data-bind=" foreach: betrokkenen ">
<div class="draggable" draggable="true"
data-bind="event:{
dragstart : $root.fDragstart.bind($data, event, $index(), 'BTR'),
dragend : $root.fDragend.bind($data, event, $index()),
dragover : $root.fDragover.bind($data, event ),
dragenter : $root.fDragenter.bind($data, event, $index(), 'BTR'),
dragleave : $root.fDragleave.bind($data, event),
drop : $root.fDrop.bind($data, event, $index(), 'BTR' )
}">
<!-- <div data-bind="text: afbeelding"></div>-->
<div data-bind='attr: {class: afbeelding}'></div>
</div>
</div>
<div id="differentiatie" data-bind=" foreach: diffs ">
<div class="draggable" draggable="true"
data-bind="event:{
dragstart : $root.fDragstart.bind($data, event, $index(), 'DIF'),
dragend : $root.fDragend.bind($data, event, $index()),
dragover : $root.fDragover.bind($data, event ),
dragenter : $root.fDragenter.bind($data, event, $index(), 'DIF'),
dragleave : $root.fDragleave.bind($data, event),
drop : $root.fDrop.bind($data, event, $index(), 'DIF' )
}">
<!-- <div data-bind="text: afbeelding"></div>-->
<div data-bind='attr: {class: afbeelding}'></div>
</div>
</div>
<div id="extra" data-bind=" foreach: extras ">
<div class="draggable" draggable="true"
data-bind="event:{
dragstart : $root.fDragstart.bind($data, event, $index(), 'EXT'),
dragend : $root.fDragend.bind($data, event, $index()),
dragover : $root.fDragover.bind($data, event ),
dragenter : $root.fDragenter.bind($data, event, $index(), 'EXT'),
dragleave : $root.fDragleave.bind($data, event),
drop : $root.fDrop.bind($data, event, $index(), 'EXT' )
}">
<!-- <div data-bind="text: afbeelding"></div>-->
<div data-bind='attr: {class: afbeelding}'></div>
</div>
</div>
<div id="omgeving" data-bind=" foreach: omgevingen ">
<div class="draggable" draggable="true"
data-bind="event:{
dragstart : $root.fDragstart.bind($data, event, $index(), 'OMG'),
dragend : $root.fDragend.bind($data, event, $index()),
dragover : $root.fDragover.bind($data, event ),
dragenter : $root.fDragenter.bind($data, event, $index(), 'OMG'),
dragleave : $root.fDragleave.bind($data, event),
drop : $root.fDrop.bind($data, event, $index(), 'OMG' )
}">
<!-- <div data-bind="text: afbeelding"></div>-->
<div data-bind='attr: {class: afbeelding}'></div>
</div>
</div>
</div>
</div>
application/views/monpas/pages/partials/_tabel_agenda.php
+58
View File
@@ -0,0 +1,58 @@
<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 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>