Auto-completer is more independant, comment code

static/js/base.js

@@ -52,3 +52,161 @@ function getMatchedNotes(pattern, fun) {
         });
     });
 }
+
+/**
+ * Generate a <li> entry with a given id and text
+ */
+function li(id, text) {
+    return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\"" +
+                " id=\"" + id + "\">" + text + "</li>\n";
+}
+
+/**
+ * Render note name and picture
+ * @param note The note to render
+ * @param alias The alias to be displayed
+ * @param user_note_field
+ * @param profile_pic_field
+ */
+function displayNote(note, alias, user_note_field=null, profile_pic_field=null) {
+    let img = note == null ? null : note.display_image;
+    if (img == null)
+        img = '/media/pic/default.png';
+    if (note !== null && alias !== note.name)
+        alias += " (aka. " + note.name + ")";
+    if (note !== null && user_note_field !== null)
+        $("#" + user_note_field).text(alias + " : " + pretty_money(note.balance));
+    if (profile_pic_field != null)
+        $("#" + profile_pic_field).attr('src', img);
+}
+
+/**
+ * Remove a note from the emitters.
+ * @param d The note to remove
+ * @param note_prefix The prefix of the identifiers of the <li> blocks of the emitters
+ * @param notes_display An array containing the infos of the buyers: [alias, note id, note object, quantity]
+ * @param user_note_field The identifier of the field that display the note of the hovered note (useful in
+ *                        consumptions, put null if not used)
+ * @param profile_pic_field The identifier of the field that display the profile picture of the hovered note
+ *                          (useful in consumptions, put null if not used)
+ * @returns an anonymous function to be compatible with jQuery events
+ */
+function removeNote(d, note_prefix="note", notes_display, user_note_field=null, profile_pic_field=null) {
+    return (function() {
+        let new_notes_display = [];
+        let html = "";
+        notes_display.forEach(function (disp) {
+            if (disp[3] > 1 || disp[1] !== d[1]) {
+                disp[3] -= disp[1] === d[1] ? 1 : 0;
+                new_notes_display.push(disp);
+                html += li(note_prefix + "_" + disp[1], disp[0]
+                    + "<span class=\"badge badge-dark badge-pill\">" + disp[3] + "</span>");
+            }
+        });
+        $("#note_list").html(html);
+        notes_display.forEach(function (disp) {
+            obj = $("#" + note_prefix + "_" + disp[1]);
+            obj.click(removeNote(disp, note_prefix, notes_display, user_note_field, profile_pic_field));
+            obj.hover(function() {
+                displayNote(disp[2], disp[0], user_note_field, profile_pic_field);
+            });
+        });
+        notes_display = new_notes_display;
+    });
+}
+
+/**
+ * Generate an auto-complete field to query a note with its alias
+ * @param field_id The identifier of the text field where the alias is typed
+ * @param alias_matched_id The div block identifier where the matched aliases are displayed
+ * @param note_list_id The div block identifier where the notes of the buyers are displayed
+ * @param notes An array containing the note objects of the buyers
+ * @param notes_display An array containing the infos of the buyers: [alias, note id, note object, quantity]
+ * @param alias_prefix The prefix of the <li> blocks for the matched aliases
+ * @param note_prefix The prefix of the <li> blocks for the notes of the buyers
+ * @param user_note_field The identifier of the field that display the note of the hovered note (useful in
+ *                        consumptions, put null if not used)
+ * @param profile_pic_field The identifier of the field that display the profile picture of the hovered note
+ *                          (useful in consumptions, put null if not used)
+ */
+function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes_display, alias_prefix="alias",
+                          note_prefix="note", user_note_field=null, profile_pic_field=null) {
+    let field = $("#" + field_id);
+    // When the user clicks on the search field, it is immediately cleared
+    field.click(function() {
+        field.val("");
+    });
+
+    let old_pattern = null;
+
+    // When the user type something, the matched aliases are refreshed
+    field.keyup(function() {
+        let pattern = field.val();
+        // If the pattern is not modified, or if the field is empty, we don't query the API
+        if (pattern === old_pattern || pattern === "")
+            return;
+
+        old_pattern = pattern;
+
+        // Clear old matched notes
+        notes.length = 0;
+
+        let aliases_matched_obj = $("#" + alias_matched_id);
+        let aliases_matched_html = "";
+        // Get matched notes with the given pattern
+        getMatchedNotes(pattern, function(note, alias) {
+            aliases_matched_html += li("alias_" + alias.normalized_name, alias.name);
+            note.alias = alias;
+            notes.push(note);
+        });
+
+        // Display the list of matched aliases
+        aliases_matched_obj.html(aliases_matched_html);
+
+        notes.forEach(function (note) {
+            let alias = note.alias;
+            let alias_obj = $("#" + alias_prefix + "_" + alias.normalized_name);
+            // When an alias is hovered, the profile picture and the balance are displayed at the right place
+            alias_obj.hover(function() {
+                displayNote(note, alias.name, user_note_field, profile_pic_field);
+            });
+
+            // When the user click on an alias, the associated note is added to the emitters
+            alias_obj.click(function() {
+                field.val("");
+                // If the note is already an emitter, we increase the quantity
+                var disp = null;
+                notes_display.forEach(function(d) {
+                    // We compare the note ids
+                    if (d[1] === note.id) {
+                        d[3] += 1;
+                        disp = d;
+                    }
+                });
+                // In the other case, we add a new emitter
+                if (disp == null)
+                    notes_display.push([alias.name, note.id, note, 1]);
+                let note_list = $("#" + note_list_id);
+                let html = "";
+                notes_display.forEach(function(disp) {
+                   html += li("note_" + disp[1], disp[0]
+                        + "<span class=\"badge badge-dark badge-pill\">" + disp[3] + "</span>");
+                });
+
+                // Emitters are displayed
+                note_list.html(html);
+
+                notes_display.forEach(function(disp) {
+                    let line_obj = $("#" + note_prefix + "_" + disp[1]);
+                    // Hover an emitter display also the profile picture
+                    line_obj.hover(function() {
+                        displayNote(disp[2], disp[0], user_note_field, profile_pic_field);
+                    });
+
+                    // When an emitter is clicked, it is removed
+                    line_obj.click(removeNote(disp, note_prefix, notes_display, user_note_field, profile_pic_field));
+                });
+            });
+        });
+    });
+}

