281 lines
13 KiB
Twig
281 lines
13 KiB
Twig
|
{% extends 'base.html.twig' %}
|
||
|
|
{% 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-lg-6">
|
||
|
|
<h1>Prévisionnel</h1>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-lg-6">
|
||
|
|
|
||
|
|
<div ng-if="config.initialLoadingDone && config.loading">
|
||
|
|
<i class="fa fa-spin fa-refresh"></i>
|
||
|
|
Chargement
|
||
|
|
</div>
|
||
|
|
<div ng-if="config.initialLoadingDone && !config.loading">
|
||
|
|
Modifications sauvegardées
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12">
|
||
|
|
<div class="config well">
|
||
|
|
<h2>
|
||
|
|
Configuration
|
||
|
|
</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12 col-sm-6">
|
||
|
|
<p >
|
||
|
|
<label for="dispo">
|
||
|
|
|
||
|
|
Euros disponibles au départ:
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
id="dispo"
|
||
|
|
class="big-number"
|
||
|
|
type="number"
|
||
|
|
ng-model="config.disponibility"
|
||
|
|
ng-change="save()"
|
||
|
|
ng-model-options="{ debounce: config.debounceTime }">
|
||
|
|
<br>
|
||
|
|
<label for="gains">
|
||
|
|
Gains moyen par mois:
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<input type="number"
|
||
|
|
class="big-number"
|
||
|
|
id="gains"
|
||
|
|
ng-model="config.averageMonthlyEarnings"
|
||
|
|
ng-change="save()"
|
||
|
|
ng-model-options="{ debounce: config.debounceTime }">
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Gérer délais de paiement
|
||
|
|
<input type="checkbox" ng-model="config.showDelays">
|
||
|
|
Gérer répétitions
|
||
|
|
<input type="checkbox" ng-model="config.showRepeats">
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6">
|
||
|
|
<p>
|
||
|
|
<strong>
|
||
|
|
Dépenses mensuelles:
|
||
|
|
<span class="big-number">
|
||
|
|
|
||
|
|
{{ sumMonthlyExpenses() }} €
|
||
|
|
</span>
|
||
|
|
</strong>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>
|
||
|
|
Bénef mensuel: <span class="big-number">{{ config.averageMonthlyEarnings - sumMonthlyExpenses() }} €</span>
|
||
|
|
</strong>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Crédit mensuel réalisable (33% des gains moyens par mois): {{ config.averageMonthlyEarnings * 0.33 |number }} €
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-lg-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="exepanse-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()" ng-model-options="{ debounce: config.debounceTime }">
|
||
|
|
</td>
|
||
|
|
<td ng-if="config.showDelays">
|
||
|
|
|
||
|
|
<input type="number" ng-model="e.delay" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
|
||
|
|
</td>
|
||
|
|
<td ng-if="config.showRepeats">
|
||
|
|
<input type="number" ng-model="e.repeat" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
|
||
|
|
</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()" ng-model-options="{ debounce: config.debounceTime }">
|
||
|
|
</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()" ng-model-options="{ debounce: config.debounceTime }">
|
||
|
|
</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 class="col-sm-12 col-lg-5">
|
||
|
|
|
||
|
|
<h2>Simulation sur {{config.lines}} mois</h2>
|
||
|
|
<div class="" id="simulationPrevision" style="display: inline-block; height: 300px; width: 90%;">(graphique)</div>
|
||
|
|
|
||
|
|
<!--block to insert the graph-->
|
||
|
|
<div class="well big-number" ng-if="config.monthsBeforeNoMoney && config.monthsBeforeNoMoney <= config.lines">
|
||
|
|
<i class="fa fa-warning"></i>
|
||
|
|
Ce sera la dèche dans {{config.monthsBeforeNoMoney}} mois
|
||
|
|
</div>
|
||
|
|
<div ng-if=" ! config.monthsBeforeNoMoney" class="bg-success padded">
|
||
|
|
cool ! votre plan est supportable dans le temps
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
<!--<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>-->
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var dataPoints = {{graphPointsPrevision}} ;
|
||
|
|
var chartContainerChiffreAffaire = new CanvasJS.Chart("simulationPrevision", {
|
||
|
|
title:{
|
||
|
|
text: "Euros disponibles dans le temps"
|
||
|
|
},
|
||
|
|
animationEnabled: true,
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
// Change type to "doughnut", "line", "splineArea", etc.
|
||
|
|
type: "splineArea",
|
||
|
|
dataPoints: dataPoints
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
chartContainerChiffreAffaire.render();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{% endverbatim %}
|
||
|
|
{% endblock %}
|