caisse-bliss/app/Resources/views/logged/previsionnel.html.twig

265 lines
12 KiB
Twig
Raw Normal View History

2018-08-22 16:42:21 +02:00
{% 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"
>
2018-08-23 18:12:32 +02:00
<div class="row">
2018-08-28 14:03:04 +02:00
<div class="col-xs-12 col-lg-6">
<h1>Prévisionnel</h1>
</div>
<div class="col-xs-12 col-lg-6">
2018-08-23 18:12:32 +02:00
2018-08-28 14:03:04 +02:00
<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>
2018-08-23 18:12:32 +02:00
</div>
2018-08-28 14:03:04 +02:00
<div class="row">
2018-08-27 16:37:27 +02:00
<div class="col-xs-12">
2018-08-23 15:00:56 +02:00
<div class="config well">
<h2>
Configuration
</h2>
2018-08-28 14:03:04 +02:00
<div class="row">
<div class="col-xs-12 col-sm-6">
<p >
Euros disponibles au départ:
<input
type="number"
ng-model="config.disponibility"
ng-change="save()"
ng-model-options="{ debounce: config.debounceTime }">
<br>
Gains moyen par mois:
<input type="number"
ng-model="config.averageMonthlyEarnings"
ng-change="save()"
ng-model-options="{ debounce: config.debounceTime }">
</p>
2018-08-23 15:00:56 +02:00
<p>
2018-08-28 14:03:04 +02:00
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>
2018-08-28 14:03:04 +02:00
<strong>
Dépenses mensuelles: {{ sumMonthlyExpenses() }}
</strong>
</p>
2018-08-23 15:00:56 +02:00
<p>
2018-08-28 14:03:04 +02:00
<strong>
Bénef mensuel: {{ config.averageMonthlyEarnings - sumMonthlyExpenses() }}
</strong>
</p>
2018-08-23 15:00:56 +02:00
<p>
Crédit mensuel réalisable (33% des gains moyens par mois): {{ config.averageMonthlyEarnings * 0.33 |number }}
2018-08-28 14:03:04 +02:00
</p>
</div>
</div>
</div>
2018-08-27 16:37:27 +02:00
</div>
2018-08-28 14:03:04 +02:00
<div class="col-xs-12 col-lg-7 postes">
2018-08-23 18:12:32 +02:00
<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>
2018-08-23 15:00:56 +02:00
<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>
2018-08-23 15:00:56 +02:00
<td class="padded" >
prix mensuel
</td>
2018-08-23 15:00:56 +02:00
<td class="padded" >
prix annuel
</td>
2018-08-23 15:00:56 +02:00
<td class="padded" >
activé
</td>
</tr>
</thead>
2018-08-22 16:42:21 +02:00
<tbody>
2018-08-22 16:42:21 +02:00
</tbody>
2018-08-23 15:00:56 +02:00
<tr ng-repeat="e in expenses ">
<td>
2018-08-28 11:15:07 +02:00
<input type="text" ng-model="e.name" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td>
<td ng-if="config.showDelays">
2018-08-28 11:15:07 +02:00
<input type="number" ng-model="e.delay" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td>
<td ng-if="config.showRepeats">
2018-08-28 11:15:07 +02:00
<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>
2018-08-28 11:15:07 +02:00
<input type="number" ng-model="e.amount" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
</td>
<td class="text-right padded">
2018-08-23 15:00:56 +02:00
<strong>
{{ e.amount * 12 }}
</strong>
</td>
2018-08-23 15:00:56 +02:00
<td class="padded">
2018-08-28 11:15:07 +02:00
<input type="checkbox" ng-model="e.enabled" ng-change="save()" ng-model-options="{ debounce: config.debounceTime }">
2018-08-23 15:00:56 +02:00
</td>
</tr>
</table>
2018-08-23 15:00:56 +02:00
<div class="well examples-depenses">
<strong>
2018-08-23 15:36:36 +02:00
Exemples de postes de dépenses à ajouter:
</strong>
2018-08-23 15:00:56 +02:00
{% 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
2018-08-23 15:00:56 +02:00
licorne"|nl2br }}
{% verbatim %}
</div>
</div>
2018-08-28 14:03:04 +02:00
2018-08-27 16:37:27 +02:00
<div class="col-sm-12 col-lg-5">
2018-08-22 16:42:21 +02:00
2018-08-23 15:00:56 +02:00
<h2>Simulation sur {{config.lines}} mois</h2>
2018-08-28 15:16:13 +02:00
<div class="" id="simulationPrevision" style="display: inline-block; height: 300px; width: 90%;">(graphique)</div>
2018-08-28 14:53:05 +02:00
<!--block to insert the graph-->
<div class="well" ng-if="config.monthsBeforeNoMoney < config.lines">
Ce sera la dèche dans {{config.monthsBeforeNoMoney}} mois
</div>
<table>
<thead>
2018-08-23 15:00:56 +02:00
<tr >
<td class="padded" >
Month in the future
</td>
2018-08-23 15:00:56 +02:00
<td class="padded" >
date
</td>
2018-08-23 15:00:56 +02:00
<td class="padded" >
Dépenses
</td>
2018-08-23 15:00:56 +02:00
<td class="padded" >
Disponibilité
</td>
2018-08-23 15:00:56 +02:00
</trclass>
</thead>
<tbody>
2018-08-28 15:16:13 +02:00
<tr ng-repeat="line in previsionTable" >
<td>
2018-08-23 15:00:56 +02:00
<div ng-if="line.available > config.warningThershold"
class=" bgsuccess padded ">
{{ $index }}
2018-08-23 15:00:56 +02:00
</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>
2018-08-23 12:24:02 +02:00
<td class="text-right ">
2018-08-22 17:10:01 +02:00
{{ line.expense }}
</td>
2018-08-23 15:00:56 +02:00
<td class="text-right"
ngClass="{'bgdanger' : line.available < 0 }">
<strong>
2018-08-22 16:42:21 +02:00
2018-08-23 15:00:56 +02:00
{{ line.available}}
</strong>
</td>
</tr>
</tbody>
</table>
</div>
2018-08-28 14:03:04 +02:00
</div>
</div>
2018-08-22 16:42:21 +02:00
</div>
</div>
2018-08-28 15:16:13 +02:00
<!--<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 %}