removed augmented checkbox and combined functionality into info mode checkbox. changed barcode scanner to use XHR callback for barcode decoding to avoid problems with form submission and camera caused by page reloaded when part not found.

This commit is contained in:
swdee 2026-01-17 17:52:20 +13:00
parent 03d1fc55ce
commit 052780c865
6 changed files with 137 additions and 136 deletions

View file

@ -29,12 +29,20 @@ export default class extends Controller {
_scanner = null;
_submitting = false;
_lastDecodedText = "";
_onInfoChange = null;
connect() {
// Prevent double init if connect fires twice
if (this._scanner) return;
this.bindModeToggles();
// clear last decoded barcode when state changes on info box
const info = document.getElementById("scan_dialog_info_mode");
if (info) {
this._onInfoChange = () => {
this._lastDecodedText = "";
};
info.addEventListener("change", this._onInfoChange);
}
const isMobile = window.matchMedia("(max-width: 768px)").matches;
@ -74,7 +82,13 @@ export default class extends Controller {
this._scanner = null;
this._submitting = false;
this._lastDecodedText = "";
this.unbindModeToggles();
// Unbind info-mode change handler (always do this, even if scanner is null)
const info = document.getElementById("scan_dialog_info_mode");
if (info && this._onInfoChange) {
info.removeEventListener("change", this._onInfoChange);
}
this._onInfoChange = null;
if (!scanner) return;
@ -86,49 +100,14 @@ export default class extends Controller {
}
}
/**
* Add events to Mode checkboxes so they both can't be selected at the same time
*/
bindModeToggles() {
const info = document.getElementById("scan_dialog_info_mode");
const aug = document.getElementById("scan_dialog_augmented_mode");
if (!info || !aug) return;
const onInfoChange = () => {
if (info.checked) aug.checked = false;
};
const onAugChange = () => {
if (aug.checked) info.checked = false;
};
info.addEventListener("change", onInfoChange);
aug.addEventListener("change", onAugChange);
// Save references so we can remove listeners on disconnect
this._onInfoChange = onInfoChange;
this._onAugChange = onAugChange;
}
unbindModeToggles() {
const info = document.getElementById("scan_dialog_info_mode");
const aug = document.getElementById("scan_dialog_augmented_mode");
if (!info || !aug) return;
if (this._onInfoChange) info.removeEventListener("change", this._onInfoChange);
if (this._onAugChange) aug.removeEventListener("change", this._onAugChange);
this._onInfoChange = null;
this._onAugChange = null;
}
async onScanSuccess(decodedText) {
if (!decodedText) return;
const normalized = String(decodedText).trim();
if (!normalized) return;
// If we already handled this exact barcode and it's still showing, ignore.
// scan once per barcode
if (normalized === this._lastDecodedText) return;
// If a request/submit is in-flight, ignore scans.
@ -142,43 +121,42 @@ export default class extends Controller {
const input = document.getElementById("scan_dialog_input");
if (input) input.value = decodedText;
const augmented = !!document.getElementById("scan_dialog_augmented_mode")?.checked;
const infoMode = !!document.getElementById("scan_dialog_info_mode")?.checked;
// If augmented mode: do NOT submit the form.
if (augmented) {
try {
await this.lookupAndRender(decodedText);
} catch (e) {
console.warn("[barcode_scan] augmented lookup failed", e);
// Allow retry on failure by clearing last decoded text
this._lastDecodedText = "";
} finally {
// allow scanning again
this._submitting = false;
}
return;
}
// Non-augmented: Stop scanner BEFORE submitting to avoid camera transition races
try {
if (this._scanner?.clear) {
await this._scanner.clear();
}
} catch (_) {
// ignore
} finally {
this._scanner = null;
}
const data = await this.lookup(normalized, infoMode);
//Submit form
document.getElementById("scan_dialog_form")?.requestSubmit();
// ok:false = transient junk decode; ignore without wiping UI
if (!data || data.ok !== true) {
this._lastDecodedText = ""; // allow retry
return;
}
// If info mode is OFF and part was found -> redirect
if (!infoMode && data.found && data.redirectUrl) {
window.location.assign(data.redirectUrl);
return;
}
// Otherwise render returned fragment HTML
if (typeof data.html === "string" && data.html !== "") {
const el = document.getElementById("scan-augmented-result");
if (el) el.innerHTML = data.html;
}
} catch (e) {
console.warn("[barcode_scan] lookup failed", e);
// allow retry on failure
this._lastDecodedText = "";
} finally {
this._submitting = false;
}
}
async lookupAndRender(decodedText) {
const form = document.getElementById("scan_dialog_form");
if (!form) return;
// Ensure the hidden csrf field has been converted from placeholder -> real token + cookie set
async lookup(decodedText, infoMode) {
const form = document.getElementById("scan_dialog_form");
if (!form) return { ok: false };
generateCsrfToken(form);
const mode =
@ -187,23 +165,28 @@ export default class extends Controller {
const body = new URLSearchParams();
body.set("input", decodedText);
if (mode !== "") body.set("mode", mode);
body.set("info_mode", infoMode ? "1" : "0");
const headers = {
"Accept": "text/html",
"Accept": "application/json",
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
...generateCsrfHeaders(form), // adds the special CSRF header Symfony expects (if enabled)
...generateCsrfHeaders(form),
};
const resp = await fetch(this.element.dataset.augmentedUrl, {
const url = this.element.dataset.lookupUrl;
if (!url) throw new Error("Missing data-lookup-url on #reader-box");
const resp = await fetch(url, {
method: "POST",
headers,
body: body.toString(),
credentials: "same-origin",
});
const html = await resp.text();
if (!resp.ok) {
throw new Error(`lookup failed: HTTP ${resp.status}`);
}
const el = document.getElementById("scan-augmented-result");
if (el) el.innerHTML = html;
return await resp.json();
}
}

View file

@ -83,46 +83,39 @@ class ScanController extends AbstractController
$form = $this->createForm(ScanDialogType::class);
$form->handleRequest($request);
$mode = null;
// If JS is working, scanning uses /scan/lookup and this action just renders the page.
// This fallback only runs if user submits the form manually or uses ?input=...
if ($input === null && $form->isSubmitted() && $form->isValid()) {
$input = $form['input']->getData();
$mode = $form['mode']->getData();
}
$infoModeData = null;
$createUrl = null;
if ($input !== null) {
if ($input !== null && $input !== '') {
$mode = $form->isSubmitted() ? $form['mode']->getData() : null;
$infoMode = $form->isSubmitted() ? (bool) $form['info_mode']->getData() : false;
try {
$scan_result = $this->barcodeNormalizer->scanBarcodeContent($input, $mode ?? null);
$scan = $this->barcodeNormalizer->scanBarcodeContent((string) $input, $mode ?? null);
//Perform a redirect if the info mode is not enabled
if (!$form['info_mode']->getData()) {
try {
// redirect user to part page
return $this->redirect($this->barcodeParser->getRedirectURL($scan_result));
} catch (EntityNotFoundException) {
// Part not found -> show decoded info + optional "create part" link
$infoModeData = $scan_result->getDecodedForInfoMode();
$createUrl = $this->buildCreateUrlForScanResult($scan_result, $request->getLocale());
if ($createUrl === null) {
$this->addFlash('warning', 'scan.qr_not_found');
}
}
} else { //Otherwise retrieve infoModeData
$infoModeData = $scan_result->getDecodedForInfoMode();
// If not in info mode, mimic “normal scan” behavior: redirect if possible.
if (!$infoMode) {
$url = $this->barcodeParser->getRedirectURL($scan);
return $this->redirect($url);
}
} catch (InvalidArgumentException) {
$this->addFlash('error', 'scan.format_unknown');
// Info mode fallback: render page with prefilled result
$infoModeData = $scan->getDecodedForInfoMode();
} catch (\Throwable $e) {
// Keep fallback user-friendly; avoid 500
$this->addFlash('warning', 'scan.format_unknown');
}
}
return $this->render('label_system/scanner/scanner.html.twig', [
'form' => $form,
'infoModeData' => $infoModeData,
'createUrl' => $createUrl,
]);
}
@ -295,64 +288,81 @@ class ScanController extends AbstractController
return array_reverse($items);
}
#[Route(path: '/augmented', name: 'scan_augmented', methods: ['POST'])]
public function augmented(Request $request): Response
/**
* Provides XHR endpoint for looking up barcode information and return JSON response
* @param Request $request
* @return JsonResponse
*/
#[Route(path: '/lookup', name: 'scan_lookup', methods: ['POST'])]
public function lookup(Request $request): JsonResponse
{
$this->denyAccessUnlessGranted('@tools.label_scanner');
$input = (string) $request->request->get('input', '');
$mode = $request->request->get('mode'); // string|null
$input = trim((string) $request->request->get('input', ''));
$mode = (string) ($request->request->get('mode') ?? '');
$infoMode = (bool) filter_var($request->request->get('info_mode', false), FILTER_VALIDATE_BOOL);
$locale = $request->getLocale();
if ($input === '') {
// Return empty fragment or an error fragment; your choice
return new Response('', 200);
return new JsonResponse(['ok' => false], 200);
}
$modeEnum = null;
if ($mode !== null && $mode !== '') {
// Radio values are enum integers in your form
if ($mode !== '') {
$modeEnum = BarcodeSourceType::from((int) $mode);
}
try {
$scan = $this->barcodeNormalizer->scanBarcodeContent($input, $modeEnum);
} catch (InvalidArgumentException) {
// When the camera/barcode reader momentarily misreads a barcode whilst scanning
// return and empty result, so the good read data still remains visible
return new Response('', 200);
// Camera sometimes produces garbage decodes for a frame; ignore those.
return new JsonResponse(['ok' => false], 200);
}
$decoded = $scan->getDecodedForInfoMode();
$locale = $request->getLocale();
// Resolve part (or null)
$part = $this->barcodeParser->resolvePartOrNull($scan);
$found = $part !== null;
$redirectUrl = null;
if ($part !== null) {
// Redirector knows how to route parts, lots, and storelocations.
$redirectUrl = $this->barcodeParser->getRedirectURL($scan);
}
// Build template vars
$partName = null;
$partUrl = null;
$locations = [];
$createUrl = null;
if ($found) {
if ($part !== null) {
$partName = $part->getName();
// This is the same route BarcodeRedirector uses
$partUrl = $this->generateUrl('app_part_show', ['id' => $part->getID()]);
// Build locations (see below)
$locations = $this->buildLocationsForPart($part);
} else {
// Reuse your centralized create-url logic (the helper you already extracted)
$createUrl = $this->buildCreateUrlForScanResult($scan, $locale);
}
return $this->render('label_system/scanner/augmented_result.html.twig', [
// Render one fragment that shows:
// - decoded info (optional if you kept it)
// - part info + locations when found
// - create link when not found
$html = $this->renderView('label_system/scanner/augmented_result.html.twig', [
'decoded' => $decoded,
'found' => $found,
'found' => ($part !== null),
'partName' => $partName,
'partUrl' => $partUrl,
'locations' => $locations,
'createUrl' => $createUrl,
]);
return new JsonResponse([
'ok' => true,
'found' => ($part !== null),
'redirectUrl' => $redirectUrl, // client redirects only when infoMode=false
'html' => $html,
'infoMode' => $infoMode,
], 200);
}
}

View file

@ -85,11 +85,6 @@ class ScanDialogType extends AbstractType
'required' => false,
]);
$builder->add('augmented_mode', CheckboxType::class, [
'label' => 'scan_dialog.augmented_mode',
'required' => false,
]);
$builder->add('submit', SubmitType::class, [
'label' => 'scan_dialog.submit',
]);

View file

@ -54,10 +54,23 @@
{% endif %}
{% else %}
<div class="alert alert-warning mb-2">
{% trans %}scan.qr_not_found{% endtrans %}
{% trans %}label_scanner.qr_part_no_found{% endtrans %}
</div>
{% endif %}
{# Decoded barcode fields #}
<table class="table table-striped table-hover table-bordered table-sm mt-4 mb-0 w-auto">
<tbody>
{% for key, value in decoded %}
<tr>
<th class="text-nowrap">{{ key }}</th>
<td><code>{{ value }}</code></td>
</tr>
{% endfor %}
</tbody>
</table>
{# Whitespace under table and Input form fields #}
<div class="pt-3">
<hr class="my-0">
</div>

View file

@ -13,7 +13,7 @@
<div class="img-thumbnail" style="max-width: 600px;">
<div id="reader-box" {{ stimulus_controller('pages/barcode_scan') }}
data-augmented-url="{{ path('scan_augmented') }}"></div>
data-lookup-url="{{ path('scan_lookup') }}"></div>
</div>
</div>
</div>

View file

@ -12039,12 +12039,6 @@ Please note, that you can not impersonate a disabled user. If you try you will g
<target>Info mode (Decode barcode and show its contents, but do not redirect to part)</target>
</segment>
</unit>
<unit id="gShSnBd" name="scan_dialog.augmented_mode">
<segment state="translated">
<source>scan_dialog.augmented_mode</source>
<target>Augmented mode (Decode barcode, look up, and display database part information)</target>
</segment>
</unit>
<unit id="k5Gvkgp" name="label_scanner.decoded_info.title">
<segment state="translated">
<source>label_scanner.decoded_info.title</source>
@ -12063,6 +12057,12 @@ Please note, that you can not impersonate a disabled user. If you try you will g
<target>Part is not stored at any locations</target>
</segment>
</unit>
<unit id="fGrv35p" name="label_scanner.qr_part_no_found">
<segment state="translated">
<source>label_scanner.qr_part_no_found</source>
<target>No part found for scanned barcode, click button above to Create Part</target>
</segment>
</unit>
<unit id="nmXQWcS" name="label_generator.edit_profiles">
<segment state="translated">
<source>label_generator.edit_profiles</source>