351 lines
20 KiB
PHP
351 lines
20 KiB
PHP
<div class="col-sm-12 mainpagina" id ="pagmonfinbestemmingen2">
|
|
<div class="col-sm-12" >
|
|
<h4> Kalenderjaar
|
|
<select data-bind="options: kalenderjaren,
|
|
optionsText: 'naam',
|
|
value: selectedKalenderjaar,
|
|
event: {change: fGetAllBestemmingen}">
|
|
</select>
|
|
<span style="margin-right: 20px;"
|
|
data-bind="text: 'Dit jaar is financieel afgesloten', visible: jaarclosed()"><span>
|
|
</h4>
|
|
<div data-bind="visible: ! jaartoewijzing()">
|
|
<p>Er zijn nog geen budgetgegevens voor dit kalenderjaar</p>
|
|
</div>
|
|
</div>
|
|
<div class = "col-sm-12" data-bind="visible: jaartoewijzing()">
|
|
<div data-bind="visible: jaartoewijzing() && jaartoewijzing().basisextra == 0">
|
|
<p>Deze versie van de monitor financiën vereist dat er een verschil wordt gehanteerd tussen basis en extra ondersteuning.</p>
|
|
</div>
|
|
<div style= "width: 100%" data-bind="visible: jaartoewijzing() && jaartoewijzing().basisextra != 0">
|
|
<p style="font-size:0.8em;float:right; color:red">bedragen worden opgeslagen nadat u het invoerveld verlaat</p>
|
|
<h4><button class="openbutton" data-bind="css: {closebutton: basisgeopend()}, click: fToggle.bind($data,1)"></button>
|
|
Basisondersteuning
|
|
</h4>
|
|
<div data-bind="visible: basisgeopend()">
|
|
<table class="lstable" style="width : 100%; font-size:0.9em; position: relative">
|
|
<thead style="position: sticky; top: 0" >
|
|
<tr>
|
|
<th style="width:29%"></th>
|
|
<th style="width:5%"></th>
|
|
<th style="width: 11%"></th>
|
|
<th style="width: 11%"></th>
|
|
<th style="width: 11%"></th>
|
|
<th style="width: 11%"></th>
|
|
<th style="width:11%"></th>
|
|
<th style="width:11%"></th>
|
|
</tr>
|
|
<tr class="blokheader" >
|
|
<th colspan="2" style="background-color: #968026; border: none; " >
|
|
</th>
|
|
<!-- ko foreach: uitgavetypes -->
|
|
<th style="text-align:right; padding-right: 5px; background-color: #968026;" data-bind="style: {'borderRight' : code == 'TOTAAL' ? '2px solid #ffffff' : 'none' } ">
|
|
<span data-bind="text: code == 'TOTAAL' ? code : code == 'SCHOLING' ? 'SUBTOTALEN' : ' ' "></span>
|
|
</th>
|
|
<!-- /ko -->
|
|
<th class="blokheader"
|
|
style="text-align: right;
|
|
padding-right: 5px;
|
|
padding-bottom: 5px;
|
|
background-color: #968026;
|
|
border-left: 2px solid #ffffff;
|
|
border-right: 2px solid #ffffff;">
|
|
<span >Restant
|
|
</span>
|
|
</th>
|
|
<th class="blokheader" style="text-align: right; padding-right:5px; padding-bottom: 5px; background-color: #968026;">
|
|
<span>Percentage</span>
|
|
<i class="fa fa-info-circle"
|
|
data-bind="click: fToelichting
|
|
">
|
|
</i>
|
|
</th>
|
|
</tr>
|
|
<tr class="blokheader2" style=" text-align:left; padding-left:5px; ">
|
|
<th colspan="2" style="background-color: #968026; border: none;">
|
|
</th>
|
|
|
|
<!-- ko foreach: $root.uitgavetypes -->
|
|
<th style="text-align:right; border-right: 2px solid #ffffff; background-color: #968026;padding-right: 5px;"
|
|
data-bind="style: {'borderTop' : code != 'TOTAAL' ? '2px solid #ffffff' : 'none', }">
|
|
<span data-bind="text: code != 'TOTAAL' ? code : ' ' ">
|
|
</span>
|
|
</th>
|
|
<!-- /ko -->
|
|
|
|
<th class="blokheader2" style="border-right: 2px solid #ffffff; border-top: none; background-color: #968026;">
|
|
</th>
|
|
<th class="blokheader2" style="background-color: #968026; border-top: none;">
|
|
</th>
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody data-bind="foreach: basissoorten">
|
|
|
|
<tr class="blokheader">
|
|
<td class="blokheader" colspan="8" data-bind="text: naam" style="text-align: left; border: 2px solid #ffffff"></td>
|
|
</tr>
|
|
|
|
<!-- ko foreach:subsoorten -->
|
|
<tr>
|
|
<td data-bind="text: naam"></td>
|
|
<td style="text-align: left; color: #008028 ">budget</td>
|
|
<!-- ko foreach: uitgavetypes() -->
|
|
<td style="text-align: right; padding-top: 1px; vertical-align: top ">
|
|
<!-- ko if : code != 'RESTANT' -->
|
|
|
|
<input class="decimal"
|
|
style="width: 145px; max-width: 98%; background-color: #e6ffee; font-size: 0.9em"
|
|
data-bind="textInput: budgetFormat,
|
|
event:{change:$root.fSaveBudget.bind($data, $parent.subsoortID, 'BASIS') } ,
|
|
enable: ! $root.jaarclosed() && (code == 'TOTAAL' || Number($parent.uitgavetypes()[0].budget()) > 0),
|
|
style : {'backgroundColor' : code == 'TOTAAL' ? '#e6ffee' : Number($parent.uitgavetypes()[0].budget()) > 0 ? '#e6ffee' : '#cccccc' } "
|
|
/>
|
|
<!-- /ko -->
|
|
<!-- ko if : code == 'RESTANT' -->
|
|
<span class="decimal"
|
|
style="width: 145px; max-width: 98%; font-size: 0.9em; color: #008028"
|
|
data-bind="text: budgetFormat" >
|
|
</span>
|
|
|
|
<!-- /ko -->
|
|
</td>
|
|
<!-- /ko -->
|
|
<td style="padding: 0; padding-top: 1px; vertical-align: top">
|
|
<div style="width: 98%;height: 24px;
|
|
font-size: 0.9em; font-family: sans-serif, verdana; padding-left: 2px; padding-top: 2px; color: #008028;
|
|
padding-bottom: 2px; margin: 0; text-align: right; padding-right: 3px;">
|
|
<span data-bind="text: budgetpctFormat() ,
|
|
visible: ! $root.jaarclosed() ">
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr >
|
|
<td ></td>
|
|
<td style="text-align: left; color:#003e80; ">uitgaven</td>
|
|
<!-- ko foreach: uitgavetypes() -->
|
|
<td style="text-align: right; padding-bottom: 10px;">
|
|
<!-- ko if: code != 'RESTANT' && code != 'TOTAAL'-->
|
|
<input class="decimal"
|
|
style="width: 145px; max-width:98%; background-color: #e6f2ff"
|
|
data-bind="textInput: bedragFormat,
|
|
style: { color : Number(budget()) < Number(bedrag()) ? '#ff0000' : '#000000' },
|
|
event: {change:$root.fSaveBedrag.bind($data, $parent.subsoortID, 'BASIS' )} ,
|
|
enable: ! $root.jaarclosed()" />
|
|
<!-- /ko -->
|
|
<!-- ko if: code == 'RESTANT' || code == 'TOTAAL'-->
|
|
<span class="decimal"
|
|
style="width: 145px; max-width:98%"
|
|
data-bind="text: bedragFormat,
|
|
style: { color : Number(budget()) < Number(bedrag()) ? '#ff0000' : '#000000',
|
|
fontSize : code == 'TOTAAL' ? 'small' : 'normal' },
|
|
">
|
|
</span>
|
|
<!-- /ko -->
|
|
</td>
|
|
<!-- /ko -->
|
|
|
|
<td style="padding: 0; vertical-align: top">
|
|
<div style="width: 98%;height: 24px; color:#003e80;
|
|
font-size: 0.9em; font-family: sans-serif, verdana; padding-left: 2px; padding-top: 2px;
|
|
padding-bottom: 2px; margin: 0; text-align: right; padding-right: 3px;">
|
|
<span data-bind="text: bedragpctFormat,
|
|
visible: ! $root.jaarclosed()">
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
</tr>
|
|
<!-- /ko -->
|
|
</tbody> <!-- FOREACH basissoorten -->
|
|
</table>
|
|
</div> <!-- visible basisgeopend -->
|
|
<p style="margin-bottom:0; background-color:#f8f8f8; padding-left:10px; padding-top:10px;">
|
|
<span style="display:inline-block; width: 250px; font-weight: bold" >Basisondersteuning </span>
|
|
<br>
|
|
<span style="display:inline-block; width: 250px;" >Uitgaven </span>
|
|
<span style="display:inline-block; width: 100px; text-align:right"
|
|
data-bind="text: totaalbasis">
|
|
</span>
|
|
|
|
<span data-bind="text: totbasispct() == '0,0' ? '' : '(' + totbasispct() + '% van het totaalbudget)' ">
|
|
</span>
|
|
<br>
|
|
<span style="display:inline-block; width: 250px" >Gebudgeteerd per kostenpost</span>
|
|
<span style="display:inline-block; width: 100px; text-align:right"
|
|
data-bind="text: gebudgetbasis ">
|
|
</span>
|
|
<span data-bind= "text: gebudgetbasispct()== '0,0' ? '' : '(' + gebudgetbasispct() + '% van het totaalbudget)' "></span>
|
|
<br>
|
|
<span style="display:inline-block; width: 250px" >Totaalbudget</span>
|
|
<span style="display:inline-block; width: 100px; text-align:right"
|
|
data-bind="text: jaartoewijzing() ? jaartoewijzing().basis : '' ">
|
|
</span>
|
|
</p>
|
|
|
|
<!-- **************** extra ondersteuning *************** -->
|
|
<h4><button class="openbutton" data-bind="css: {closebutton: extrageopend()}, click: fToggle.bind($data,2)"></button>
|
|
Extra ondersteuning
|
|
</h4>
|
|
<div data-bind="visible: extrageopend()">
|
|
<table class="lstable" style="width : 100%; font-size:0.9em; position: relative;">
|
|
<thead style="position: sticky; top: 100px;">
|
|
<tr>
|
|
<th style="width:29%"></th>
|
|
<th style="width:5%"></th>
|
|
<th style="width: 11%"></th>
|
|
<th style="width: 11%"></th>
|
|
<th style="width: 11%"></th>
|
|
<th style="width:11%"></th>
|
|
<th style="width:11%"></th>
|
|
<th style="width:11%"></th>
|
|
</tr>
|
|
<tr class="blokheader" style=" text-align:left; padding-left:5px; ">
|
|
<th colspan='2' style=" background-color: #968026; border: none ">
|
|
</th>
|
|
|
|
<!-- ko foreach: uitgavetypes -->
|
|
<th style="text-align:right; background-color: #968026; padding-right: 5px;" data-bind="style: {'borderRight' : code == 'TOTAAL' ? '2px solid #ffffff' : 'none' } ">
|
|
<span data-bind="text: code == 'TOTAAL' ? code : code == 'SCHOLING' ? 'SUBTOTALEN' : ' ' "></span>
|
|
</th>
|
|
<!-- /ko -->
|
|
<th class="blokheader"
|
|
style="text-align: right;
|
|
padding-right: 5px;
|
|
padding-bottom: 5px;
|
|
background-color: #968026;
|
|
border-left: 2px solid #ffffff;
|
|
border-right: 2px solid #ffffff;">
|
|
Restant
|
|
</th>
|
|
<th class="blokheader" style="text-align: right; padding-right:5px; padding-bottom: 5px; background-color: #968026">
|
|
<span >Percentage</span>
|
|
<i class="fa fa-info-circle"
|
|
data-bind="click: fToelichting">
|
|
</i>
|
|
</th>
|
|
|
|
</tr>
|
|
<tr class="blokheader2" style=" text-align:left; padding-left:5px; ">
|
|
<th colspan="2" style=" background-color: #968026; border: none;">
|
|
</th>
|
|
<!-- ko foreach: $root.uitgavetypes -->
|
|
<th style="text-align:right; border-right: 2px solid #ffffff; background-color: #968026; padding-right: 5px;"
|
|
data-bind="style: {'borderTop' : code != 'TOTAAL' ? '2px solid #ffffff' : 'none', }" >
|
|
<span data-bind="text: code != 'TOTAAL' ? code : ' ' "></span>
|
|
</th>
|
|
<!-- /ko -->
|
|
<th class="blokheader2" style="border-right: 2px solid #ffffff; background-color: background-color: #968026; border-top: none;">
|
|
</th>
|
|
<th class="blokheader2" style="background-color: background-color: #968026; border-top: none;">
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody data-bind="foreach: extrasoorten">
|
|
|
|
<tr class="blokheader">
|
|
<td class="blokheader" colspan="8" data-bind="text: naam" style="text-align: left; border: 2px solid #ffffff"></td>
|
|
</tr>
|
|
<!-- ko foreach:subsoorten -->
|
|
<tr>
|
|
<td data-bind="text: naam"></td>
|
|
<td style="text-align: left; color: #008028 ">budget</td>
|
|
<!-- ko foreach: uitgavetypes() -->
|
|
<td style="text-align: right; padding-top: 1px; vertical-align: top ">
|
|
<!-- ko if : code != 'RESTANT' -->
|
|
|
|
<input class="decimal"
|
|
style="width: 145px; max-width: 98%; background-color: #e6ffee"
|
|
data-bind="textInput: budgetFormat,
|
|
event:{change:$root.fSaveBudget.bind($data, $parent.subsoortID, 'EXTRA') } ,
|
|
enable: ! $root.jaarclosed()"
|
|
/>
|
|
<!-- /ko -->
|
|
<!-- ko if : code == 'RESTANT' -->
|
|
<span class="decimal"
|
|
data-bind="text: budget" >
|
|
</span>
|
|
<!-- /ko -->
|
|
</td>
|
|
<!-- /ko -->
|
|
<td style="padding: 0; padding-top: 1px; vertical-align: top">
|
|
<div style="width: 98%;height: 24px;
|
|
font-size: 0.9em; font-family: sans-serif, verdana; padding-left: 2px; padding-top: 2px;
|
|
padding-bottom: 2px; margin: 0; text-align: right; padding-right: 3px;">
|
|
<span data-bind="text: budgetpctFormat() ,
|
|
visible: ! $root.jaarclosed() ">
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr >
|
|
<td ></td>
|
|
<td style="text-align: left; color:#003e80; ">uitgaven</td>
|
|
<!-- ko foreach: uitgavetypes() -->
|
|
<td style="text-align: right; padding-top: 1px; vertical-align: top ">
|
|
<!-- ko if: code != 'RESTANT' && code != 'TOTAAL'-->
|
|
<input class="decimal"
|
|
style="width: 145px; max-width:98%; background-color: #e6f2ff"
|
|
data-bind="textInput: bedragFormat,
|
|
style: { color : Number(budget()) < Number(bedrag()) ? '#ff0000' : '#000000'},
|
|
event: {change:$root.fSaveBedrag.bind($data, $parent.subsoortID, 'BASIS' )} ,
|
|
enable: ! $root.jaarclosed()" />
|
|
<!-- /ko -->
|
|
<!-- ko if: code == 'RESTANT' || code == 'TOTAAL'-->
|
|
<span class="decimal"
|
|
data-bind="text: bedragFormat,
|
|
style: { color : Number(budget()) < Number(bedrag()) ? '#ff0000' : '#000000'}" >
|
|
</span>
|
|
<!-- /ko -->
|
|
</td>
|
|
<!-- /ko -->
|
|
<td style="padding: 0; vertical-align: top">
|
|
<div style="width: 98%;height: 24px;
|
|
font-size: 0.9em; font-family: sans-serif, verdana; padding-left: 2px; padding-top: 2px;
|
|
padding-bottom: 2px; margin: 0; text-align: right; padding-right: 3px;">
|
|
<span data-bind="text: bedragpctFormat,
|
|
visible: ! $root.jaarclosed()">
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- /ko -->
|
|
</tbody>
|
|
<!-- FOREACH extrasoorten -->
|
|
</table>
|
|
</div> <!-- visible extrageopend -->
|
|
|
|
<p style="margin-bottom:0; background-color:#f8f8f8; padding-left:10px; padding-top:10px;">
|
|
<span style="display:inline-block; width: 250px; font-weight: bold" >Extra ondersteuning </span>
|
|
<br>
|
|
<span style="display:inline-block; width: 250px;" >Uitgaven </span>
|
|
<span style="display:inline-block; width: 100px; text-align:right"
|
|
data-bind="text: totaalextra">
|
|
</span>
|
|
<span data-bind="text: totextrapct() =='0,0' ? '' : '(' + totextrapct() + '% van het totaalbudget)'"></span>
|
|
<br>
|
|
<span style="display:inline-block; width: 250px" >Gebudgeteerd per kostenpost</span>
|
|
<span style="display:inline-block; width: 100px; text-align:right"
|
|
data-bind="text: gebudgetextra() ">
|
|
</span>
|
|
<span data-bind="text: gebudgetextrapct() =='0,0' ? '' : '(' + gebudgetextrapct() + '% van het totaalbudget)' "></span>
|
|
|
|
<br>
|
|
<span style="display:inline-block; width: 250px" >Totaalbudget</span>
|
|
<span style="display:inline-block; width: 100px; text-align:right"
|
|
data-bind="text: jaartoewijzing() ? jaartoewijzing().extra : '' ">
|
|
</span>
|
|
</p>
|
|
|
|
<p style="margin-top:20px">Opmerkingen</p>
|
|
<textarea style="width:100%"
|
|
data-bind="textInput: opmerking, event:{input: fSaveOpmerking}"></textarea>
|
|
</div> <!-- als onderscheid tussen basis en extra is gemaakt bij budgetten, maar dat moet vanaf nu-->
|
|
</div> <!-- col sm 12 als jaartoewijzing-->
|
|
|
|
</div>
|