Commit 58ca3cbe authored by Mat's avatar Mat
Browse files

templates, enrichissement de l'ergonomie

parent da6c16d3
......@@ -16,6 +16,7 @@
</div>
<span id="rebours"></span>
</form>
<a href="{{ path('potage_offre_ajax_display') }}" class="nav-laterale right text-secondary">Les offres<i class="fas fa-long-arrow-alt-right fa-fw"></i></a>
</nav>
{% endblock %}
......@@ -42,11 +43,11 @@
</div>
<div class="col right hd-1">
<div style="margin-top: 0.65em; margin-bottom: 1em;">
<a href="javascript: void(0);" class="btn btn-outline-dark btn-sm mb-2 btn-reload">
<a href="javascript: void(0);" class="btn btn-outline-dark mb-2 btn-reload">
<i class="fas fa-sync-alt"></i>
Rafraîchir la liste
</a>
<a href="javascript: void(0);" class="btn btn-dark btn-sm mb-2 btn-create" data-toggle="modal" data-target=".form-legume-modal">
<a href="javascript: void(0);" class="btn btn-dark mb-2 btn-create" data-toggle="modal" data-target=".form-legume-modal">
<i class="fas fa-plus"></i>
Ajouter un nouveau légume
</a>
......
......@@ -15,6 +15,8 @@
aria-label="LargeSearch" aria-describedby="inputGroup-sizing-sm">
</div>
</form>#}
<a href="{{ path('potage_legume_ajax_display') }}" class="nav-laterale left text-secondary"><i class="fas fa-long-arrow-alt-left fa-fw"></i>Les légumes</a>
<a href="#" class="nav-laterale right text-secondary">Les infolettres<i class="fas fa-long-arrow-alt-right fa-fw"></i></a>
</nav>
{% endblock %}
......@@ -32,7 +34,7 @@
Rafraîchir la liste
</a>
#}
<a href="javascript: void(0);" class="btn btn-dark btn-sm mb-2 btn-create"
<a href="javascript: void(0);" class="btn btn-dark mb-2 btn-create"
data-toggle="modal" data-target=".form-offre-modal">
<i class="fas fa-plus"></i>
Créer une nouvelle offre
......@@ -50,35 +52,50 @@
<div class="card">
<div class="card-body">
<h3 class="card-title"><i class="fas fa-question-circle fa-fw"></i> Info</h3>
<p class="card-text">Les offres sont d'abord <span class="badge badge-pill badge-secondary">1</span> peuplées de légumes,
puis <span class="badge badge-pill badge-secondary">2</span> mise en publication,
puis <span class="badge badge-pill badge-secondary">3</span> insérée dans une infolettre à l'attention d'un groupe.</p>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-actuel-tab" data-toggle="pill" href="#v-pills-actuel" role="tab"
aria-controls="v-pills-actuel" aria-selected="true">En ce moment</a>
<a class="nav-link" id="v-pills-archives-tab" data-toggle="pill" href="#v-pills-archives" role="tab"
aria-controls="v-pills-archives" aria-selected="false">Archives</a>
</div>
</div>
<div class="card-body border-top">
<h3 class="card-title"><i class="fas fa-question-circle fa-fw"></i> Info</h3>
<p class="card-text">Les offres sont d'abord
<span class="badge badge-secondary">1</span> peuplées de légumes, puis
<span class="badge badge-secondary">2</span> mise en publication, puis
<span class="badge badge-secondary">3</span> insérée dans une infolettre à l'attention d'un groupe.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
3 offres en cours
<li class="list-group-item d-flex justify-content-between align-items-center">
<span id="t_rows">Nombre total d'offres</span>
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Offres en cours
<span class="badge badge-primary badge-pill">3</span>
</li>
<li class="list-group-item">
<li class="list-group-item list-group-item-action {#list-group-item-warning#}">
La prochaine offre périme dans :<br>
X jours Y heures Z minutes
<span class="badge badge-primary badge-pill">3</span> jours
<span class="badge badge-primary badge-pill">12</span> heures
<span class="badge badge-primary badge-pill">56</span> minutes
</li>
<li class="list-group-item">
<span id="t_rows">Nombre total d'</span> offres
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Recevoir une alerte par mail chaque fois qu'une offre expire
</label>
</div>
</li>
<li class="list-group-item">L'heure des clôtures par défaut :
<li class="list-group-item">L'heure des clôtures :
<form id="hour_default">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group input-group-sm mb-2 mr-sm-2">
<div class="input-group input-group-sm my-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-clock"></i></div>
</div>
......@@ -87,10 +104,7 @@
</form>
</li>
</ul>
<div class="card-body">
<a href="{{ path('potage_legume_ajax_display') }}" class="card-link"><i class="fas fa-long-arrow-alt-left fa-fw"></i>Les légumes</a>
<a href="#" class="card-link">Les infolettres<i class="fas fa-long-arrow-alt-right fa-fw"></i></a>
</div>
</div>
</aside>
......@@ -103,31 +117,31 @@
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-actuel" role="tabpanel" aria-labelledby="v-pills-actuel-tab">
<h2>En préparation</h2>
<h2><i class="fas fa-angle-down fa-fw"></i> En préparation</h2>
<table id="maintab-draft" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Référence</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Statut</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<h2>En cours</h2>
<h2><i class="fas fa-angle-down fa-fw"></i> En cours</h2>
<table id="maintab-current" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Référence</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Statut</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
......@@ -135,16 +149,16 @@
</table>
</div>
<div class="tab-pane fade" id="v-pills-archives" role="tabpanel" aria-labelledby="v-pills-archives-tab">
<h2>Archives</h2>
<h2><i class="fas fa-angle-down fa-fw"></i> Archives</h2>
<table id="maintab-closed" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Référence</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Statut</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
......@@ -193,25 +207,6 @@
td1.textContent = json[i].id;
tr.appendChild(td1);
let td2 = document.createElement('td');
let refBtn = document.createElement('button');
refBtn.classList.add('btn', 'btn-outline-dark', 'btn-sm');
refBtn.textContent = json[i].reference;
td2.appendChild(refBtn);
tr.appendChild(td2);
let td3 = document.createElement('td');
td3.textContent = formatStringDate(json[i].created_at);
tr.appendChild(td3);
let td4 = document.createElement('td');
td4.textContent = formatStringDate(json[i].ended_at);
tr.appendChild(td4);
let td6 = document.createElement('td');
td6.textContent = json[i].offre_legumes.length + (json[i].offre_legumes.length > 1 ? ' légumes' : ' légume' );
tr.appendChild(td6);
let td5 = document.createElement('td');
let listStatus = {
'draft': 'En préparation',
......@@ -256,49 +251,71 @@
else {
/*
* Affiche statut
* Affiche couleur
*/
let fa;
let couleurs = {'draft': 'text-warning', 'current': 'text-success', 'closed': 'text-muted'};
for (let couleur in couleurs) {
if (json[i].status === couleur) {
fa = couleurs[couleur];
}}
td5.innerHTML = '<i class="fas fa-square '+ fa +'"></i> ' + listStatus[statut];
}}
td5.innerHTML = '<i class="fas fa-square '+ fa +' fa-fw"></i> ' + listStatus[statut];
}
/*
* Supprimer l'offre
*/
if (json[i].status === 'draft')
}
}
tr.appendChild(td5);
let td3 = document.createElement('td');
td3.textContent = formatStringDate(json[i].created_at);
tr.appendChild(td3);
let td4 = document.createElement('td');
td4.textContent = formatStringDate(json[i].ended_at);
tr.appendChild(td4);
let td6 = document.createElement('td');
td6.textContent = json[i].offre_legumes.length + (json[i].offre_legumes.length > 1 ? ' légumes' : ' légume' );
tr.appendChild(td6);
let td2 = document.createElement('td');
let refBtn = document.createElement('button');
refBtn.classList.add('btn', 'btn-outline-dark', 'btn-sm');
refBtn.textContent = json[i].reference;
td2.appendChild(refBtn);
/*
* Supprimer l'offre
*/
if (json[i].status === 'draft')
{
let deleteBtn = document.createElement('button');
deleteBtn.setAttribute('title', 'Supprimer');
deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i>';
deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm', 'ml-2', 'btn-delete');
deleteBtn.dataset.offreId = json[i].id;
deleteBtn.addEventListener('click', function()
{
let offreId = this.dataset.offreId;
let ask = confirm("Effacer l'offre n°" + offreId
+ "\nCette action n'est pas réversible. Souhaitez-vous continuer ?\n");
if (ask === true)
{
let deleteBtn = document.createElement('button');
deleteBtn.setAttribute('title', 'Supprimer');
deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i>';
deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm', 'ml-2', 'btn-delete');
deleteBtn.dataset.offreId = json[i].id;
deleteBtn.addEventListener('click', function()
{
let offreId = this.dataset.offreId;
let ask = confirm("Effacer l'offre n°" + offreId
+ "\nCette action n'est pas réversible. Souhaitez-vous continuer ?\n");
if (ask === true)
{
AJAX('DELETE',
Routing.generate('api_offre_delete', {'id': offreId }),
function() {
reloadTableOffre('draft');
}
);
AJAX('DELETE',
Routing.generate('api_offre_delete', {'id': offreId }),
function() {
reloadTableOffre('draft');
}
});
td5.appendChild(deleteBtn);
);
}
}
});
td2.appendChild(deleteBtn);
}
tr.appendChild(td5);
tr.appendChild(td2);
tbody.appendChild(tr);
}
......
......@@ -16,21 +16,39 @@ header {
height: 40px;
}
.navbar-search {
position: relative;
height: 148px;
padding: 3.1rem 1rem;
font-size: 1.2rem;
box-shadow: 0 0 5px 1px #969696 inset;
}
.navbar-search .nav-laterale {
position: absolute;
bottom: 0.3em;
}
.nav-laterale.left {
left: 0.3em;
}
.nav-laterale.right {
right: 0.3em;
}
.navbar-search .input-group {
box-shadow: 0 0 10px 0px #969696;
border-radius: 0.3rem;
}
#legume_ajax_display footer#footer,
#legume_ajax_display .navbar-search {
background: url("img/legume_background.nb.4.png") repeat 0px -16px;
background-image: url("img/legume_background.nb.4.png");
background-repeat: repeat;
background-position: 0px -16px;
}
#offre_ajax_display footer#footer,
#offre_ajax_display .navbar-search {
background: url("img/offre_background.4.png") repeat 0px -16px;
background-image: url("img/offre_background.4.png");
background-repeat: repeat;
background-position: 0px -16px;
background-size: 270px;
}
......
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