static/js/consos.js

@@ -23,132 +23,13 @@ $(document).ready(function() {
     });
 });
 
-let old_pattern = null;
 let notes = [];
 let notes_display = [];
 let buttons = [];
 
-// When the user clicks on the search field, it is immediately cleared
-let note_obj = $("#note");
-note_obj.click(function() {
-    note_obj.val("");
-});
-
-function li(id, text) {
-    return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\"" +
-                " id=\"" + id + "\">" + text + "</li>\n";
-}
-
-/**
- * Render note name and picture
- * @param note The note to render
- * @param alias The alias to be displayed
- * @param user_note_field
- * @param profile_pic_field
- */
-function displayNote(note, alias, user_note_field=null, profile_pic_field=null) {
-    let img = note == null ? null : note.display_image;
-    if (img == null)
-        img = '/media/pic/default.png';
-    if (note !== null && alias !== note.name)
-        alias += " (aka. " + note.name + ")";
-    if (note !== null && user_note_field !== null)
-        $("#" + user_note_field).text(alias + " : " + pretty_money(note.balance));
-    if (profile_pic_field != null)
-        $("#" + profile_pic_field).attr('src', img);
-}
-
-function remove_conso(c, obj, note_prefix="note") {
-    return (function() {
-        let new_notes_display = [];
-        let html = "";
-        notes_display.forEach(function (disp) {
-            if (disp[3] > 1 || disp[1] !== c[1]) {
-                disp[3] -= disp[1] === c[1] ? 1 : 0;
-                new_notes_display = new_notes_display.concat([disp]);
-                html += li(note_prefix + "_" + disp[1], disp[0]
-                    + "<span class=\"badge badge-dark badge-pill\">" + disp[3] + "</span>");
-            }
-        });
-        $("#note_list").html(html);
-        notes_display.forEach(function (disp) {
-            obj = $("#" + note_prefix + "_" + disp[1]);
-            obj.click(remove_conso(disp, obj, note_prefix));
-            obj.hover(function() {
-                displayNote(disp[2], disp[0]);
-            });
-        });
-        notes_display = new_notes_display;
-    });
-}
-
-
-function autoCompleteNote(field_id, alias_matched_id, alias_prefix="alias", note_prefix="note",
-                          user_note_field=null, profile_pic_field=null) {
-    let field = $("#" + field_id);
-    field.keyup(function() {
-        let pattern = field.val();
-        // If the pattern is not modified, or if the field is empty, we don't query the API
-        if (pattern === old_pattern || pattern === "")
-            return;
-
-        old_pattern = pattern;
-
-        notes = [];
-        let aliases_matched_obj = $("#" + alias_matched_id);
-        let aliases_matched_html = "";
-        getMatchedNotes(pattern, function(note, alias) {
-            aliases_matched_html += li("alias_" + alias.normalized_name, alias.name);
-            note.alias = alias;
-            notes = notes.concat([note]);
-        });
-
-        aliases_matched_obj.html(aliases_matched_html);
-
-        notes.forEach(function (note) {
-            let alias = note.alias;
-            let alias_obj = $("#" + alias_prefix + "_" + alias.normalized_name);
-            alias_obj.hover(function() {
-                displayNote(note, alias.name, user_note_field, profile_pic_field);
-            });
-
-            alias_obj.click(function() {
-                field.val("");
-                var disp = null;
-                notes_display.forEach(function(d) {
-                    if (d[1] === note.id) {
-                        d[3] += 1;
-                        disp = d;
-                    }
-                });
-                if (disp == null)
-                    notes_display = notes_display.concat([[alias.name, note.id, note, 1]]);
-                let note_list = $("#note_list");
-                let html = "";
-                notes_display.forEach(function(disp) {
-                   html += li("note_" + disp[1], disp[0]
-                        + "<span class=\"badge badge-dark badge-pill\">" + disp[3] + "</span>");
-                });
-
-                note_list.html(html);
-
-                notes_display.forEach(function(disp) {
-                    let line_obj = $("#" + note_prefix + "_" + disp[1]);
-                    line_obj.hover(function() {
-                        displayNote(disp[2], disp[0], user_note_field, profile_pic_field);
-                    });
-
-                    line_obj.click(remove_conso(disp, note_prefix));
-                });
-            });
-        });
-    });
-}
-
-
 // When the user searches an alias, we update the auto-completion
