From 5782e91aa885a3a466a043aa806ed14bf718749d Mon Sep 17 00:00:00 2001 From: Yohann D'ANELLO Date: Thu, 12 Mar 2020 21:05:43 +0100 Subject: [PATCH] Auto-completer is more independant, comment code --- static/js/base.js | 158 +++++++++++++++++++++++++++++++++ static/js/consos.js | 138 ++-------------------------- templates/note/conso_form.html | 2 +- 3 files changed, 168 insertions(+), 130 deletions(-) diff --git a/static/js/base.js b/static/js/base.js index a2ad87c9..0c63fb26 100644 --- a/static/js/base.js +++ b/static/js/base.js @@ -52,3 +52,161 @@ function getMatchedNotes(pattern, fun) { }); }); } + +/** + * Generate a
  • entry with a given id and text + */ +function li(id, text) { + return "
  • " + text + "
    • \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
  • 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] + + "" + disp[3] + ""); + } + }); + $("#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
  • blocks for the matched aliases + * @param note_prefix The prefix of the
  • 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] + + "" + disp[3] + ""); + }); + + // 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 d3075edd..9d56672a 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 "
  • " + text + "
    • \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] - + "" + disp[3] + ""); - } - }); - $("#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] - + "" + disp[3] + ""); - }); - - 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 9b096df3..5cfccb37 100644 --- a/templates/note/conso_form.html +++ b/templates/note/conso_form.html @@ -31,7 +31,7 @@
    - +