Add qr to conso + fix issues

This commit is contained in:
jbdoderlein 2024-08-24 12:27:35 +00:00
parent c73123f450
commit 79d51eecfc
2 changed files with 111 additions and 15 deletions

View file

@ -21,6 +21,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
<div class="card-body text-center text-break p-2"> <div class="card-body text-center text-break p-2">
<span id="user_note"><i class="small">{% trans "Please select a note" %}</i></span> <span id="user_note"><i class="small">{% trans "Please select a note" %}</i></span>
</div> </div>
<div id="qrreader"></div>
</div> </div>
</div> </div>
@ -159,6 +160,79 @@ SPDX-License-Identifier: GPL-3.0-or-later
{% endblock %} {% endblock %}
{% block extrajavascript %} {% 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" src="{% static "note/js/consos.js" %}"></script>
<script type="text/javascript"> <script type="text/javascript">
{% for button in highlighted %} {% for button in highlighted %}

View file

@ -172,13 +172,22 @@ SPDX-License-Identifier: GPL-2.0-or-later
if (consumers.count > 0) { if (consumers.count > 0) {
// Add the user to the list of sources // Add the user to the list of sources
let consumer = consumers.results[0]; let consumer = consumers.results[0];
disp = { let found = false;
name: consumer.name, sources_notes_display.forEach(function (disp) {
id: consumer.id, if (disp.id === consumer.id) {
note: consumer.note, disp.quantity += 1;
quantity: 1 found = true;
} }
sources_notes_display.push(disp); });
if (!found) {
let disp = {
name: consumer.name,
id: consumer.id,
note: consumer.note,
quantity: 1
}
sources_notes_display.push(disp);
}
// Display // Display
const note_list = $('#' + 'source_note_list'); const note_list = $('#' + 'source_note_list');
let html = '' let html = ''
@ -191,20 +200,33 @@ SPDX-License-Identifier: GPL-2.0-or-later
}) })
// Emitters are displayed // 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); console.log(`Code matched = ${decodedText}`, decodedResult);
} }
function onScanFailure(error) { function onScanFailure(error) {}
// handle scan failure, usually better to ignore and keep scanning. if (typeof html5QrcodeScanner === 'undefined') {
// for example: var html5QrcodeScanner = null;
console.warn(`Code scan error = ${error}`); }
} html5QrcodeScanner = new Html5QrcodeScanner(
let html5QrcodeScanner = new Html5QrcodeScanner(
"qrreader", "qrreader",
{ fps: 10, qrbox: {width: 250, height: 250} }, { fps: 10, qrbox: {width: 250, height: 250} },
/* verbose= */ false); /* verbose= */ false);