Koha/koha-tmpl/intranet-tmpl/prog/en/modules/labels/barcode-print.tt
Owen Leonard 33f14126a1
Bug 33384: Use template wrapper for breadcrumbs: Labels
This patch updates label creator templates so that they use the
new WRAPPER for displaying breadcrumbs.

To test, apply the patch and test each page and its variations.
Breadcrumbs should look correct, and each link should be correct.

- Cataloging ->
  - Barcode image generator
  - Quick spine label creator
  - Label creator ->
    - Label creator home
      - New ->
        - Label batch
        - Layout
        - Label template
        - Printer profile
        - Barcode range
      - Manage ->
        - Label batches
          - Edit batch
        - Layouts
          - Edit layout
        - Label templates
          - Edit template
        - Printer profiles

Signed-off-by: Andrew Auld <andrew.auld@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
2023-04-12 09:27:06 -03:00

207 lines
9.3 KiB
Text

[% USE raw %]
[% USE Asset %]
[% SET footerjs = 1 %]
[% INCLUDE 'doc-head-open.inc' %]<title>Barcode image generator &rsaquo; Cataloging &rsaquo; Koha</title>
[% INCLUDE 'doc-head-close.inc' %]
[% Asset.css("css/humanmsg.css") | $raw %]
[% FILTER collapse %]
<style>
input[type='range'] {
display: inline-block;
width: auto;
}
#barcode_container {
background-color:#FFF;
min-height:200px;
overflow: scroll;
padding:2em;
text-align:center;
}
#barcode_image {
border:1px dashed #B9D8D9;
display: block;
margin: 1em auto;
padding: 1em;
}
#modulesize_text {
background-color: #FFF;
border: 1px solid #EEE;
border-radius: 2px;
padding: .2em .4em;
}
#urltext {
border:1px solid #B9D8D9;
border-radius:2px;
margin:1em 0;
padding:.5em;
}
</style>
[% END %]
</head>
<body id="labels_spinelabel-home" class="tools labels">
[% WRAPPER 'header.inc' %]
[% INCLUDE 'cat-search.inc' %]
[% END %]
[% WRAPPER 'sub-header.inc' %]
[% WRAPPER breadcrumbs %]
[% WRAPPER breadcrumb_item %]
<a href="/cgi-bin/koha/cataloguing/cataloging-home.pl">Cataloging</a>
[% END %]
[% WRAPPER breadcrumb_item bc_active= 1 %]
<span>Barcode image generator</span>
[% END %]
[% END #/ WRAPPER breadcrumbs %]
[% END #/ WRAPPER sub-header.inc %]
<div class="main container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-push-2">
<main>
<h2>Barcode image generator</h2>
<form action="/cgi-bin/koha/svc/barcode" method="post" id="barcodegen">
<fieldset class="brief">
<div class="row">
<div class="col-sm-6">
<ol>
<li>
<label for="type">Barcode type:</label>
<select name="type" id="type">
<option value="Code39">Code39</option>
<option value="COOP2of5">COOP2of5</option>
<option value="EAN13">EAN13</option>
<option value="EAN8">EAN8</option>
<option value="IATA2of5">IATA2of5</option>
<option value="Industrial2of5">Industrial2of5</option>
<option value="ITF">ITF</option>
<option value="Matrix2of5">Matrix2of5</option>
<option value="NW7">NW7</option>
<option value="QRcode">QRcode</option>
<option value="UPCA">UPCA</option>
<option value="UPCE">UPCE</option>
</select>
</li>
<li class="qrcode">
<label for="modulesize">QR Code module size:</label>
<input name="modulesize" id="modulesize" type="range" min="1" max="10" value="3" />
<span id="modulesize_text">3</span>
<div class="hint">Module size refers to the pixel dimensions of each black or white square in the generated QR code.</div>
</li>
<li class="bcode">
<label for="notext">Hide text <input type="checkbox" id="notext" name="notext" value="1" /></label>
</li>
<li class="bcode">
<label for="height">Barcode height:</label>
<input type="text" id="height" name="height" value="50" />
</li>
<li>
<label class="bcode" for="barcode">Barcode: </label>
<label class="qrcode" for="barcode">Text, URL, or barcode, etc: </label>
<input type="text" name="barcode" id="barcode" size="50" />
<div class="hint qrcode">Actual dimensions of the QR code depend on the amount of characters being encoded.</div>
<div class="hint bcode">Barcode text must be numeric (0-9)</div>
</li>
</ol>
<fieldset class="action">
<input type="submit" class="btn btn-primary" value="Show barcode" />
</fieldset>
</div>
<div class="col-sm-6">
<div id="barcode_container">
<img id="barcode_image" />
<textarea readonly="readonly" rows="5" cols="40" id="urltext"></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</main>
</div> <!-- /.col-sm-10.col-sm-push-2 -->
<div class="col-sm-2 col-sm-pull-10">
<aside>
[% INCLUDE 'cat-menu.inc' %]
</aside>
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
</div> <!-- /.row -->
[% MACRO jsinclude BLOCK %]
[% Asset.js("lib/jquery/plugins/humanmsg.js") | $raw %]
<script>
var base_url = "[% Koha.Preference('staffClientBaseURL') | html %]";
function showBarcodeText( path, dimensions ){
var params = new URLSearchParams( path );
var tag = '<img src="' + path + '" alt="' + params.get("barcode") + '" width="' + dimensions.width + '" height="' + dimensions.height + '" />';
$("#urltext").show().text( tag );
if( Number( dimensions.width ) > 250 ){
$("#urltext").css("width", dimensions.width )
}
}
function showBarcode( barcodeform ){
if( $("#barcode").val() == "" ){
$("#barcode_container").hide();
} else {
var url = barcodeform.attr("action");
var params = barcodeform.serialize();
$("#barcode_container").show();
$("#barcode_image").attr("src", url + "?" + params );
}
}
function showQrcodeOptions( type ){
if( type.val() == "QRcode" ){
$(".qrcode").show().find("input,range").prop("disabled", false );
$(".bcode").hide().find("input").prop("disabled", true );
} else {
$(".qrcode").hide().find("input,range").prop("disabled", true );
$(".bcode").show().find("input").prop("disabled", false );
}
}
$(document).ready(function(){
showQrcodeOptions( $("#type") );
showBarcode( $("#barcodegen") );
$("#type").on("change", function(){
showQrcodeOptions( $(this) );
})
$("#barcodegen").on("change submit", function(e){
e.preventDefault();
showBarcode( $(this) );
});
$("#modulesize").on("input", function(){
$("#modulesize_text").text( $(this).val() );
});
$("#urltext").on("click", function(){
$(this).select();
var text = $(this).text();
navigator.clipboard.writeText( text ).then(function() {
/* clipboard successfully set */
humanMsg.displayAlert( _("HTML copied to the clipboard") );
}, function() {
/* clipboard write failed */
humanMsg.displayAlert( _("Could not copy HTML automatically to the clipboard") );
});
});
$("#barcode_image")[0].onload = function (){
showBarcodeText( this.src, { width: this.width, height: this.height } );
}
$("#barcode_image")[0].onerror = function(){
var barcodetype = $("#type").val();
if( barcodetype !== "QRcode" ){
if( Number.isNaN( Number( $("#barcode").val() ) ) ){
humanMsg.displayAlert( _("Barcodes of type %s must be numeric").format( barcodetype ) );
} else {
humanMsg.displayAlert( _("There was an unknown error generating the barcode image. Please check that your barcode is correct for the barcode type" ) );
}
} else {
humanMsg.displayAlert( _("There was an unknown error generating the barcode image") );
}
}
});
</script>
[% END %]
[% INCLUDE 'intranet-bottom.inc' %]