Added a little barcode scanner testing page (references #362)

changelog/52_UNRELEASED_2019-xx-xx.md

@@ -80,7 +80,8 @@
   - Danish (demo available at https://da.demo.grocy.info)
   - Dutch (demo available at https://nl.demo.grocy.info)
 - Internal change for how the localizations for the demo instances are handled
-  - Also for the pre-release demo now all currently supported languages are available
+  - For the pre-release demo now all currently supported languages are available (was already the case for the stable demo)
+    - Additionally all language files which reached the completion limit of 80 % will now be automatically pulled from Transifex 10 minutes past every hour (to have a kind of instant preview of changed tranlsations)
   - The URLs have changed, I'll try to keep all existing URLs redirecting properly for a long time
     - If you want to link to the demo, please only use https://demo.grocy.info (stable demo) or https://demo-prerelease.grocy.info (current master branch demo)
 

controllers/SystemController.php

@@ -96,4 +96,9 @@ class SystemController extends BaseController
 			'changelog' => $this->ApplicationService->GetChangelog()
 		]);
 	}
+
+	public function BarcodeScannerTesting(\Slim\Http\Request $request, \Slim\Http\Response $response, array $args)
+	{
+		return $this->AppContainer->view->render($response, 'barcodescannertesting');
+	}
 }

localization/strings.pot

@@ -1498,3 +1498,21 @@ msgstr ""
 
 msgid "Per stock quantity unit"
 msgstr ""
+
+msgid "Barcode scanner testing"
+msgstr ""
+
+msgid "Expected barcode"
+msgstr ""
+
+msgid "Scan field"
+msgstr ""
+
+msgid "Scanned codes"
+msgstr ""
+
+msgid "Hit"
+msgstr ""
+
+msgid "Miss"
+msgstr ""

public/viewjs/barcodescannertesting.js

@@ -0,0 +1,95 @@
+Grocy.BarCodeScannerTestingHitCount = 0;
+Grocy.BarCodeScannerTestingMissCount = 0;
+
+$("#scanned_barcode").on("blur", function (e)
+{
+	OnBarcodeScanned($("#scanned_barcode").val());
+});
+
+$("#scanned_barcode").keydown(function(event)
+{
+	if (event.keyCode === 13) //Enter
+	{
+		event.preventDefault();
+		OnBarcodeScanned($("#scanned_barcode").val());
+	}
+});
+
+$("#expected_barcode").on("keyup", function(e)
+{
+	if ($("#expected_barcode").val().length > 1)
+	{
+		$("#scanned_barcode").removeAttr("disabled");
+		$("#barcodescanner-start-button").removeAttr("disabled");
+		$("#barcodescanner-start-button").removeClass("disabled");
+	}
+	else
+	{
+		$("#scanned_barcode").attr("disabled", "");
+		$("#barcodescanner-start-button").attr("disabled", "");
+		$("#barcodescanner-start-button").addClass("disabled");
+	}
+});
+
+$("#expected_barcode").focus();
+setTimeout(function()
+{
+	$("#barcodescanner-start-button").attr("disabled", "");
+	$("#barcodescanner-start-button").addClass("disabled");
+}, 200);
+
+if (GetUriParam("barcode") !== undefined)
+{
+	$("#expected_barcode").val(GetUriParam("barcode"));
+	setTimeout(function ()
+	{
+		$("#expected_barcode").keyup();
+		$("#scanned_barcode").focus();
+	}, 200);
+}
+
+function OnBarcodeScanned(barcode)
+{
+	if (barcode.length === 0)
+	{
+		return;
+	}
+	
+	var bgClass = "";
+	if (barcode != $("#expected_barcode").val())
+	{
+		Grocy.BarCodeScannerTestingMissCount++;
+		bgClass = "bg-danger";
+
+		$("#miss-count").fadeOut(200, function ()
+		{
+			$(this).text(Grocy.BarCodeScannerTestingMissCount).fadeIn(200);
+		});
+	}
+	else
+	{
+		Grocy.BarCodeScannerTestingHitCount++;
+		bgClass = "bg-success";
+
+		$("#hit-count").fadeOut(200, function ()
+		{
+			$(this).text(Grocy.BarCodeScannerTestingHitCount).fadeIn(200);
+		});
+	}
+
+	$("#scanned_codes").prepend("<option class='" + bgClass + "'>" + barcode + "</option>");
+	setTimeout(function()
+	{
+		$("#scanned_barcode").val("");
+
+		if (!$(":focus").is($("#expected_barcode")))
+		{
+			$("#scanned_barcode").focus();
+		}
+	}, 200);
+}
+
+$(document).on("Grocy.BarcodeScanned", function(e, barcode)
+{
+	OnBarcodeScanned(barcode);
+});

