First steps in Account logic

kfet/static/kfet/css/kpsul.css

@@ -98,6 +98,10 @@ input[type=number]::-webkit-outer-spin-button {
     font-weight:bold;
 }
 
+#account_data #account-is_cof {
+    font-weight:bold;
+}
+
 #account-name {
     font-weight:bold;
 }

kfet/static/kfet/js/account.js

@@ -0,0 +1,131 @@
+var Account = Backbone.Model.extend({
+
+    defaults: {
+        'id': 0,
+        'name': '',
+        'email': '',
+        'is_cof': '',
+        'promo': '',
+        'balance': '',
+        'is_frozen': false,
+        'departement': '',
+        'nickname': '',
+    },
+
+    url: function () {
+        return django_urls["kfet.account.read.json"](this.get("trigramme"))
+    },
+
+    reset: function () {
+        // On ne veut pas trigger un `change` deux fois
+        this.clear({ silent: true }).set(this.defaults)
+    },
+
+    parse: function (resp, options) {
+        if (_.has(resp, 'balance')) {
+            return _.extend(resp, { 'balance': parseFloat(resp.balance) });
+        } else {
+            return resp;
+        }
+    },
+
+    view: function () {
+        view_class = this.get("trigramme") == 'LIQ' ? LIQView : AccountView;
+        return new view_class({ model: this })
+    },
+
+    render: function () {
+        this.view().render();
+    }
+})
+
+var AccountView = Backbone.View.extend({
+
+    el: '#account',
+    input: '#id_trigramme',
+    buttons: '.buttons',
+
+    props: _.keys(Account.prototype.defaults),
+
+    get: function (property) {
+        /* If the function this.get_<property> is defined,
+        we call it ; else we call this.model.<property>. */
+        getter_name = 'get_' + property;
+        if (_.functions(this).includes(getter_name))
+            return this[getter_name]()
+        else
+            return this.model.get(property)
+    },
+
+    get_is_cof: function () {
+        return this.model.get("is_cof") ? 'COF' : 'Non-COF';
+    },
+
+    get_balance: function () {
+        return amountToUKF(this.model.get("balance"), this.model.get("is_COF"), true)
+    },
+
+    attr_data_balance: function () {
+        if (this.model.id == 0) {
+            return '';
+        } else if (this.model.get("balance") < 0) {
+            return 'neg';
+        } else if (this.model.get("balance") <= 5) {
+            return 'low';
+        } else {
+            return 'ok';
+        }
+    },
+
+    get_buttons: function () {
+        var buttons = '';
+        if (this.model.id != 0) {
+            var url = django_urls["kfet.account.read"](this.model.get("trigramme"))
+            buttons += `<a href="${url}" class="btn btn-primary" target="_blank" title="Modifier"><span class="glyphicon glyphicon-cog"></span></a>`;
+        } else {
+            var trigramme = this.$(this.input).val().toUpperCase();
+            if (isValidTrigramme(trigramme)) {
+                trigramme = encodeURIComponent(trigramme);
+                var url_base = django_urls["kfet.account.create"]();
+                var url = `${url_base}?trigramme=${trigramme}`;
+                buttons += `<a href="${url}" class="btn btn-primary" target="_blank" title="Créer"><span class="glyphicon glyphicon-plus"></span></a>`;
+            } else {
+                buttons += '<button class="btn btn-primary search" title="Rechercher"><span class="glyphicon glyphicon-search"></span></button>';
+            }
+        }
+
+        return buttons
+    },
+
+    render: function () {
+        for (let prop of this.props) {
+            var selector = "#account-" + prop;
+            this.$(selector).text(this.get(prop));
+        }
+
+        this.$el.attr("data-balance", this.attr_data_balance());
+        this.$(this.buttons).html(this.get_buttons());
+    },
+
+    reset: function () {
+        for (let prop of this.props) {
+            console.log(prop)
+            var selector = "#account-" + prop;
+            this.$(selector).text('');
+        }
+
+        this.$el.attr("data-balance", '');
+        this.$(this.buttons).html(this.get_buttons());
+    },
+})
+
+var LIQView = AccountView.extend({
+    get_balance: function () {
+        return "";
+    },
+
+    attr_data_balance: function () {
+        return 'ok';
+    }
+})
+

kfet/templates/kfet/kpsul.html

@@ -6,6 +6,10 @@
 <script type="text/javascript" src="{% static 'vendor/jquery/jquery.autocomplete-light.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/vendor/moment/moment-timezone-with-data-2012-2022.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/history.js' %}"></script>
