Commit cf181e2f authored by Mat's avatar Mat

formCommande: tableau qui résume les articles du panier

parent 2994cad6
<div class="col-5">
{% if app.user %}
<div class="user">
{% if app.user.utilisateur %}
<h3>{{ app.user.utilisateur.prenom }} {{ app.user.utilisateur.nom }}</h3>
{% endif %}
<p>
{% if is_granted('ROLE_SUPER_ADMIN') %}Administrateur<br>
{% elseif is_granted('ROLE_ADMIN') %}Maraîcher<br>{% else %}{% endif %}
Username: {{ app.user.username }}<br>
Email: {{ app.user.email }}<br>
{#
Dernière connexion: {{ app.user.lastLogin|date("d M Y, à H:i:s") }}
#}
</p>
</div>
{% endif %}
</div>
<div class="col-7">
{% if groupeOne is not null %}
......@@ -41,4 +21,24 @@
{% endif %}
</div>
<div class="col-5">
{% if app.user %}
<div class="user">
{% if app.user.utilisateur %}
<h3>{{ app.user.utilisateur.prenom }} {{ app.user.utilisateur.nom }}</h3>
{% endif %}
<p>
{% if is_granted('ROLE_SUPER_ADMIN') %}Administrateur<br>
{% elseif is_granted('ROLE_ADMIN') %}Maraîcher<br>{% else %}{% endif %}
Username: {{ app.user.username }}<br>
Email: {{ app.user.email }}<br>
{#
Dernière connexion: {{ app.user.lastLogin|date("d M Y, à H:i:s") }}
#}
</p>
</div>
{% endif %}
</div>
\ No newline at end of file
<h1>Légumes à la carte</h1>
<h4>Offre {{ offreOne.reference }} (#{{ offreOne.id }})</h4>
<h6 class="text-right">Expire le {{ offreOne.endedAt|date('d M Y à H:i A') }}</h6>
<div class="cartouche my-4">
<h1><i class="fas fa-shopping-bag fa-fw"></i> Légumes à la carte</h1>
<h4>Offre {{ offreOne.reference }} (#{{ offreOne.id }})</h4>
<h6 class="text-right">Expire le {{ offreOne.endedAt|date('d M Y à H:i A') }}</h6>
</div>
{# Afficher le temps restant
# https://stackoverflow.com/a/5906737
......
<div class="col-7">
{#
<table class="table table-sm table-hover">
<table id="resumeTab" class="table table-sm table-hover hidden">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
<tr>
<th scope="col">Libellé</th>
<th scope="col">Quantité</th>
<th scope="col">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<button type="submit" id="commande_sauver" name="commande[sauver]" class="btn btn-lg btn-block btn-primary mb-2"><i class="fas fa-shopping-bag fa-fw"></i> Enregistrer la commande</button>
#}
{{ form_start(formCommande) }}
<ul id="commandeLegumes">
{% for legume in formCommande.commandeLegumes %}
......@@ -46,6 +23,14 @@
</ul>
{{ form_end(formCommande) }}
<div id="astuce" class="my-4">
<p>
<span class="h1"><i class="far fa-lightbulb"></i></span>
Pour remplir votre panier, survolez les articles proposés et déplacez le curseur !
</p>
</div>
</div>
<div class="col-5">
......@@ -56,7 +41,7 @@
<small>
<i>
Le total de la commande est donné à titre indicatif.
Votre maraîcher se réserve le droit d'adapter légèrement les quantités et le prix
Votre maraîcher se réserve le droit d'adapter sensiblement les quantités et le total
en fonction des limites et de l'état du stock disponible.
</i>
</small>
......
......@@ -15,14 +15,27 @@ $("#offre div.item")
/*
* Animer les items de l'offre, et répercuter les valeurs dans le formCommande
* Animer les items de l'offre,
* afficher un tableau du panier,
* et répercuter les valeurs dans le formCommande
*
*/
let gridItems = document.querySelectorAll("div#offre .item.legume");
let unItems = [];
let libItems = [];
gridItems.forEach(function(gridItem) {
unItems.push(gridItem.querySelector("span.unite").textContent);
libItems.push(gridItem.querySelector("div.texte h5").textContent);
});
let form = document.querySelector("form.formulaire_commande");
let formItems = form.querySelectorAll("ul#commandeLegumes li.formItem");
let resumeTab = document.querySelector("table#resumeTab");
let resumeBody = resumeTab.querySelector("tbody");
let astuce = document.querySelector("div#astuce");
// parcourt la grille
gridItems.forEach(function(item)
......@@ -49,7 +62,7 @@ gridItems.forEach(function(item)
+ ' ' + unite + (unite !== 'kg' && this.value > 1 ? 's' : '')
+ ' <span class="prix">(' + prix + '€)</span>'
;
quantite.innerHTML = this.value + ' ' + unite + (unite !== 'kg' && this.value > 1 ? 's' : '');
quantite.innerHTML = ecrireLesQuantites(this.value, unite);
} else {
......@@ -64,7 +77,7 @@ gridItems.forEach(function(item)
});
// lorsqu'on relâche la souris
// lorsqu'on relâche la souris
// recalcule le total
let spanTotal = document.querySelector("span#total");
input.addEventListener('mouseup', function()
......@@ -74,13 +87,63 @@ gridItems.forEach(function(item)
total = total + parseFloat(formItem.querySelector("input[id$=prix]").value);
}
spanTotal.textContent = total.toFixed(2);
// rafraîchit le tableau des légumes
resumePanier();
});
}
});
// console.log(gridItems);
// console.log(form);
// console.log(formItems);
/*
* Ecriture des quantités en gérant le pluriel pour l'unité
*/
function ecrireLesQuantites(quantite, unite)
{
return quantite + ' ' + unite + (unite !== 'kg' && quantite > 1 ? 's' : '');
}
/*
* Tableau des articles du panier
*/
function resumePanier()
{
let qte = []; let prx = [];
// rafraîchit le tableau des prix et des quantités
for (let formItem of formItems)
{
qte.push(parseFloat(formItem.querySelector("input[id$=quantite]").value));
prx.push(parseFloat(formItem.querySelector("input[id$=prix]").value));
}
// vide le tableau des articles
resumeBody.innerHTML = null;
let cpt = 0;
// recrée le tableau des articles
for (let i = 0; i < unItems.length; i++)
{
if (qte[i] !== 0)
{
cpt++;
let row = document.createElement("tr");
row.innerHTML = '<td>' + libItems[i]
+ '</td><td>' + ecrireLesQuantites(qte[i], unItems[i])
+ '</td><td>' + prx[i] + '€</td>'
;
resumeBody.appendChild(row);
}
}
// cache le tableau si pas d'articles
if (cpt === 0) {
resumeTab.classList.add('hidden');
} else {
astuce.classList.add('hidden');
resumeTab.classList.remove('hidden');
}
}
......@@ -443,12 +443,18 @@ body[id^='today'] div.user {/*
margin: 2em 0;*/
}
input[type=range][orient=vertical]
{
input[type=range][orient=vertical] {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 100%;
padding: 0 5px;
border-radius: 3px;
}
\ No newline at end of file
}
div#astuce {
padding: 2em;
background-color: #f1f1f1;
border-radius: 10px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment