Update note infos

templates/note/conso_form.html

@@ -12,12 +12,10 @@
                 {# User details column #}
                 <div class="col-xl-5">
                     <div class="card border-success shadow mb-4">
-                        <img src="https://perso.crans.org/erdnaxe/site-crans/img/logo.svg"
-                            alt="" class="img-fluid rounded mx-auto d-block">
+                        <img src="/media/pic/default.png"
+                            id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block">
                         <div class="card-body text-center">
-                            <span id="user_note">
-                                Paquito (aka. PAC) : -230 €
-                            </span>
+                            <span id="user_note"></span>
                         </div>
                     </div>
                 </div>
@@ -145,6 +143,13 @@
 
 {% block extrajavascript %}
     <script type="text/javascript">
+        function pretty_money(value) {
+            if (value % 100 === 0)
+                return (value < 0 ? "- " : "") + Math.round(Math.abs(value) / 100) + " €";
+            else
+                return (value < 0 ? "- " : "") + Math.round(Math.abs(value) / 100) + " € " + (Math.abs(value) % 100);
+        }
+
         var consos = [];
 
         $(document).ready(function() {
@@ -161,44 +166,60 @@
                 location.hash = this.getAttribute("href");
             });
 
-            $("#note").change(function(obj) {
+            let note_obj = $("#note");
+            note_obj.change(function() {
                 let name = $("#note option:selected").text();
-                note_obj = $("#note");
-                note = note_obj.val();
+                let note = note_obj.val();
                 note_obj.val(0);
                 note_obj.text("");
-                consos = consos.concat([[name, note]]);
-                note_list = $("#note_list");
-                note_list.html(note_list.html() +
-                    "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\">\n" +
-                    "                                " + name + "\n" +
-                    "                                <span class=\"badge badge-dark badge-pill\">1</span>\n" +
-                    "                            </li>");
+                var conso = null;
+                consos.forEach(function(c) {
+                    if (c[1] === note) {
+                        c[2] += 1;
+                        conso = c;
+                    }
+                });
+                if (conso == null)
+                    consos = consos.concat([[name, note, 1]]);
+                let note_list = $("#note_list");
+                var html = "";
+                consos.forEach(function(conso) {
+                   html += "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\">" + conso[0] + "<span class=\"badge badge-dark badge-pill\">" + conso[2] + "</span></li>\n";
+                });
+                note_list.html(html);
+
+                $.getJSON("/api/note/note/" + note + "/?format=json", function(note) {
+                    console.log(note);
+                    $("#user_note").text(name + " : " + pretty_money(note.balance));
+                    if (note.display_image == null)
+                        $("#profile_pic").attr('src', '/media/pic/default.png');
+                    else
+                        $("#profile_pic").attr('src', note.display_image);
+                });
             });
 
             {% for button in transaction_templates %}
                 {% if button.display %}
-                $("#button{{ button.id }}").click(function() {
-                    consos.forEach(function(conso) {
-                        console.log(conso);
-                        $.post("/api/note/transaction/transaction/",
-                        {
-                            "csrfmiddlewaretoken": "{{ csrf_token }}",
-                            "quantity": 1,
-                            "amount": {{ button.amount }},
-                            "reason": "{{ button.name }} ({{ button.category.name }})",
-                            "valid": true,
-                            "polymorphic_ctype": {{ polymorphic_ctype }},
-                            "resourcetype": "TemplateTransaction",
-                            "source": conso[1],
-                            "destination": {{ button.destination.pk }},
-                            "category": {{ button.category.id }},
-                            "template": {{ button.id }}
-                        }, reloadWithTurbolinks);
-                    });
+                    $("#button{{ button.id }}").click(function() {
+                        consos.forEach(function(conso) {
+                            $.post("/api/note/transaction/transaction/",
+                            {
+                                "csrfmiddlewaretoken": "{{ csrf_token }}",
+                                "quantity": conso[2],
+                                "amount": {{ button.amount }},
+                                "reason": "{{ button.name }} ({{ button.category.name }})",
+                                "valid": true,
+                                "polymorphic_ctype": {{ polymorphic_ctype }},
+                                "resourcetype": "TemplateTransaction",
+                                "source": conso[1],
+                                "destination": {{ button.destination.pk }},
+                                "category": {{ button.category.id }},
+                                "template": {{ button.id }}
+                            }, reloadWithTurbolinks);
+                        });
 
-                    reloadWithTurbolinks();
-                });
+                        reloadWithTurbolinks();
+                    });
                 {% endif %}
             {% endfor %}
         });