229 lines
10 KiB
Twig
Executable File
229 lines
10 KiB
Twig
Executable File
{% extends 'base.html.twig' %}
|
|
{% trans_default_domain 'FOSUserBundle' %}
|
|
{% block body %}
|
|
{% verbatim %}
|
|
|
|
<div id="wrapper">
|
|
<div class="previsionnel"
|
|
ng-app="caisse"
|
|
ng-controller="previsionnelCtrl as pCtrl"
|
|
>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-md-6"></div>
|
|
<div class="col-xs-12 col-md-6">
|
|
|
|
<div ng-if="config.initialLoadingDone && config.loading">
|
|
Chargement ...
|
|
</div>
|
|
<div ng-if="config.initialLoadingDone && !config.loading">
|
|
Modifications sauvegardées
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h1>Prévisionnel</h1>
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="config well">
|
|
<h2>
|
|
Configuration
|
|
</h2>
|
|
<p class="padded">
|
|
|
|
Euros disponibles au départ:
|
|
<input type="number" ng-model="config.disponibility" ng-change="save()">
|
|
<br>
|
|
|
|
Gains moyen par mois:
|
|
<input type="number" ng-model="config.averageMonthlyEarnings" ng-disabled="config.isSaving">
|
|
</p>
|
|
<p>
|
|
<p>
|
|
Gérer délais
|
|
<input type="checkbox" ng-model="config.showDelays">
|
|
Gérer répétitions
|
|
<input type="checkbox" ng-model="config.showRepeats">
|
|
</p>
|
|
|
|
<strong>
|
|
Dépenses mensuelles: {{ sumMonthlyExpenses() }} €
|
|
</strong>
|
|
</p>
|
|
<p>
|
|
|
|
<strong>
|
|
Bénef mensuel: {{ config.averageMonthlyEarnings - sumMonthlyExpenses() }} €
|
|
</strong>
|
|
</p>
|
|
<p>
|
|
|
|
Crédit mensuel réalisable (33% des gains moyens par mois): {{ config.averageMonthlyEarnings * 0.33 |number }} €
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-7 postes">
|
|
<h2>
|
|
{{expenses.length}} Postes de dépenses mensuelles
|
|
<button ng-click="addExpense()">+</button>
|
|
</h2>
|
|
<p class="desc">
|
|
Indiquez les catégories de dépenses mensuelles que vous faites pour faire évoluer la
|
|
simulation de budget restant dans plusieurs mois.
|
|
</p>
|
|
<table class="exepnse-table">
|
|
<thead>
|
|
<tr>
|
|
<td class="padded" >
|
|
Nom
|
|
</td>
|
|
<td class="padded" ng-if="config.showDelays">
|
|
débute dans X mois
|
|
</td>
|
|
<td class="padded" ng-if="config.showRepeats">
|
|
mois répétitions
|
|
</td>
|
|
<td class="padded" ng-if="config.showRepeats">
|
|
prix répétitions
|
|
</td>
|
|
<td class="padded" >
|
|
prix mensuel
|
|
</td>
|
|
<td class="padded" >
|
|
prix annuel
|
|
</td>
|
|
<td class="padded" >
|
|
activé
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
</tbody>
|
|
<tr ng-repeat="e in expenses ">
|
|
<td>
|
|
<input type="text" ng-model="e.name" ng-change="save()">
|
|
</td>
|
|
<td ng-if="config.showDelays">
|
|
|
|
<input type="number" ng-model="e.delay" ng-change="save()">
|
|
</td>
|
|
<td ng-if="config.showRepeats">
|
|
<input type="number" ng-model="e.repeat" ng-change="save()">
|
|
</td>
|
|
<td ng-if="config.showRepeats" class="text-right padded">
|
|
{{ e.repeat * e.amount }}
|
|
</td>
|
|
<td>
|
|
<input type="number" ng-model="e.amount" ng-change="save()">
|
|
</td>
|
|
<td class="text-right padded">
|
|
<strong>
|
|
|
|
{{ e.amount * 12 }}
|
|
</strong>
|
|
€
|
|
</td>
|
|
<td class="padded">
|
|
<input type="checkbox" ng-model="e.enabled" ng-change="save()">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="well examples-depenses">
|
|
<strong>
|
|
Exemples de postes de dépenses à ajouter:
|
|
</strong>
|
|
{% endverbatim %}
|
|
{{ "
|
|
appartement
|
|
mutuelle
|
|
transport en commun
|
|
assurance voiture
|
|
assurance moto
|
|
trucs de loisirs divers
|
|
gaz
|
|
elec
|
|
internet
|
|
épargne
|
|
impots
|
|
cottisation URSSAF
|
|
resto au boulot
|
|
courses
|
|
serveur wouaibe
|
|
abonnement protonmail VPN
|
|
abonnement service audio, vidéo
|
|
carburant véhicule
|
|
donations
|
|
médecin
|
|
chat
|
|
chien
|
|
licorne"|nl2br }}
|
|
|
|
{% verbatim %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-lg-5">
|
|
|
|
<h2>Simulation sur {{config.lines}} mois</h2>
|
|
<div class="well" ng-if="config.monthsBeforeNoMoney < config.lines">
|
|
Ce sera la dèche dans {{config.monthsBeforeNoMoney}} mois
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr >
|
|
<td class="padded" >
|
|
Month in the future
|
|
</td>
|
|
<td class="padded" >
|
|
date
|
|
</td>
|
|
<td class="padded" >
|
|
Dépenses
|
|
</td>
|
|
<td class="padded" >
|
|
Disponibilité
|
|
</td>
|
|
</trclass>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="line in previsionTable()" >
|
|
<td>
|
|
<div ng-if="line.available > config.warningThershold"
|
|
class=" bgsuccess padded ">
|
|
{{ $index }}
|
|
</div>
|
|
<div ng-if="line.available > 0 && line.available < config.warningThershold"
|
|
class="bgwarning padded ">
|
|
{{ $index }} bientôt la dèche
|
|
</div>
|
|
<div ng-if="line.available < 0"
|
|
class="bgdanger padded ">
|
|
{{ $index }} DAMNED pu de pognon!
|
|
</div>
|
|
</td>
|
|
<td>
|
|
-
|
|
</td>
|
|
<td class="text-right ">
|
|
|
|
{{ line.expense }}
|
|
</td>
|
|
<td class="text-right"
|
|
ngClass="{'bgdanger' : line.available < 0 }">
|
|
|
|
<strong>
|
|
|
|
{{ line.available}}
|
|
</strong>
|
|
€
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endverbatim %}
|
|
{% endblock %} |