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

color codes from note balances

This commit is contained in:
Pierre-antoine Comby 2020-03-28 17:44:22 +01:00
parent f3656f367c
commit 948263a867
2 changed files with 87 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
static/js/base.js
View File

@ -48,10 +48,27 @@ function getMatchedNotes(pattern, fun) {
/** /**
* Generate a <li> entry with a given id and text * Generate a <li> entry with a given id and text
*/ */
function li(id, text) { function li(id, text,extra_css) {
return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\"" + return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center " + extra_css + "\"" +
" id=\"" + id + "\">" + text + "</li>\n"; " id=\"" + id + "\">" + text + "</li>\n";
} }
/**
* Return style to apply according to the balance of the note
* @param balance The balance of the note.
*/
function displayStyle(balance){
if (balance < -5000){
return " text-danger bg-dark"
}
else if(balance <-1000){
return " text-danger"
}
else if(balance < 0){
return "text-warning"
}
return ""
}
/** /**
* Render note name and picture * Render note name and picture
@ -62,24 +79,28 @@ function li(id, text) {
*/ */
function displayNote(note, alias, user_note_field=null, profile_pic_field=null) { function displayNote(note, alias, user_note_field=null, profile_pic_field=null) {
if (!note.display_image) { if (!note.display_image) {
note.display_image = 'https://nk20.ynerant.fr/media/pic/default.png'; note.display_image = '/media/pic/default.png';
$.getJSON("/api/note/note/" + note.id + "/?format=json", function(new_note) {
note.display_image = new_note.display_image.replace("http:", "https:");
note.name = new_note.name;
note.balance = new_note.balance;
displayNote(note, alias, user_note_field, profile_pic_field);
});
return;
} }
let img = note.display_image; let img = note.display_image;
if (alias !== note.name) if (alias !== note.name)
alias += " (aka. " + note.name + ")"; alias += " (aka. " + note.name + ")";
if (user_note_field !== null) if (user_note_field !== null)
$("#" + user_note_field).addClass(displayStyle(note.balance));
$("#" + user_note_field).text(alias + (note.balance == null ? "" : (" : " + pretty_money(note.balance)))); $("#" + user_note_field).text(alias + (note.balance == null ? "" : (" : " + pretty_money(note.balance))));
if (profile_pic_field != null) if (profile_pic_field != null){
$("#" + profile_pic_field).attr('src', img); $("#" + profile_pic_field).attr('src', img);
$("#" + profile_pic_field).click(function(){
console.log(note);
if(note.resourcetype == "NoteUser"){
document.location.href = "/accounts/user/" + note.user;
}
else if(note.resourcetype == "NoteClub"){
document.location.href = "/accounts/club/" + note.club;
}
});
}
} }
/** /**
@ -153,8 +174,11 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
// When the user type "Enter", the first alias is clicked // When the user type "Enter", the first alias is clicked
field.keypress(function(event) { field.keypress(function(event) {
if (event.originalEvent.charCode === 13) if (event.originalEvent.charCode === 13 && notes.length > 0) {
$("#" + alias_matched_id + " li").first().trigger("click"); let li_obj = $("#" + alias_matched_id + " li").first();
displayNote(notes[0], li_obj.text(), user_note_field, profile_pic_field);
li_obj.trigger("click");
}
}); });
// When the user type something, the matched aliases are refreshed // When the user type something, the matched aliases are refreshed
@ -164,51 +188,46 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
let pattern = field.val(); let pattern = field.val();
// If the pattern is not modified, we don't query the API // If the pattern is not modified, we don't query the API
if (pattern === old_pattern || pattern === "") if (pattern === old_pattern)
return; return;
old_pattern = pattern; old_pattern = pattern;
// Clear old matched notes
notes.length = 0; notes.length = 0;
let aliases_matched_obj = $("#" + alias_matched_id); let aliases_matched_obj = $("#" + alias_matched_id);
let aliases_matched_html = ""; let aliases_matched_html = "";
// get matched Alias with note associated
// Get matched notes with the given pattern if(pattern == ""){
getMatchedNotes(pattern, function(aliases) { aliases_matched_obj = $("#" + alias_matched_id);
aliases_matched_html = "";
aliases_matched_obj.html("")
notes.length = 0;
return;
}
$.getJSON("/api/note/consumer/?format=json&alias="
+ pattern
+ "&search=user|club&ordering=normalized_name",
function(consumers){
// The response arrived too late, we stop the request // The response arrived too late, we stop the request
if (pattern !== $("#" + field_id).val()) if (pattern !== $("#" + field_id).val())
return; return;
consumers.results.forEach(function (consumer){
aliases.results.forEach(function (alias) { let note = consumer.note;
let note = alias.note; extra_css = displayStyle(note.balance);
note = { aliases_matched_html += li(alias_prefix + '_' + consumer.id,
id: note, consumer.name,
name: alias.name, extra_css);
alias: alias,
balance: null
};
aliases_matched_html += li(alias_prefix + "_" + alias.id, alias.name);
notes.push(note); notes.push(note);
}); });
// Display the list of matched aliases
aliases_matched_obj.html(aliases_matched_html); aliases_matched_obj.html(aliases_matched_html);
consumers.results.forEach(function(consumer){
notes.forEach(function (note) { let note = consumer.note;
let alias = note.alias; let consumer_obj = $("#" + alias_prefix+ "_" + consumer.id);
let alias_obj = $("#" + alias_prefix + "_" + alias.id); consumer_obj.hover(function(){
// When an alias is hovered, the profile picture and the balance are displayed at the right place displayNote(consumer.note, consumer.name, user_note_field,profile_pic_field)
alias_obj.hover(function () {
displayNote(note, alias.name, user_note_field, profile_pic_field);
}); });
consumer_obj.click(function(){
// When the user click on an alias, the associated note is added to the emitters field.val(""); old_pattern = ""; // reset input field
alias_obj.click(function () {
field.val("");
old_pattern = "";
// If the note is already an emitter, we increase the quantity
var disp = null; var disp = null;
notes_display.forEach(function (d) { notes_display.forEach(function (d) {
// We compare the note ids // We compare the note ids
@ -220,8 +239,8 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
// In the other case, we add a new emitter // In the other case, we add a new emitter
if (disp == null) { if (disp == null) {
disp = { disp = {
name: alias.name, name: consumer.name,
id: note.id, id: consumer.id,
note: note, note: note,
quantity: 1 quantity: 1
}; };
@ -236,8 +255,11 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
let note_list = $("#" + note_list_id); let note_list = $("#" + note_list_id);
let html = ""; let html = "";
notes_display.forEach(function (disp) { notes_display.forEach(function (disp) {
html += li(note_prefix + "_" + disp.id, disp.name html += li(note_prefix + "_" + disp.id,
+ "<span class=\"badge badge-dark badge-pill\">" + disp.quantity + "</span>"); disp.name
+ "<span class=\"badge badge-dark badge-pill\">"
+ disp.quantity + "</span>",
displayStyle(disp.note.balance));
}); });
// Emitters are displayed // Emitters are displayed
@ -254,11 +276,12 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
line_obj.click(removeNote(disp, note_prefix, notes_display, note_list_id, user_note_field, line_obj.click(removeNote(disp, note_prefix, notes_display, note_list_id, user_note_field,
profile_pic_field)); profile_pic_field));
}); });
}); })
}); });
});
}); });// end getJSON alias
} });
}// end function autocomplete
// When a validate button is clicked, we switch the validation status // When a validate button is clicked, we switch the validation status
function de_validate(id, validated) { function de_validate(id, validated) {

16
templates/note/conso_form.html
View File

@ -11,9 +11,10 @@
<div class="row"> <div class="row">
{# User details column #} {# User details column #}
<div class="col-xl-5" id="note_infos_div"> <div class="col-xl-5" id="note_infos_div">
<div class="card border-success shadow mb-4"> <div class="card border-success shadow mb-4 text-center">
<img src="/media/pic/default.png" <img src="/media/pic/default.png"
id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block"> id="profile_pic" alt=""
class="img-thumbnail">
<div class="card-body text-center"> <div class="card-body text-center">
<span id="user_note"></span> <span id="user_note"></span>
</div> </div>
@ -25,14 +26,17 @@
<div class="card border-success shadow mb-4"> <div class="card border-success shadow mb-4">
<div class="card-header"> <div class="card-header">
<p class="card-text font-weight-bold"> <p class="card-text font-weight-bold">
{% trans "Select emitters" %} {% trans "Consum" %}
</p> </p>
</div> </div>
<div class="card-body px-0 py-0" style="min-height:125px;">
<ul class="list-group list-group-flush" id="note_list"> <ul class="list-group list-group-flush" id="note_list">
</ul> </ul>
<div class="card-body"> </div>
<input class="form-control mx-auto d-block" type="text" id="note" /> <div class="card-footer bg-white">
<ul class="list-group list-group-flush" id="alias_matched"> <input class="form-control mx-auto d-block" type="text" id="note" />
<ul class="list-group list-group-flush"
id="alias_matched">
</ul> </ul>
</div> </div>
</div> </div>