Commit 76faaea2 authored by Mat's avatar Mat
Browse files

Legume/ajaxDisplay, optimisation du script, découpage en fonctions

parent c9d6c42f
......@@ -110,197 +110,22 @@
<script type="text/javascript" src="{{ asset('js/ajax_functions.js') }}"></script>
<script type="text/javascript">
let submitURL = null;
let table = document.querySelector('table#maintab.legumes');
let tbody = table.querySelector('tbody');
let total = parseInt(document.querySelector('#t_rows').textContent);
let tpage = document.querySelector('#t_pages');
let form = document.querySelector('form[name=legume]');
let titleForm = document.querySelector('#form-legume');
/*
* Recharge la table
*/
let paginate = { 'step': 10, 'page': 1, 'column': 'id', 'order': 'ASC' };
function reloadTableLegume(paginate)
{
//console.log(paginate);
tbody.innerHTML = null;
let legumeURL = Routing.generate('api_legume_read', paginate);
getTableLegume(legumeURL);
displayPagination(paginate);
refreshTableBodyLegume(legumeURL);
}
reloadTableLegume(paginate);
/*
* Recharge la table avec la fonction de recherche
*/
function reloadTableSearchLegume(qString)
{
tbody.innerHTML = null;
let searchURL = Routing.generate('api_legume_search', {'q': qString });
getTableLegume(searchURL);
removePagination();
refreshSearchStats(searchURL);
}
/*
* Construit l'affichage de la table
*/
function getTableLegume(legumeURL) {
AJAX('GET', legumeURL, function(request)
{
let json = JSON.parse(request.responseText);
//console.log(json);
for (let i = 0; i < json.length; i++)
{
let tr = document.createElement('tr');
let td1 = document.createElement('td');
td1.textContent = formatNumber(json[i].id, 3);
tr.appendChild(td1);
let td8 = document.createElement('td');
td8.innerHTML = (json[i].fruit === true) ? '<span class="badge badge-pill badge-info">F</span>' : 'L';
tr.appendChild(td8);
let td9 = document.createElement('td');
td9.innerHTML = (json[i].revente === true) ? '<span class="badge badge-pill badge-dark">R</span>' : null;
tr.appendChild(td9);
let td2 = document.createElement('td');
td2.textContent = json[i].nom;
tr.appendChild(td2);
let td3 = document.createElement('td');
td3.innerHTML = json[i].image ?
'<div class="logo-sm"><div class="crop"><img src="/web/uploads/images/legumes/'
+ json[i].image + '" /></div></div>': null;
tr.appendChild(td3);
let td4 = document.createElement('td');
td4.innerHTML =
(json[i].description ? json[i].description + '<br>' : '')
+ (json[i].origine ? '<span class="details">Origine: ' + json[i].origine + '</span><br>' : '')
+ '<span class="details">'
+ (json[i].quantite_min ? ' Min:' + json[i].quantite_min : '')
+ (json[i].quantite_max ? ' | Max:' + json[i].quantite_max : '')
+ (json[i].quantite_step ? ' | Step:' + json[i].quantite_step : '')
+ '</span>';
tr.appendChild(td4);
let td5 = document.createElement('td');
td5.textContent = json[i].prix_unitaire + '';
tr.appendChild(td5);
let td6 = document.createElement('td');
td6.textContent = json[i].unite;
tr.appendChild(td6);
let td7 = document.createElement('td');
/*
* Editer une rangée
*/
let editBtn = document.createElement('button');
editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
editBtn.classList.add('btn', 'btn-dark', 'btn-sm', 'mb-1', 'mr-1');
editBtn.dataset.legumeId = json[i].id;
editBtn.dataset.toggle = "modal";
editBtn.dataset.target = ".form-legume-modal";
editBtn.addEventListener('click', function()
{
let legumeId = this.dataset.legumeId;
submitURL = Routing.generate('api_legume_update', {'id': legumeId});
AJAX('GET', submitURL, function(request)
{
let json = JSON.parse(request.responseText);
titleForm.textContent = 'Légume # ' + json.id;
form.querySelector('#legume_nom').value = json.nom;
let legumeFruit = form.querySelector('#legume_fruit');
for(let i, j = 0; i = legumeFruit.options[j]; j++) {
if(i.value === json.fruit) {
legumeFruit.selectedIndex = j;
break;
}
}
form.querySelector('#legume_revente').value = json.revente;
form.querySelector('#legume_revente').checked = json.revente;
form.querySelector('#legume_description').value = json.description;
form.querySelector('#legume_origine').value = json.origine ? json.origine : null;
form.querySelector('#legume_quantiteMin').value = json.quantite_min ? json.quantite_min : null;
form.querySelector('#legume_quantiteMax').value = json.quantite_max ? json.quantite_max : null;
form.querySelector('#legume_quantiteStep').value = json.quantite_step ? json.quantite_step : null;
form.querySelector('#legume_unite').value = json.unite;
form.querySelector('#legume_prixUnitaire').value = json.prix_unitaire;
});
});
td7.appendChild(editBtn);
/*
* Dupliquer une rangée
*/
let copyBtn = document.createElement('button');
copyBtn.setAttribute('title', 'Dupliquer');
copyBtn.innerHTML = '<i class="fas fa-clone fa-fw"></i>';
copyBtn.classList.add('btn', 'btn-secondary', 'btn-sm', 'mb-1', 'mr-1');
copyBtn.dataset.legumeId = json[i].id;
copyBtn.addEventListener('click', function()
{
let legumeId = this.dataset.legumeId;
let r = confirm('Dupliquer la rangée n°' + legumeId
+ '\nSouhaitez-vous continuer ?\n');
if (r === true) {
submitURL = Routing.generate('api_legume_duplicate', {'id': legumeId });
AJAX('GET', submitURL, function()
{
reloadTableLegume();
});
}
});
td7.appendChild(copyBtn);
/*
* Supprimer une rangée
*/
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', 'mb-1', 'mr-1');
deleteBtn.dataset.legumeId = json[i].id;
deleteBtn.addEventListener('click', function()
{
let legumeId = this.dataset.legumeId;
let r = confirm('Effacer le légume n°' + legumeId
+ '\nCette action n\'est pas réversible. Souhaitez-vous continuer ?\n');
if (r === true) {
submitURL = Routing.generate('api_legume_delete', {'id': legumeId });
AJAX('DELETE', submitURL, function()
{
reloadTableLegume();
});
}
});
td7.appendChild(deleteBtn);
tr.appendChild(td7);
tbody.appendChild(tr);
}
});
}
/*
* Pagenav, pagination par page
* Affiche le bloc de pagination
*/
function displayPagination(paginate)
{
......@@ -336,12 +161,35 @@
}
});
}
/*
* Recharge la table avec la fonction de recherche
*/
function reloadTableSearchLegume(qString)
{
let searchURL = Routing.generate('api_legume_search', qString);
removePagination();
refreshSearchStats(searchURL);
refreshTableBodyLegume(searchURL);
}
/*
* Enlève le bloc de pagination
*/
function removePagination()
{
let pageNav = document.querySelector('nav#pagenav ul.pagination');
tpage.innerHTML = null;
pageNav.innerHTML = null;
}
/*
* Rafraîchit les stats de la page
*/
function refreshSearchStats(searchURL)
{
AJAX('GET', searchURL, function(request) {
......@@ -350,8 +198,208 @@
});
}
/*
* Rafraîchit l'affichage de la table légume
*/
function refreshTableBodyLegume(URL)
{
tbody.innerHTML = null;
AJAX('GET', URL, function(request)
{
let json = JSON.parse(request.responseText);
for (let i = 0; i < json.length; i++)
{
let tr = buildRowLegume(json[i]);
tbody.appendChild(tr);
}
});
}
/*
* Construit une rangée du tableau des Légumes
* @param json object jsonRow
*/
function buildRowLegume(jsonRow)
{
//console.log(jsonRow);
let tr = document.createElement('tr');
let td1 = document.createElement('td');
td1.textContent = formatNumber(jsonRow.id, 3);
tr.appendChild(td1);
let td8 = document.createElement('td');
td8.innerHTML = (jsonRow.fruit === true) ? '<span class="badge badge-pill badge-info">F</span>' : 'L';
tr.appendChild(td8);
let td9 = document.createElement('td');
td9.innerHTML = (jsonRow.revente === true) ? '<span class="badge badge-pill badge-dark">R</span>' : null;
tr.appendChild(td9);
let td2 = document.createElement('td');
td2.textContent = jsonRow.nom;
tr.appendChild(td2);
let td3 = document.createElement('td');
td3.innerHTML = jsonRow.image ?
'<div class="logo-sm"><div class="crop"><img src="/web/uploads/images/legumes/'
+ jsonRow.image + '" /></div></div>': null;
tr.appendChild(td3);
let td4 = document.createElement('td');
td4.innerHTML =
(jsonRow.description ? jsonRow.description + '<br>' : '')
+ (jsonRow.origine ? '<span class="details">Origine: ' + jsonRow.origine + '</span><br>' : '')
+ '<span class="details">'
+ (jsonRow.quantite_min ? ' Min:' + jsonRow.quantite_min : '')
+ (jsonRow.quantite_max ? ' | Max:' + jsonRow.quantite_max : '')
+ (jsonRow.quantite_step ? ' | Step:' + jsonRow.quantite_step : '')
+ '</span>';
tr.appendChild(td4);
let td5 = document.createElement('td');
td5.textContent = jsonRow.prix_unitaire + '';
tr.appendChild(td5);
let td6 = document.createElement('td');
td6.textContent = jsonRow.unite;
tr.appendChild(td6);
let td7 = document.createElement('td');
td7.appendChild(displayEditLegume(jsonRow));
td7.appendChild(displayDuplicateLegume(jsonRow));
td7.appendChild(displayDeleteLegume(jsonRow));
tr.appendChild(td7);
return tr;
}
/*
* Affiche un bouton pour éditer une rangée
* @param json object jsonRow
*/
function displayEditLegume(jsonRow)
{
let editBtn = document.createElement('button');
editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
editBtn.classList.add('btn', 'btn-dark', 'btn-sm', 'mb-1', 'mr-1');
editBtn.dataset.legumeId = jsonRow.id;
editBtn.dataset.toggle = "modal";
editBtn.dataset.target = ".form-legume-modal";
editBtn.addEventListener('click', function()
{
let legumeId = this.dataset.legumeId;
submitURL = Routing.generate('api_legume_update', {'id': legumeId});
AJAX('GET', submitURL, function(request)
{
let json = JSON.parse(request.responseText);
titleForm.textContent = 'Légume # ' + json.id;
form.querySelector('#legume_nom').value = json.nom;
let legumeFruit = form.querySelector('#legume_fruit');
for(let i, j = 0; i = legumeFruit.options[j]; j++) {
if(i.value === json.fruit) {
legumeFruit.selectedIndex = j;
break;
}
}
form.querySelector('#legume_revente').value = json.revente;
form.querySelector('#legume_revente').checked = json.revente;
form.querySelector('#legume_description').value = json.description;
form.querySelector('#legume_origine').value = json.origine ? json.origine : null;
form.querySelector('#legume_quantiteMin').value = json.quantite_min ? json.quantite_min : null;
form.querySelector('#legume_quantiteMax').value = json.quantite_max ? json.quantite_max : null;
form.querySelector('#legume_quantiteStep').value = json.quantite_step ? json.quantite_step : null;
form.querySelector('#legume_unite').value = json.unite;
form.querySelector('#legume_prixUnitaire').value = json.prix_unitaire;
});
});
return editBtn;
}
/*
* Affiche un bouton pour dupliquer une rangée
* @param json object jsonRow
*/
function displayDuplicateLegume(jsonRow)
{
let copyBtn = document.createElement('button');
copyBtn.setAttribute('title', 'Dupliquer');
copyBtn.innerHTML = '<i class="fas fa-clone fa-fw"></i>';
copyBtn.classList.add('btn', 'btn-secondary', 'btn-sm', 'mb-1', 'mr-1');
copyBtn.dataset.legumeId = jsonRow.id;
copyBtn.addEventListener('click', function()
{
let legumeId = this.dataset.legumeId;
let r = confirm('Dupliquer la rangée n°' + legumeId
+ '\nSouhaitez-vous continuer ?\n');
if (r === true) {
submitURL = Routing.generate('api_legume_duplicate', {'id': legumeId });
AJAX('GET', submitURL, function()
{
reloadTableLegume();
});
}
});
return copyBtn;
}
/*
* Recharger la page
* Affiche un bouton pour supprimer une rangée
* @param json object jsonRow
*/
function displayDeleteLegume(jsonRow)
{
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', 'mb-1', 'mr-1');
deleteBtn.dataset.legumeId = jsonRow.id;
deleteBtn.addEventListener('click', function () {
let legumeId = this.dataset.legumeId;
let r = confirm('Effacer le légume n°' + legumeId
+ '\nCette action n\'est pas réversible. Souhaitez-vous continuer ?\n');
if (r === true) {
submitURL = Routing.generate('api_legume_delete', {'id': legumeId});
AJAX('DELETE', submitURL, function () {
reloadTableLegume();
});
}
});
return deleteBtn;
}
/*
*
* Initialise l'affichage de la page
*/
let submitURL = null;
let table = document.querySelector('table#maintab.legumes');
let tbody = table.querySelector('tbody');
let total = parseInt(document.querySelector('#t_rows').textContent);
let tpage = document.querySelector('#t_pages');
let form = document.querySelector('form[name=legume]');
let titleForm = document.querySelector('#form-legume');
let paginate = { 'step': 10, 'page': 1, 'column': 'id', 'order': 'ASC' };
reloadTableLegume(paginate);
/*
* Bouton pour recharger la page
*/
let reloadBtns = document.querySelectorAll('.btn-reload');
reloadBtns.forEach(function(reloadBtn) {
......@@ -362,8 +410,9 @@
});
});
/*
* Ajouter une nouveau légume
* Bouton pour ajouter une nouveau légume
*/
let createBtns = document.querySelectorAll('.btn-create');
createBtns.forEach(function(createBtn) {
......@@ -399,6 +448,7 @@
form);
});
/*
* Définir le pas de la pagination
*/
......@@ -411,6 +461,7 @@
reloadTableLegume(paginate);
});
/*
* Tri par colonne, toggle
*/
......@@ -436,6 +487,7 @@
});
});
/*
* Recherche Live Ajax
*/
......@@ -443,25 +495,25 @@
let qString = null;
searchField.addEventListener('input', function()
{
qString = this.value;
if (qString.length >= 3) {
// setTimeout(function(){ }, 500);
reloadTableSearchLegume(qString);
reloadTableSearchLegume({'q': qString });
}
if (qString.length === 0) {
reloadTableLegume(paginate);
}
});
}); /*
/*
searchField.addEventListener('blur', function()
{
this.value = null;
decompte(3, function() {
reloadTableLegume(paginate);
});
}); */
});
*/
</script>
......
Supports Markdown
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