monpas/application/views/monpas/pages/swvversies.php

<div class="col-sm-12 mainpagina submenupage" id ="pagSWVversies">
	
	<div class="col-sm-12 col-md-3">		
		<h4 style="margin-top:20px"> selecteer een organisatie</h4>
		<div style="width: 99% ; height: 500px; overflow-y:auto; margin-top:20px">
			<ul data-bind= "foreach: swvs" class="lsul ">
				<li  class= 'header clickable' data-bind="text: naam, click: $parent.fSetSelectedOrg"></li>
				<li  data-bind="visible: kamers().length > 0"> 
					<ul data-bind="foreach: kamers">
						<li class="clickable" data-bind="text: naam, click: $root.fSetSelectedOrg"></li>
					</ul>
				</li>	
			</ul>
		</div>		
	</div><!-- kolom links -->

	<div class="col-sm-12 col-md-9" >
		<div class="col-sm-12">
			<h3>Instrument
				 <select 
						data-bind="	options		: modules,
									optionsText	: 'naam',
									value		: selectedModule,
									event		: {change: fChangeModule}">
				</select>
			</h3>	
		</div>
		<div class="col-sm-12" data-bind="with: selectedOrg">
			<h4  style="margin-top: 20px">
				Geselecteerde organisatie:
				<span data-bind="text: naam"></span>
				<button style="float:right"  data-bind="click: $parent.fNieuweKoppeling"> nieuwe periode</button>
			</h4>
			<table style="width: 100%; margin-top:20px;">
				<thead>
					<tr>
						<th style="width: 3%">A</th>
						<th style="width: 12%">geldig vanaf</th>
						<th style="width: 12%">geldig t.m</th>
						<th style="width: 20%">versie</th>
						<th style="width: 15%">vorm</th>
						<th style="width: 20%; ">score type</th>
                        <th style="width: 3%;">
                            S <sup style="font-weight: bold" data-bind="click: $parent.fToonInfoTekst">i</sup>
                        </th>
						<th style="width: 13%">invullen tot</th>
						<th style="width: 3%"> </th>
					</tr>
				</thead>
				<tbody data-bind="foreach: $parent.koppelingen">
					<tr  >
						<td> <input type="checkbox"
									data-bind="checked: actief, click: $root.fUpdateActief" /> 

						</td>
						<td><input class= "datum"
						 			data-bind="datepicker:{maxDate: geldigtm}, value: geldigvanaf, event: {change: $root.fUpdateKoppeling}" /></td>
						 <td><input class= "datum"
						 			data-bind="datepicker:{minDate: geldigvanaf}, value: geldigtm, event: {change: $root.fUpdateKoppeling}" />
						 </td>
						<td data-bind="text: naam"> </td>
						<td>
							 <select data-bind="options: $root.vormarray,
							 					optionsText: 'naam',
							 					optionsValue: 'id',
							 					value: 	vorm,
							 					event: {change: $root.fUpdateKoppeling},
							 					enable: wijzigok">
							 </select>					 
						</td>
						<td>
							 <select data-bind="options: $root.scoretypes,
							 					optionsText: 'naam',
							 					optionsValue: 'sysnr',
							 					value: 	scoretype,
							 					event: {change: $root.fUpdateKoppeling},
							 					enable: wijzigok" >
							 </select>					 
						</td>
                        <td>
                            <!-- ko if: scoretype() != 1  && scoretype != 2 -->
                            <input type="checkbox"
                                    data-bind="checked: toonOmschrijving(),  click: $root.fUpdateScores " />
                            <!-- /ko -->
                        </td>
						 <td><input class= "datum"
						 			data-bind="datepicker{minDate: geldigvanaf, maxDate: geldigtm}, value: invullentm, event: {change: $root.fUpdateKoppeling}" />
						 </td>
						<td><button class="delete"
									data-bind="click: $root.fDeleteKoppeling, visible:wijzigok"> </button> </td>
					</tr>
				</tbody>
			</table>
		</div>	
	</div> <!-- kolom rechts -->		
	<!-- ********************  popups ************************** -->
	<div class="modal fade" id="modNieuweKoppeling" role="dialog" >
		<div class="modal-dialog ">
			<div class="modal-content">
				<div class="modal-header">
					<h4>Nieuwe koppeling</h4>
				</div>
				<div class="modal-body">
					<table class="lstable"  >
						<tbody>
							<tr>
								<td > selecteer een versie </td>
								<td > <select data-bind="	options		: versies,
															optionsText	: 'naam',
															value		: newKoppelingVersie">
										</select>
								</td>
							</tr>
							<tr>
								<td > selecteer een vorm</td>
								<td > <select data-bind="	options		: vormarray,
															optionsText	: 'naam',
															optionsValue: 'id',
															value		: newKoppelingVorm">
										</select>
								</td>
							</tr>
							<tr>
								<td > score mogelijkheid</td>
								<td > <select data-bind="	options			: scoretypes,
															optionsText		: 'naam',
															optionsValue	: 'sysnr',
															value			: newScoretype">
										</select>
								</td>
							</tr>
                            <tr data-bind="visible: toonOptie()== true">
                                 <td >Toon scoreomschrijving </td>
                                 <td> <input type="checkbox" data-bind="checked: newOmschrijving "/> </td>
                            </tr>
							<tr>
								<td > ingangsdatum</td>
								<td > <input class= "datum" data-bind="datepicker{maxDate: newKoppelingGeldigtm}, value: newKoppelingGeldigvanaf" />
							</tr>
							<tr>
								<td > einddatum</td>
								<td > <input class= "datum" data-bind="datepicker{minDate: newKoppelingGeldigvanaf}, value: newKoppelingGeldigtm" />
							</tr>
							<tr>
								<td > invullen t/m</td>
								<td > <input class= "datum" data-bind="datepicker{minDate: newKoppelingGeldigvanaf, maxDate: newKoppelingGeldigtm}, value: newKoppelingInvullentm" />
							</tr>
						</tbody>							
					</table>
				</div>
				<div class="modal-footer">
					<button style="width: 80px;" data-bind="click: fSaveKoppeling, visible: newKoppelingVersie!== undefined">opslaan</button>
					<button style="width: 80px;" data-dismiss="modal" >annuleren</button> 
				</div>
			</div>
		</div>
	</div>	
</div>