agenda-partials van productie toegevoegd

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-22 09:34:40 +02:00
co-authored by Claude Opus 5.5
parent c8fc4767a1
commit c6afbb01f2
2 changed files with 233 additions and 0 deletions
@@ -0,0 +1,175 @@
<div class="row" id="huidigdragdrop">
<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" id="gewenstdragdrop">
<h4>Gewenste situatie
<span style="font-size: 14px;">(Schuif de iconen naar het streefniveau.)</span>
</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>
@@ -0,0 +1,58 @@
<table id="standaardagenda" 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>