From 931b2c4e1f23ed940f96ed0dc508cfcbda28fe24 Mon Sep 17 00:00:00 2001 From: Ludovic Stephan Date: Wed, 25 Dec 2019 17:28:36 +0100 Subject: [PATCH] Refactor js code Harmonize history denominations * opegroups/transfergroups -> groups * opes/transfers -> entries * snake/camel case -> snake case --- kfet/static/kfet/css/history.css | 42 ++++------ kfet/static/kfet/js/history.js | 140 +++++++++++++++---------------- kfet/templates/kfet/kpsul.html | 6 +- kfet/tests/test_views.py | 50 +++++------ kfet/views.py | 24 +++--- 5 files changed, 127 insertions(+), 135 deletions(-) diff --git a/kfet/static/kfet/css/history.css b/kfet/static/kfet/css/history.css index e1e1ab42..42e73527 100644 --- a/kfet/static/kfet/css/history.css +++ b/kfet/static/kfet/css/history.css @@ -20,7 +20,7 @@ z-index:10; } -#history .opegroup { +#history .group { height:30px; line-height:30px; background-color: #c63b52; @@ -30,29 +30,29 @@ overflow:auto; } -#history .opegroup .time { +#history .group .time { width:70px; } -#history .opegroup .trigramme { +#history .group .trigramme { width:55px; text-align:right; } -#history .opegroup .amount { +#history .group .amount { text-align:right; width:90px; } -#history .opegroup .valid_by { +#history .group .valid_by { padding-left:20px } -#history .opegroup .comment { +#history .group .comment { padding-left:20px; } -#history .ope { +#history .entry { position:relative; height:25px; line-height:24px; @@ -61,38 +61,38 @@ overflow:auto; } -#history .ope .amount { +#history .entry .amount { width:50px; text-align:right; } -#history .ope .infos1 { +#history .entry .infos1 { width:80px; text-align:right; } -#history .ope .infos2 { +#history .entry .infos2 { padding-left:15px; } -#history .ope .addcost { +#history .entry .addcost { padding-left:20px; } -#history .ope .canceled { +#history .entry .canceled { padding-left:20px; } -#history div.ope.ui-selected, #history div.ope.ui-selecting { +#history div.entry.ui-selected, #history div.entry.ui-selecting { background-color:rgba(200,16,46,0.6); color:#FFF; } -#history .ope.canceled, #history .transfer.canceled { +#history .entry.canceled { color:#444; } -#history .ope.canceled::before, #history.transfer.canceled::before { +#history .entry.canceled::before { position: absolute; content: ' '; width:100%; @@ -101,19 +101,11 @@ border-top: 1px solid rgba(200,16,46,0.5); } -#history .transfer .amount { - width:80px; -} - -#history .transfer .from_acc { - padding-left:10px; -} - -#history .opegroup .infos { +#history .group .infos { text-align:center; width:145px; } -#history .ope .glyphicon { +#history .entry .glyphicon { padding-left:15px; } diff --git a/kfet/static/kfet/js/history.js b/kfet/static/kfet/js/history.js index 98bc7a2a..540c8239 100644 --- a/kfet/static/kfet/js/history.js +++ b/kfet/static/kfet/js/history.js @@ -2,19 +2,20 @@ function dateUTCToParis(date) { return moment.tz(date, 'UTC').tz('Europe/Paris'); } +// TODO : classifier (later) function KHistory(options = {}) { $.extend(this, KHistory.default_options, options); this.$container = $(this.container); this.$container.selectable({ - filter: 'div.opegroup, div.ope', + filter: 'div.group, div.entry', selected: function (e, ui) { $(ui.selected).each(function () { - if ($(this).hasClass('opegroup')) { - var opegroup = $(this).data('id'); - $(this).siblings('.ope').filter(function () { - return $(this).data('group') == opegroup + if ($(this).hasClass('group')) { + var id = $(this).data('id'); + $(this).siblings('.entry').filter(function () { + return $(this).data('group_id') == id }).addClass('ui-selected'); } }); @@ -25,36 +26,35 @@ function KHistory(options = {}) { this.$container.html(''); }; - this.addOpeGroup = function (opegroup) { - var $day = this._getOrCreateDay(opegroup['at']); - var $opegroup = this._opeGroupHtml(opegroup); + this.add_history_group = function (group) { + var $day = this._get_or_create_day(group['at']); + var $group = this._group_html(group); - $day.after($opegroup); + $day.after($group); - var trigramme = opegroup['on_acc_trigramme']; - var is_cof = opegroup['is_cof']; - var type = opegroup['type'] + var trigramme = group['on_acc_trigramme']; + var is_cof = group['is_cof']; + var type = group['type'] + // TODO : simplifier ça ? switch (type) { case 'operation': - for (let ope of opegroup['opes']) { - var $ope = this._opeHtml(ope, is_cof, trigramme); - $ope.data('group', opegroup['id']); - $ope.data('group_type', type); - $opegroup.after($ope); + for (let ope of group['entries']) { + var $ope = this._ope_html(ope, is_cof, trigramme); + $ope.data('group_id', group['id']); + $group.after($ope); } break; case 'transfer': - for (let transfer of opegroup['opes']) { - var $transfer = this._transferHtml(transfer); - $transfer.data('group', opegroup['id']); - $transfer.data('group_type', type); - $opegroup.after($transfer); + for (let transfer of group['entries']) { + var $transfer = this._transfer_html(transfer); + $transfer.data('group_id', group['id']); + $group.after($transfer); } break; } } - this._opeHtml = function (ope, is_cof, trigramme) { + this._ope_html = function (ope, is_cof, trigramme) { var $ope_html = $(this.template_ope); var parsed_amount = parseFloat(ope['amount']); var amount = amountDisplay(parsed_amount, is_cof, trigramme); @@ -95,12 +95,12 @@ function KHistory(options = {}) { } if (ope['canceled_at']) - this.cancelOpe(ope, $ope_html); + this.cancel_entry(ope, $ope_html); return $ope_html; } - this._transferHtml = function (transfer) { + this._transfer_html = function (transfer) { var $transfer_html = $(this.template_transfer); var parsed_amount = parseFloat(transfer['amount']); var amount = parsed_amount.toFixed(2) + '€'; @@ -113,67 +113,67 @@ function KHistory(options = {}) { .find('.infos2').text(transfer['to_acc']).end(); if (transfer['canceled_at']) - this.cancelOpe(transfer, $transfer_html); + this.cancel_entry(transfer, $transfer_html); return $transfer_html; } - this.cancelOpe = function (ope, $ope = null) { - if (!$ope) - $ope = this.findOpe(ope["id"], ope["type"]); + this.cancel_entry = function (entry, $entry = null) { + if (!$entry) + $entry = this.find_entry(entry["id"], entry["type"]); var cancel = 'Annulé'; - var canceled_at = dateUTCToParis(ope['canceled_at']); - if (ope['canceled_by__trigramme']) - cancel += ' par ' + ope['canceled_by__trigramme']; + var canceled_at = dateUTCToParis(entry['canceled_at']); + if (entry['canceled_by__trigramme']) + cancel += ' par ' + entry['canceled_by__trigramme']; cancel += ' le ' + canceled_at.format('DD/MM/YY à HH:mm:ss'); - $ope.addClass('canceled').find('.canceled').text(cancel); + $entry.addClass('canceled').find('.canceled').text(cancel); } - this._opeGroupHtml = function (opegroup) { - var type = opegroup['type']; + this._group_html = function (group) { + var type = group['type']; switch (type) { case 'operation': - var $opegroup_html = $(this.template_opegroup); - var trigramme = opegroup['on_acc__trigramme']; + var $group_html = $(this.template_opegroup); + var trigramme = group['on_acc__trigramme']; var amount = amountDisplay( - parseFloat(opegroup['amount']), opegroup['is_cof'], trigramme); + parseFloat(group['amount']), group['is_cof'], trigramme); break; case 'transfer': - var $opegroup_html = $(this.template_transfergroup); - $opegroup_html.find('.infos').text('Transferts').end() + var $group_html = $(this.template_transfergroup); + $group_html.find('.infos').text('Transferts').end() var trigramme = ''; var amount = ''; break; } - var at = dateUTCToParis(opegroup['at']).format('HH:mm:ss'); - var comment = opegroup['comment'] || ''; + var at = dateUTCToParis(group['at']).format('HH:mm:ss'); + var comment = group['comment'] || ''; - $opegroup_html + $group_html .data('type', type) - .data('id', opegroup['id']) + .data('id', group['id']) .find('.time').text(at).end() .find('.amount').text(amount).end() .find('.comment').text(comment).end() .find('.trigramme').text(trigramme).end(); if (!this.display_trigramme) - $opegroup_html.find('.trigramme').remove(); - $opegroup_html.find('.info').remove(); + $group_html.find('.trigramme').remove(); + $group_html.find('.info').remove(); - if (opegroup['valid_by__trigramme']) - $opegroup_html.find('.valid_by').text('Par ' + opegroup['valid_by__trigramme']); + if (group['valid_by__trigramme']) + $group_html.find('.valid_by').text('Par ' + group['valid_by__trigramme']); - return $opegroup_html; + return $group_html; } - this._getOrCreateDay = function (date) { + this._get_or_create_day = function (date) { var at = dateUTCToParis(date); var at_ser = at.format('YYYY-MM-DD'); var $day = this.$container.find('.day').filter(function () { @@ -185,24 +185,24 @@ function KHistory(options = {}) { return $day.data('date', at_ser).text(at.format('D MMMM YYYY')); } - this.findOpeGroup = function (id, type = "operation") { - return this.$container.find('.opegroup').filter(function () { + this.find_group = function (id, type = "operation") { + return this.$container.find('.group').filter(function () { return ($(this).data('id') == id && $(this).data("type") == type) }); } - this.findOpe = function (id, type = 'operation') { - return this.$container.find('.ope').filter(function () { + this.find_entry = function (id, type = 'operation') { + return this.$container.find('.entry').filter(function () { return ($(this).data('id') == id && $(this).data('type') == type) }); } - this.update_opegroup = function (opegroup, type = "operation") { - var $opegroup = this.findOpeGroup(opegroup['id'], type); - var trigramme = $opegroup.find('.trigramme').text(); + this.update_opegroup = function (group, type = "operation") { + var $group = this.find_group(group['id'], type); + var trigramme = $group.find('.trigramme').text(); var amount = amountDisplay( - parseFloat(opegroup['amount']), opegroup['is_cof'], trigramme); - $opegroup.find('.amount').text(amount); + parseFloat(group['amount']), group['is_cof'], trigramme); + $group.find('.amount').text(amount); } this.fetch = function (fetch_options) { @@ -214,8 +214,8 @@ function KHistory(options = {}) { method: "POST", data: options, }).done(function (data) { - for (let opegroup of data['opegroups']) { - that.addOpeGroup(opegroup); + for (let group of data['groups']) { + that.add_history_group(group); } }); } @@ -239,9 +239,9 @@ function KHistory(options = {}) { }).done(function (data) { window.lock = 0; that.$container.find('.ui-selected').removeClass('ui-selected'); - for (let ope of data["canceled"]) { - ope["type"] = type; - that.cancelOpe(ope); + for (let entry of data["canceled"]) { + entry["type"] = type; + that.cancel_entry(entry); } if (type == "operation") { for (let opegroup of data["opegroups_to_update"]) { @@ -269,8 +269,8 @@ function KHistory(options = {}) { "transfers": [], "operations": [], } - this.$container.find('.ope.ui-selected').each(function () { - type = $(this).data("group_type"); + this.$container.find('.entry.ui-selected').each(function () { + type = $(this).data("type"); opes_to_cancel[`${type}s`].push($(this).data("id")); }); if (opes_to_cancel["transfers"].length > 0 && opes_to_cancel["operations"].length > 0) { @@ -296,9 +296,9 @@ function KHistory(options = {}) { KHistory.default_options = { container: '#history', template_day: '
', - template_opegroup: '
', - template_transfergroup: '
', - template_ope: '
', - template_transfer: '
', + template_opegroup: '
', + template_transfergroup: '
', + template_ope: '
', + template_transfer: '
', display_trigramme: true, } diff --git a/kfet/templates/kfet/kpsul.html b/kfet/templates/kfet/kpsul.html index 0b7f946e..7b292087 100644 --- a/kfet/templates/kfet/kpsul.html +++ b/kfet/templates/kfet/kpsul.html @@ -1253,9 +1253,9 @@ $(document).ready(function() { // ----- OperationWebSocket.add_handler(function(data) { - for (var i=0; i