macao-pos/templates/sell.html

{% extends 'base.html' %}
{% block main %}
<div id="products">
{% for product in products %}
    <button type="button"
            onclick="addProduct({{ product.uid }})">
        <span class="name">{{ product.name }}</span>
        <span class="price">
            € {{ '{0:.02f}'.format(product.price / 100.0) }}
        </span>
    </button>
{% endfor %}
</div>
<div id="summary">
    <div id="basket"></div>
    <form id="sell" action="/sell"  method="POST">
{% for product in products %}
        <input type="hidden"
               id="prod_{{ product.uid }}"
               name="{{ product.uid }}"
               data-name="{{ product.name }}"
               data-price="{{ '{0:.02f}'.format(product.price / 100.0) }}"
               value="0">
{% endfor %}
        <p>Total: € <span id="total">0.00</span></p>
        <button type="submit">Print</input>
</form>

</div>
<script type="text/javascript">
function reset() {
{%- for product in products %}
    document.getElementById('prod_{{ product.uid }}').value = 0
{%- endfor %}
}

function updateTotal(amount) {
    total_el = document.getElementById('total')
    total = parseFloat(total_el.innerText)
    total += amount
    total_el.innerText = total.toFixed(2)
}

function addProduct(uid) {
    // This is the hidden input element inside the form. We'll use this DOM
    // element to keep informations about the product, such as the name,
    // the price and the value inside the 'data-' tag.
    form_el = document.getElementById('prod_' + uid)
    basket = document.getElementById('basket')
    basket_el = document.getElementById('basketitem_' + uid)

    form_el.value = parseInt(form_el.value) + 1

    // If there is not a button for the given product inside the basket
    // div we'll create it.
    if (basket_el === null) {
        new_basket_el =
            '<button id="basketitem_' + uid + '"' +
                    'onclick="delProduct(' + uid + ')">' +
                        '1 x ' + form_el.dataset.name +
            '</button>'
        basket.innerHTML += new_basket_el
    } else {
        // Otherwise we'll just update it.
        console.log(form_el.value)
        new_text = form_el.value + ' x ' + form_el.dataset.name
        basket_el.innerText = new_text
    }

    updateTotal(parseFloat(form_el.dataset.price))
}

function delProduct(uid) {
    form_el = document.getElementById('prod_' + uid)
    basket = document.getElementById('basket')
    basket_el = document.getElementById('basketitem_' + uid)

    form_el.value = parseInt(form_el.value) - 1

    if (form_el.value == 0) {
        basket.removeChild(basket_el)
    } else {
        new_text = form_el.value + ' x ' + form_el.dataset.name
        basket_el.innerText = new_text
    }

    updateTotal(parseFloat(-form_el.dataset.price))
}

reset()
</script>
{% endblock %}