Replace arrays with objects

static/js/base.js

@@ -75,11 +75,11 @@ function removeNote(d, note_prefix="note", notes_display, note_list_id, user_not
         let new_notes_display = [];
         let html = "";
         notes_display.forEach(function (disp) {
-            if (disp[3] > 1 || disp[1] !== d[1]) {
+            if (disp.quantity > 1 || disp.id !== d.id) {
-                disp[3] -= disp[1] === d[1] ? 1 : 0;
+                disp.quantity -= disp.id === d.id ? 1 : 0;
                 new_notes_display.push(disp);
-                html += li(note_prefix + "_" + disp[1], disp[0]
+                html += li(note_prefix + "_" + disp.id, disp.name
-                    + "<span class=\"badge badge-dark badge-pill\">" + disp[3] + "</span>");
+                    + "<span class=\"badge badge-dark badge-pill\">" + disp.quantity + "</span>");
             }
         });
 
@@ -90,10 +90,11 @@ function removeNote(d, note_prefix="note", notes_display, note_list_id, user_not
 
         $("#" + note_list_id).html(html);
         notes_display.forEach(function (disp) {
-            let obj = $("#" + note_prefix + "_" + disp[1]);
+            let obj = $("#" + note_prefix + "_" + disp.id);
             obj.click(removeNote(disp, note_prefix, notes_display, note_list_id, user_note_field, profile_pic_field));
             obj.hover(function() {
-                displayNote(disp[2], disp[0], user_note_field, profile_pic_field);
+                if (disp.note)
+                    displayNote(disp.note, disp.name, user_note_field, profile_pic_field);
             });
         });
     });
@@ -181,14 +182,21 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
                     var disp = null;
                     notes_display.forEach(function (d) {
                         // We compare the note ids
-                        if (d[1] === note.id) {
+                        if (d.id === note.id) {
-                            d[3] += 1;
+                            d.quantity += 1;
                             disp = d;
                         }
                     });
                     // In the other case, we add a new emitter
-                    if (disp == null)
+                    if (disp == null) {
-                        notes_display.push([alias.name, note.id, note, 1]);
+                        disp = {
+                            name: alias.name,
+                            id: note.id,
+                            note: note,
+                            quantity: 1
+                        };
+                        notes_display.push(disp);
+                    }
 
                     // If the function alias_click exists, it is called. If it doesn't return true, then the notes are
                     // note displayed. Useful for a consumption when a button is already clicked
@@ -198,18 +206,18 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
                     let note_list = $("#" + note_list_id);
                     let html = "";
                     notes_display.forEach(function (disp) {
-                        html += li(note_prefix + "_" + disp[1], disp[0]
+                        html += li(note_prefix + "_" + disp.id, disp.name
-                            + "<span class=\"badge badge-dark badge-pill\">" + disp[3] + "</span>");
+                            + "<span class=\"badge badge-dark badge-pill\">" + disp.quantity + "</span>");
                     });
 
                     // Emitters are displayed
                     note_list.html(html);
 
                     notes_display.forEach(function (disp) {
-                        let line_obj = $("#" + note_prefix + "_" + disp[1]);
+                        let line_obj = $("#" + note_prefix + "_" + disp.id);
                         // Hover an emitter display also the profile picture
                         line_obj.hover(function () {
-                            displayNote(disp[2], disp[0], user_note_field, profile_pic_field);
+                            displayNote(disp.note, disp.name, user_note_field, profile_pic_field);
                         });
 
                         // When an emitter is clicked, it is removed

static/js/consos.js

@@ -22,6 +22,45 @@ $(document).ready(function() {
     $(document.body).on("click", "a[data-toggle='tab']", function() {
         location.hash = this.getAttribute("href");
     });
+
+    // Switching in double consumptions mode should update the layout
+    $("#double_conso").click(function() {
+        $("#consos_list_div").show();
+        $("#infos_div").attr('class', 'col-sm-5 col-xl-6');
+        $("#note_infos_div").attr('class', 'col-xl-3');
+        $("#user_select_div").attr('class', 'col-xl-4');
+        $("#buttons_div").attr('class', 'col-sm-7 col-xl-6');
+
+        if (buttons.length > 0) {
+            let note_list_obj = $("#note_list");
+            $("#consos_list").html(note_list_obj.html());
+            note_list_obj.html("");
+        }
+    });
+
+    $("#single_conso").click(function() {
+        $("#consos_list_div").hide();
+        $("#infos_div").attr('class', 'col-sm-5 col-md-4');
+        $("#note_infos_div").attr('class', 'col-xl-5');
+        $("#user_select_div").attr('class', 'col-xl-7');
+        $("#buttons_div").attr('class', 'col-sm-7 col-md-8');
+
+        if (buttons.length > 0) {
+            if (notes_display.length === 0) {
+                let consos_list_obj = $("#consos_list");
+                $("#note_list").html(consos_list_obj.html());
+                consos_list_obj.html("");
+            }
+            else {
+                buttons.length = 0;
+                $("#consos_list").html("");
+            }
+        }
+    });
+
+    $("#consos_list_div").hide();
+
+    $("#consume_all").click(consumeAll);
 });
 
 notes = [];
@@ -51,32 +90,42 @@ autoCompleteNote("note", "alias_matched", "note_list", notes, notes_display,
 function addConso(dest, amount, type, category_id, category_name, template_id, template_name) {
     var button = null;
     buttons.forEach(function(b) {
-        if (b[6] === template_id) {
+        if (b.id === template_id) {
-            b[1] += 1;
+            b.quantity += 1;
             button = b;
         }
     });
-    if (button == null)
+    if (button == null) {
-        buttons.push([dest, 1, amount, type, category_id, category_name, template_id, template_name]);
+        button = {
+            id: template_id,
+            name: template_name,
+            dest: dest,
+            quantity: 1,
+            amount: amount,
+            type: type,
+            category_id: category_id,
+            category_name: category_name
+        };
+        buttons.push(button);
+    }
 
-    if ($("#double_conso").is(":checked")) {
+    let dc_obj = $("#double_conso");
+    if (dc_obj.is(":checked") || notes_display.length === 0) {
+        let list = dc_obj.is(":checked") ? "consos_list" : "note_list";
         let html = "";
         buttons.forEach(function(button) {
-            html += li("conso_button_" + button[6], button[7]
+            html += li("conso_button_" + button.id, button.name
-                + "<span class=\"badge badge-dark badge-pill\">" + button[1] + "</span>");
+                + "<span class=\"badge badge-dark badge-pill\">" + button.quantity + "</span>");
+        });
+
+        $("#" + list).html(html);
+
+        buttons.forEach(function(button) {
+            $("#conso_button_" + button.id).click(removeNote(button, "conso_button", buttons, list));
         });
-        $("#consos_list").html(html);
     }
-    else if (notes_display.length > 0)
+    else
         consumeAll();
-    else {
-        let html = "";
-        buttons.forEach(function(button) {
-            html += li("conso_button_" + button[6], button[7]
-                + "<span class=\"badge badge-dark badge-pill\">" + button[1] + "</span>");
-        });
-        $("#note_list").html(html);
-    }
 }
 
 /**
@@ -85,8 +134,8 @@ function addConso(dest, amount, type, category_id, category_name, template_id, t
 function consumeAll() {
     notes_display.forEach(function(note_display) {
         buttons.forEach(function(button) {
-            consume(note_display[1], button[0], button[1] * note_display[3], button[2],
+            consume(note_display.id, button.dest, button.quantity * note_display.quantity, button.amount,
-                button[7] + " (" + button[5] + ")", button[3], button[4], button[6]);
+                button.name + " (" + button.category_name + ")", button.type, button.category_id, button.id);
        });
     });
 }
@@ -128,3 +177,31 @@ function consume(source, dest, quantity, amount, reason, type, category, templat
             refreshBalance();
         });
 }
+
+// When a validate button is clicked, we switch the validation status
+function de_validate(id, validated) {
+    $("#validate_" + id).html("<strong style=\"font-size: 16pt;\">⟳ ...</strong>");
+
+    // Perform a PATCH request to the API in order to update the transaction
+    // If the user has insuffisent rights, an error message will appear
+    // TODO: Add this error message
+    $.ajax({
+        "url": "/api/note/transaction/transaction/" + id + "/",
+        type: "PATCH",
+        dataType: "json",
+        headers: {
+            "X-CSRFTOKEN": CSRF_TOKEN
+        },
+        data: {
+            "resourcetype": "TemplateTransaction",
+            valid: !validated
+        },
+        success: function () {
+            refreshHistory();
+            refreshBalance();
+
+            // Refresh jQuery objects
+            $(".validate").click(de_validate);
+        }
+    });
+}

templates/note/conso_form.html

@@ -69,7 +69,7 @@
                         {% for button in most_used %}
                             {% if button.display %}
                                 <button class="btn btn-outline-dark rounded-0 flex-fill"
-                                        id="button{{ button.id }}" name="button" value="{{ button.name }}">
+                                        id="most_used_button{{ button.id }}" name="button" value="{{ button.name }}">
                                     {{ button.name }} ({{ button.amount | pretty_money }})
                                 </button>
                             {% endif %}
@@ -157,44 +157,15 @@
 {% block extrajavascript %}
     <script type="text/javascript" src="/static/js/consos.js"></script>
     <script type="text/javascript">
-        // Switching in double consumptions mode should update the layout
+        {% for button in most_used %}
-        $("#double_conso").click(function() {
+            {% if button.display %}
-            $("#consos_list_div").show();
+                $("#most_used_button{{ button.id }}").click(function() {
-            $("#infos_div").attr('class', 'col-sm-5 col-xl-6');
+                    addConso({{ button.destination.id }}, {{ button.amount }},
-            $("#note_infos_div").attr('class', 'col-xl-3');
+                        {{ polymorphic_ctype }}, {{ button.category.id }}, "{{ button.category.name }}",
-            $("#user_select_div").attr('class', 'col-xl-4');
+                        {{ button.id }}, "{{ button.name }}");
-            $("#buttons_div").attr('class', 'col-sm-7 col-xl-6');
+                });
-
+            {% endif %}
-            if (buttons.length > 0) {
+        {% endfor %}
-                let note_list_obj = $("#note_list");
-                $("#consos_list").html(note_list_obj.html());
-                note_list_obj.html("");
-            }
-        });
-
-        $("#single_conso").click(function() {
-            $("#consos_list_div").hide();
-            $("#infos_div").attr('class', 'col-sm-5 col-md-4');
-            $("#note_infos_div").attr('class', 'col-xl-5');
-            $("#user_select_div").attr('class', 'col-xl-7');
-            $("#buttons_div").attr('class', 'col-sm-7 col-md-8');
-
-            if (buttons.length > 0) {
-                if (notes_display.length === 0) {
-                    let consos_list_obj = $("#consos_list");
-                    $("#note_list").html(consos_list_obj.html());
-                    consos_list_obj.html("");
-                }
-                else {
-                    buttons.length = 0;
-                    $("#consos_list").html("");
-                }
-            }
-        });
-
-        $("#consos_list_div").hide();
-
-        $("#consume_all").click(consumeAll);
 
         {% for button in transaction_templates %}
             {% if button.display %}
@@ -205,33 +176,5 @@
                 });
             {% endif %}
         {% endfor %}
-
-        // When a validate button is clicked, we switch the validation status
-        function de_validate(id, validated) {
-            $("#validate_" + id).html("<strong style=\"font-size: 16pt;\">⟳ ...</strong>");
-
-            // Perform a PATCH request to the API in order to update the transaction
-            // If the user has insuffisent rights, an error message will appear
-            // TODO: Add this error message
-            $.ajax({
-                "url": "/api/note/transaction/transaction/" + id + "/",
-                type: "PATCH",
-                dataType: "json",
-                headers: {
-                    "X-CSRFTOKEN": CSRF_TOKEN
-                },
-                data: {
-                    "resourcetype": "TemplateTransaction",
-                    valid: !validated
-                },
-                success: function () {
-                    refreshHistory();
-                    refreshBalance();
-
-                    // Refresh jQuery objects
-                    $(".validate").click(de_validate);
-                }
-            });
-        }
     </script>
 {% endblock %}