116 lines
3.1 KiB
JavaScript
116 lines
3.1 KiB
JavaScript
// ===============================
|
|
// Données simulées
|
|
// (mêmes IDs que dans la liste !)
|
|
// ===============================
|
|
const galleryPairs = [
|
|
{
|
|
id: 1,
|
|
titre: "Petit chien poils longs",
|
|
type: "Chien",
|
|
avant: "../../img/avant1.jpg",
|
|
apres: "../../img/apres1.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
titre: "Coupe ciseaux",
|
|
type: "Chat",
|
|
avant: "../../img/avant2.jpg",
|
|
apres: "../../img/apres2.jpg"
|
|
}
|
|
];
|
|
|
|
// Sélecteurs
|
|
const editForm = document.getElementById("editPairForm");
|
|
const pairIdInput = document.getElementById("pairId");
|
|
const titleInput = document.getElementById("pairTitle");
|
|
const typeSelect = document.getElementById("pairType");
|
|
const beforeInput = document.getElementById("beforeImage");
|
|
const afterInput = document.getElementById("afterImage");
|
|
const beforePreview = document.getElementById("beforePreview");
|
|
const afterPreview = document.getElementById("afterPreview");
|
|
|
|
const successMsg = document.getElementById("successMsg");
|
|
const errorMsg = document.getElementById("errorMsg");
|
|
|
|
// ===============================
|
|
// Récup ID dans l'URL
|
|
// ===============================
|
|
function getPairIdFromUrl() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const idParam = params.get("id");
|
|
|
|
if (!idParam) {
|
|
// pas d'id → retour à la liste
|
|
window.location.href = "../liste_avant_apres/liste_avant_apres.html";
|
|
return null;
|
|
}
|
|
|
|
return parseInt(idParam, 10);
|
|
}
|
|
|
|
// ===============================
|
|
// Charger la paire
|
|
// ===============================
|
|
function loadPairData() {
|
|
const id = getPairIdFromUrl();
|
|
if (!id) return;
|
|
|
|
const pair = galleryPairs.find(p => p.id === id);
|
|
|
|
if (!pair) {
|
|
errorMsg.textContent = "Paire introuvable.";
|
|
errorMsg.classList.remove("d-none");
|
|
editForm.classList.add("d-none");
|
|
return;
|
|
}
|
|
|
|
pairIdInput.value = pair.id;
|
|
titleInput.value = pair.titre;
|
|
typeSelect.value = pair.type;
|
|
beforePreview.src = pair.avant;
|
|
afterPreview.src = pair.apres;
|
|
}
|
|
|
|
// Prévisu des nouvelles images
|
|
beforeInput.addEventListener("change", function () {
|
|
const file = this.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = e => beforePreview.src = e.target.result;
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
afterInput.addEventListener("change", function () {
|
|
const file = this.files[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = e => afterPreview.src = e.target.result;
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
// Soumission
|
|
editForm.addEventListener("submit", function (e) {
|
|
e.preventDefault();
|
|
|
|
errorMsg.classList.add("d-none");
|
|
successMsg.classList.add("d-none");
|
|
|
|
if (!titleInput.value.trim()) {
|
|
errorMsg.textContent = "Le titre est obligatoire.";
|
|
errorMsg.classList.remove("d-none");
|
|
return;
|
|
}
|
|
|
|
// Ici ce serait un fetch vers l'API en vrai.
|
|
successMsg.classList.remove("d-none");
|
|
|
|
setTimeout(() => {
|
|
window.location.href = "../liste_avant_apres/liste_avant_apres.html";
|
|
}, 1500);
|
|
});
|
|
|
|
// Init
|
|
loadPairData();
|