forked from DGNum/gestioCOF
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
parent
e7f37351a7
commit
e9835c7cac
6 changed files with 230 additions and 68 deletions
|
|
@ -7,6 +7,10 @@ body {
|
|||
font-family:Roboto;
|
||||
}
|
||||
|
||||
body > .container-fluid {
|
||||
background:#ddd;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family:Oswald;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.jconfirm-bg.seen {
|
||||
opacity:1 !important;
|
||||
}
|
||||
|
||||
.jconfirm .jconfirm-box {
|
||||
padding:0;
|
||||
border-radius:0 !important;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in a new issue