View | Details | Raw Unified | Return to bug 26777
Collapse All | Expand All

(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss (-12 / +20 lines)
Lines 3007-3035 $star-selected: #EDB867; Link Here
3007
}
3007
}
3008
3008
3009
#patron-virtual-card {
3009
#patron-virtual-card {
3010
    width: 400px;
3010
    width: 100%;
3011
    min-width: 300px;
3012
    max-width: 500px;
3011
    border-radius: 15px;
3013
    border-radius: 15px;
3012
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
3014
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
3013
    display: flex;
3015
    display: flex;
3014
    flex-direction: column;
3016
    flex-direction: column;
3015
    align-items: flex-start;
3017
    align-items: flex-start;
3016
3018
3019
    #image-container {
3020
        width: 100%;
3021
        #patron-image {
3022
            height: 75%;
3023
            width: auto;
3024
            border-radius: 15px;
3025
            padding: 0.5rem;
3026
        }
3027
    }
3028
3017
    #barcode-container {
3029
    #barcode-container {
3018
        flex: 1;
3019
        width: 100%;
3030
        width: 100%;
3020
        #patron-barcode {
3031
        padding: 0.25rem 0.5rem 0.25rem 0.5rem;
3021
            padding: .5rem;
3032
        &.qrcode {
3022
            width: 100%;
3033
            width: 50%; // Set a smaller width for QR codes
3023
        }
3034
        }
3024
    }
3035
    }
3025
3036
3026
    #image-and-library-container {
3037
    #lib-container {
3027
        #image-container {
3038
        width: 100%;
3028
            flex: 0;
3039
        #patron-lib {
3029
            width: 100%;
3040
            padding-left: 0.5rem;
3030
            #patron-image {
3031
                padding: 1rem 0 0.25rem 0.25rem;
3032
            }
3033
        }
3041
        }
3034
    }
3042
    }
3035
}
3043
}
(-)a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt (-12 / +10 lines)
Lines 35-52 Link Here
35
            <div class="col-10 order-first order-lg-2">
35
            <div class="col-10 order-first order-lg-2">
36
                <h1>My virtual card </h1>
36
                <h1>My virtual card </h1>
37
                <div id="patron-virtual-card">
37
                <div id="patron-virtual-card">
38
                    <div id="image-and-library-container">
38
                    [% IF ( display_patron_image ) %]
39
                        [% IF ( display_patron_image ) %]
39
                        <div id="image-container">
40
                            <div id="image-container">
40
                            <img id="patron-image" src="/cgi-bin/koha/opac-patron-image.pl" alt="" />
41
                                <img id="patron-image" src="/cgi-bin/koha/opac-patron-image.pl" alt="" />
42
                            </div>
43
                        [% END %]
44
                        <div id="barcode-container">
45
                            <svg id="patron-barcode" data-barcode="[% patron.cardnumber | html %]"></svg>
46
                        </div>
47
                        <div id="lib-container">
48
                            <p id="patron-lib"><strong>Library:</strong> [% Branches.GetName( patron.branchcode ) | html %]</p>
49
                        </div>
41
                        </div>
42
                    [% END %]
43
                    <div id="barcode-container">
44
                        <svg id="patron-barcode" data-barcode="[% patron.cardnumber | html %]" data-barcode-format="[% barcode_format | html %]"></svg>
45
                    </div>
46
                    <div id="lib-container">
47
                        <p id="patron-lib"><strong>Library:</strong> [% Branches.GetName( patron.branchcode ) | html %]</p>
50
                    </div>
48
                    </div>
51
                </div>
49
                </div>
52
            </div> <!-- / .col-10 -->
50
            </div> <!-- / .col-10 -->
Lines 56-61 Link Here
56
54
57
[% INCLUDE 'opac-bottom.inc' %]
55
[% INCLUDE 'opac-bottom.inc' %]
58
[% BLOCK jsinclude %]
56
[% BLOCK jsinclude %]
59
    [% Asset.js("lib/js-barcode/js-barcode.js") | $raw %]
57
    [% Asset.js("lib/bwip-js/bwip-js-min.js") | $raw %]
60
    [% Asset.js("js/barcode-generator.js") | $raw %]
58
    [% Asset.js("js/barcode-generator.js") | $raw %]
61
[% END %]
59
[% END %]
(-)a/koha-tmpl/opac-tmpl/bootstrap/js/barcode-generator.js (-10 / +26 lines)
Lines 1-11 Link Here
1
document.addEventListener("DOMContentLoaded", function() {
1
document.addEventListener("DOMContentLoaded", function() {
2
    var barcodeNumber = document.getElementById("patron-barcode").dataset.barcode;
2
    const svgElement = document.getElementById('patron-barcode');
3
    JsBarcode("#patron-barcode", barcodeNumber, {
3
    var barcodeNumber = svgElement.dataset.barcode;
4
        format: "CODE39",
4
    var barcodeFormat = svgElement.dataset.barcodeFormat;
5
        lineColor: "#000",
5
6
        width: 2,
6
    try {
7
        height: 100,
7
        // Generate the barcode SVG
8
        displayValue: false,
8
        let svg = bwipjs.toSVG({
9
        margin: 0
9
            bcid:        barcodeFormat,  // Barcode type
10
    });
10
            text:        barcodeNumber,  // Text to encode
11
});
11
            padding:     0,
12
            height:      15,
13
        });
14
        // Add the generated SVG to the barcode container
15
        if (barcodeFormat == "qrcode") {
16
            document.getElementById('barcode-container').classList.add('qrcode');
17
        }
18
        document.getElementById('barcode-container').innerHTML = svg
19
    } catch (error) {
20
        // Use regex to find error message
21
        const match = error.message.match(/: (.+)$/);
22
        const errorMessage = match ? match[1] : error.message;
23
24
        console.error(error);
25
        document.getElementById('barcode-container').innerHTML = `<p><strong>Error: </strong>${errorMessage}</p>`;
26
    }
27
});
(-)a/opac/opac-virtual-card.pl (-1 / +4 lines)
Lines 48-56 if ( C4::Context->preference('OPACpatronimages') ) { Link Here
48
    $template->param( display_patron_image => 1 ) if $patron->image;
48
    $template->param( display_patron_image => 1 ) if $patron->image;
49
}
49
}
50
50
51
# Get the desired barcode format
52
my $barcode_format = C4::Context->preference('OPACVirtualCardBarcode');
53
51
$template->param(
54
$template->param(
52
    virtualcardview => 1,
55
    virtualcardview => 1,
53
    patron          => $patron,
56
    patron          => $patron,
57
    barcode_format  => $barcode_format,
54
);
58
);
55
59
56
output_html_with_http_headers $query, $cookie, $template->output, undef, { force_no_caching => 1 };
60
output_html_with_http_headers $query, $cookie, $template->output, undef, { force_no_caching => 1 };
57
- 

Return to bug 26777