|
|
|
|
@ -1,47 +1,153 @@ |
|
|
|
|
$('#livres').Tabledit({ |
|
|
|
|
url: '/livres/tabledit', |
|
|
|
|
editButton: true, |
|
|
|
|
deleteButton: true, |
|
|
|
|
buttons: { |
|
|
|
|
edit: { |
|
|
|
|
class: 'btn btn-dark', |
|
|
|
|
html: '<span class="fa fa-edit"></span> Edit', |
|
|
|
|
action: '/livres/tabledit' |
|
|
|
|
}, |
|
|
|
|
delete: { |
|
|
|
|
class: 'btn btn-dark', |
|
|
|
|
html: '<span class="fa fa-trash"></span> Delete', |
|
|
|
|
action: 'delete' |
|
|
|
|
}, |
|
|
|
|
save: { |
|
|
|
|
class: 'btn btn-success btn-sm', |
|
|
|
|
html: '<span class="fa fa-save"></span> Save', |
|
|
|
|
action: '/livres/update' |
|
|
|
|
}, |
|
|
|
|
restore: { |
|
|
|
|
class: 'btn btn-warning', |
|
|
|
|
html: '<span class="fa fa-trash-restore"></span> Restore', |
|
|
|
|
action: 'restore' |
|
|
|
|
// supprime un livre basé sur son ID
|
|
|
|
|
function deleteLivre(id) { |
|
|
|
|
const tr = document.querySelector('tr[data-id="' + id + '"]'); |
|
|
|
|
const attributes = {}; |
|
|
|
|
tr.querySelectorAll("td").forEach((td) => { |
|
|
|
|
const name = td.dataset["name"]; |
|
|
|
|
const value = td.textContent; |
|
|
|
|
attributes[name] = value; |
|
|
|
|
}); |
|
|
|
|
let suppr = window.confirm('Êtes-vous sûr de vouloir supprimer le livre ' + attributes["titre"] + ' ?'); |
|
|
|
|
if (suppr) { |
|
|
|
|
fetch ('/livres/' + id, { |
|
|
|
|
method: 'DELETE', |
|
|
|
|
}).then(async (response) => { |
|
|
|
|
if (response.status === 200) { |
|
|
|
|
tr.parentNode.removeChild(tr); |
|
|
|
|
} else { |
|
|
|
|
const error = livre["error"]; |
|
|
|
|
alert(error); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// modifie un livre basé sur son ID
|
|
|
|
|
function editLivre(id) { |
|
|
|
|
const tr = document.querySelector('tr[data-id="' + id + '"]'); |
|
|
|
|
const attributes = {}; |
|
|
|
|
tr.querySelectorAll("td[data-name]").forEach((td) => { |
|
|
|
|
const name = td.dataset["name"]; |
|
|
|
|
const value = td.textContent; |
|
|
|
|
attributes[name] = value; |
|
|
|
|
td.removeAttribute("data-name"); |
|
|
|
|
td.textContent = ''; |
|
|
|
|
let input = document.createElement("input"); |
|
|
|
|
input.setAttribute("data-name", name); |
|
|
|
|
input.setAttribute("value", value); |
|
|
|
|
td.append(input); |
|
|
|
|
}); |
|
|
|
|
const btns = tr.querySelector('div.btn-group'); |
|
|
|
|
btns.querySelectorAll('a').forEach((a) => { |
|
|
|
|
console.info(a); |
|
|
|
|
if (a.dataset["action"] == "edit") { |
|
|
|
|
a.setAttribute("data-action", "save"); |
|
|
|
|
a.removeAttribute("onclick"); |
|
|
|
|
a.setAttribute("onclick", "saveLivre("+id+")"); |
|
|
|
|
a.textContent = "Sauver"; |
|
|
|
|
} |
|
|
|
|
if (a.dataset["action"] == "destroy") { |
|
|
|
|
a.setAttribute("data-action", "cancel"); |
|
|
|
|
a.removeAttribute("onclick"); |
|
|
|
|
a.setAttribute("onclick", "cancel("+id+")"); |
|
|
|
|
a.textContent = "Annuler"; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
console.info(tr); |
|
|
|
|
/*fetch ('/livres/' + id, { |
|
|
|
|
method: 'POST', |
|
|
|
|
headers: { |
|
|
|
|
'Accept': 'application/json', |
|
|
|
|
'Content-Type': 'application/json' |
|
|
|
|
}, |
|
|
|
|
confirm: { |
|
|
|
|
class: 'btn btn-danger btn-sm', |
|
|
|
|
html: '<span class="fa fa-check"></span> Confirm' |
|
|
|
|
body: JSON.stringify(attributes) |
|
|
|
|
})*/ |
|
|
|
|
/*.then(async (response) => { |
|
|
|
|
if (response.status === 200) { |
|
|
|
|
} else { |
|
|
|
|
const error = livre["error"]; |
|
|
|
|
alert(error); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
hideIdentifier: true, |
|
|
|
|
columns: { |
|
|
|
|
identifier: [0, 'id'], |
|
|
|
|
editable: [[1, 'titre'], [2, 'auteur'], [3, 'synopsis'], [4, 'style'], [5, 'isbn']] |
|
|
|
|
}, |
|
|
|
|
onSuccess: function(data, textStatus, jqXHR) { |
|
|
|
|
console.log('onSuccess(data, textStatus, jqXHR)'); |
|
|
|
|
console.log(data); |
|
|
|
|
console.log(textStatus); |
|
|
|
|
console.log(jqXHR); |
|
|
|
|
}, |
|
|
|
|
onAjax: function(action, serialize) { |
|
|
|
|
console.log('onAjax(action, serialize)'); |
|
|
|
|
console.log(action); |
|
|
|
|
console.log(serialize); |
|
|
|
|
} |
|
|
|
|
})*/; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// annuler la modification d’un livre
|
|
|
|
|
function cancel(id) { |
|
|
|
|
const tr = document.querySelector('tr[data-id="' + id + '"]'); |
|
|
|
|
const attributes = {}; |
|
|
|
|
tr.querySelectorAll("input[data-name]").forEach((input) => { |
|
|
|
|
const name = input.dataset["name"]; |
|
|
|
|
const value = input.value; |
|
|
|
|
const td = input.offsetParent; |
|
|
|
|
td.setAttribute("data-name", name); |
|
|
|
|
td.textContent = value; |
|
|
|
|
}); |
|
|
|
|
const btns = tr.querySelector('div.btn-group'); |
|
|
|
|
btns.querySelectorAll('a').forEach((a) => { |
|
|
|
|
if (a.dataset["action"] == "save") { |
|
|
|
|
a.setAttribute("data-action", "edit"); |
|
|
|
|
a.removeAttribute("onclick"); |
|
|
|
|
a.setAttribute("onclick", "editLivre("+id+")"); |
|
|
|
|
a.textContent = "Modifier"; |
|
|
|
|
} |
|
|
|
|
if (a.dataset["action"] == "cancel") { |
|
|
|
|
a.setAttribute("data-action", "destroy"); |
|
|
|
|
a.removeAttribute("onclick"); |
|
|
|
|
a.setAttribute("onclick", "deleteLivre("+id+")"); |
|
|
|
|
a.textContent = "Supprimer"; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// ajoute un livre
|
|
|
|
|
document.addEventListener('DOMContentLoaded', async function () { |
|
|
|
|
const table = document.querySelector("table"); |
|
|
|
|
const tbody = table.querySelector("tbody"); |
|
|
|
|
const trCreate = document.querySelector("tr.new"); |
|
|
|
|
const url = table.dataset["url"]; |
|
|
|
|
|
|
|
|
|
// ajout d’un livre
|
|
|
|
|
const createLink = document.querySelector('a[data-action="create"]'); |
|
|
|
|
createLink.addEventListener("click", async function () { |
|
|
|
|
let attributes = {}; |
|
|
|
|
trCreate.querySelectorAll("td input").forEach((input) => { |
|
|
|
|
const name = input.dataset["name"]; |
|
|
|
|
const value = input.value; |
|
|
|
|
attributes[name] = value; |
|
|
|
|
}); |
|
|
|
|
fetch (url, { |
|
|
|
|
method: "POST", |
|
|
|
|
headers: { |
|
|
|
|
'Accept': 'application/json', |
|
|
|
|
'Content-Type': 'application/json' |
|
|
|
|
}, |
|
|
|
|
body: JSON.stringify(attributes) |
|
|
|
|
}).then(async (response) => { |
|
|
|
|
response.json().then((livre) => { |
|
|
|
|
if (response.status === 200) { |
|
|
|
|
const tr = document.createElement("tr"); |
|
|
|
|
tr.dataset["id"] = livre["id"]; |
|
|
|
|
tbody.insertBefore(tr, tbody.firstChild); |
|
|
|
|
for (const name in attributes) { |
|
|
|
|
const td = document.createElement("td"); |
|
|
|
|
td.setAttribute("data-name", name); |
|
|
|
|
td.textContent = livre[name]; |
|
|
|
|
tr.appendChild(td); |
|
|
|
|
} |
|
|
|
|
let td = document.createElement("td"); |
|
|
|
|
let a = document.createElement("a", ); |
|
|
|
|
a.setAttribute("data-action", "destroy"); |
|
|
|
|
a.setAttribute("href", "#"); |
|
|
|
|
a.setAttribute("onclick", "deleteLivre(" + livre["id"] + ")"); |
|
|
|
|
a.textContent = 'Supprimer'; |
|
|
|
|
td.appendChild(a); |
|
|
|
|
tr.appendChild(td); |
|
|
|
|
} else { |
|
|
|
|
const error = livre["error"]; |
|
|
|
|
alert(error); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
Nolwenn LAVIELLE
aeris