1e array
This commit is contained in:
Monique
@@ -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/> </td>
|
||||
<td></td>
|
||||
<td colspan =5 > <b> gewenste situatie</b><br/> </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/> </td>
|
||||
<td></td>
|
||||
<td colspan =5 > <b> gewenste situatie</b><br/> </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>
|
||||
|
||||
Reference in New Issue
Block a user