From e9835c7cac845a903950674fbf3e7713e9f8c7c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Delobelle?= <aurelien.delobelle@ens.fr>
Date: Fri, 19 Aug 2016 01:08:57 +0200
Subject: [PATCH] Reprise de ce qu'affiche l'historique
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout style sur l'historique
- Style: Le gris passe en background, plus de rouge en avant
- Opacité plus importante pour le fond pendant les charges et retraits
- Correction sur l'affichage de LIQ. La couleur de fond indiquait
  trigramme inexistant à cause de modifs récentes
- des parseFloat ont été ajoutés un peu de partout pour les problèmes de type
  de JS (il a des jours avec et des jours sans...)
- Ajout des montants en euros des charges et des retraits (en plus de
  ceux en UKF) dans le panier
- Les commandes sur LIQ dans l'historique n'affichent plus la diff de
  balance (puisque ça n'a pas vraiment de sens) mais les montants en
  euros
---
 kfet/static/kfet/css/index.css         |   4 +
 kfet/static/kfet/css/jconfirm-kfet.css |   4 +
 kfet/static/kfet/css/kpsul.css         | 154 ++++++++++++++++++++-----
 kfet/static/kfet/css/kpsul_grid.css    |   5 +-
 kfet/templates/kfet/kpsul.html         | 128 ++++++++++++++------
 kfet/views.py                          |   3 +-
 6 files changed, 230 insertions(+), 68 deletions(-)

diff --git a/kfet/static/kfet/css/index.css b/kfet/static/kfet/css/index.css
index 241785ae..65fcfb38 100644
--- a/kfet/static/kfet/css/index.css
+++ b/kfet/static/kfet/css/index.css
@@ -7,6 +7,10 @@ body {
     font-family:Roboto;
 }
 
+body > .container-fluid {
+    background:#ddd;
+}
+
 h1,h2,h3,h4,h5,h6 {
     font-family:Oswald;
 }
diff --git a/kfet/static/kfet/css/jconfirm-kfet.css b/kfet/static/kfet/css/jconfirm-kfet.css
index 8509c274..86c7c42b 100644
--- a/kfet/static/kfet/css/jconfirm-kfet.css
+++ b/kfet/static/kfet/css/jconfirm-kfet.css
@@ -1,3 +1,7 @@
+.jconfirm-bg.seen {
+    opacity:1 !important;
+}
+
 .jconfirm .jconfirm-box {
     padding:0;
     border-radius:0 !important;
diff --git a/kfet/static/kfet/css/kpsul.css b/kfet/static/kfet/css/kpsul.css
index 3a427c23..3c989fcb 100644
--- a/kfet/static/kfet/css/kpsul.css
+++ b/kfet/static/kfet/css/kpsul.css
@@ -8,6 +8,10 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0;
 }
 
+#account, #checkout, input, #history, #basket, #basket_rel, #articles_data {
+    background:#fff;
+}
+
 /*
  * Top row
  */
@@ -24,7 +28,7 @@ input[type=number]::-webkit-outer-spin-button {
 /* Account */
 
 #account {
-    border:1px solid #ddd;
+    border:1px solid #fff;
     color:black;
     height:120px;
 }
@@ -53,7 +57,7 @@ input[type=number]::-webkit-outer-spin-button {
     border:0;
     border-radius:0;
 
-    background:#ddd;
+    background:#fff;
 
     font-family:'Roboto Mono';
     font-size:50px;
@@ -115,7 +119,7 @@ input[type=number]::-webkit-outer-spin-button {
 /* Checkout */
 
 #checkout {
-    border:1px solid #ddd;
+    border:1px solid #c8102e;
     padding:0;
     height:160px;
     font-family:'Roboto Mono';
@@ -133,7 +137,8 @@ input[type=number]::-webkit-outer-spin-button {
     height:50px;
     padding:0 15px;
 
-    background:#ddd;
+    background:#c8102e;
+    color:#fff;
 
     font-weight:bold;
     font-size:18px;
@@ -145,6 +150,7 @@ input[type=number]::-webkit-outer-spin-button {
     line-height:25px;
     font-weight:normal;
     font-size:14px;
+    background-color:rgba(255,255,255,0.1);
 }
 
 #checkout_data {
@@ -156,24 +162,32 @@ input[type=number]::-webkit-outer-spin-button {
  */
 
 .row.kpsul_middle {
-    padding:0 15px;
+    margin:15px 0;
     font-family:'Roboto Mono';
     color:#000;
 }
 
 .row.kpsul_middle > div {
-    margin-top:15px;
     padding:0;
+    height:100%;
 }
 
 .row.kpsul_middle > div:first-child > div {
     margin-right:0;
 }
 
+.row.kpsul_middle > div+div {
+    margin-top:15px;
+}
+
 @media (min-width:768px) {
     .row.kpsul_middle > div:first-child > div {
         margin-right:15px
     }
+
+    .row.kpsul_middle > div {
+        margin-top:0 !important;
+    }
 }
 
 /* Special operations */
@@ -188,8 +202,8 @@ input[type=number]::-webkit-outer-spin-button {
 
     float:left;
 
-    background:#ddd;
-    color:#000;
+    background:#c8102e;
+    color:#FFF;
 
     font-size:18px;
     font-weight:bold;
@@ -200,12 +214,12 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 #operation_deposit:focus, #operation_deposit:hover {
-    background:#009011;
+    background:#000;
     color:#FFF;
 }
 
 #operation_withdraw:focus, #operation_withdraw:hover {
-    background:#C8102E;
+    background:#000;
     color:#FFF;
 }
 
@@ -219,9 +233,11 @@ input[type=number]::-webkit-outer-spin-button {
 #article_selection input {
     height:100%;
     float:left;
-    border:1px solid #ddd;
+    border-left:1px solid #c8102e;
+    border-right:1px solid #c8102e;
     border-radius:0;
     border-top:0;
+    border-bottom:0;
     font-size:16px;
     font-weight:bold;
 }
@@ -231,20 +247,29 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 #article_autocomplete {
-    width:95%;
+    width:90%;
     padding-left:10px;
 }
 
 #article_number {
-    width:5%;
+    width:10%;
     text-align:center;
 }
 
+@media (min-width:1200px) {
+    #article_autocomplete {
+        width:92%
+    }
+
+    #article_number {
+        width:8%;
+    }
+}
+
 /* Article data */
 
 #articles_data {
-    border:1px solid #ddd;
-    border-top:0;
+    border:1px solid #c8102e;
 
     overflow:auto;
     max-height:500px;
@@ -265,8 +290,9 @@ input[type=number]::-webkit-outer-spin-button {
 
 #articles_data table tr.category {
     height:35px;
-    background-color:#ddd;
+    background-color:#c8102e;
     font-size:16px;
+    color:#FFF;
     font-weight:bold;
 }
 
@@ -277,13 +303,12 @@ input[type=number]::-webkit-outer-spin-button {
 /* Second part - Left - bottom */
 
 .kpsul_middle_left_bottom {
-    height:160px;
-    margin:15px 0;
-    border:1px solid #ddd;
+    margin:15px 0 0;
+    border:1px solid #c8102e;
 }
 
 .kpsul_middle_left_bottom > div {
-    height:100%;
+    height:160px;
     padding:0;
 }
 
@@ -292,7 +317,15 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 #basket_rel {
-    border-left:1px solid #ddd;
+    border-top:1px solid #c8102e;
+    border-left:0;
+}
+
+@media (min-width:768px) {
+    #basket_rel {
+        border-left:1px solid #c8102e;
+        border-top:0;
+    }
 }
 
 #basket table {
@@ -306,29 +339,96 @@ input[type=number]::-webkit-outer-spin-button {
 
 #basket tr .amount {
     width:70px;
-    padding-right:10px;
+    padding-right:15px;
     text-align:right;
 }
 
 #basket tr .number {
     width:50px;
-    padding-right:10px;
+    padding-right:15px;
     text-align:right;
 }
 
 #basket tr.ui-selected, #basket tr.ui-selecting {
-    background-color:#C8102E;
+    background-color:rgba(200,16,46,0.6);
     color:#FFF;
 }
 
 /* History */
 
