tykayn
/
caisse-bliss
mirror of https://forge.chapril.org/tykayn/caisse-bliss.git
1
0
Fork 0
Code Issues Releases Activity

highlight thersholds

This commit is contained in:
Baptiste Lemoine 2018-08-23 15:00:56 +02:00
parent 11b26bcf40
commit 70ad259885
No known key found for this signature in database
GPG Key ID: 3A3B8ADA21ADF899
3 changed files with 117 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
app/Resources/views/logged/previsionnel.html.twig
View File

@ -10,20 +10,39 @@
>
<h1>Prévisionnel</h1>
<div class="row">
<div class="col-6 col-xs-12 col-sm-6">
<div class="config">
<div class="col-7 col-xs-12 col-sm-7">
<div class="config well">
<h2>
Configuration
</h2>
Euros disponibles au départ:
<input type="number" ng-model="disponibility">
<strong>
<p class="padded">
Dépenses mensuelles: {{ sumMonthlyExpenses() }} €
</strong>
Euros disponibles au départ:
<input type="number" ng-model="config.disponibility">
<br>
Gains moyen par mois:
<input type="number" ng-model="config.averageMonthlyEarnings">
</p>
<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 class="postes">
<h2>Postes de dépenses
<h2>Postes de dépenses mensuelles
<button ng-click="addExpense()">+</button>
</h2>
<p class="desc">
@ -33,31 +52,34 @@
<table class="exepnse-table">
<thead>
<tr>
<td>
<td class="padded" >
Nom
</td>
<td>
<td class="padded" >
débute dans X mois
</td>
<td>
<td class="padded" >
mois répétitions
</td>
<td>
<td class="padded" >
prix répétitions
</td>
<td>
<td class="padded" >
prix mensuel
</td>
<td>
<td class="padded" >
prix annuel
</td>
<td class="padded" >
activé
</td>
</tr>
</thead>
<tbody>
</tbody>
<tr ng-repeat="e in expenses">
<tr ng-repeat="e in expenses ">
<td>
<input type="text" ng-model="e.name">
</td>
@ -75,14 +97,23 @@
<input type="number" ng-model="e.amount">
</td>
<td class="text-right padded">
{{ e.amount * 12 }}
<strong>
{{ e.amount * 12 }}
</strong>
€
</td>
<td class="padded">
<input type="checkbox" ng-model="e.enabled">
</td>
</tr>
</table>
<div class="well">
<div class="well examples-depenses">
<strong>
Exemples:
</strong>
{% endverbatim %}
{{ "
appartement
mutuelle
transport en commun
@ -105,35 +136,48 @@
médecin
chat
chien
licorne
licorne"|nl2br }}
{% verbatim %}
</div>
</div>
</div>
<div class="col-6 col-xs-12 col-sm-6">
<div class="col-5 col-xs-12 col-sm-5">
<h2>Simulation sur 5 ans (60 mois)</h2>
{{previsionTable.length}} lignes
<h2>Simulation sur {{config.lines}} mois</h2>
<table>
<thead>
<tr>
<td>
<tr >
<td class="padded" >
Month in the future
</td>
<td>
<td class="padded" >
date
</td>
<td>
<td class="padded" >
Dépenses
</td>
<td>
<td class="padded" >
Disponibilité
</td>
</tr>
</trclass>
</thead>
<tbody>
<tr ng-repeat="line in previsionTable()">
<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>
-
@ -142,9 +186,14 @@
{{ line.expense }}
</td>
<td class="text-right" ng-class="{ 'bg-warning' : line.available < 0}">
<td class="text-right"
ngClass="{'bgdanger' : line.available < 0 }">
{{ line.available }}
<strong>
{{ line.available}}
</strong>
€
</td>
</tr>
</tbody>

16
assets/css/pages/global.scss
View File

@ -104,3 +104,19 @@ label {
margin-bottom: 1rem;
}
}
.bgwarning {
background: orange;
color: #ee5555;
}
.bgdanger {
background: indianred;
color: #333;
font-weight: bold;
}
.bgsuccess {
background: greenyellow;
color: #000000;
}

37
assets/js/parts/main.js
View File

@ -225,20 +225,25 @@ angular
}])
.controller('previsionnelCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.config = {
lines: 24,
/**
* expenses kind of the user
*/
disponibility: 5000,
averageMonthlyEarnings: 600,
warningThershold: 2000
};
let exampleExpenses = [
{name: "appart", amount: 600, delay: 0, repeat: 60},
{name: "assurance voiture", amount: 50, delay: 0, repeat: 60},
{name: "internet", amount: 20, delay: 0, repeat: 60},
{name: "elec", amount: 100, delay: 0, repeat: 60},
{name: "transports", amount: 70, delay: 0, repeat: 60},
{name: "chat", amount: 20, delay: 0, repeat: 60},
{name: "appart", amount: 800, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "assurance voiture", amount: 50, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "internet", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "elec", amount: 100, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "chat", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "transports", amount: 70, delay: 0, repeat: $scope.config.lines, enabled: false},
];
/**
* expenses kind of the user
* @type {Array}
*/
$scope.disponibility = 5000;
// $scope.expenses=[];
$scope.expenses = exampleExpenses;
@ -249,19 +254,21 @@ angular
$scope.sumMonthlyExpenses = () => {
let sum = 0;
$scope.expenses.forEach((elem) => {
sum += elem.amount;
if (elem.enabled) {
sum += elem.amount;
}
})
return sum;
};
$scope.previsionTable = () => {
let turns = 24;
let turns = $scope.config.lines;
let monthly = $scope.sumMonthlyExpenses();
let available = $scope.disponibility;
let available = $scope.config.disponibility;
let previsionTable = [];
for (let i = 0; i <= turns; i++) {
// TODO take in account delays in expenses
available = available - monthly;
available = available - monthly + $scope.config.averageMonthlyEarnings;
let newLine = {
expense: monthly,
available: available,