312 lines
14 KiB
PHP
312 lines
14 KiB
PHP
|
|
<div class="col-sm-12 mainpagina" id ="pagontwikkel">
|
|
<div data-bind="visible: !ingevuld()"> De geselecteerde lijst is (nog) niet ingevuld.</div>
|
|
|
|
|
|
<div class="col-sm-12 col-md-3" >
|
|
|
|
<div style = "max-height: 300px; overflow-y:auto">
|
|
|
|
<!-- ko if : orgsoort() ==4 -->
|
|
<div data-bind="visible: orgsoort()== 4, with: toporg">
|
|
<p data-bind="text: naam"></p>
|
|
</div>
|
|
<!-- data-bind="visible: orgsoort() == 4 && usernivo() <= 1" -->
|
|
<div data-bind="visible: !verberg()" style="margin-top:10px">
|
|
<span>Medewerker:</span>
|
|
<select data-bind=" options : users,
|
|
optionsText : 'usernaam',
|
|
value : selectedUser,
|
|
optionsCaption : 'Schoolgemiddelde',
|
|
event : {change: fGetUserScores},
|
|
enable : users().length >= 1 ">
|
|
</select>
|
|
|
|
<div data-bind="visible: !ingevuld()" style="margin-top: 10px;"><span > De lijst is (nog) niet ingevuld.</span></div>
|
|
</div>
|
|
|
|
<!-- /ko -->
|
|
|
|
<!-- ko if : orgsoort() ==3 -->
|
|
<div data-bind="visible: orgsoort() == 3">
|
|
<table style="width: 100%;">
|
|
<tbody data-bind="with: toporg">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td data-bind="click: $root.fToggleGeopend" style="width:16px;">
|
|
<button class="noshowklein openbutton"
|
|
data-bind="css: {'closebutton': geopend() }">
|
|
</button>
|
|
</td>
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
<tr data-bind="visible: geopend">
|
|
<td></td>
|
|
<td >
|
|
<table style="width: 100%;">
|
|
<tbody data-bind="foreach: scholen">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- /ko -->
|
|
|
|
<!-- ko if: orgsoort() ==2 -->
|
|
|
|
<table style="width: 100%">
|
|
<tbody data-bind="foreach: toporg">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td data-bind="click: $root.fToggleGeopend" style="width:16px;">
|
|
<button class="noshowklein openbutton"
|
|
data-bind="css: {'closebutton': geopend() }">
|
|
</button>
|
|
</td>
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
<tr data-bind="visible: geopend">
|
|
<td colspan = 2 style="padding-left: 20px;">
|
|
<table style="width: 100%">
|
|
<tbody data-bind="foreach: bgs">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td data-bind="click: $root.fToggleGeopend" style="width:16px;">
|
|
<button class="noshowklein openbutton"
|
|
data-bind="css: {'closebutton': geopend() }">
|
|
</button>
|
|
</td>
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
<tr data-bind="visible: geopend">
|
|
<td colspan = 2 style="padding-left: 20px;">
|
|
<table>
|
|
<tbody data-bind="foreach: scholen">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
<!-- /ko -->
|
|
|
|
<!-- ko if: orgsoort() ==1 -->
|
|
<table style="width: 100%;">
|
|
<tbody data-bind="foreach: toporg">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td data-bind="click: $root.fToggleGeopend" style="width:16px;">
|
|
<button class="noshowklein openbutton"
|
|
data-bind="css: {'closebutton': geopend() }">
|
|
</button>
|
|
</td>
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
<tr data-bind="visible: geopend()">
|
|
<td></td>
|
|
<td >
|
|
<table style="width: 100%;">
|
|
<tbody data-bind="foreach: kamers">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td data-bind="click: $root.fToggleGeopend" style="width:16px;">
|
|
<button class="noshowklein openbutton"
|
|
data-bind="css: {'closebutton': geopend() }">
|
|
</button>
|
|
</td>
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
|
|
<tr data-bind="visible: geopend()">
|
|
<td></td>
|
|
<td >
|
|
<table style="width: 100%;">
|
|
<tbody data-bind="foreach: bgs">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td data-bind="click: $root.fToggleGeopend" style="width:16px;">
|
|
<button class="noshowklein openbutton"
|
|
data-bind="css: {'closebutton': geopend() }">
|
|
</button>
|
|
</td>
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
<tr data-bind="visible:geopend()">
|
|
<td></td>
|
|
<td >
|
|
<table style="width: 100%;">
|
|
<tbody data-bind="foreach: scholen">
|
|
<tr class="selectable" data-bind="css: {'selected': $root.selectedOrg().id == id}">
|
|
<td class='orgtd' data-bind="text: naam, click: $root.fSwitchOrg"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- /ko -->
|
|
</div>
|
|
<hr/>
|
|
<button style="margin-top:10px; margin-bottom:20px; "
|
|
data-bind="click: fSaveGewenst ">Gewenste situatie opslaan
|
|
</button>
|
|
|
|
<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>
|
|
</div>
|
|
</div> <!-- col md 4 -->
|
|
<div class="col-sm-12 col-md-9">
|
|
<div data-bind = "visible: orgversions().length > 0">
|
|
<h4>Selecteer een lijst
|
|
<select style="font-size: medium; margin-top : 5px;"
|
|
data-bind=" options : orgversions,
|
|
optionsText : 'info',
|
|
value : selectedOrgversion,
|
|
event : {change: fChangeVersion2}">
|
|
</select>
|
|
<button class="printer" style="margin-left: 30px" data-bind="click: fPrintOntwikkelmatrix"></button>
|
|
|
|
</h4>
|
|
</div>
|
|
<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 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 -->
|
|
|
|
|
|
<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>
|