toddler_shop_frontend/static/scripts/main.js

var all_products

let barcodeForm

const api_url = "https://api.toddlershop.yarnecoppens.com"

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 loadCash(price) {
    const cashAmountRequest = new Request(api_url + '/price_to_cash/' + price)
    const cashAmount = await makeAPIRequest(cashAmountRequest)
    
    const cash_bills_row = document.getElementById('cash_bills')

    for (var bill_type in cashAmount){
        bill_amount = cashAmount[bill_type]
        console.log(bill_type, bill_amount)
        for (var x = 0; x < bill_amount; x++){
            const new_column = document.createElement('div')
            new_column.classList.add('col')
            const bill_image = document.createElement('img')
            bill_image.classList.add('cash_image')
            bill_image.src = api_url + '/icons/' + bill_type
            new_column.appendChild(bill_image)
            
            cash_bills_row.appendChild(new_column)
        }
    }

}

async function indexOnLoad(){
    document.body.addEventListener('click', focusBarcodeInput, true); 
    loadProducts();
    document.querySelector("input[autofocus]").addEventListener("blur", function() {
        var t = this;
        t.focus();
        setTimeout(function() { // Some browsers won't let you do it until
            t.focus();          // after the blur has completed
        }, 100);
    });
}

function focusBarcodeInput(){
    document.getElementById('barcode_input').focus()
}

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();

        if (to_fill_product_index < 5) {
    
            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

            image_product.setAttribute('src', api_url + "/icons/" + chosen_product.image_filename);
            image_product.style.visibility = 'visible';
            price_product.textContent = "\u20AC " + chosen_product.price
            total_price_holder.textContent = "\u20AC " + total_price
        
            to_fill_product_index += 1
        }else{
            barcode_input.value = ""
        }
    });

  }

function removeProduct(element_to_remove){
    const product_row = document.getElementById('product_row')
    const products = product_row.children

    let found_removed_product = false

    for (var i = 0; i < products.length; i++) {
        var product = products[i];
        if (product.getElementsByClassName('product_image')[0] == element_to_remove){
            found_removed_product = true
            const total_price_holder = document.getElementById("totalprice")
            total_price -= product.getElementsByClassName('product_price')[0].textContent.replace('€ ','')
            console.log(product.getElementsByClassName('product_price')[0].textContent.replace('€ ',''))

            total_price_holder.textContent = "\u20AC " + total_price

            const price_holder = element_to_remove.parentNode.getElementsByClassName('product_price')[0]
            price_holder.innerHTML = ''
        }
        if (found_removed_product){
            if (i < to_fill_product_index - 1){
                const next_product = products[i+1]
                const current_price_holder = product.getElementsByClassName('product_price')[0]
                const next_price_holder = next_product.getElementsByClassName('product_price')[0]
                product.getElementsByClassName('product_image')[0].src = next_product.getElementsByClassName('product_image')[0].src
                current_price_holder.innerHTML = next_price_holder.innerHTML
            }else{
                product.getElementsByClassName('product_image')[0].style.visibility = 'hidden';
                const current_price_holder = product.getElementsByClassName('product_price')[0]
                current_price_holder.innerHTML = ''

            }
            
        }
      }

    
    to_fill_product_index -= 1
}

function payCash() {
    const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
    window.location.href = "/pay_cash/" + total_cost
}

function payCard() {
    const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
    window.location.href = "/pay_card/" + total_cost
}

function toMain() {
    window.location.href = "/";
}