mvark/OFFScanner.html

## OFFScanner.html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Based on this HTML5 QR Code Reader sample by Minhaz https://blog.minhazav.dev/research/html5-qrcode.html -->
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>OFF Barcode Scanner</title>
  </head>
<body>
<div id="desc">Scan Barcode to view details on Open Food Facts</div>
<div id="reader"></div>
<script src="html5-qrcode.min.js" type="text/javascript"></script>
<script type="text/javascript">
function onScanSuccess(decodedText, decodedResult) {

    html5QrcodeScanner.clear();
    //if 13 digit barcode is detected, return constructed url with barcode
    const isEAN13 = isNumericEAN13(decodedText);
    if (isEAN13) {
    const url = 'https://world.openfoodfacts.org/api/v2/product/' + decodedText +'?lc=en&cc=in&tags_lc=en&fields=product_name%2Cimage_thumb_url';
    fetchProdData(url);
    }     //else if 13 digit barcode is not detected
    else {
    document.getElementById('desc').innerHTML =  'Barcode detected: ' + decodedText + ' is invalid' ;
    }
}

function isNumericEAN13(input) {
  // Check if the input is numeric and has exactly 13 digits
  const numericCheck = /^\d+$/;
  const lengthCheck = input.length === 13;

  // Check if it resembles a EAN-13 barcode pattern
  const ean13PatternCheck = /^(?:\d{13})$/;

  return numericCheck.test(input) && lengthCheck && ean13PatternCheck.test(input);
}

async function fetchProdData(url) {
  try {
    const response = await fetch(url); // Replace with your actual API endpoint
    const data = await response.json();
    let details = "";
    const status = `${data.status}`;
    //if details exist in OFF database
    if (status==0)
    {
      details += `
      <h2>Product details not found in OFF database</h2>
      <p><button
        onclick="window.location.href = 'intent://scan/#Intent;scheme=android-app://org.openfoodfacts.scanner/https/openfoodfacts.org/;end';">
        Add through OFF app</button>
        <button onclick="location.reload();">Refresh & Scan again</button>
      </p>
      `;
        document.getElementById('desc').innerHTML = details;
    }
    else {
    details += `
      <h2>Product Details from Open Food Facts:</h2>
      <p>Product: ${data.product.product_name}</p>
      <p><img src='${data.product.image_thumb_url}' alt='${data.product.product_name}'/><br/>
        <button onclick="location.reload();">Refresh & Scan again</button></p>
      `;
      document.getElementById('desc').innerHTML = details;
    }
  } catch (error) {
    console.error('Error fetching data:', error);
    // Handle errors gracefully, e.g., display an error message to the user
    document.getElementById('desc').innerHTML = 'Error fetching data: ' + error ;
  }
}

var html5QrcodeScanner = new Html5QrcodeScanner(
	"reader", { fps: 10, qrbox: 250 });

html5QrcodeScanner.render(onScanSuccess);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- Based on this HTML5 QR Code Reader sample by Minhaz https://blog.minhazav.dev/research/html5-qrcode.html -->
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>OFF Barcode Scanner</title>
	</head>
	<body>
	<div id="desc">Scan Barcode to view details on Open Food Facts</div>
	<div id="reader"></div>
	<script src="html5-qrcode.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	function onScanSuccess(decodedText, decodedResult) {

	html5QrcodeScanner.clear();
	//if 13 digit barcode is detected, return constructed url with barcode
	const isEAN13 = isNumericEAN13(decodedText);
	if (isEAN13) {
	const url = 'https://world.openfoodfacts.org/api/v2/product/' + decodedText +'?lc=en&cc=in&tags_lc=en&fields=product_name%2Cimage_thumb_url';
	fetchProdData(url);
	} //else if 13 digit barcode is not detected
	else {
	document.getElementById('desc').innerHTML = 'Barcode detected: ' + decodedText + ' is invalid' ;
	}
	}

	function isNumericEAN13(input) {
	// Check if the input is numeric and has exactly 13 digits
	const numericCheck = /^\d+$/;
	const lengthCheck = input.length === 13;

	// Check if it resembles a EAN-13 barcode pattern
	const ean13PatternCheck = /^(?:\d{13})$/;

	return numericCheck.test(input) && lengthCheck && ean13PatternCheck.test(input);
	}

	async function fetchProdData(url) {
	try {
	const response = await fetch(url); // Replace with your actual API endpoint
	const data = await response.json();
	let details = "";
	const status = `${data.status}`;
	//if details exist in OFF database
	if (status==0)
	{
	details += `
	<h2>Product details not found in OFF database</h2>
	<p><button
	onclick="window.location.href = 'intent://scan/#Intent;scheme=android-app://org.openfoodfacts.scanner/https/openfoodfacts.org/;end';">
	Add through OFF app</button>
	<button onclick="location.reload();">Refresh & Scan again</button>
	</p>
	`;
	document.getElementById('desc').innerHTML = details;
	}
	else {
	details += `
	<h2>Product Details from Open Food Facts:</h2>
	<p>Product: ${data.product.product_name}</p>
	<p><img src='${data.product.image_thumb_url}' alt='${data.product.product_name}'/><br/>
	<button onclick="location.reload();">Refresh & Scan again</button></p>
	`;
	document.getElementById('desc').innerHTML = details;
	}
	} catch (error) {
	console.error('Error fetching data:', error);
	// Handle errors gracefully, e.g., display an error message to the user
	document.getElementById('desc').innerHTML = 'Error fetching data: ' + error ;
	}
	}

	var html5QrcodeScanner = new Html5QrcodeScanner(
	"reader", { fps: 10, qrbox: 250 });

	html5QrcodeScanner.render(onScanSuccess);
	</script>
	</body>
	</html>