Yarninator/toddler_shop_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Catch barcode form submit for scanning

Browse source
This commit is contained in:
Yarne Coppens 2024-08-04 11:01:52 +02:00
parent d25bd44d15
commit 47dc83fd55
2 changed files with 40 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -9,7 +9,17 @@
</head> </head>
<body onload="loadProducts()"> <body onload="loadProducts()">
<form action="" id="barcode_form">
<input id="barcode_input" type="text" autofocus>
<input type="submit" value="Submit">
</form>
<img class="product_image">
<img class="product_image">
<img class="product_image">
<img class="product_image">
<img class="product_image">
</body> </body>
<input id="barcode_input" type="text">
<button onclick="scan_product()">Scan barcode</button>
</html> </html>

27
scripts/main.js
View file

@ -1,5 +1,7 @@
var all_products var all_products
let barcodeForm
async function makeAPIRequest(request) { async function makeAPIRequest(request) {
try { try {
const response = await fetch(request); const response = await fetch(request);
@ -14,13 +16,30 @@ async function loadProducts() {
const loadProductRequest = new Request("http://127.0.0.1:8000/products") const loadProductRequest = new Request("http://127.0.0.1:8000/products")
all_products = await makeAPIRequest(loadProductRequest) all_products = await makeAPIRequest(loadProductRequest)
console.log("Loaded products:", all_products) console.log("Loaded products:", all_products)
} barcodeForm = document.getElementById("barcode_form");
barcodeForm.addEventListener("submit", (e) => {
e.preventDefault();
console.log('help')
function scan_product() {
const barcode = document.getElementById('barcode_input').value const barcode = document.getElementById('barcode_input').value
var chosen_product
for (index = 0; index < all_products.length; index++) { for (index = 0; index < all_products.length; index++) {
if (all_products[index].barcode == barcode) { if (all_products[index].barcode == barcode) {
console.log(all_products[index]) chosen_product = all_products[index]
} }
} }
}
barcode_input.value = ""
const product_image_placeholders = document.getElementsByClassName('product_image')
console.log(product_image_placeholders)
for (index = 0; index < product_image_placeholders.length; index++) {
console.log(product_image_placeholders[index].src)
if (product_image_placeholders[index].src == "") {
product_image_placeholders[index].src = chosen_product.image_url
return false
}
}
});
}