diff --git a/static/js/base.js b/static/js/base.js
index a2ad87c99931550a523f35bb622855f54abdb00c..0c63fb26deff85c7966160474ebaf4507d98ce73 100644
--- a/static/js/base.js
+++ b/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));
+ });
+ });
+ });
+ });
+}
diff --git a/static/js/consos.js b/static/js/consos.js
index d3075eddd2a4c52c0f86976740018d35f50faf22..9d56672a472696ab6c3633f36f9520ec20f7b8db 100644
--- a/static/js/consos.js
+++ b/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",
- "user_note", "profile_pic");
+autoCompleteNote("note", "alias_matched", "note_list", notes, notes_display,
+ "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] + ")",
- button[3], button[4], button[6]);
+ consume(note_display[1], button[0], button[1] * note_display[3], button[2],
+ 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 = [];
- buttons = [];
- old_pattern = null;
+ notes_display.length = 0;
+ notes.length = 0;
+ buttons.length = 0;
$("#note_list").html("");
$("#alias_matched").html("");
displayNote(null, "");
diff --git a/templates/note/conso_form.html b/templates/note/conso_form.html
index 9b096df31a4aacc819d29a7d1229f324e0d190cd..5cfccb375c899edbb49ccdb2ccbb47fa98d8a1d0 100644
--- a/templates/note/conso_form.html
+++ b/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>