highlight thersholds
This commit is contained in:
parent
11b26bcf40
commit
70ad259885
@ -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">
|
||||
|
||||
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,24 +52,27 @@
|
||||
<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>
|
||||
|
||||
@ -75,14 +97,23 @@
|
||||
<input type="number" ng-model="e.amount">
|
||||
</td>
|
||||
<td class="text-right padded">
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-xs-12 col-sm-6">
|
||||
licorne"|nl2br }}
|
||||
|
||||
<h2>Simulation sur 5 ans (60 mois)</h2>
|
||||
{{previsionTable.length}} lignes
|
||||
{% verbatim %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5 col-xs-12 col-sm-5">
|
||||
|
||||
<h2>Simulation sur {{config.lines}} mois</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr >
|
||||
<td>
|
||||
<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()" >
|
||||
<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 }">
|
||||
|
||||
<strong>
|
||||
|
||||
{{ line.available}}
|
||||
</strong>
|
||||
€
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
@ -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;
|
||||
}
|
@ -225,20 +225,25 @@ angular
|
||||
}])
|
||||
.controller('previsionnelCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
|
||||
|
||||
|
||||
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},
|
||||
];
|
||||
$scope.config = {
|
||||
lines: 24,
|
||||
/**
|
||||
* expenses kind of the user
|
||||
* @type {Array}
|
||||
*/
|
||||
$scope.disponibility = 5000;
|
||||
disponibility: 5000,
|
||||
averageMonthlyEarnings: 600,
|
||||
warningThershold: 2000
|
||||
};
|
||||
|
||||
let exampleExpenses = [
|
||||
{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},
|
||||
];
|
||||
|
||||
// $scope.expenses=[];
|
||||
$scope.expenses = exampleExpenses;
|
||||
|
||||
@ -249,19 +254,21 @@ angular
|
||||
$scope.sumMonthlyExpenses = () => {
|
||||
let sum = 0;
|
||||
$scope.expenses.forEach((elem) => {
|
||||
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,
|
||||
|
Loading…
Reference in New Issue
Block a user