improve total computing on order form

This commit is contained in:
Laetitia Getti 2023-07-31 16:32:31 +02:00 committed by Laetitia Getti
parent e4bd680fe2
commit 52b7804281

View file

@ -69,7 +69,7 @@
<p>Il n'y a pas de produits disponibles dans cette commande !</p> <p>Il n'y a pas de produits disponibles dans cette commande !</p>
{% else %} {% else %}
<p class="title">Commander</p> <p class="title">Commander</p>
<form method="post" action="{% url 'order:order' grouped_order.id %}"> <form id="inputs-parent" method="post" action="{% url 'order:order' grouped_order.id %}">
<!-- Tableau de commandes - sur ordi --> <!-- Tableau de commandes - sur ordi -->
<table class="table is-hidden-touch"> <table class="table is-hidden-touch">
@ -86,7 +86,7 @@
{% csrf_token %} {% csrf_token %}
<td>{{ item.name }}</td> <td>{{ item.name }}</td>
<td>{{ item.price }} €</td> <td>{{ item.price }} €</td>
<td><input name="quantity_{{ item.id }}" onblur="findTotal()" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}></input> <td><input name="quantity_{{ item.id }}" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}></input>
{% if item.get_remaining_nb is not null %} {% if item.get_remaining_nb is not null %}
<span class="is-italic mini-title"> <span class="is-italic mini-title">
{% if item.get_remaining_nb == 0 %}Produit épuisé {% if item.get_remaining_nb == 0 %}Produit épuisé
@ -115,7 +115,7 @@
<p>{{ item.price }} €</p> <p>{{ item.price }} €</p>
</div> </div>
<div class="card-footer-item"> <div class="card-footer-item">
<td><input name="quantity_{{ item.id }}" onblur="findTotal()" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}> <td><input name="quantity_{{ item.id }}" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}>
</input></td> </input></td>
{% if item.get_remaining_nb is not null %} {% if item.get_remaining_nb is not null %}
<span class="is-italic mini-title"> <span class="is-italic mini-title">
@ -167,7 +167,7 @@
<script> <script>
{% block extra_js %} {% block extra_js %}
// Compute total price whenever a value in input is modified // Compute total price whenever a value in input is modified
function findTotal(){ document.getElementById("inputs-parent").addEventListener("change", function() {
var inputs = document.getElementsByTagName("input"); var inputs = document.getElementsByTagName("input");
total_price = 0; total_price = 0;
for(let input of inputs){ for(let input of inputs){
@ -176,15 +176,12 @@ function findTotal(){
item_id = input_name.split("_")[1]; item_id = input_name.split("_")[1];
prices = {{ prices_dict | safe }}; prices = {{ prices_dict | safe }};
total_price += prices[item_id] * input.value; total_price += prices[item_id] * input.value;
console.log(prices[item_id] * input.value);
} }
} }
console.log(total_price);
console.log(document.getElementsByClassName('total'));
[].forEach.call(document.getElementsByClassName('total'), function (el) { [].forEach.call(document.getElementsByClassName('total'), function (el) {
el.innerHTML = total_price; el.innerHTML = total_price;
}) })
} });
{% endblock %} {% endblock %}
</script> </script>