+#history {
+    overflow:auto;
+    height:100%;
+    border:1px solid #c8102e;
+}
+
+#history .day {
+    height:40px;
+    line-height:40px;
+    background-color:#c8102e;
+    color:#fff;
+    padding-left:20px;
+    font-size:16px;
+    font-weight:bold;
+}
+
+#history .opegroup .general {
+    height:30px;
+    line-height:30px;
+    background-color:#c8102e;
+    color:#fff;
+    font-weight:bold;
+    padding-left:10px;
+}
+
+#history .opegroup .general .trigramme {
+    padding-left:15px;
+}
+
+#history .opegroup .general .amount {
+    padding-left:15px;
+}
+
+#history .opegroup .ope {
+    position:relative;
+    height:25px;
+    line-height:24px;
+    font-size:12px;
+}
+
+#history .opegroup .ope .amountukf {
+    padding-left:15px;
+}
+
+#history .opegroup .ope span {
+    display:inline-block;
+    padding-right:10px;
+}
+
+#history .opegroup .ope .amountukf {
+    width:75px;
+    text-align:right;
+}
+
+#history .opegroup .ope .infos1 {
+    width:60px;
+    text-align:right;
+}
+
 #history div.general.ui-selected, #history div.general.ui-selecting,
 #history div.ope.ui-selected, #history div.ope.ui-selecting {
-    background-color:#C8102E;
+    background-color:rgba(200,16,46,0.6);
     color:#FFF;
 }
 
-#history .canceled {
-    text-decoration:line-through;
+#history .ope.canceled {
+    color:#444;
+}
+
+#history .ope.canceled::before {
+    position: absolute;
+    content: ' ';
+    width:100%;
+    top: 12px;
+    border-top: 1px solid rgba(200,16,46,0.5);
 }
diff --git a/kfet/static/kfet/css/kpsul_grid.css b/kfet/static/kfet/css/kpsul_grid.css
index e8121f1c..c90924d2 100644
--- a/kfet/static/kfet/css/kpsul_grid.css
+++ b/kfet/static/kfet/css/kpsul_grid.css
@@ -2,9 +2,8 @@
     html { height:100%; }
     body { height:calc(100% - 50px); }
     .container-fluid { height:100%; }
-    .kpsul_middle { height:calc(100% - 175px); }
-    .kpsul_middle_left_col { height:calc(100% - 15px); }
-    .kpsul_middle_left_top { height:calc(100% - 190px); min-height:80px; }
+    .kpsul_middle { height:calc(100% - 205px); }
+    .kpsul_middle_left_top { height:calc(100% - 175px); min-height:80px; }
     .kpsul_middle_left { height:100%; }
     #articles_data { height: calc(100% - 80px); }
 }
diff --git a/kfet/templates/kfet/kpsul.html b/kfet/templates/kfet/kpsul.html
index 9ecaf342..e044e415 100644
--- a/kfet/templates/kfet/kpsul.html
+++ b/kfet/templates/kfet/kpsul.html
@@ -87,7 +87,7 @@
       </div>
     </div>
   </div>
-  <div class="col-sm-4">
+  <div class="col-sm-4 kpsul_middle_right_col">
     <div id="history">
     </div>
   </div>
@@ -97,14 +97,6 @@
     {{ operation_formset.as_p }}
 </form>
 
-<!--
-<form id="cancel_form">
-    Opé annul 1:<input type="text" name="operation"><br>
-    Opé annul 2:<input type="text" name="operation">
-</form>
-
-<button type="button" id="cancel_operations">Annuler</button>-->
-
 <div style="display:none;" id="operation_empty_html" data-opeindex="__prefix__">
     {{ operation_formset.empty_form }}
 </div>
