From 79d51eecfc0ec92b85216d622bdda0eee4de9717 Mon Sep 17 00:00:00 2001
From: jbdoderlein <jean.baptiste.doderlein@gmail.com>
Date: Sat, 24 Aug 2024 12:27:35 +0000
Subject: [PATCH] Add qr to conso + fix issues

---
 apps/note/templates/note/conso_form.html      | 74 +++++++++++++++++++
 .../note/templates/note/transaction_form.html | 52 +++++++++----
 2 files changed, 111 insertions(+), 15 deletions(-)

diff --git a/apps/note/templates/note/conso_form.html b/apps/note/templates/note/conso_form.html
index d6044b8..a9e4d15 100644
--- a/apps/note/templates/note/conso_form.html
+++ b/apps/note/templates/note/conso_form.html
@@ -21,6 +21,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
                         <div class="card-body text-center text-break p-2">
                             <span id="user_note"><i class="small">{% trans "Please select a note" %}</i></span>
                         </div>
+                        <div id="qrreader"></div>
                     </div>
                 </div>
 
@@ -159,6 +160,79 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% endblock %}
 
 {% block extrajavascript %}
+    <script>
+        function onScanSuccess(decodedText, decodedResult) {
+            // handle the scanned code as you like, for example:
+            // Add user if exist on sources_notes_display
+            $.getJSON('/api/note/consumer/?format=json&alias=' + decodedText + '&search=user|club',
+                function (consumers) {
+                    if (consumers.count > 0) {
+                        // Add the user to the list of sources
+                        let consumer = consumers.results[0];
+                        // check if already in the list
+                        let found = false;
+                        notes_display.forEach(function (disp) {
+                            if (disp.id === consumer.id) {
+                                disp.quantity += 1;
+                                found = true;
+                            }
+                        });
+                        if (!found) {
+                            let disp = {
+                                name: consumer.name,
+                                id: consumer.id,
+                                note: consumer.note,
+                                quantity: 1
+                            }
+                            notes_display.push(disp);
+                        }
+                        // Display
+                        const note_list = $('#' + 'note_list');
+                        let html = ''
+                        notes_display.forEach(function (disp) {
+                            html += li('note' + '_' + disp.id,
+                                disp.name +
+                                                '<span class="badge badge-dark badge-pill">' +
+                                                disp.quantity + '</span>',
+                                displayStyle(disp.note))
+                        })
+
+                        // Emitters are displayed
+                        note_list.html(html);
+
+
+                        // Add the hover and click events
+                        notes_display.forEach(function (disp) {
+                            const line_obj = $('#' + 'note' + '_' + disp.id)
+                            // Hover an emitter display also the profile picture
+                            line_obj.hover(function () {
+                              displayNote(disp.note, disp.name, 'user_note', 'profile_pic');
+                            })
+              
+                            // When an emitter is clicked, it is removed
+                            line_obj.click(removeNote(disp, 'note', notes_display, 'note_list', 'user_note', 'profile_pic'))
+                          })
+
+                        // Stop the scanner
+                        html5QrcodeScanner.clear();
+                        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
+                    }
+                }
+            );
+            console.log(`Code matched = ${decodedText}`, decodedResult);
+        }
+        
+        function onScanFailure(error) {}
+        // check if html5QrcodeScanner is already defined
+        if (typeof html5QrcodeScanner === 'undefined') {
+            var html5QrcodeScanner = null;
+        }
+        html5QrcodeScanner = new Html5QrcodeScanner(
+            "qrreader",
+            { fps: 10, qrbox: {width: 200, height: 200} },
+            /* verbose= */ false);
+        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
+    </script>
     <script type="text/javascript" src="{% static "note/js/consos.js" %}"></script>
     <script type="text/javascript">
         {% for button in highlighted %}
diff --git a/apps/note/templates/note/transaction_form.html b/apps/note/templates/note/transaction_form.html
index a9e7429..2355c37 100644
--- a/apps/note/templates/note/transaction_form.html
+++ b/apps/note/templates/note/transaction_form.html
@@ -172,13 +172,22 @@ SPDX-License-Identifier: GPL-2.0-or-later
                     if (consumers.count > 0) {
                         // Add the user to the list of sources
                         let consumer = consumers.results[0];
-                        disp = {
-                            name: consumer.name,
-                            id: consumer.id,
-                            note: consumer.note,
-                            quantity: 1
-                          }
-                        sources_notes_display.push(disp);
+                        let found = false;
+                        sources_notes_display.forEach(function (disp) {
+                            if (disp.id === consumer.id) {
+                                disp.quantity += 1;
+                                found = true;
+                            }
+                        });
+                        if (!found) {
+                            let disp = {
+                                name: consumer.name,
+                                id: consumer.id,
+                                note: consumer.note,
+                                quantity: 1
+                            }
+                            sources_notes_display.push(disp);
+                        }
                         // Display
                         const note_list = $('#' + 'source_note_list');
                         let html = ''
@@ -191,20 +200,33 @@ SPDX-License-Identifier: GPL-2.0-or-later
                         })
 
                         // Emitters are displayed
-                        note_list.html(html)
+                        note_list.html(html);
+                        // Stop the scanner
+                        sources_notes_display.forEach(function (disp) {
+                            const line_obj = $('#' + 'source_note' + '_' + disp.id)
+                            // Hover an emitter display also the profile picture
+                            line_obj.hover(function () {
+                              displayNote(disp.note, disp.name, 'user_note', 'profile_pic');
+                            })
+              
+                            // When an emitter is clicked, it is removed
+                            line_obj.click(removeNote(disp, 'source_note', sources_notes_display, 'source_note_list', 'user_note', 'profile_pic'))
+                          })
+
+                        // Stop the scanner
+                        html5QrcodeScanner.clear();
+                        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
                     }
                 }
             );
             console.log(`Code matched = ${decodedText}`, decodedResult);
           }
           
-          function onScanFailure(error) {
-            // handle scan failure, usually better to ignore and keep scanning.
-            // for example:
-            console.warn(`Code scan error = ${error}`);
-          }
-          
-          let html5QrcodeScanner = new Html5QrcodeScanner(
+          function onScanFailure(error) {}
+          if (typeof html5QrcodeScanner === 'undefined') {
+            var html5QrcodeScanner = null;
+            }
+          html5QrcodeScanner = new Html5QrcodeScanner(
             "qrreader",
             { fps: 10, qrbox: {width: 250, height: 250} },
             /* verbose= */ false);