+<script type="text/javascript" src="{% url 'js_reverse' %}" ></script>
+<script type="text/javascript" src="{% static 'kfet/vendor/underscore-min.js' %}"></script>
+<script type="text/javascript" src="{% static 'kfet/vendor/backbone-min.js' %}"></script>
+<script type="text/javascript" src="{% static 'kfet/js/account.js' %}"></script>
 {% endblock %}
 
 {% block title %}K-Psul{% endblock %}
@@ -210,6 +214,7 @@ $(document).ready(function() {
     // -----
 
     // Initializing
+    var account = new Account()
     var account_container = $('#account');
     var triInput = $('#id_trigramme');
     var account_data = {};
@@ -226,56 +231,6 @@ $(document).ready(function() {
         'nickname'   : '',
     };
 
-    // Display data
-    function displayAccountData() {
-        var balance = account_data['trigramme'] != 'LIQ' ? account_data['balance'] : '';
-        if (balance != '')
-            balance = amountToUKF(account_data['balance'], account_data['is_cof'], true);
-        var is_cof = account_data['trigramme'] ? account_data['is_cof'] : '';
-        if (is_cof !== '')
-            is_cof = is_cof ? '<b>COF</b>' : '<b>Non-COF</b>';
-        for (var elem in account_data) {
-            if (elem == 'balance') {
-                $('#account-balance').text(balance);
-            } else if (elem == 'is_cof') {
-                $('#account-is_cof').html(is_cof);
-            } else {
-                $('#account-'+elem).text(account_data[elem]);
-            }
-        }
-        if (account_data['is_frozen']) {
-            $('#account').attr('data-balance', 'frozen');
-        } 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 {
-            $('#account').attr('data-balance', 'neg');
-        }
-
-        var buttons = '';
-        if (account_data['id'] != 0) {
-            var url_base = '{% url 'kfet.account.read' 'LIQ' %}';
-            url_base = url_base.substr(0, url_base.length - 3);
-            trigramme = encodeURIComponent(account_data['trigramme']) ;
-            buttons += '<a href="'+ url_base + trigramme +'" class="btn btn-primary" target="_blank" title="Modifier"><span class="glyphicon glyphicon-cog"></span></a>';
-        }
-        if (account_data['id'] == 0) {
-            var trigramme = triInput.val().toUpperCase();
-            if (isValidTrigramme(trigramme)) {
-                var url_base = '{% url 'kfet.account.create' %}'
-                trigramme = encodeURIComponent(trigramme);
-                buttons += '<a href="'+url_base+'?trigramme='+trigramme+'" class="btn btn-primary" target="_blank" title="Créer"><span class="glyphicon glyphicon-plus"></span></a>';
-            } else {
-                var url_base = '{% url 'kfet.account' %}'
-                buttons += '<button class="btn btn-primary search" title="Rechercher"><span class="glyphicon glyphicon-search"></span></button>';
-            }
-        }
-        account_container.find('.buttons').html(buttons);
-    }
-
     // Search for an account
     function searchAccount() {
         var content = '<input type="text" name="q" id="search_autocomplete" spellcheck="false" autofocus><div id="account_results"></div>' ;
@@ -326,7 +281,8 @@ $(document).ready(function() {
     function resetAccountData() {
         account_data = account_data_default;
         $('#id_on_acc').val(0);
-        displayAccountData();
+        account.reset();
+        account.view().reset()
     }
 
     function resetAccount() {
@@ -335,28 +291,26 @@ $(document).ready(function() {
     }
 
     // Store data
-    function storeAccountData(data) {
+    function storeAccountData() {
-        account_data = $.extend({}, account_data_default, data);
+        account_data = account.toJSON();
-        account_data['balance'] = parseFloat(account_data['balance']);
+        $('#id_on_acc').val(account.id);
-        $('#id_on_acc').val(account_data['id']);
+        account.render();
-        displayAccountData();
     }
 
     // Retrieve via ajax
     function retrieveAccountData(tri) {
-        $.ajax({
+        account.set({'trigramme': tri});
-            dataType: "json",
+        account.fetch({
-            url     : "{% url 'kfet.account.read.json' %}",
+            'success': function() {
-            method  : "POST",
+                storeAccountData();
-            data    : { trigramme: tri },
+                articleSelect.focus();
+                updateBasketAmount();
+                updateBasketRel();
+            },
+            'error': function() {
+                resetAccountData();
+            },
         })
-        .done(function(data) {
-            storeAccountData(data);
-            articleSelect.focus();
-            updateBasketAmount();
-            updateBasketRel();
-        })
-        .fail(function() { resetAccountData() });
     }
 
     // Event listener