mirror of
https://framagit.org/la-chariotte/la-chariotte.git
synced 2025-05-01 19:32:26 +02:00
Fix total price when making order
This commit is contained in:
Bastien Roy
Laetitia Getti
parent
322a99d5c8
commit
7a371d1b18
1 changed files with 180 additions and 165 deletions
|
|
@ -3,185 +3,200 @@
|
|||
{% block title %}{{ grouped_order }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<p class="desktop-hidden mobile-content-title">
|
||||
{% block content_title %}{{ grouped_order }} : commander{% endblock %}
|
||||
</p>
|
||||
{% if user.is_authenticated %}
|
||||
<div class="buttons">
|
||||
<a class="button is-light" href="{% url 'order:index' %}">
|
||||
<i class="fa fa-arrow-left mr-3" aria-hidden="true"></i>Retour à mes commandes
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="box is-info">
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<p class="title">{{ grouped_order }}</p>
|
||||
{% if grouped_order.description %}<p class="formatted-text">{{ grouped_order.description }}</p>{% endif %}
|
||||
{% if not user.is_authenticated %}
|
||||
<p><span class="has-text-dark is-italic">Vous êtes l'organisateur·ice ?</span>
|
||||
<a href="{% url 'order:grouped_order_overview' grouped_order.code %}">
|
||||
Connectez-vous pour accéder à la page de gestion</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% if grouped_order.place %}
|
||||
<p><i class="fa fa-map-pin mr-3" aria-label="Lieu" title="Lieu" aria-hidden="true"></i>{{ grouped_order.place }}</p>
|
||||
{% endif %}
|
||||
<p><i class="fa fa-calendar-check-o mr-3" aria-label="Date limite de commande" title="Date limite de commande" aria-hidden="true"></i>
|
||||
Commandes avant le {{ grouped_order.deadline }}
|
||||
</p>
|
||||
<p><i class="fa fa-truck mr-3" aria-label="Date de livraison" title="Date de livraison" aria-hidden="true"></i>
|
||||
Livraison le {{ grouped_order.delivery_date }}{% if grouped_order.delivery_slot %}, {{ grouped_order.delivery_slot }}{% endif %}
|
||||
</p>
|
||||
|
||||
{% if user == grouped_order.orga %}
|
||||
<a class="button is-primary" href="{% url 'order:grouped_order_overview' grouped_order.code %}">
|
||||
<i class="fa fa-list-ul mr-3" aria-hidden="true"></i>Gestion de la commande groupée
|
||||
</a>
|
||||
{% else %}
|
||||
<p>Organisateur·ice : {{ grouped_order.orga }}</p>
|
||||
<a class="button is-light" href="mailto:{{ grouped_order.orga.username }}">Contacter l'organisateur·ice</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<!-- Boite à messages -->
|
||||
{% if not grouped_order.is_to_be_delivered %}
|
||||
<p>
|
||||
<strong>Cette commande groupée est terminée</strong>, la livraison a eu lieu le {{ grouped_order.deadline }}.
|
||||
</p>
|
||||
{% elif not grouped_order.is_open %}
|
||||
<p>
|
||||
<strong>La période de commande est terminée</strong> depuis le {{ grouped_order.deadline }}.
|
||||
{% if user == grouped_order.orga %}
|
||||
En tant qu'organisateur·ice, vous pouvez encore commander jusqu'à la date de livraison.
|
||||
{% else %}
|
||||
Si vous aviez commandé, rendez-vous le {{ grouped_order.delivery_date }} pour récupérer vos produits !
|
||||
{% endif %}
|
||||
<p class="desktop-hidden mobile-content-title">
|
||||
{% block content_title %}{{ grouped_order }} : commander{% endblock %}
|
||||
</p>
|
||||
{% if user.is_authenticated %}
|
||||
<div class="buttons">
|
||||
<a class="button is-light" href="{% url 'order:index' %}">
|
||||
<i class="fa fa-arrow-left mr-3" aria-hidden="true"></i>Retour à mes commandes
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if grouped_order.is_open or user == grouped_order.orga and grouped_order.is_to_be_delivered %}
|
||||
{% if not grouped_order.item_set.first %}
|
||||
<p>Il n'y a pas de produits disponibles dans cette commande !</p>
|
||||
{% else %}
|
||||
<p class="title">Commander</p>
|
||||
<form id="inputs-parent" method="post" action="{% url 'order:order' grouped_order.code %}">
|
||||
|
||||
<!-- Tableau de commandes - sur ordi -->
|
||||
<table class="table is-hidden-touch">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Produit</th>
|
||||
<th>Prix unitaire</th>
|
||||
<th>Quantité</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in grouped_order.item_set.all %}
|
||||
<tr>
|
||||
{% csrf_token %}
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.price }} €</td>
|
||||
<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 %}
|
||||
<span class="is-italic mini-title">
|
||||
<div class="box is-info">
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<p class="title">{{ grouped_order }}</p>
|
||||
{% if grouped_order.description %}
|
||||
<p class="formatted-text">{{ grouped_order.description }}</p>{% endif %}
|
||||
{% if not user.is_authenticated %}
|
||||
<p><span class="has-text-dark is-italic">Vous êtes l'organisateur·ice ?</span>
|
||||
<a href="{% url 'order:grouped_order_overview' grouped_order.code %}">
|
||||
Connectez-vous pour accéder à la page de gestion</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% if grouped_order.place %}
|
||||
<p><i class="fa fa-map-pin mr-3" aria-label="Lieu" title="Lieu"
|
||||
aria-hidden="true"></i>{{ grouped_order.place }}</p>
|
||||
{% endif %}
|
||||
<p><i class="fa fa-calendar-check-o mr-3" aria-label="Date limite de commande"
|
||||
title="Date limite de commande" aria-hidden="true"></i>
|
||||
Commandes avant le {{ grouped_order.deadline }}
|
||||
</p>
|
||||
<p><i class="fa fa-truck mr-3" aria-label="Date de livraison" title="Date de livraison"
|
||||
aria-hidden="true"></i>
|
||||
Livraison le {{ grouped_order.delivery_date }}{% if grouped_order.delivery_slot %},
|
||||
{{ grouped_order.delivery_slot }}{% endif %}
|
||||
</p>
|
||||
|
||||
{% if user == grouped_order.orga %}
|
||||
<a class="button is-primary" href="{% url 'order:grouped_order_overview' grouped_order.code %}">
|
||||
<i class="fa fa-list-ul mr-3" aria-hidden="true"></i>Gestion de la commande groupée
|
||||
</a>
|
||||
{% else %}
|
||||
<p>Organisateur·ice : {{ grouped_order.orga }}</p>
|
||||
<a class="button is-light" href="mailto:{{ grouped_order.orga.username }}">Contacter
|
||||
l'organisateur·ice</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<!-- Boite à messages -->
|
||||
{% if not grouped_order.is_to_be_delivered %}
|
||||
<p>
|
||||
<strong>Cette commande groupée est terminée</strong>, la livraison a eu lieu
|
||||
le {{ grouped_order.deadline }}.
|
||||
</p>
|
||||
{% elif not grouped_order.is_open %}
|
||||
<p>
|
||||
<strong>La période de commande est terminée</strong> depuis le {{ grouped_order.deadline }}.
|
||||
{% if user == grouped_order.orga %}
|
||||
En tant qu'organisateur·ice, vous pouvez encore commander jusqu'à la date de livraison.
|
||||
{% else %}
|
||||
Si vous aviez commandé, rendez-vous le {{ grouped_order.delivery_date }} pour récupérer vos produits
|
||||
!
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if grouped_order.is_open or user == grouped_order.orga and grouped_order.is_to_be_delivered %}
|
||||
{% if not grouped_order.item_set.first %}
|
||||
<p>Il n'y a pas de produits disponibles dans cette commande !</p>
|
||||
{% else %}
|
||||
<p class="title">Commander</p>
|
||||
<form id="inputs-parent" method="post" action="{% url 'order:order' grouped_order.code %}">
|
||||
|
||||
<!-- Tableau de commandes - sur ordi -->
|
||||
<table class="table is-hidden-touch">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Produit</th>
|
||||
<th>Prix unitaire</th>
|
||||
<th>Quantité</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in grouped_order.item_set.all %}
|
||||
<tr>
|
||||
{% csrf_token %}
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.price }} €</td>
|
||||
<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 %}
|
||||
<span class="is-italic mini-title">
|
||||
{% if item.get_remaining_nb == 0 %}Produit épuisé
|
||||
{% else %}
|
||||
{{ item.get_remaining_nb }} {% if item.get_remaining_nb == 1 %}disponible{% else %}disponibles{% endif %}</span>
|
||||
{{ item.get_remaining_nb }} {% if item.get_remaining_nb == 1 %}disponible{% else %}disponibles
|
||||
{% endif %}</span>
|
||||
{% endif %}{% endif %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<td></td><td></td>
|
||||
<td><strong>Total : <span class="total">0</span> €</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td><strong>Total : <span class="total">0</span> €</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Tableau de commandes - sur mobile et tablette -->
|
||||
<div class="is-hidden-desktop">
|
||||
{% for item in grouped_order.item_set.all %}
|
||||
<div class="card mb-4 is-info">
|
||||
<div class="card-header has-background-info">
|
||||
<p class="card-header-title">{{ item.name }}</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<p class="mini-title">Prix unitaire</p>
|
||||
<p>{{ item.price }} €</p>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<td><input name="quantity_{{ item.id }}" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}>
|
||||
</input></td>
|
||||
{% if item.get_remaining_nb is not null %}
|
||||
<span class="is-italic mini-title">
|
||||
<!-- Tableau de commandes - sur mobile et tablette -->
|
||||
<div class="is-hidden-desktop">
|
||||
{% for item in grouped_order.item_set.all %}
|
||||
<div class="card mb-4 is-info">
|
||||
<div class="card-header has-background-info">
|
||||
<p class="card-header-title">{{ item.name }}</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<p class="mini-title">Prix unitaire</p>
|
||||
<p>{{ item.price }} €</p>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<td><input name="quantity_{{ item.id }}" size="4" type="number" value="0"
|
||||
min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}>
|
||||
</input></td>
|
||||
{% if item.get_remaining_nb is not null %}
|
||||
<span class="is-italic mini-title">
|
||||
{% if item.get_remaining_nb == 0 %}Produit épuisé
|
||||
{% else %}
|
||||
{{ item.get_remaining_nb }} {% if item.get_remaining_nb == 1 %}disponible{% else %}disponibles{% endif %}</span>
|
||||
{{ item.get_remaining_nb }} {% if item.get_remaining_nb == 1 %}disponible{% else %}disponibles
|
||||
{% endif %}</span>
|
||||
{% endif %}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div><strong>Total : <span class="total">0</span> €</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div><strong>Total : <span class="total">0</span> €</strong></div>
|
||||
</div>
|
||||
|
||||
{% if error_message %}<p class="has-text-danger">{{ error_message }}</p>{% endif %}
|
||||
{% comment %} The value attribute is used when the form is redered with error messages,
|
||||
{% if error_message %}<p class="has-text-danger">{{ error_message }}</p>{% endif %}
|
||||
{% comment %} The value attribute is used when the form is redered with error messages,
|
||||
in order not to loose entered values {% endcomment %}
|
||||
<br>
|
||||
<p class="subtitle">Vos informations</p>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p><label for="first_name">Prénom : </label>
|
||||
<input id="first_name" type="text" name="first_name" placeholder="Votre prénom" value="{{ author.first_name }}" required></p>
|
||||
<p><label for="first_name">Nom : </label>
|
||||
<input id="last_name" type="text" name="last_name" placeholder="Votre nom" value="{{ author.last_name }}" required></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p><label for="phone">Numéro de téléphone :</label>
|
||||
<input id="phone" type="tel" pattern="[0-9]{10}" placeholder="0601020304" name="phone" value="{{ author.phone }}" required></p>
|
||||
<p><label for="email">Adresse mail : </label>
|
||||
<input id="email" type="email" placeholder="exemple@mail.fr" name="email" value="{{ author.email }}" required></p>
|
||||
</div>
|
||||
</div>
|
||||
<p><label for="note">Note à l'organisateur·ice</label>
|
||||
<textarea id="note" rows=3 placeholder="(facultatif)" name="note">{{ note }}</textarea></p>
|
||||
<br>
|
||||
<p class="subtitle">Vos informations</p>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p><label for="first_name">Prénom : </label>
|
||||
<input id="first_name" type="text" name="first_name" placeholder="Votre prénom"
|
||||
value="{{ author.first_name }}" required></p>
|
||||
<p><label for="first_name">Nom : </label>
|
||||
<input id="last_name" type="text" name="last_name" placeholder="Votre nom"
|
||||
value="{{ author.last_name }}" required></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p><label for="phone">Numéro de téléphone :</label>
|
||||
<input id="phone" type="tel" pattern="[0-9]{10}" placeholder="0601020304" name="phone"
|
||||
value="{{ author.phone }}" required></p>
|
||||
<p><label for="email">Adresse mail : </label>
|
||||
<input id="email" type="email" placeholder="exemple@mail.fr" name="email"
|
||||
value="{{ author.email }}" required></p>
|
||||
</div>
|
||||
</div>
|
||||
<p><label for="note">Note à l'organisateur·ice</label>
|
||||
<textarea id="note" rows=3 placeholder="(facultatif)" name="note">{{ note }}</textarea></p>
|
||||
|
||||
<div class="buttons">
|
||||
<button type="submit" value="Order" class="button is-primary">
|
||||
<i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Commander
|
||||
</button>
|
||||
<p>Total : <span class="total">0</span> €</p>
|
||||
<div class="buttons">
|
||||
<button type="submit" value="Order" class="button is-primary">
|
||||
<i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Commander
|
||||
</button>
|
||||
<p>Total : <span class="total">0</span> €</p>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<script>
|
||||
{% block extra_js %}
|
||||
// Compute total price whenever a value in input is modified
|
||||
document.getElementById("inputs-parent").addEventListener("change", function() {
|
||||
var inputs = document.getElementsByTagName("input");
|
||||
total_price = 0;
|
||||
for(let input of inputs){
|
||||
input_name = input.getAttribute("name");
|
||||
if(input_name.indexOf("quantity_")==0){ // get the quantities inputs only
|
||||
item_id = input_name.split("_")[1];
|
||||
prices = {{ prices_dict | safe }};
|
||||
total_price += prices[item_id] * input.value;
|
||||
}
|
||||
}
|
||||
|
||||
[].forEach.call(document.getElementsByClassName('total'), function (el) {
|
||||
el.innerHTML = total_price;
|
||||
})
|
||||
});
|
||||
{% endblock %}
|
||||
{% block extra_js %}
|
||||
// Compute total price whenever a value in input is modified
|
||||
document.getElementById("inputs-parent").addEventListener("change", function () {
|
||||
var inputs = [...document.getElementsByTagName("input")].filter(input => input.getAttribute("name").indexOf("quantity_") === 0); //filter the inputs to get the quantity inputs only
|
||||
total_price = 0;
|
||||
for (let input of inputs) {
|
||||
input_name = input.getAttribute("name");
|
||||
item_id = input_name.split("_")[1];
|
||||
prices = {{ prices_dict | safe }};
|
||||
total_price = Number((total_price + Number((prices[item_id] * input.value).toFixed(2))).toFixed(2)); //Limit precision to 2 digits for each added part and for the total
|
||||
}
|
||||
|
||||
[].forEach.call(document.getElementsByClassName('total'), function (el) {
|
||||
el.innerHTML = total_price;
|
||||
})
|
||||
});
|
||||
{% endblock %}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue