listing current selling ok

app/Resources/views/logged/angular/current.html.twig

@@ -2,14 +2,21 @@
 <div class="current-selling">
 
     <form action="#">
-        Festival:
+    <h2>
+
+        Festival:</h2>
         <input type="text" ng-model="activeFestival.name" placeholder="nom du festival">
         <input type="text" ng-model="activeFestival.commentaire" placeholder="commentaire">
         <hr>
-        <i class="fa fa-user"></i>
+
-        Client actuel:
+       <h2>
-        {{ activeSelling.length }} produits
+          <i class="fa fa-user"></i> Client actuel:
-        <input type="text" ng-model="sellingComment" placeholder="commentaire">
+       </h2>
+        {{ activeSelling.length }} produit
+        <span ng-if="activeSelling.length>1">
+        s
+</span>
+        <input class="input input-lg" type="text" ng-model="sellingComment" placeholder="nom ou commentaire">
         <hr>
         <ul>
             <li ng-repeat="p in activeSelling track by $index">
@@ -17,10 +24,10 @@
                     <div class="col-xs-6">
                         <div class="input-group">
                             <input type="text" ng-model="p.name">
-                            <div class="btn btn-warning input-group-addon"
+                            <span class="btn btn-warning input-group-addon remove-itm"
-                                    ng-click="activeSelling.splice($index,1)">
+                                    ng-click="activeSelling.splice($index,1);  regenActiveSellingIds()">
                                 <i class="fa fa-trash"></i>
-                            </div>
+                            </span>
                         </div>
                     </div>
                     <div class="col-xs-6 text-right">
@@ -37,7 +44,11 @@
                     <h3>Total: </h3>
                 </div>
                 <div class="col-xs-6">
-                <strong>{{ CurrentSellingTotal() }}€</strong>
+                <h3>
+                <strong>
+
+                {{ CurrentSellingTotal() }} </strong>€
+                </h3>
             </div>
             </div>
             <div class="row">

app/Resources/views/logged/angular/listing-products.html.twig

@@ -5,6 +5,7 @@
     </h2>
     <button ng-repeat="p in c.products track by p.id"
             class="btn btn-default"
+            ng-class="{ 'btn-primary' : activeItemsSold.indexOf(p.id)}"
             ng-click="addProduct( p )">
             <span class="product-name">
              {{ p.name }}

app/Resources/views/logged/angular/loaded-caisse.html.twig

@@ -10,10 +10,12 @@
 
         </div>
         <div class="sellings col-xs-5">
+<div class="well">
 
             {% include 'logged/angular/validate-button.html.twig' %}
             {% include 'logged/angular/current.html.twig' %}
             {#{% include 'logged/angular/paused.html.twig' %}#}
+</div>
         </div>
     </div>
     <div id="other_time">

assets/css/pages/global.scss

@@ -18,3 +18,7 @@ thead {
   background: #000;
   color: #fff;
 }
+
+ul {
+  padding: 0;
+}

assets/js/parts/main.js

@@ -5,17 +5,18 @@ angular
   .controller('CaisseCtrl', ['$scope', '$http', function ($scope, $http, stuff) {
       $scope.productsFromDB = [];   // loaded products
       $scope.categories = [];       // product categories
-      $scope.sellingComment = "sellingComment";      // comment about the client or the current selling
+      $scope.sellingComment = "";      // comment about the client or the current selling
       $scope.initLoadDone = false;  // becames true after first init of product loading
       $scope.recentSellings = [];
       $scope.lesParams = {};
-      $scope.paidAmount = 20;
+      $scope.paidAmount = 0;
       $scope.pausedSelling = [];
+      $scope.activeItemsSold = [];    // list of products ID to sell
       $scope.activeSelling = [];    // list of products to sell
       $scope.activeFestival = {     // an event where selling take place
           name        : "le festival",
           dateCreation: new Date(),
-          commentaire : "le com de festival"
+          commentaire : ""
       };
       /**
        * get the sum of products prices
@@ -38,6 +39,12 @@ angular
           return $scope.sumOfList($scope.activeSelling);
       };
 
+      $scope.regenActiveSellingIds = function () {
+          $scope.activeItemsSold = [];
+          for (let obj in $scope.activeSelling) {
+              $scope.activeItemsSold.push(obj.id);
+          }
+      };
       $scope.stuff = stuff;
       $scope.setActiveSelling = function (selling) {
           $scope.activeSelling = selling;
@@ -47,20 +54,7 @@ angular
       };
       $scope.addProduct = function (product) {
           $scope.activeSelling.push(product);
-      };
+          $scope.activeItemsSold.push(product.id);
-      $scope.fetchProductsFromDB = function () {
-          console.log('fetch products...');
-          $http.get('get-my-products').then((rep) => {
-
-              console.log('ok', rep);
-              $scope.categories = rep.data.categories;
-              $scope.recentSellings = rep.data.history;
-              $scope.initLoadDone = true;
-              $scope.addProduct($scope.categories[0].products[0])
-          }, (err) => {
-              console.log(err);
-              $scope.initLoadDone = true;
-          });
       };
       $scope.pauseSelling = function () {
           $scope.pausedSelling.push(angular.copy($scope.activeSelling));
@@ -75,6 +69,23 @@ angular
           $scope.sellingComment = "";
           $scope.activeSelling = [];
       };
+
+      // http related calls
+      $scope.fetchProductsFromDB = function () {
+          console.log('fetch products...');
+          $http.get('get-my-products').then((rep) => {
+
+              console.log('ok', rep);
+              $scope.categories = rep.data.categories;
+              $scope.productsFromDB = rep.data.categories;
+              $scope.recentSellings = rep.data.history;
+              $scope.initLoadDone = true;
+          }, (err) => {
+              console.log(err);
+              $scope.initLoadDone = true;
+          });
+      };
+
       $scope.sendForm = function () {
           let lesParams = {
               paidByClient  : $scope.paidAmount,