nk20/note_kfet/static/js/base.js

392 lines
14 KiB
JavaScript
Raw Normal View History

// Copyright (C) 2018-2021 by BDE ENS Paris-Saclay
2020-03-12 15:53:35 +00:00
// SPDX-License-Identifier: GPL-3.0-or-later
/**
* Convert balance in cents to a human readable amount
* @param value the balance, in cents
* @returns {string}
*/
2020-08-21 17:12:28 +00:00
function pretty_money (value) {
if (value % 100 === 0) { return (value < 0 ? '- ' : '') + Math.floor(Math.abs(value) / 100) + ' €' } else {
return (value < 0 ? '- ' : '') + Math.floor(Math.abs(value) / 100) + '.' +
2020-09-05 06:30:41 +00:00
(Math.abs(value) % 100 < 10 ? '0' : '') + (Math.abs(value) % 100) + ' €'
}
2020-03-12 15:53:35 +00:00
}
2020-03-16 11:11:16 +00:00
/**
* Add a message on the top of the page.
* @param msg The message to display
* @param alert_type The type of the alert. Choices: info, success, warning, danger
* @param timeout The delay (in millis) after that the message is auto-closed. If negative, then it is ignored.
2020-03-16 11:11:16 +00:00
*/
2020-08-21 17:12:28 +00:00
function addMsg (msg, alert_type, timeout = -1) {
2020-09-05 06:30:41 +00:00
const msgDiv = $('#messages')
let html = msgDiv.html()
const id = Math.floor(10000 * Math.random() + 1)
html += '<div class="alert alert-' + alert_type + ' alert-dismissible">' +
'<button id="close-message-' + id + '" class="close" data-dismiss="alert" href="#"><span aria-hidden="true">×</span></button>' +
msg + '</div>\n'
msgDiv.html(html)
if (timeout > 0) {
setTimeout(function () {
$('#close-message-' + id).click()
}, timeout)
}
2020-03-16 11:11:16 +00:00
}
2020-03-26 22:04:51 +00:00
/**
* add Muliple error message from err_obj
2020-03-27 21:48:20 +00:00
* @param errs_obj [{error_code:erro_message}]
* @param timeout The delay (in millis) after that the message is auto-closed. If negative, then it is ignored.
2020-03-26 22:04:51 +00:00
*/
2020-08-21 17:12:28 +00:00
function errMsg (errs_obj, timeout = -1) {
2020-09-05 06:30:41 +00:00
for (const err_msg of Object.values(errs_obj)) {
addMsg(err_msg, 'danger', timeout)
}
2020-03-26 22:04:51 +00:00
}
2020-03-27 21:48:20 +00:00
var reloadWithTurbolinks = (function () {
2020-09-05 06:30:41 +00:00
var scrollPosition
2020-03-27 21:48:20 +00:00
2020-09-05 06:30:41 +00:00
function reload () {
scrollPosition = [window.scrollX, window.scrollY]
Turbolinks.visit(window.location.toString(), { action: 'replace' })
}
2020-03-27 21:48:20 +00:00
2020-09-05 06:30:41 +00:00
document.addEventListener('turbolinks:load', function () {
if (scrollPosition) {
window.scrollTo.apply(window, scrollPosition)
scrollPosition = null
}
})
2020-09-05 06:30:41 +00:00
return reload
})()
2020-03-27 21:48:20 +00:00
2020-03-12 15:53:35 +00:00
/**
* Reload the balance of the user on the right top corner
*/
2020-08-21 17:12:28 +00:00
function refreshBalance () {
2020-09-05 06:30:41 +00:00
$('#user_balance').load('/ #user_balance')
2020-03-12 15:53:35 +00:00
}
/**
* Query the 20 first matched notes with a given pattern
* @param pattern The pattern that is queried
* @param fun For each found note with the matched alias `alias`, fun(note, alias) is called.
*/
2020-08-21 17:12:28 +00:00
function getMatchedNotes (pattern, fun) {
2020-09-05 06:30:41 +00:00
$.getJSON('/api/note/alias/?format=json&alias=' + pattern + '&search=user|club', fun)
2020-03-12 15:53:35 +00:00
}
/**
* Generate a <li> entry with a given id and text
*/
2020-08-21 17:12:28 +00:00
function li (id, text, extra_css) {
2020-09-05 06:30:41 +00:00
return '<li class="list-group-item py-1 px-2 d-flex justify-content-between align-items-center text-truncate ' +
(extra_css || '') + '"' + ' id="' + id + '">' + text + '</li>\n'
}
2020-03-28 16:44:22 +00:00
/**
* Return style to apply according to the balance of the note and the validation status of the email address
* @param note The concerned note.
2020-03-28 16:44:22 +00:00
*/
2020-08-21 17:12:28 +00:00
function displayStyle (note) {
2020-09-05 06:30:41 +00:00
if (!note) { return '' }
const balance = note.balance
var css = ''
2023-08-22 19:51:02 +00:00
if (balance < -2000) { css += ' text-danger bg-dark' }
2021-09-26 21:02:31 +00:00
else if (balance < -1000) { css += ' text-danger' }
else if (balance < 0) { css += ' text-warning' }
if (!note.email_confirmed) { css += ' bg-primary' }
else if (!note.is_active || (note.membership && note.membership.date_end < new Date().toISOString())) { css += ' bg-info' }
2020-09-05 06:30:41 +00:00
return css
2020-03-28 16:44:22 +00:00
}
/**
* 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
*/
2020-08-21 17:12:28 +00:00
function displayNote (note, alias, user_note_field = null, profile_pic_field = null) {
2020-09-05 06:30:41 +00:00
if (!note.display_image) {
note.display_image = '/static/member/img/default_picture.png'
}
const img = note.display_image
if (alias !== note.name && note.name) { alias += ' (aka. ' + note.name + ')' }
if (user_note_field !== null) {
$('#' + user_note_field).removeAttr('class')
$('#' + user_note_field).addClass(displayStyle(note))
$('#' + user_note_field).text(alias + (note.balance == null ? '' : (' :\n' + pretty_money(note.balance))))
if (profile_pic_field != null) {
$('#' + profile_pic_field).attr('src', img)
$('#' + profile_pic_field + '_link').attr('href', note.resourcetype === 'NoteUser'
? '/accounts/user/' + note.user : note.resourcetype === 'NoteClub'
? '/accounts/club/' + note.club : '#')
2020-03-28 16:44:22 +00:00
}
2020-09-05 06:30:41 +00:00
}
}
/**
* 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]
2020-03-12 22:12:49 +00:00
* @param note_list_id The div block identifier where the notes of the buyers are displayed
* @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
*/
2020-09-05 06:30:41 +00:00
function removeNote (d, note_prefix = 'note', notes_display, note_list_id, user_note_field = null, profile_pic_field = null) {
return function () {
const new_notes_display = []
let html = ''
notes_display.forEach(function (disp) {
if (disp.quantity > 1 || disp.id !== d.id) {
disp.quantity -= disp.id === d.id ? 1 : 0
new_notes_display.push(disp)
html += li(note_prefix + '_' + disp.id, disp.name +
'<span class="badge badge-dark badge-pill">' + disp.quantity + '</span>',
displayStyle(disp.note))
}
})
notes_display.length = 0
new_notes_display.forEach(function (disp) {
notes_display.push(disp)
})
$('#' + note_list_id).html(html)
notes_display.forEach(function (disp) {
const obj = $('#' + note_prefix + '_' + disp.id)
obj.click(removeNote(disp, note_prefix, notes_display, note_list_id, user_note_field, profile_pic_field))
obj.hover(function () {
if (disp.note) { displayNote(disp.note, disp.name, user_note_field, profile_pic_field) }
})
})
}
}
/**
* 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 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)
2020-03-13 00:34:20 +00:00
* @param alias_click Function that is called when an alias is clicked. If this method exists and doesn't return true,
* the associated note is not displayed.
* Useful for a consumption if the item is selected before.
*/
2020-09-05 06:30:41 +00:00
function autoCompleteNote (field_id, note_list_id, notes, notes_display, alias_prefix = 'alias',
note_prefix = 'note', user_note_field = null, profile_pic_field = null, alias_click = null) {
const field = $('#' + field_id)
// Configure tooltip
field.tooltip({
html: true,
placement: 'bottom',
title: 'Loading...',
trigger: 'manual',
container: field.parent(),
fallbackPlacement: 'clockwise'
})
// When the user clicks elsewhere, we hide the tooltip
$(document).click(function (e) {
if (!e.target.id.startsWith(alias_prefix)) {
field.tooltip('hide')
}
})
let old_pattern = null
// Clear search on click
field.click(function () {
field.tooltip('hide')
field.removeClass('is-invalid')
field.val('')
old_pattern = ''
})
// When the user type "Enter", the first alias is clicked
field.keypress(function (event) {
if (event.originalEvent.charCode === 13 && notes.length > 0) {
const li_obj = field.parent().find('ul li').first()
displayNote(notes[0], li_obj.text(), user_note_field, profile_pic_field)
li_obj.trigger('click')
}
})
2020-09-05 06:30:41 +00:00
// When the user type something, the matched aliases are refreshed
field.keyup(function (e) {
field.removeClass('is-invalid')
if (e.originalEvent.charCode === 13) { return }
const pattern = field.val()
// If the pattern is not modified, we don't query the API
if (pattern === old_pattern) { return }
old_pattern = pattern
notes.length = 0
// get matched Alias with note associated
if (pattern === '') {
field.tooltip('hide')
notes.length = 0
return
}
$.getJSON('/api/note/consumer/?format=json&alias=' + pattern + '&search=user|club',
function (consumers) {
// The response arrived too late, we stop the request
if (pattern !== $('#' + field_id).val()) { return }
// Build tooltip content
let aliases_matched_html = '<ul class="list-group list-group-flush">'
consumers.results.forEach(function (consumer) {
const note = consumer.note
note.email_confirmed = consumer.email_confirmed
if (consumer.hasOwnProperty('membership') && consumer.membership) { note.membership = consumer.membership } else { note.membership = undefined }
const extra_css = displayStyle(note)
aliases_matched_html += li(alias_prefix + '_' + consumer.id,
consumer.name,
extra_css)
notes.push(note)
})
aliases_matched_html += '</ul>'
// Show tooltip
field.attr('data-original-title', aliases_matched_html).tooltip('show')
consumers.results.forEach(function (consumer) {
const consumer_obj = $('#' + alias_prefix + '_' + consumer.id)
consumer_obj.hover(function () {
displayNote(consumer.note, consumer.name, user_note_field, profile_pic_field)
})
consumer_obj.click(function () {
var disp = null
notes_display.forEach(function (d) {
// We compare the alias ids
if (d.id === consumer.id) {
d.quantity += 1
disp = d
}
})
// In the other case, we add a new emitter
if (disp == null) {
disp = {
name: consumer.name,
id: consumer.id,
note: consumer.note,
quantity: 1
}
notes_display.push(disp)
}
// If the function alias_click exists, it is called. If it doesn't return true, then the notes are
// note displayed. Useful for a consumption when a button is already clicked
if (alias_click && !alias_click()) { return }
const 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>',
displayStyle(disp.note))
})
// Emitters are displayed
note_list.html(html)
// Update tooltip position
field.tooltip('update')
notes_display.forEach(function (disp) {
const line_obj = $('#' + note_prefix + '_' + disp.id)
// Hover an emitter display also the profile picture
line_obj.hover(function () {
displayNote(disp.note, disp.name, user_note_field, profile_pic_field)
})
// When an emitter is clicked, it is removed
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
2020-08-21 17:12:28 +00:00
function de_validate (id, validated, resourcetype) {
2020-09-05 06:30:41 +00:00
const validate_obj = $('#validate_' + id)
if (validate_obj.data('pending'))
// The button is already clicked
{ return }
const invalidity_reason = $('#invalidity_reason_' + id).val()
validate_obj.html('<strong style="font-size: 16pt;">⟳</strong>')
validate_obj.data('pending', true)
// Perform a PATCH request to the API in order to update the transaction
// If the user has insufficient rights, an error message will appear
$.ajax({
url: '/api/note/transaction/transaction/' + id + '/',
type: 'PATCH',
dataType: 'json',
headers: {
'X-CSRFTOKEN': CSRF_TOKEN
},
data: {
resourcetype: resourcetype,
valid: !validated,
invalidity_reason: invalidity_reason
},
success: function () {
refreshBalance()
// error if this method doesn't exist. Please define it.
refreshHistory()
},
error: function (err) {
const errObj = JSON.parse(err.responseText)
let error = errObj.detail ? errObj.detail : errObj.non_field_errors
if (!error) { error = err.responseText }
addMsg(gettext('An error occured while (in)validating this transaction:') + ' ' + error, 'danger')
2020-09-05 06:30:41 +00:00
refreshBalance()
// error if this method doesn't exist. Please define it.
refreshHistory()
}
})
}
2020-08-21 17:12:28 +00:00
/**
* Simple debouncer
* @param callback Function to call
* @param wait Debounced milliseconds
*/
let debounce_timeout
function debounce (callback, wait=500) {
2020-09-05 06:30:41 +00:00
return (...args) => {
const context = this
clearTimeout(debounce_timeout)
debounce_timeout = setTimeout(() => callback.apply(context, args), wait)
2020-09-05 06:30:41 +00:00
}
2020-08-21 17:12:28 +00:00
}