Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 26777: Allow ability to select diffferent barcode types

Browse source 
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>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Sam Lau 2024-06-24 16:29:34 +00:00 committed by Katrin Fischer
parent f95a6adf7a
commit 71a8aae43f
Signed by: kfischer
GPG key ID: 0EF6E2C03357A834
4 changed files with 61 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
View file

@ -2927,29 +2927,37 @@ $star-selected: #EDB867;
} }
#patron-virtual-card { #patron-virtual-card {
width: 400px; width: 100%;
min-width: 300px;
max-width: 500px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
#barcode-container { #image-container {
flex: 1;
width: 100%; width: 100%;
#patron-barcode { #patron-image {
padding: .5rem; height: 75%;
width: 100%; width: auto;
border-radius: 15px;
padding: 0.5rem;
} }
} }
#image-and-library-container { #barcode-container {
#image-container { width: 100%;
flex: 0; padding: 0.25rem 0.5rem 0.25rem 0.5rem;
width: 100%; &.qrcode {
#patron-image { width: 50%; // Set a smaller width for QR codes
padding: 1rem 0 0.25rem 0.25rem; }
} }
#lib-container {
width: 100%;
#patron-lib {
padding-left: 0.5rem;
} }
} }
} }

22
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt
View file

@ -35,18 +35,16 @@
<div class="col-10 order-first order-lg-2"> <div class="col-10 order-first order-lg-2">
<h1>My virtual card </h1> <h1>My virtual card </h1>
<div id="patron-virtual-card"> <div id="patron-virtual-card">
<div id="image-and-library-container"> [% IF ( display_patron_image ) %]
[% IF ( display_patron_image ) %] <div id="image-container">
<div id="image-container"> <img id="patron-image" src="/cgi-bin/koha/opac-patron-image.pl" alt="" />
<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>
</div> </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> </div>
</div> <!-- / .col-10 --> </div> <!-- / .col-10 -->
@ -56,6 +54,6 @@
[% INCLUDE 'opac-bottom.inc' %] [% INCLUDE 'opac-bottom.inc' %]
[% BLOCK jsinclude %] [% 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 %] [% Asset.js("js/barcode-generator.js") | $raw %]
[% END %] [% END %]

36
koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js
View file

@ -1,11 +1,27 @@
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
var barcodeNumber = document.getElementById("patron-barcode").dataset.barcode; const svgElement = document.getElementById('patron-barcode');
JsBarcode("#patron-barcode", barcodeNumber, { var barcodeNumber = svgElement.dataset.barcode;
format: "CODE39", var barcodeFormat = svgElement.dataset.barcodeFormat;
lineColor: "#000",
width: 2, try {
height: 100, // Generate the barcode SVG
displayValue: false, let svg = bwipjs.toSVG({
margin: 0 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>`;
}
});

4
opac/opac-virtual-card.pl
View file

@ -48,9 +48,13 @@ if ( C4::Context->preference('OPACpatronimages') ) {
$template->param( display_patron_image => 1 ) if $patron->image; $template->param( display_patron_image => 1 ) if $patron->image;
} }
# Get the desired barcode format
my $barcode_format = C4::Context->preference('OPACVirtualCardBarcode');
$template->param( $template->param(
virtualcardview => 1, virtualcardview => 1,
patron => $patron, patron => $patron,
barcode_format => $barcode_format,
); );
output_html_with_http_headers $query, $cookie, $template->output, undef, { force_no_caching => 1 }; output_html_with_http_headers $query, $cookie, $template->output, undef, { force_no_caching => 1 };