JS for manage page

apps/family/static/family/js/achievements.js

@@ -8,8 +8,7 @@ var LOCK = false
  * Refresh the history table on the consumptions page.
  */
 function refreshHistory () {
-  $('#history').load('/note/consos/ #history')
+  $('#history').load('/family/manage/ #history')
-  $('#most_used').load('/note/consos/ #most_used')
 }
 
 $(document).ready(function () {
@@ -38,18 +37,14 @@ notes_display = []
 buttons = []
 
 // When the user searches an alias, we update the auto-completion
-autoCompleteNote('note', 'note_list', notes, notes_display,
+autoCompleteFamily('note', 'note_list', notes, notes_display,
-  'alias', 'note', 'user_note', 'profile_pic', function () {
+  'note', 'user_note', 'profile_pic', function () {
-    if (buttons.length > 0 && $('#single_conso').is(':checked')) {
-      consumeAll()
-      return false
-    }
     return true
   })
 
 /**
  * Add a transaction from a button.
- * @param dest Where the money goes
+ * @param fam Where the money goes
  * @param amount The price of the item
  * @param type The type of the transaction (content type id for RecurrentTransaction)
  * @param category_id The category identifier
@@ -57,35 +52,32 @@ autoCompleteNote('note', 'note_list', notes, notes_display,
  * @param template_id The identifier of the button
  * @param template_name The name of  the button
  */
-function addConso (dest, amount, type, category_id, category_name, template_id, template_name) {
+function addChallenge (id, name, amount) {
-  var button = null
+  var challenge = null
+  /** Ajout de 1 à chaque clic d'un bouton déjà choisi  */
   buttons.forEach(function (b) {
-    if (b.id === template_id) {
+    if (b.id === id) {
       b.quantity += 1
-      button = b
+      challenge = b
     }
   })
-  if (button == null) {
+  if (challenge == null) {
-    button = {
+    challenge = {
-      id: template_id,
+      id: id,
-      name: template_name,
+      name: name,
-      dest: dest,
       quantity: 1,
       amount: amount,
-      type: type,
-      category_id: category_id,
-      category_name: category_name
     }
-    buttons.push(button)
+    buttons.push(challenge)
   }
 
-  const dc_obj = $('#double_conso')
+  const dc_obj = true
-  if (dc_obj.is(':checked') || notes_display.length === 0) {
+  
-    const list = dc_obj.is(':checked') ? 'consos_list' : 'note_list'
+    const list = 'consos_list'
     let html = ''
-    buttons.forEach(function (button) {
+    buttons.forEach(function (challenge) {
-      html += li('conso_button_' + button.id, button.name +
+      html += li('conso_button_' + challenge.id, challenge.name +
-                '<span class="badge badge-dark badge-pill">' + button.quantity + '</span>')
+                '<span class="badge badge-dark badge-pill">' + challenge.quantity + '</span>')
     })
     document.getElementById(list).innerHTML = html
 
@@ -95,13 +87,14 @@ function addConso (dest, amount, type, category_id, category_name, template_id,
         removeNote(button, 'conso_button', buttons, list)()
       })
     })
-  } else { consumeAll() }
+
 }
 
 /**
  * Reset the page as its initial state.
  */
 function reset () {
+  console.log("reset lancée")
   notes_display.length = 0
   notes.length = 0
   buttons.length = 0
@@ -113,7 +106,6 @@ function reset () {
   document.getElementById('profile_pic').src = '/static/member/img/default_picture.png'
   document.getElementById('profile_pic_link').href = '#'
   refreshHistory()
-  refreshBalance()
   LOCK = false
 }
 
@@ -121,6 +113,7 @@ function reset () {
  * Apply all transactions: all notes in `notes` buy each item in `buttons`
  */
 function consumeAll () {
+  console.log("consumeAll lancée")
   if (LOCK) { return }
 
   LOCK = true
@@ -129,12 +122,12 @@ function consumeAll () {
 
   if (notes_display.length === 0) {
     document.getElementById('note').classList.add('is-invalid')
-    $('#note_list').html(li('', '<strong>Ajoutez des émetteurs.</strong>', 'text-danger'))
+    $('#note_list').html(li('', '<strong>Ajoutez des familles.</strong>', 'text-danger'))
     error = true
   }
 
   if (buttons.length === 0) {
-    $('#consos_list').html(li('', '<strong>Ajoutez des consommations.</strong>', 'text-danger'))
+    $('#consos_list').html(li('', '<strong>Ajoutez des défis.</strong>', 'text-danger'))
     error = true
   }
 
@@ -143,79 +136,39 @@ function consumeAll () {
     return
   }
 
-  notes_display.forEach(function (note_display) {
+  notes_display.forEach(function (family) {
-    buttons.forEach(function (button) {
+    buttons.forEach(function (challenge) {
-      consume(note_display.note, note_display.name, button.dest, button.quantity * note_display.quantity, button.amount,
+      grantAchievement(family, challenge)
-        button.name + ' (' + button.category_name + ')', button.type, button.category_id, button.id)
     })
   })
 }
 
 /**
- * Create a new transaction from a button through the API.
+ * Create a new achievement through the API.
- * @param source The note that paid the item (type: note)
+ * @param family The selected family
- * @param source_alias The alias used for the source (type: str)
+ * @param challenge The selected challenge
- * @param dest The note that sold the item (type: int)
- * @param quantity The quantity sold (type: int)
- * @param amount The price of one item, in cents (type: int)
- * @param reason The transaction details (type: str)
- * @param type The type of the transaction (content type id for RecurrentTransaction)
- * @param category The category id of the button (type: int)
- * @param template The button id (type: int)
  */
-function consume (source, source_alias, dest, quantity, amount, reason, type, category, template) {
+function grantAchievement (family, challenge) {
-  $.post('/api/note/transaction/transaction/',
+  console.log("grant lancée",family,challenge)
+  $.post('/api/family/achievement/',
     {
       csrfmiddlewaretoken: CSRF_TOKEN,
-      quantity: quantity,
+      family: family.id,
-      amount: amount,
+      challenge: challenge.id,
-      reason: reason,
-      valid: true,
-      polymorphic_ctype: type,
-      resourcetype: 'RecurrentTransaction',
-      source: source.id,
-      source_alias: source_alias,
-      destination: dest,
-      template: template
     })
     .done(function () {
-      if (!isNaN(source.balance)) {
-        const newBalance = source.balance - quantity * amount
-        if (newBalance <= -2000) {
-          addMsg(interpolate(gettext('Warning, the transaction from the note %s succeed, ' +
-              'but the emitter note %s is very negative.'), [source_alias, source_alias]), 'danger', 30000)
-        } else if (newBalance < 0) {
-          addMsg(interpolate(gettext('Warning, the transaction from the note %s succeed, ' +
-              'but the emitter note %s is negative.'), [source_alias, source_alias]), 'warning', 30000)
-        }
-        if (source.membership && source.membership.date_end < new Date().toISOString()) {
-          addMsg(interpolate(gettext('Warning, the emitter note %s is no more a BDE member.'), [source_alias]),
-              'danger', 30000)
-        }
-      }
       reset()
-    }).fail(function (e) {
+      addMsg("Défi validé pour la famille !", 'success', 5000)
-      $.post('/api/note/transaction/transaction/',
-        {
-          csrfmiddlewaretoken: CSRF_TOKEN,
-          quantity: quantity,
-          amount: amount,
-          reason: reason,
-          valid: false,
-          invalidity_reason: 'Solde insuffisant',
-          polymorphic_ctype: type,
-          resourcetype: 'RecurrentTransaction',
-          source: source.id,
-          source_alias: source_alias,
-          destination: dest,
-          template: template
-        }).done(function () {
-        reset()
-        addMsg(gettext("The transaction couldn't be validated because of insufficient balance."), 'danger', 10000)
-      }).fail(function () {
-        reset()
-        errMsg(e.responseJSON)
     })
+    .fail(function (e) {
+      reset()
+      if (e.responseJSON) {
+        errMsg(e.responseJSON)
+      } else if (e.responseText) {
+        errMsg(e.responseText)
+      } else {
+        errMsg("Erreur inconnue lors de la création de l'achievement.")
+      }
     })
 }
 
@@ -261,3 +214,222 @@ function createshiny() {
   shiny_class.replace('btn-outline-dark', 'btn-outline-dark-shiny')
 }
 createshiny()
+
+
+
+
+
+/**
+ * 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.
+ */
+function getMatchedFamilies (pattern, fun) {
+  $.getJSON('/api/family/family/?format=json&alias=' + pattern + '&search=family', fun)
+}
+
+/**
+ * Generate a <li> entry with a given id and text
+ */
+function li (id, text, extra_css) {
+  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'
+}
+
+
+/**
+ * Génère un champ d'auto-complétion pour rechercher une famille par son nom (version simplifiée sans alias)
+ * @param field_id L'identifiant du champ texte où le nom est saisi
+ * @param family_list_id L'identifiant du bloc div où les familles sélectionnées sont affichées
+ * @param families Un tableau contenant les objets famille sélectionnés
+ * @param families_display Un tableau contenant les infos des familles sélectionnées : [nom, id, objet famille, quantité]
+ * @param family_prefix Le préfixe des <li> pour les familles sélectionnées
+ * @param user_family_field L'identifiant du champ qui affiche la famille survolée (optionnel)
+ * @param profile_pic_field L'identifiant du champ qui affiche la photo de la famille survolée (optionnel)
+ * @param family_click Fonction appelée lors du clic sur un nom. Si elle existe et ne retourne pas true, la famille n'est pas affichée.
+ */
+function autoCompleteFamily(field_id, family_list_id, families, families_display, family_prefix = 'family', user_family_field = null, profile_pic_field = null, family_click = null) {
+  const field = $('#' + field_id)
+  console.log("autoCompleteFamily commence")
+  // Configuration du tooltip
+  field.tooltip({
+    html: true,
+    placement: 'bottom',
+    title: 'Chargement...',
+    trigger: 'manual',
+    container: field.parent(),
+    fallbackPlacement: 'clockwise'
+  })
+
+  // Masquer le tooltip lors d'un clic ailleurs
+  $(document).click(function (e) {
+    if (!e.target.id.startsWith(family_prefix)) {
+      field.tooltip('hide')
+    }
+  })
+
+  let old_pattern = null
+
+  // Réinitialiser la recherche au clic
+  field.click(function () {
+    field.tooltip('hide')
+    field.removeClass('is-invalid')
+    field.val('')
+    old_pattern = ''
+  })
+
+  // Sur "Entrée", sélectionner la première famille
+  field.keypress(function (event) {
+    if (event.originalEvent.charCode === 13 && families.length > 0) {
+      const li_obj = field.parent().find('ul li').first()
+      displayFamily(families[0], families[0].name, user_family_field, profile_pic_field)
+      li_obj.trigger('click')
+    }
+  })
+
+  // Mise à jour des suggestions lors de la saisie
+  field.keyup(function (e) {
+    field.removeClass('is-invalid')
+
+    if (e.originalEvent.charCode === 13) { return }
+
+    const pattern = field.val()
+
+    if (pattern === old_pattern) { return }
+    old_pattern = pattern
+    families.length = 0
+
+    if (pattern === '') {
+      field.tooltip('hide')
+      families.length = 0
+      return
+    }
+
+    // Appel à l'API pour récupérer les familles correspondantes
+    $.getJSON('/api/family/family/?format=json&search=' + pattern,
+      function (results) {
+        if (pattern !== $('#' + field_id).val()) { return }
+
+        let matched_html = '<ul class="list-group list-group-flush">'
+        results.results.forEach(function (family) {
+          matched_html += li(family_prefix + '_' + family.id,
+            family.name,
+            '')
+          families.push(family)
+        })
+        matched_html += '</ul>'
+
+        field.attr('data-original-title', matched_html).tooltip('show')
+
+        results.results.forEach(function (family) {
+          const family_obj = $('#' + family_prefix + '_' + family.id)
+          family_obj.hover(function () {
+            displayFamily(family, family.name, user_family_field, profile_pic_field)
+          })
+          family_obj.click(function () {
+            var disp = null
+            families_display.forEach(function (d) {
+              if (d.id === family.id) {
+                d.quantity += 1
+                disp = d
+              }
+            })
+            if (disp == null) {
+              disp = {
+                name: family.name,
+                id: family.id,
+                family: family,
+                quantity: 1
+              }
+              families_display.push(disp)
+            }
+
+            if (family_click && !family_click()) { return }
+
+            const family_list = $('#' + family_list_id)
+            let html = ''
+            families_display.forEach(function (disp) {
+              html += li(family_prefix + '_' + disp.id,
+                disp.name +
+                                '<span class="badge badge-dark badge-pill">' +
+                                disp.quantity + '</span>',
+                '')
+            })
+
+            family_list.html(html)
+            field.tooltip('update')
+
+            families_display.forEach(function (disp) {
+              const line_obj = $('#' + family_prefix + '_' + disp.id)
+              line_obj.hover(function () {
+                displayFamily(disp.family, disp.name, user_family_field, profile_pic_field)
+              })
+              line_obj.click(removeFamily(disp, family_prefix, families_display, family_list_id, user_family_field,
+                profile_pic_field))
+            })
+          })
+        })
+      })
+  })
+}
+
+/**
+ * Affiche le nom et la photo d'une famille
+ * @param family L'objet famille à afficher
+ * @param user_family_field L'identifiant du champ où afficher le nom (optionnel)
+ * @param profile_pic_field L'identifiant du champ où afficher la photo (optionnel)
+ */
+function displayFamily(family, user_family_field = null, profile_pic_field = null) {
+  if (!family.display_image) {
+    family.display_image = '/static/member/img/default_picture.png'
+  }
+  if (user_family_field !== null) {
+    $('#' + user_family_field).removeAttr('class')
+    $('#' + user_family_field).text(family.name)
+    if (profile_pic_field != null) {
+      $('#' + profile_pic_field).attr('src', family.display_image)
+      // Si tu veux un lien vers la page famille :
+      $('#' + profile_pic_field + '_link').attr('href', '/family/detail/' + family.id + '/')
+    }
+  }
+}
+
+
+/**
+ * Retire une famille de la liste sélectionnée.
+ * @param d La famille à retirer
+ * @param family_prefix Le préfixe des <li>
+ * @param families_display Le tableau des familles sélectionnées
+ * @param family_list_id L'id du bloc où sont affichées les familles
+ * @param user_family_field Champ d'affichage (optionnel)
+ * @param profile_pic_field Champ photo (optionnel)
+ * @returns une fonction compatible avec les événements jQuery
+ */
+function removeFamily(d, family_prefix, families_display, family_list_id, user_family_field = null, profile_pic_field = null) {
+  return function () {
+    const new_families_display = []
+    let html = ''
+    families_display.forEach(function (disp) {
+      if (disp.quantity > 1 || disp.id !== d.id) {
+        disp.quantity -= disp.id === d.id ? 1 : 0
+        new_families_display.push(disp)
+        html += li(family_prefix + '_' + disp.id, disp.name +
+          '<span class="badge badge-dark badge-pill">' + disp.quantity + '</span>')
+      }
+    })
+
+    families_display.length = 0
+    new_families_display.forEach(function (disp) {
+      families_display.push(disp)
+    })
+
+    $('#' + family_list_id).html(html)
+    families_display.forEach(function (disp) {
+      const obj = $('#' + family_prefix + '_' + disp.id)
+      obj.click(removeFamily(disp, family_prefix, families_display, family_list_id, user_family_field, profile_pic_field))
+      obj.hover(function () {
+        displayFamily(disp.family, user_family_field, profile_pic_field)
+      })
+    })
+  }
+}

apps/family/templates/family/manage.html

@@ -25,9 +25,9 @@ SPDX-License-Identifier: GPL-3.0-or-later
 </div>
 
 <div class="row mb-3">
-  <div class="col-sm-5 col-xl-6" id="infos_div">
+    <div class='col-sm-5 col-xl-6' id="infos_div">
         <div class="row justify-content-center justify-content-md-end">
-      {# User details column #}
+            {# Family details column #}
             <div class="col picture-col">
                 <div class="card bg-light mb-4 text-center">
                     <a id="profile_pic_link" href="#">
@@ -84,12 +84,12 @@ SPDX-License-Identifier: GPL-3.0-or-later
           </h3>
         <div class="card-body text-center">
             {% if can_add_family %}
-          <a class="btn btn-sm btn-primary mx-2" href="{% url 'family:add_family' %}">
+            <a class="btn btn-sm btn-primary mx-2" href="{% url "family:add_family" %}">
                 {% trans "Add a family" %}
             </a>
             {% endif %}
             {% if can_add_challenge %}
-          <a class="btn btn-sm btn-primary mx-2" href="{% url 'family:add_challenge' %}">
+            <a class="btn btn-sm btn-primary mx-2" href="{% url "family:add_challenge" %}">
                 {% trans "Add a challenge" %}
             </a>
             {% endif %}
@@ -164,25 +164,21 @@ SPDX-License-Identifier: GPL-3.0-or-later
     </div>
 {% endblock %}
 
+
+
 {% block extrajavascript %}
-  <script type="text/javascript" src="{% static "family/js/consos.js" %}"></script>
+    <script type="text/javascript" src="{% static "family/js/achievements.js" %}"></script>
     <script type="text/javascript">
-    {% for button in all_challenges %}
+        {% for challenge in all_challenges %}
-      document.getElementById("button{{ button.id }}").addEventListener("click", function() {
+        document.getElementById("challenge{{ challenge.id }}").addEventListener("click", function() {
-        addConso({{ button.destination_id }}, {{ button.amount }},
+            addChallenge({{ challenge.id}}, "{{ challenge.name|escapejs }}", {{ challenge.points }});
-          {{ polymorphic_ctype }}, {{ button.category_id }}, "{{ button.category.name|escapejs }}",
-          {{ button.id }}, "{{ button.name|escapejs }}");
         });
         {% endfor %}
     
-    {% for button in all_challenges %}
+        {% for challenge in all_challenges %}
-      {% if button.display %}
+            document.getElementById("search_challenge{{ challenge.id }}").addEventListener("click", function() {
-        document.getElementById("search_button{{ button.id }}").addEventListener("click", function() {
+                addChallenge({{ challenge.id}}, "{{ challenge.name|escapejs }}", {{ challenge.points }});
-          addConso({{ button.destination_id }}, {{ button.amount }},
-            {{ polymorphic_ctype }}, {{ button.category_id }}, "{{ button.category.name|escapejs }}",
-            {{ button.id }}, "{{ button.name|escapejs }}");
             });
-      {% endif %}
         {% endfor %} 
     </script>
 {% endblock %}