-autoCompleteNote("note", "alias_matched", "alias", "note",
+autoCompleteNote("note", "alias_matched", "note_list", notes, notes_display,
-    "user_note", "profile_pic");
+    "alias", "note", "user_note", "profile_pic");
 
 /**
  * Add a transaction from a button.
@@ -169,7 +50,7 @@ function addConso(dest, amount, type, category_id, category_name, template_id, t
         }
     });
     if (button == null)
-        buttons = buttons.concat([[dest, 1, amount, type, category_id, category_name, template_id, template_name]]);
+        buttons.push([dest, 1, amount, type, category_id, category_name, template_id, template_name]);
 
     // TODO Only in simple consumption mode
     if (notes.length > 0)
@@ -180,10 +61,10 @@ function addConso(dest, amount, type, category_id, category_name, template_id, t
  * Apply all transactions: all notes in `notes` buy each item in `buttons`
  */
 function consumeAll() {
-    notes.forEach(function(note) {
+    notes_display.forEach(function(note_display) {
         buttons.forEach(function(button) {
-            consume(note.id, button[0], button[1], button[2], button[7] + " (" + button[5] + ")",
+            consume(note_display[1], button[0], button[1] * note_display[3], button[2],
-                button[3], button[4], button[6]);
+                button[7] + " (" + button[5] + ")", button[3], button[4], button[6]);
        });
     });
 }
@@ -214,10 +95,9 @@ function consume(source, dest, quantity, amount, reason, type, category, templat
             "category": category,
             "template": template
         }, function() {
-            notes_display = [];
+            notes_display.length = 0;
-            notes = [];
+            notes.length = 0;
-            buttons = [];
+            buttons.length = 0;
-            old_pattern = null;
             $("#note_list").html("");
             $("#alias_matched").html("");
             displayNote(null, "");

templates/note/conso_form.html

@@ -31,7 +31,7 @@
                         <ul class="list-group list-group-flush" id="note_list">
                         </ul>
                         <div class="card-body">
-                            <input class="rounded mx-auto d-block" type="text" id="note" />
+                            <input class="form-control mx-auto d-block" type="text" id="note" />
                             <ul class="list-group list-group-flush" id="alias_matched">
                             </ul>
                         </div>