ileauchiens/maquette_backoffice
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:avant apres+media queries+modale de suppression

Browse Source
This commit is contained in:
RoxanaElena09
2025-12-10 09:44:44 +01:00
parent 4f85fe3250
commit 9a8891fc9d
7 changed files with 365 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
prestations/js/ajouter_avant_apres.js
View File

@@ -30,13 +30,48 @@ const afterPreview = document.getElementById("afterPreview");
const successMsg = document.getElementById("successMsg");
const errorMsg = document.getElementById("errorMsg");
const errorFormat = document.getElementById("errorFormat");
// Formats autorisés
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
// ===============================
// Prévisualisation images
// Fonctions utilitaires
// ===============================
function hideMessages() {
successMsg.classList.add("d-none");
errorMsg.classList.add("d-none");
errorFormat.classList.add("d-none");
}
function isValidFormat(file) {
if (!file) return false;
return allowedTypes.includes(file.type);
}
// ===============================
// Prévisualisation image AVANT
// + contrôle du format
// ===============================
beforeInput.addEventListener("change", function () {
hideMessages();
const file = this.files[0];
if (!file) return;
if (!file) {
beforePreview.style.display = "none";
beforePreview.src = "#";
return;
}
// Vérif format
if (!isValidFormat(file)) {
errorFormat.classList.remove("d-none");
this.value = ""; // reset le champ
beforePreview.style.display = "none";
beforePreview.src = "#";
return;
}
const reader = new FileReader();
reader.onload = e => {
@@ -46,9 +81,29 @@ beforeInput.addEventListener("change", function () {
reader.readAsDataURL(file);
});
// ===============================
// Prévisualisation image APRÈS
// + contrôle du format
// ===============================
afterInput.addEventListener("change", function () {
hideMessages();
const file = this.files[0];
if (!file) return;
if (!file) {
afterPreview.style.display = "none";
afterPreview.src = "#";
return;
}
// Vérif format
if (!isValidFormat(file)) {
errorFormat.classList.remove("d-none");
this.value = ""; // reset le champ
afterPreview.style.display = "none";
afterPreview.src = "#";
return;
}
const reader = new FileReader();
reader.onload = e => {
@@ -64,23 +119,35 @@ afterInput.addEventListener("change", function () {
form.addEventListener("submit", function (e) {
e.preventDefault();
// Reset messages
errorMsg.classList.add("d-none");
successMsg.classList.add("d-none");
hideMessages();
// Validation simple
if (!titleInput.value.trim() || !typeInput.value.trim() || !beforeInput.files[0] || !afterInput.files[0]) {
// Champs obligatoires
if (
!titleInput.value.trim() ||
!typeInput.value.trim() ||
!beforeInput.files[0] ||
!afterInput.files[0]
) {
errorMsg.classList.remove("d-none");
return;
}
const beforeFile = beforeInput.files[0];
const afterFile = afterInput.files[0];
// Vérification format des deux images
if (!isValidFormat(beforeFile) || !isValidFormat(afterFile)) {
errorFormat.classList.remove("d-none");
return;
}
// Nouvelle entrée (simulation)
const newPair = {
id: galleryPairs.length + 1,
titre: titleInput.value.trim(),
type: typeInput.value.trim(),
avant: URL.createObjectURL(beforeInput.files[0]),
apres: URL.createObjectURL(afterInput.files[0])
avant: URL.createObjectURL(beforeFile),
apres: URL.createObjectURL(afterFile)
};
galleryPairs.push(newPair);

67
prestations/js/liste_avant_apres.js
View File

@@ -22,6 +22,14 @@ let galleryPairs = [
const tableBody = document.getElementById("prestationTableBody");
const succesDeleteMsg = document.getElementById("succesDeleteMsg");
// Modal & bouton de confirmation
const deleteModalEl = document.getElementById("deleteModal");
const confirmDeleteBtn = document.getElementById("confirmDeleteBtn");
const deleteModal = new bootstrap.Modal(deleteModalEl);
// ID de la paire en attente de suppression
let pairIdToDelete = null;
// ===============================
// Fonction d'affichage
// ===============================
@@ -36,27 +44,33 @@ function displayPairs() {
<td>${pair.type}</td>
<td>
<img src="${pair.avant}" width="80" class="rounded">
<img src="${pair.avant}" class="img-thumbnail" style="max-width: 80px;">
</td>
<td>
<img src="${pair.apres}" width="80" class="rounded">
<img src="${pair.apres}" class="img-thumbnail" style="max-width: 80px;">
</td>
<td class="text-center action-btns">
<td class="text-center text-md-start">
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-start gap-2">
<!-- Bouton Voir -->
<a href="../voir_avant_apres/voir_avant_apres.html?id=${pair.id}"
class="btn btn-info btn-sm">Voir</a>
<!-- Bouton Voir -->
<a href="../voir_avant_apres/voir_avant_apres.html?id=${pair.id}"
class="btn btn-info btn-sm">
Voir
</a>
<!-- Bouton Modifier -->
<a href="../modifier_avant_apres/modifier_avant_apres.html?id=${pair.id}"
class="btn btn-warning btn-sm">Modifier</a>
<!-- Bouton Modifier -->
<a href="../modifier_avant_apres/modifier_avant_apres.html?id=${pair.id}"
class="btn btn-warning btn-sm">
Modifier
</a>
<!-- Bouton Supprimer -->
<button class="btn btn-danger btn-sm" onclick="deletePair(${pair.id})">
Supprimer
</button>
<!-- Bouton Supprimer -->
<button class="btn btn-danger btn-sm" onclick="openDeleteModal(${pair.id})">
Supprimer
</button>
</div>
</td>
`;
@@ -65,26 +79,39 @@ function displayPairs() {
}
// ===============================
// Fonction de suppression
// Ouvrir le modal de suppression
// ===============================
function openDeleteModal(id) {
pairIdToDelete = id; // on mémorise l'id
deleteModal.show(); // on ouvre le modal
}
// ===============================
// Fonction de suppression réelle
// ===============================
function deletePair(id) {
if (!confirm("Voulez-vous vraiment supprimer cette paire ?")) {
return;
}
galleryPairs = galleryPairs.filter(pair => pair.id !== id);
displayPairs();
succesDeleteMsg.classList.remove("d-none");
// Disparaît après 2 secondes
setTimeout(() => {
succesDeleteMsg.classList.add("d-none");
}, 2000);
}
// ===============================
// Clic sur "Supprimer" dans le modal
// ===============================
confirmDeleteBtn.addEventListener("click", () => {
if (pairIdToDelete !== null) {
deletePair(pairIdToDelete);
pairIdToDelete = null;
}
deleteModal.hide();
});
// ===============================
// Chargement initial
// ===============================
displayPairs();

54
prestations/js/modifier_avant_apres.js
View File

@@ -19,6 +19,11 @@ const galleryPairs = [
}
];
// ===============================
// Formats d'images autorisés
// ===============================
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
// Sélecteurs
const editForm = document.getElementById("editPairForm");
const pairIdInput = document.getElementById("pairId");
@@ -31,6 +36,7 @@ const afterPreview = document.getElementById("afterPreview");
const successMsg = document.getElementById("successMsg");
const errorMsg = document.getElementById("errorMsg");
const errorFormat = document.getElementById("errorFormat");
// ===============================
// Récup ID dans l'URL
@@ -71,23 +77,39 @@ function loadPairData() {
afterPreview.src = pair.apres;
}
// Prévisu des nouvelles images
beforeInput.addEventListener("change", function () {
const file = this.files[0];
// ===============================
// Gestion du changement d'image
// ===============================
function handleImageChange(inputEl, previewEl) {
const file = inputEl.files[0];
if (!file) return;
// Vérification format
if (!allowedTypes.includes(file.type)) {
// Format non autorisé
errorFormat.classList.remove("d-none");
inputEl.value = ""; // reset du champ
previewEl.src = ""; // reset de la prévisu
return;
}
// Format OK → on cache le message d'erreur
errorFormat.classList.add("d-none");
const reader = new FileReader();
reader.onload = e => beforePreview.src = e.target.result;
reader.onload = e => {
previewEl.src = e.target.result;
};
reader.readAsDataURL(file);
}
// Prévisu des nouvelles images + contrôle format
beforeInput.addEventListener("change", function () {
handleImageChange(beforeInput, beforePreview);
});
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);
handleImageChange(afterInput, afterPreview);
});
// Soumission
@@ -96,6 +118,7 @@ editForm.addEventListener("submit", function (e) {
errorMsg.classList.add("d-none");
successMsg.classList.add("d-none");
errorFormat.classList.add("d-none");
if (!titleInput.value.trim()) {
errorMsg.textContent = "Le titre est obligatoire.";
@@ -103,7 +126,16 @@ editForm.addEventListener("submit", function (e) {
return;
}
// Ici ce serait un fetch vers l'API en vrai.
// Double check format côté submit (au cas où)
const filesToCheck = [beforeInput.files[0], afterInput.files[0]];
for (const file of filesToCheck) {
if (!file || !allowedTypes.includes(file.type)) {
errorFormat.classList.remove("d-none");
return;
}
}
successMsg.classList.remove("d-none");
setTimeout(() => {