Support camera barcode scanning in recipepicker (references #1562)

changelog/66_3.2.0_2022-02-11.md

@@ -64,6 +64,7 @@
 - New input shorthand `[+/-]n[d/m/y]` for date fields to quickly input a date relative to today (adding (**+**) or subtracting (**-**) the **n**umber of **d**ays/**m**onths/**y**ears, see the full list of available shorthands [here](https://github.com/grocy/grocy#input-shorthands-for-date-fields))
 - When using LDAP authentication, the configured `LDAP_UID_ATTR` is now used to compare if the user already exists instead of the username entered on the login page (that prevents creating multiple users if you enter the username in different notations) (thanks @FloSet)
 - When using reverse proxy authentication (`ReverseProxyAuthMiddleware`), it's now also possible to pass the username in an environment variable instead of an HTTP header (new `config.php` option `REVERSE_PROXY_AUTH_USE_ENV`) (thanks @Forceu)
+- The `config.php` option `DISABLE_BROWSER_BARCODE_CAMERA_SCANNING` has been renamed to `FEATURE_FLAG_DISABLE_BROWSER_BARCODE_CAMERA_SCANNING`
 - Fixed that when having a quantity unit matching any application string, the translation of that string was used to display that unit
 - Fixed that the logout button/menu was missing when using external authentication (e.g. LDAP)
 - New translations: (thanks all the translators)

config-dist.php

@@ -90,9 +90,6 @@ Setting('LDAP_BIND_PW', ''); // Password for the above account
 Setting('LDAP_USER_FILTER', ''); // Example value "(OU=grocy_users)"
 Setting('LDAP_UID_ATTR', ''); // Windows AD: "sAMAccountName", OpenLDAP: "uid", GLAuth: "cn"
 
-// Set this to true if you want to disable the ability to scan a barcode via the device camera (Browser API)
-Setting('DISABLE_BROWSER_BARCODE_CAMERA_SCANNING', false);
-
 // Default permissions for new users
 // the array needs to contain the technical/constant names
 // See the file controllers/Users/User.php for possible values
@@ -147,6 +144,7 @@ Setting('FEATURE_FLAG_CHORES_ASSIGNMENTS', true);
 Setting('FEATURE_FLAG_THERMAL_PRINTER', false);
 
 // Feature settings
+Setting('FEATURE_FLAG_DISABLE_BROWSER_BARCODE_CAMERA_SCANNING', false); // Set this to true if you want to disable the ability to scan a barcode via the device camera (Browser API)
 Setting('FEATURE_FLAG_AUTO_TORCH_ON_WITH_CAMERA', true); // Enables the torch automatically (if the device has one)
 
 

public/viewjs/components/barcodescanner.js

@@ -279,8 +279,14 @@ $(document).on("click", "#barcodescanner-start-button", async function(e)
 	Grocy.Components.BarcodeScanner.StartScanning();
 });
 
-setTimeout(function()
+Grocy.Components.BarcodeScanner.InitDone = false;
+Grocy.Components.BarcodeScanner.Init = function()
 {
+	if (Grocy.Components.BarcodeScanner.InitDone)
+	{
+		return;
+	}
+
 	$(".barcodescanner-input:visible").each(function()
 	{
 		if ($(this).hasAttr("disabled"))
@@ -291,5 +297,12 @@ setTimeout(function()
 		{
 			$(this).after('<a id="barcodescanner-start-button" class="btn btn-sm btn-primary text-white" data-target="' + $(this).attr("data-target") + '"><i class="fas fa-camera"></i></a>');
 		}
+
+		Grocy.Components.BarcodeScanner.InitDone = true;
 	});
+}
+
+setTimeout(function()
+{
+	Grocy.Components.BarcodeScanner.Init();
 }, 50);

public/viewjs/components/productpicker.js

@@ -239,7 +239,7 @@ $('#product_id_text_input').on('blur', function(e)
 				}
 			};
 
-			if (!Grocy.FeatureFlags.DISABLE_BROWSER_BARCODE_CAMERA_SCANNING)
+			if (!Grocy.FeatureFlags.GROCY_FEATURE_FLAG_DISABLE_BROWSER_BARCODE_CAMERA_SCANNING)
 			{
 				buttons.retrycamerascanning = {
 					label: '<strong>C</strong> <i class="fas fa-camera"></i>',

public/viewjs/components/recipepicker.js

@@ -101,3 +101,25 @@ $('#recipe_id_text_input').on('blur', function(e)
 		}
 	}
 });
+
+$(document).on("Grocy.BarcodeScanned", function(e, barcode, target)
+{
+	if (!(target == "@recipepicker" || target == "undefined" || target == undefined)) // Default target
+	{
+		return;
+	}
+
+	// Don't know why the blur event does not fire immediately ... this works...
+	Grocy.Components.RecipePicker.GetInputElement().focusout();
+	Grocy.Components.RecipePicker.GetInputElement().focus();
+	Grocy.Components.RecipePicker.GetInputElement().blur();
+
+	Grocy.Components.RecipePicker.GetInputElement().val(barcode);
+
+	setTimeout(function()
+	{
+		Grocy.Components.RecipePicker.GetInputElement().focusout();
+		Grocy.Components.RecipePicker.GetInputElement().focus();
+		Grocy.Components.RecipePicker.GetInputElement().blur();
+	}, 200);
+});

public/viewjs/mealplan.js

@@ -449,6 +449,11 @@ $(document).on("click", ".copy-day-button", function(e)
 
 $("#add-recipe-modal").on("shown.bs.modal", function(e)
 {
+	if (!Grocy.FeatureFlags.GROCY_FEATURE_FLAG_DISABLE_BROWSER_BARCODE_CAMERA_SCANNING)
+	{
+		Grocy.Components.BarcodeScanner.Init();
+	}
+
 	Grocy.Components.RecipePicker.GetInputElement().focus();
 })
 
@@ -459,6 +464,11 @@ $("#add-note-modal").on("shown.bs.modal", function(e)
 
 $("#add-product-modal").on("shown.bs.modal", function(e)
 {
+	if (!Grocy.FeatureFlags.GROCY_FEATURE_FLAG_DISABLE_BROWSER_BARCODE_CAMERA_SCANNING)
+	{
+		Grocy.Components.BarcodeScanner.Init();
+	}
+
 	Grocy.Components.ProductPicker.GetInputElement().focus();
 })
 

views/components/barcodescanner.blade.php

@@ -1,4 +1,4 @@
-@if (!GROCY_DISABLE_BROWSER_BARCODE_CAMERA_SCANNING)
+@if (!GROCY_FEATURE_FLAG_DISABLE_BROWSER_BARCODE_CAMERA_SCANNING)
 
 @once
 @push('componentScripts')

views/components/recipepicker.blade.php

@@ -24,9 +24,10 @@
 		@endif
 		<i class="fas fa-barcode float-right mt-1"></i>
 	</label>
-	<select class="form-control recipe-combobox"
+	<select class="form-control recipe-combobox barcodescanner-input"
 		id="recipe_id"
 		name="recipe_id"
+		data-target="@recipepicker"
 		@if($isRequired)
 		required
 		@endif>
@@ -37,3 +38,5 @@
 	</select>
 	<div class="invalid-feedback">{{ $__t('You have to select a recipe') }}</div>
 </div>
+
+@include('components.barcodescanner')