Reprise de ce qu'affiche l'historique

- 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
This commit is contained in:
Aurélien Delobelle 2016-08-19 01:08:57 +02:00
parent e7f37351a7
commit e9835c7cac
6 changed files with 230 additions and 68 deletions

View file

@ -7,6 +7,10 @@ body {
font-family:Roboto;
}
body > .container-fluid {
background:#ddd;
}
h1,h2,h3,h4,h5,h6 {
font-family:Oswald;
}

View file

@ -1,3 +1,7 @@
.jconfirm-bg.seen {
opacity:1 !important;
}
.jconfirm .jconfirm-box {
padding:0;
border-radius:0 !important;

View file

@ -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);
}

View file

@ -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); }
}

View file

@ -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) {

View file

@ -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({