Bugzilla – Attachment 170674 Details for
Bug 26777
Give the user the option to display their patron card barcode from the OPAC
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 26777: Allow ability to select diffferent barcode types
Bug-26777-Allow-ability-to-select-diffferent-barco.patch (text/plain), 8.73 KB, created by
Sam Lau
on 2024-08-23 19:14:49 UTC
(
hide
)
Description:
Bug 26777: Allow ability to select diffferent barcode types
Filename:
MIME Type:
Creator:
Sam Lau
Created:
2024-08-23 19:14:49 UTC
Size:
8.73 KB
patch
obsolete
>From ae891472c77dcf9a2e41538ef3c4a4e245616718 Mon Sep 17 00:00:00 2001 >From: Sam Lau <samalau@gmail.com> >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 <laura.escamilla@bywatersolutions.com> >Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> >--- > .../opac-tmpl/bootstrap/css/src/opac.scss | 32 ++++++++++------- > .../bootstrap/en/modules/opac-virtual-card.tt | 22 ++++++------ > .../bootstrap/js/barcode-generator.js | 36 +++++++++++++------ > opac/opac-virtual-card.pl | 4 +++ > 4 files changed, 60 insertions(+), 34 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; > >+ #image-container { >+ width: 100%; >+ #patron-image { >+ height: 75%; >+ width: auto; >+ border-radius: 15px; >+ padding: 0.5rem; >+ } >+ } >+ > #barcode-container { >- flex: 1; > width: 100%; >- #patron-barcode { >- padding: .5rem; >- width: 100%; >+ padding: 0.25rem 0.5rem 0.25rem 0.5rem; >+ &.qrcode { >+ width: 50%; // Set a smaller width for QR codes > } > } > >- #image-and-library-container { >- #image-container { >- flex: 0; >- width: 100%; >- #patron-image { >- padding: 1rem 0 0.25rem 0.25rem; >- } >+ #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 @@ > <div class="col-10 order-first order-lg-2"> > <h1>My virtual card </h1> > <div id="patron-virtual-card"> >- <div id="image-and-library-container"> >- [% IF ( display_patron_image ) %] >- <div id="image-container"> >- <img id="patron-image" src="/cgi-bin/koha/opac-patron-image.pl" alt="" /> >- </div> >- [% END %] >- <div id="barcode-container"> >- <svg id="patron-barcode" data-barcode="[% patron.cardnumber | html %]"></svg> >- </div> >- <div id="lib-container"> >- <p id="patron-lib"><strong>Library:</strong> [% Branches.GetName( patron.branchcode ) | html %]</p> >+ [% IF ( display_patron_image ) %] >+ <div id="image-container"> >+ <img id="patron-image" src="/cgi-bin/koha/opac-patron-image.pl" alt="" /> > </div> >+ [% END %] >+ <div id="barcode-container"> >+ <svg id="patron-barcode" data-barcode="[% patron.cardnumber | html %]" data-barcode-format="[% barcode_format | html %]"></svg> >+ </div> >+ <div id="lib-container"> >+ <p id="patron-lib"><strong>Library:</strong> [% Branches.GetName( patron.branchcode ) | html %]</p> > </div> > </div> > </div> <!-- / .col-10 --> >@@ -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 = `<p><strong>Error: </strong>${errorMessage}</p>`; >+ } >+}); >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 }; >-- >2.39.2
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 26777
:
167969
|
167970
|
167971
|
167972
|
167976
|
167977
|
168029
|
168030
|
168165
|
168166
|
168167
|
168168
|
168169
|
168170
|
168171
|
168172
|
168289
|
168290
|
168291
|
168292
|
168293
|
168294
|
168295
|
168296
|
169742
|
169743
|
169744
|
169745
|
169746
|
169747
|
169748
|
169749
|
170667
|
170668
|
170669
|
170670
|
170671
|
170672
|
170673
| 170674