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
*/
function li(id, text) {
return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\"" +
function li(id, text,extra_css) {
return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center " + extra_css + "\"" +
" 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
@ -62,24 +79,28 @@ function li(id, text) {
*/
function displayNote(note, alias, user_note_field=null, profile_pic_field=null) {
if (!note.display_image) {
note.display_image = 'https://nk20.ynerant.fr/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;
note.display_image = '/media/pic/default.png';
}
let img = note.display_image;
if (alias !== note.name)
alias += " (aka. " + note.name + ")";
if (user_note_field !== null)
$("#" + user_note_field).addClass(displayStyle(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).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
field.keypress(function(event) {
if (event.originalEvent.charCode === 13)
$("#" + alias_matched_id + " li").first().trigger("click");
if (event.originalEvent.charCode === 13 && notes.length > 0) {
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
@ -164,51 +188,46 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
let pattern = field.val();
// If the pattern is not modified, we don't query the API
if (pattern === old_pattern || pattern === "")
if (pattern === old_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(aliases) {
// get matched Alias with note associated
if(pattern == ""){
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
if (pattern !== $("#" + field_id).val())
return;
aliases.results.forEach(function (alias) {
let note = alias.note;
note = {
id: note,
name: alias.name,
alias: alias,
balance: null
};
aliases_matched_html += li(alias_prefix + "_" + alias.id, alias.name);
consumers.results.forEach(function (consumer){
let note = consumer.note;
extra_css = displayStyle(note.balance);
aliases_matched_html += li(alias_prefix + '_' + consumer.id,
consumer.name,
extra_css);
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.id);
// 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);
consumers.results.forEach(function(consumer){
let note = consumer.note;
let consumer_obj = $("#" + alias_prefix+ "_" + consumer.id);
consumer_obj.hover(function(){
displayNote(consumer.note, consumer.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("");
old_pattern = "";
// If the note is already an emitter, we increase the quantity
consumer_obj.click(function(){
field.val(""); old_pattern = ""; // reset input field
var disp = null;
notes_display.forEach(function (d) {
// 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
if (disp == null) {
disp = {
name: alias.name,
id: note.id,
name: consumer.name,
id: consumer.id,
note: note,
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 html = "";
notes_display.forEach(function (disp) {
html += li(note_prefix + "_" + disp.id, disp.name
+ "<span class=\"badge badge-dark badge-pill\">" + disp.quantity + "</span>");
html += li(note_prefix + "_" + disp.id,
disp.name
+ "<span class=\"badge badge-dark badge-pill\">"
+ disp.quantity + "</span>",
displayStyle(disp.note.balance));
});
// 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,
profile_pic_field));
});
});
})
});
});
});
}
});// end getJSON alias
});
}// end function autocomplete
// When a validate button is clicked, we switch the validation status
function de_validate(id, validated) {

16
templates/note/conso_form.html
View File

@ -11,9 +11,10 @@
<div class="row">
{# User details column #}
<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"
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">
<span id="user_note"></span>
</div>
@ -25,14 +26,17 @@
<div class="card border-success shadow mb-4">
<div class="card-header">
<p class="card-text font-weight-bold">
{% trans "Select emitters" %}
{% trans "Consum" %}
</p>
</div>
<div class="card-body px-0 py-0" style="min-height:125px;">
<ul class="list-group list-group-flush" id="note_list">
</ul>
<div class="card-body">
<input class="form-control mx-auto d-block" type="text" id="note" />
<ul class="list-group list-group-flush" id="alias_matched">
</div>
<div class="card-footer bg-white">
<input class="form-control mx-auto d-block" type="text" id="note" />
<ul class="list-group list-group-flush"
id="alias_matched">
</ul>
</div>
</div>