diff --git a/InvenTree/InvenTree/static/script/inventree/barcode.js b/InvenTree/InvenTree/static/script/inventree/barcode.js index 77c344f778..04662fe5f0 100644 --- a/InvenTree/InvenTree/static/script/inventree/barcode.js +++ b/InvenTree/InvenTree/static/script/inventree/barcode.js @@ -43,4 +43,127 @@ function associateBarcode(barcode, stockitem, options={}) { }, } ); +} + + +function makeBarcodeInput(placeholderText='') { + /* + * Generate HTML for a barcode input + */ + + var html = ` + <form class='js-modal-form' method='post'> + <div class='form-group'> + <label class='control-label' for='barcode'>Barcode</label> + <div class='controls'> + <input id='barcode' class='textinput textInput form-control' type='text' name='barcode' placeholder='${placeholderText}'> + <div id='hint_barcode_data' class='help-block'>Enter barcode data</div> + </div> + </div> + </form> + `; + + return html; +} + + +function getBarcodeData(modal) { + + return $(modal + ' #barcode').val(); +} + + +function barcodeDialog(title, options={}) { + /* + * Handle a barcode display dialog. + */ + + var modal = '#modal-form'; + + $(modal).on('shown.bs.modal', function() { + $(modal + ' .modal-form-content').scrollTop(0); + + // Ensure the barcode field has focus + $(modal + ' #barcode').focus(); + + var form = $(modal).find('.js-modal-form'); + + // Override form submission + form.submit(function() { + + var barcode = getBarcodeData(modal); + + if (options.submit) { + modalEnable(modal, false); + options.submit(barcode); + } + + return false; + }); + + modalSubmit(modal, function() { + + var barcode = getBarcodeData(modal); + + if (options.submit) { + modalEnable(modal, false); + options.submit(barcode); + } + }); + + }); + + modalSetTitle(modal, title); + modalShowSubmitButton(modal, true); + + var content = ''; + + if (options.headerContent) { + content += options.headerContent; + } + + content += makeBarcodeInput(); + + if (options.footerContent) { + content += options.footerContent; + } + + modalSetContent(modal, content); + + $(modal).modal({ + backdrop: 'static', + keyboard: false, + }); + + $(modal).modal('show'); +} + + +function barcodeScanDialog() { + /* + * Perform a barcode scan, + * and (potentially) redirect the browser + */ + + var modal = '#modal-form'; + + barcodeDialog( + "Scan Barcode", + { + submit: function(barcode) { + inventreePut( + '/api/barcode/', + { + barcode: barcode, + }, + { + method: 'POST', + success: function(response, status) { + console.log(response); + }, + }, + ); + }, + }, + ); } \ No newline at end of file diff --git a/InvenTree/InvenTree/static/script/inventree/modals.js b/InvenTree/InvenTree/static/script/inventree/modals.js index 24a1a38ed3..158cf67a77 100644 --- a/InvenTree/InvenTree/static/script/inventree/modals.js +++ b/InvenTree/InvenTree/static/script/inventree/modals.js @@ -442,7 +442,8 @@ function attachSecondaryModal(modal, options) { */ var select = '#id_' + options.field; - var option = new Option(response.text, response.pk, true, true) + + var option = new Option(response.text, response.pk, true, true); $(modal).find(select).append(option).trigger('change'); } diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html index 745b93d5b2..376ca98c7b 100644 --- a/InvenTree/templates/base.html +++ b/InvenTree/templates/base.html @@ -133,6 +133,11 @@ $(document).ready(function () { inventreeDocReady(); showCachedAlerts(); + + $('#barcode-scan').click(function() { + barcodeScanDialog(); + }); + }); </script> diff --git a/InvenTree/templates/navbar.html b/InvenTree/templates/navbar.html index 7bccb6d62d..1caa1fa950 100644 --- a/InvenTree/templates/navbar.html +++ b/InvenTree/templates/navbar.html @@ -28,6 +28,11 @@ </ul> <ul class="nav navbar-nav navbar-right"> {% include "search_form.html" %} + <li class ='nav navbar-nav'> + <button id='barcode-scan' class='btn btn-default' title='{% trans "Scan Barcode" %}'> + <span class='fas fa-qrcode'></span> + </button> + </li> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href="#"><span class="fas fa-user"></span> <b>{{ user.get_username }}</b></a> <ul class='dropdown-menu'> diff --git a/InvenTree/templates/search_form.html b/InvenTree/templates/search_form.html index 56663b1ba4..51a045a257 100644 --- a/InvenTree/templates/search_form.html +++ b/InvenTree/templates/search_form.html @@ -5,5 +5,7 @@ <div class="form-group"> <input type="text" name='search' class="form-control" placeholder="{% trans 'Search' %}"{% if query_text %} value="{{ query }}"{% endif %}> </div> - <button type="submit" id='search-submit' class="btn btn-default"><span class='fas fa-search'></span></button> + <button type="submit" id='search-submit' class="btn btn-default" title='{% trans "Search" %}'> + <span class='fas fa-search'></span> + </button> </form>