public/viewjs/components/barcodescanner.js

@@ -150,5 +150,5 @@ $(document).on("click", "#barcodescanner-start-button", function(e)
 
 setTimeout(function()
 {
-	$(".barcodescanner-input:visible").after('<a id="barcodescanner-start-button" class="btn btn-sm btn-primary text-white" style="position: absolute; right: 0; margin-top: 4px; margin-right: 36px; z-index: 1000;"><i class="fas fa-camera"></i></a>');
+	$(".barcodescanner-input:visible").after('<a id="barcodescanner-start-button" class="btn btn-sm btn-primary text-white"><i class="fas fa-camera"></i></a>');
 }, 50);

routes.php

@@ -10,6 +10,7 @@ $app->group('', function()
 	// System routes
 	$this->get('/', '\Grocy\Controllers\SystemController:Root')->setName('root');
 	$this->get('/about', '\Grocy\Controllers\SystemController:About');
+	$this->get('/barcodescannertesting', '\Grocy\Controllers\SystemController:BarcodeScannerTesting');
 
 	// Login routes
 	$this->get('/login', 'LoginControllerInstance:LoginPage')->setName('login');

views/barcodescannertesting.blade.php

@@ -0,0 +1,44 @@
+@extends('layout.default')
+
+@section('title', $__t('Barcode scanner testing'))
+
+@section('viewJsName', 'barcodescannertesting')
+
+@push('pageScripts')
+	<script src="{{ $U('/node_modules/jquery-ui-dist/jquery-ui.min.js?v=', true) }}{{ $version }}"></script>
+@endpush
+
+@section('content')
+<div class="row">
+	<div class="col-lg-6 col-xs-12">
+		<h1>@yield('title')</h1>
+
+		<form id="barcodescannertesting-form" novalidate>
+
+			<div class="form-group">
+				<label for="expected_barcode">{{ $__t('Expected barcode') }}</label>
+				<input type="text" class="form-control" required id="expected_barcode" name="expected_barcode" value="">
+			</div>
+
+			<div class="form-group">
+				<label for="scanned_barcode">{{ $__t('Scan field') }}</label>
+				<div class="input-group">
+					<input type="text" class="form-control barcodescanner-input" id="scanned_barcode" name="scanned_barcode" value="" disabled>
+				</div>
+			</div>
+
+			<div class="form-group">
+				<label for="scanned_codes">{{ $__t('Scanned codes') }}</label>
+				<div class="float-right font-weight-bold">
+					<span class="text-success">{{ $__t('Hit') }}: <span id="hit-count" class="locale-number-format" data-format="generic">0</span></span> //
+					<span class="text-danger">{{ $__t('Miss') }}: <span id="miss-count" class="locale-number-format" data-format="generic">0</span></span>
+				</div>
+				<select class="form-control" id="scanned_codes" name="scanned_codes" multiple size="30"></select>
+			</div>
+
+		</form>
+	</div>
+</div>
+
+@include('components.barcodescanner')
+@stop

views/components/barcodescanner.blade.php

@@ -8,4 +8,20 @@
 	<script src="{{ $U('/node_modules/quagga/dist/quagga.min.js?v=', true) }}{{ $version }}"></script>
 @endpush
 
+@push('pageStyles')
+	<style>
+		#barcodescanner-start-button {
+			position: absolute;
+			right: 0;
+			margin-top: 4px;
+			margin-right: 5px;
+			z-index: 1000;
+		}
+
+		.combobox-container #barcodescanner-start-button {
+			margin-right: 36px !important;
+		}
+	</style>
+@endpush
+
 @endif