@@ -173,10 +165,10 @@ $(document).ready(function() {
         }
         if (account_data['is_frozen']) {
             $('#account').attr('data-balance', 'frozen');
-        } else if (account_data['balance'] == '') {
-            $('#account').attr('data-balance', '');
         } else if (account_data['balance'] >= 5 || account_data['trigramme'] == 'LIQ') {
             $('#account').attr('data-balance', 'ok');
+        } else if (account_data['balance'] == '') {
+            $('#account').attr('data-balance', '');
         } else if (account_data['balance'] >= 0) {
             $('#account').attr('data-balance', 'low');
         } else {
@@ -574,9 +566,11 @@ $(document).ready(function() {
 
     function addDeposit(amount) {
         var deposit_basket_html = $(item_basket_default_html);
+        var amount = parseFloat(amount).toFixed(2);
         var index = addDepositToFormset(amount);
         deposit_basket_html
             .attr('data-opeindex', index)
+            .find('.number').text(amount+"€").end()
             .find('.name').text('Charge').end()
             .find('.amount').text(amountToUKF(amount, account_data['is_cof']));
         basket_container.prepend(deposit_basket_html);
@@ -585,10 +579,11 @@ $(document).ready(function() {
 
     function addWithdraw(amount) {
         var withdraw_basket_html = $(item_basket_default_html);
-        var amount = -amount;
+        var amount = (- parseFloat(amount)).toFixed(2);
         var index = addWithdrawToFormset(amount);
         withdraw_basket_html
             .attr('data-opeindex', index)
+            .find('.number').text(amount+"€").end()
             .find('.name').text('Retrait').end()
             .find('.amount').text(amountToUKF(amount, account_data['is_cof']));
         basket_container.prepend(withdraw_basket_html);
@@ -804,45 +799,94 @@ $(document).ready(function() {
     // -----
 
     var history_container = $('#history');
-    var history_operationgroup_html = '<div class="opegroup"><div class="general"></div></div>';
-    var history_operation_html = '<div class="ope"></div>';
+    var history_operationgroup_html = '<div class="opegroup"></div>';
+    var history_operationgroupgeneral_html = '<div class="general"><span class="at"></span><span class="trigramme"></span><span class="amount"></span></div>';
+    var history_operation_html = '<div class="ope"><span class="amountukf"></span><span class="infos1"></span><span class="infos2"></span></div>';
+
+    function getOpeHtml(ope, is_cof=false, trigramme='') {
+        var ope_html = $(history_operation_html);
+        var amount = parseFloat(ope['amount']);
+        var amountUKF = amountToUKF(amount, is_cof);
+        var infos1 = '', infos2 = '';
 
-    function getTextOpe(ope, is_cof=false) {
-        var amount = amountToUKF(ope['amount'], is_cof);
         if (ope['type'] == 'deposit') {
-            return amount + ' - Charge';
+            infos1 = amount.toFixed(2)+'€';
+            infos2 = 'Charge';
         } else if (ope['type'] == 'withdraw') {
-            return amount + ' - Retrait';
+            infos1 = amount.toFixed(2)+'€';
+            infos2 = 'Retrait';
         } else {
-            return amount +' - '+ope['article_nb']+' '+ope['article__name'];
+            infos1 = ope['article_nb'];
+            infos2 = ope['article__name'];
         }
+
+        if (trigramme == 'LIQ')
+            amountUKF = (- amount).toFixed(2) +"€";
+
+        ope_html
+            .attr('data-ope', ope['id'])
+            .find('.amountukf').text(amountUKF).end()
+            .find('.infos1').text(infos1).end()
+            .find('.infos2').text(infos2).end();
+
+        if (ope['canceled_at'])
+            ope_html.addClass('canceled');
+
+        return ope_html;
+    }
+
+    function getOpegroupGeneralHtml(opegroup) {
+        var opegroupgeneral_html = $(history_operationgroupgeneral_html);
+        var at = new Date(opegroup['at']);
+        var at_hours = (at.getHours() < 10 ? '0' : '') + at.getHours();
+        var at_minutes = (at.getMinutes() < 10 ? '0' : '') + at.getMinutes();
+        var at_seconds = (at.getSeconds() < 10 ? '0' : '') + at.getSeconds();
+        var at_formated = at_hours+':'+at_minutes+':'+at_seconds;
+        var amount = parseFloat(opegroup['amount']);
+        var trigramme = opegroup['on_acc__trigramme'];
+        if (opegroup['on_acc__trigramme'] == 'LIQ') {
+            var amount = (- amount).toFixed(2) +'€';
+        } else {
+            var amount = amountToUKF(amount, opegroup['is_cof']);
+        }
+
+        opegroupgeneral_html
+            .find('.at').text(at_formated).end()
+            .find('.amount').text(amount).end()
+            .find('.trigramme').text(trigramme).end();
+
+        return opegroupgeneral_html;
     }
 
     function addOpeGroup(opegroup) {
-        // Préparation ajout groupe d'opés à l'historique
+        checkOrCreateDay(opegroup['at']);
         var opegroup_html = $(history_operationgroup_html);
-
         opegroup_html.attr('data-opegroup', opegroup['id']);
-        opegroup_html.find('.general').html(
-            opegroup['at']
-            +' '+opegroup['on_acc__trigramme']
-            +' <span class="amount">'+opegroup['amount']+'</span> €');
+        // Ajout des infos générales sur le groupe d'opés
+        opegroup_html.append(getOpegroupGeneralHtml(opegroup));
 
         // Ajout des opérations de ce groupe
         for (var i=0; i < opegroup['opes'].length; i++) {
-            var ope_html = $(history_operation_html);
-            var ope = opegroup['opes'][i];
-
-            if (ope['canceled_at']) {
-                ope_html.addClass('canceled')
-            }
-            ope_html
-                .attr('data-ope', ope['id'])
-                .text(getTextOpe(ope, opegroup['is_cof']));
-            opegroup_html.append(ope_html);
+            opegroup_html.append(getOpeHtml(opegroup['opes'][i], opegroup['is_cof'], opegroup['on_acc__trigramme']));
         }
         // Ajout du groupe
-        history_container.prepend(opegroup_html);
+        history_container.find('.day').first().after(opegroup_html);
+    }
+
+    var history_day_default_html = '<div class="day"></div>';
+    var months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+
+    function checkOrCreateDay(at) {
+        var at = new Date(at);
+        var mostRecentDay = history_container.find('.day').first();
+        if (mostRecentDay.length == 0 || at.getMonth() != mostRecentDay.attr('data-month') || at.getDate() != mostRecentDay.attr('data-day')) {
+            var day_html = $(history_day_default_html);
+            day_html
+                .attr('data-month', at.getMonth())
+                .attr('data-day', at.getDate())
+                .text(at.getDate()+' '+months[at.getMonth()]);
+            history_container.prepend(day_html);
+        }
     }
 
     function getHistory() {
@@ -895,7 +939,12 @@ $(document).ready(function() {
 
     function cancelOpeGroup(opegroup) {
         var opegroup_html = history_container.find('[data-opegroup='+opegroup['id']+']');
-        opegroup_html.find('.amount').text(opegroup['amount']);
+        if (opegroup_html.find('.trigramme').text() == 'LIQ') {
+            var amount = (- parseFloat(opegroup['amount']).tofixed(2))+'€';
+        } else {
+            var amount = amountToUKF(opegroup['amount'], opegroup['on_acc__is_cof']);
+        }
+        opegroup_html.find('.amount').text(amount);
     }
 
     function cancelOpe(ope) {
@@ -947,6 +996,7 @@ $(document).ready(function() {
     function coolReset(give_tri_focus=true) {
         resetAccount();
         resetBasket();
+        resetSelectable();
         if (give_tri_focus)
             triInput.focus();
     }
@@ -960,6 +1010,10 @@ $(document).ready(function() {
         getHistory();
     }
 
+    function resetSelectable() {
+        $('.ui-selected').removeClass('ui-selected');
+    }
+
     // Shorcuts
 
     $(document).on('keypress', function(e) {
diff --git a/kfet/views.py b/kfet/views.py
index 9075f1d2..49d4dc8a 100644
--- a/kfet/views.py
+++ b/kfet/views.py
@@ -732,12 +732,13 @@ def kpsul_cancel_operations(request):
     # Need refresh from db cause we used update on querysets
     opegroups_pk = [ opegroup.pk for opegroup in to_groups_amounts ]
     opegroups = (OperationGroup.objects
-        .values('id','amount').filter(pk__in=opegroups_pk))
+        .values('id','amount','on_acc__cofprofile__is_cof').filter(pk__in=opegroups_pk))
     for opegroup in opegroups:
         websocket_data['opegroups'].append({
             'cancellation': True,
             'id': opegroup['id'],
             'amount': opegroup['amount'],
+            'on_acc__is_cof': opegroup['on_acc__cofprofile__is_cof'],
         })
     for ope in opes:
         websocket_data['opes'].append({