tykayn/caisse-bliss
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

highlight thersholds

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

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

@ -104,3 +104,19 @@ label {
margin-bottom: 1rem; 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) { .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 = [ let exampleExpenses = [
{name: "appart", amount: 600, delay: 0, repeat: 60}, {name: "appart", amount: 800, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "assurance voiture", amount: 50, delay: 0, repeat: 60}, {name: "assurance voiture", amount: 50, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "internet", amount: 20, delay: 0, repeat: 60}, {name: "internet", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "elec", amount: 100, delay: 0, repeat: 60}, {name: "elec", amount: 100, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "transports", amount: 70, delay: 0, repeat: 60}, {name: "chat", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "chat", amount: 20, delay: 0, repeat: 60}, {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=[];
$scope.expenses = exampleExpenses; $scope.expenses = exampleExpenses;
@ -249,19 +254,21 @@ angular
$scope.sumMonthlyExpenses = () => { $scope.sumMonthlyExpenses = () => {
let sum = 0; let sum = 0;
$scope.expenses.forEach((elem) => { $scope.expenses.forEach((elem) => {
sum += elem.amount; if (elem.enabled) {
sum += elem.amount;
}
}) })
return sum; return sum;
}; };
$scope.previsionTable = () => { $scope.previsionTable = () => {
let turns = 24; let turns = $scope.config.lines;
let monthly = $scope.sumMonthlyExpenses(); let monthly = $scope.sumMonthlyExpenses();
let available = $scope.disponibility; let available = $scope.config.disponibility;
let previsionTable = []; let previsionTable = [];
for (let i = 0; i <= turns; i++) { for (let i = 0; i <= turns; i++) {
// TODO take in account delays in expenses // TODO take in account delays in expenses
available = available - monthly; available = available - monthly + $scope.config.averageMonthlyEarnings;
let newLine = { let newLine = {
expense: monthly, expense: monthly,
available: available, available: available,