From 71a8aae43f2bb439a28ef9f3c3e047959e30bad4 Mon Sep 17 00:00:00 2001 From: Sam Lau Date: Mon, 24 Jun 2024 16:29:34 +0000 Subject: [PATCH] Bug 26777: Allow ability to select diffferent barcode types These cumalation of patches introduce a new patron page on the OPAC: "My virtual card." This page and its contents are reliant on the system preferences 'OPACVirtualCard' and 'OPACVirtualCardBarcode'. OPACVirutalCard determines whether the virtual card page is even displayed on the OPAC whereas OPACVirtualCardBarcode selects the type of barcode to display on this page (if page is displayed). Currently, the virtual card page consits of a patron image (if available), the patron's barcode, and the library name. A potential follow up would be to allow customization of this page. The barcode generation is handled by a new library bwip-js. To test: 1) Apply patch, updatedatabase, restart_all, build yarn 2) In system preferences, search for 'OPACVirtualCard'. Both this and the barcode sys. pref should show up with the same search. Notice they are dependent on one another. The default for the first pref should be "Don't allow". Leave this as is for now. 3) Leave the preference page open and log into the OPAC. Visit the user page. Notice that the navbar on the left consiting of 'Summary', 'Charges', etc. looks the same. 4) Go back to the sys. pref page and set the OPACVirtualCard to "Allow" 5) Also in the sys. prefs, make a search for "patron images" and set 'OPACpatronimages' to "Show" and 'patronimages' to allow. 6) Visit the patron's page that you used to sign in to the OPAC. Add a patron image if there is not one already. 7) Now, edit their details and change their card number to '00012345678905' 8) Venture back to the OPAC patron page. Refresh this and you should see a new "My Virtual Card" page at the bottom. 9) Click this page and you should see a new virtual card for you patron, consiting of their image, a barcode, and their library. 10) Open the dev tools for your browser and switch to vieiwing in mobile mode. Make sure the card looks good. This would likely be the most common use case. 11) Switch back to a system preference page and try playing around with the 'OPACVirtualCardBarcode'. Note that these changes affect the type of barcode that is display in the virtual card page. If you selected a barcode format that is incompatible, an error message should display in the virtual card page. Signed-off-by: Laura Escamilla Signed-off-by: Martin Renvoize Signed-off-by: Katrin Fischer --- .../opac-tmpl/bootstrap/css/src/opac.scss | 34 +++++++++++------- .../bootstrap/en/modules/opac-virtual-card.tt | 22 ++++++------ .../bootstrap/js/barcode-generator.js | 36 +++++++++++++------ opac/opac-virtual-card.pl | 4 +++ 4 files changed, 61 insertions(+), 35 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 995df5947a..6816f68fb5 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2927,29 +2927,37 @@ $star-selected: #EDB867; } #patron-virtual-card { - width: 400px; + width: 100%; + min-width: 300px; + max-width: 500px; border-radius: 15px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: flex-start; - #barcode-container { - flex: 1; + #image-container { width: 100%; - #patron-barcode { - padding: .5rem; - width: 100%; + #patron-image { + height: 75%; + width: auto; + border-radius: 15px; + padding: 0.5rem; } } - #image-and-library-container { - #image-container { - flex: 0; - width: 100%; - #patron-image { - padding: 1rem 0 0.25rem 0.25rem; - } + #barcode-container { + width: 100%; + padding: 0.25rem 0.5rem 0.25rem 0.5rem; + &.qrcode { + width: 50%; // Set a smaller width for QR codes + } + } + + #lib-container { + width: 100%; + #patron-lib { + padding-left: 0.5rem; } } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt index 85a727d947..bdb2416fc4 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt @@ -35,18 +35,16 @@

My virtual card

-
- [% IF ( display_patron_image ) %] -
- -
- [% END %] -
- -
-
-

Library: [% Branches.GetName( patron.branchcode ) | html %]

+ [% IF ( display_patron_image ) %] +
+
+ [% END %] +
+ +
+
+

Library: [% Branches.GetName( patron.branchcode ) | html %]

@@ -56,6 +54,6 @@ [% INCLUDE 'opac-bottom.inc' %] [% BLOCK jsinclude %] - [% Asset.js("lib/js-barcode/js-barcode.js") | $raw %] + [% Asset.js("lib/bwip-js/bwip-js-min.js") | $raw %] [% Asset.js("js/barcode-generator.js") | $raw %] [% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js b/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js index afd32f8284..6f9136e6ce 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js @@ -1,11 +1,27 @@ document.addEventListener("DOMContentLoaded", function() { - var barcodeNumber = document.getElementById("patron-barcode").dataset.barcode; - JsBarcode("#patron-barcode", barcodeNumber, { - format: "CODE39", - lineColor: "#000", - width: 2, - height: 100, - displayValue: false, - margin: 0 - }); -}); \ No newline at end of file + const svgElement = document.getElementById('patron-barcode'); + var barcodeNumber = svgElement.dataset.barcode; + var barcodeFormat = svgElement.dataset.barcodeFormat; + + try { + // Generate the barcode SVG + let svg = bwipjs.toSVG({ + bcid: barcodeFormat, // Barcode type + text: barcodeNumber, // Text to encode + padding: 0, + height: 15, + }); + // Add the generated SVG to the barcode container + if (barcodeFormat == "qrcode") { + document.getElementById('barcode-container').classList.add('qrcode'); + } + document.getElementById('barcode-container').innerHTML = svg + } catch (error) { + // Use regex to find error message + const match = error.message.match(/: (.+)$/); + const errorMessage = match ? match[1] : error.message; + + console.error(error); + document.getElementById('barcode-container').innerHTML = `

Error: ${errorMessage}

`; + } +}); diff --git a/opac/opac-virtual-card.pl b/opac/opac-virtual-card.pl index 57bab5f493..e8767929e0 100755 --- a/opac/opac-virtual-card.pl +++ b/opac/opac-virtual-card.pl @@ -48,9 +48,13 @@ if ( C4::Context->preference('OPACpatronimages') ) { $template->param( display_patron_image => 1 ) if $patron->image; } +# Get the desired barcode format +my $barcode_format = C4::Context->preference('OPACVirtualCardBarcode'); + $template->param( virtualcardview => 1, patron => $patron, + barcode_format => $barcode_format, ); output_html_with_http_headers $query, $cookie, $template->output, undef, { force_no_caching => 1 };