expenses prevision page start with example

app/Resources/views/logged/previsionnel.html.twig

@@ -1,7 +1,9 @@
 {% extends 'base.html.twig' %}
 {% trans_default_domain 'FOSUserBundle' %}
 {% block body %}
-<div id="wrapper">
+    {% verbatim %}
+
+        <div id="wrapper">
             <div class="previsionnel"
                  ng-app="caisse"
                  ng-controller="previsionnelCtrl as pCtrl"
@@ -18,9 +20,12 @@
                             Dépenses mensuelles: {{ sumMonthlyExpenses }}
                         </div>
                         <div class="postes">
-                    <h2>Postes de dépenses</h2>
+                            <h2>Postes de dépenses
+                            <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.
+                                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>
@@ -49,23 +54,24 @@
                                 <tbody>
 
                                 </tbody>
-                        <tr ng-repeat="e in pCtrl.expenses">
+                                <tr ng-repeat="e in expenses">
                                     <td>
-                                {{ e.name }}
+                                         <input type="text" ng-model="e.name">
                                     </td>
                                     <td>
-                                {{ e.delay }}débute dans X mois
+
+                                        <input type="text" ng-model="e.delay">
                                     </td>
                                     <td>
-                                {{ e.repeat }}
+                                        <input type="text" ng-model="e.repeat">
                                     </td>
-                            <td>
+                                    <td class="text-right padded">
                                         {{ e.repeat * e.amount }}
                                     </td>
                                     <td>
-                                {{ e.amount }}
+                                        <input type="text" ng-model="e.amount">
                                     </td>
-                            <td>
+                                    <td class="text-right padded">
                                         {{ e.amount * 12 }}
                                     </td>
                                 </tr>
@@ -103,6 +109,7 @@
                     <div class="col-6 col-xs-12 col-sm-6">
 
                         <h2>Simulation sur 5 ans (60 mois)</h2>
+                        {{previsionTable.length}} lignes
                         <table>
                             <thead>
                             <tr>
@@ -142,5 +149,6 @@
                     </div>
                 </div>
             </div>
-</div>
-    {% endblock %}
+        </div>
+    {% endverbatim %}
+{% endblock %}

assets/js/parts/main.js

@@ -35,12 +35,12 @@ angular
         $scope.activeItemsSold = [];    // list of products ID to sell
         $scope.activeSelling = [];    // list of products to sell
         $scope.activeFestival = {     // an event where selling take place
-          id            : null,
-          name          : "le festival",
-          dateCreation  : new Date(),
+            id: null,
+            name: "le festival",
+            dateCreation: new Date(),
             chiffreAffaire: 0,
-          clientsCount  : 0,
-          commentaire   : ""
+            clientsCount: 0,
+            commentaire: ""
         };
         /**
          * get the sum of products prices
@@ -166,28 +166,28 @@ angular
         $scope.sendForm = function () {
             console.log('$scope.sellingComment', this.sellingComment);
             let lesParams = {
-              paidByClient  : this.paidAmount,
+                paidByClient: this.paidAmount,
                 sellingComment: this.sellingComment,
-              activeSelling : this.activeSelling,
+                activeSelling: this.activeSelling,
                 activeFestival: this.activeFestival
             };
             $scope.recentSellings.push({
-              id        : this.recentId++,
-              amount    : this.CurrentSellingTotal(),
+                id: this.recentId++,
+                amount: this.CurrentSellingTotal(),
                 paidAmount: this.paidAmount,
-              products  :
+                products:
                     angular
                         .copy(this.activeSelling)
             });
             console.log('$scope.recentSellings', this.recentSellings);
             $scope.lesParams = lesParams;
             $http({
-              method : 'POST',
-              url    : 'add-selling',
+                method: 'POST',
+                url: 'add-selling',
                 headers: {
                     'Content-Type': 'application/json'
                 },
-              data   : lesParams  // pass in data as strings
+                data: lesParams  // pass in data as strings
             }).then(function (rep) {
                 $scope.clearCurrentSelling();
                 // if successful, bind success message to message
@@ -209,15 +209,15 @@ angular
 
         $scope.sellingOk = false;
         $scope.tempMessage = {};
-      $scope.showTemporaryMessage = function(){
-          if($scope.sellingOk ){
+        $scope.showTemporaryMessage = function () {
+            if ($scope.sellingOk) {
                 return;
             }
             $scope.sellingOk = true;
-          $timeout.cancel($scope.tempMessage );
-          $scope.tempMessage = $timeout(function(){
-              $scope.sellingOk=false;
-          },2000)
+            $timeout.cancel($scope.tempMessage);
+            $scope.tempMessage = $timeout(function () {
+                $scope.sellingOk = false;
+            }, 2000)
         };
         $scope.init = (function () {
             $scope.fetchProductsFromDB();
@@ -227,39 +227,39 @@ angular
 
 
         let exampleExpenses = [
-            {name: "appart", amount: 600},
-            {name: "assurance voiture", amount: 50},
-            {name: "internet", amount: 20},
-            {name: "elec", amount: 100},
-            {name: "transports", amount: 70},
-            {name: "chat", amount: 20},
+            {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},
         ];
         /**
          * expenses kind of the user
          * @type {Array}
          */
-        $scope.disponibility=5000;
+        $scope.disponibility = 5000;
         // $scope.expenses=[];
-        $scope.expenses=exampleExpenses;
+        $scope.expenses = exampleExpenses;
 
         /**
          * sum of all monthly expenses, ignoring delay
          * @returns {number}
          */
-        $scope.sumMonthlyExpenses = ()=>{
+        $scope.sumMonthlyExpenses = () => {
             let sum = 0;
-            $scope.expenses.forEach((elem)=>{
+            $scope.expenses.forEach((elem) => {
                 sum += elem.amount;
             })
             return sum;
         };
 
-        $scope.previsionTable = ()=>{
+        $scope.previsionTable = () => {
             let turns = 60;
             let monthly = $scope.sumMonthlyExpenses();
             let available = $scope.disponibility;
-            let previsionTable=[];
-            for (let i=0;i<=turns;i++){
+            let previsionTable = [];
+            for (let i = 0; i <= turns; i++) {
                 // TODO take in account delays in expenses
                 let newLine = {
                     expense: monthly,
@@ -271,18 +271,26 @@ angular
         };
 
         // http related calls
-        $scope.fetchExpenses = ()=>{
+        $scope.fetchExpenses = () => {
             console.log('fetch expenses...');
             $http.get('get-my-expenses').then((rep) => {
-                console.log('get-my-expenses',rep);
+                console.log('get-my-expenses', rep);
             })
         };
         // save
-        $scope.save = ()=>{
+        $scope.save = () => {
             console.log('update expenses...');
             $http.post('save-my-expenses', $scope.expenses)
                 .then((rep) => {
-                console.log('save-my-expenses',rep);
+                    console.log('save-my-expenses', rep);
                 })
         };
+        $scope.addExpense = () => {
+            $scope.expenses.push({
+                name: "",
+                repeat: 0,
+                delay: 0,
+                amount: 0,
+            })
+        }
     }]);