ynerant
/
nk20
mirror of https://gitlab.crans.org/bde/nk20
1
0
Fork 0
Code Issues Releases Wiki Activity

Auto-completer is more independant, comment code

This commit is contained in:
Yohann D'ANELLO 2020-03-12 21:05:43 +01:00
parent f9451da7f1
commit 5782e91aa8
3 changed files with 168 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
static/js/base.js
View File

@ -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));
});
});
});
});
}

138
static/js/consos.js
View File

@ -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, "");

2
templates/note/conso_form.html
View File

@ -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>