toddler_shop_frontend/scripts/main.js

var all_products

let barcodeForm

const api_url = "http://127.0.0.1:8000"

var to_fill_product_index = 0

var total_price = 0

async function makeAPIRequest(request) {
    try {
        const response = await fetch(request);
        const result = await response.json();
        return result
      } catch (error) {
        console.error("Error:", error);
      }
}

async function loadProducts() {
    const loadProductRequest = new Request(api_url + "/products")
    all_products = await makeAPIRequest(loadProductRequest)
    console.log("Loaded products:", all_products)

    barcodeForm = document.getElementById("barcode_form");

    barcodeForm.addEventListener("submit", (e) => {
        e.preventDefault();
    
        const barcode = document.getElementById('barcode_input').value
        var chosen_product
        for (index = 0; index < all_products.length; index++) {  
            if (all_products[index].barcode == barcode) {
                chosen_product = all_products[index]
            }
        }

        barcode_input.value = ""
        
        const product_placeholders = document.getElementsByClassName('product_col')
        const chosen_product_placeholder = product_placeholders[to_fill_product_index]
        const image_product = chosen_product_placeholder.getElementsByClassName('product_image')[0]
        const price_product = chosen_product_placeholder.getElementsByClassName('product_price')[0]
        const total_price_holder = document.getElementById("totalprice")
        
        total_price += chosen_product.price

        console.log(image_product)

        image_product.setAttribute('src', api_url + "/icons/" + chosen_product.image_filename);
        price_product.textContent = "\u20AC " + chosen_product.price
        total_price_holder.textContent = "\u20AC " + total_price
    
        to_fill_product_index += 1
    });

  }