mise a jour de l'arborescence et des chemins de navigation
This commit is contained in:
76
prestations/slider/modifier_slider/modifier_slider.html
Normal file
76
prestations/slider/modifier_slider/modifier_slider.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Modifier un slide</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #f4f6f9;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.miniature {
|
||||
width: 150px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5">Modifier une image du slider</h2>
|
||||
|
||||
<!-- Messages -->
|
||||
<div id="errorMsg" class="alert alert-danger d-none"></div>
|
||||
<div id="successMsg" class="alert alert-success d-none">Slide modifié avec succès !</div>
|
||||
|
||||
<form id="editSlideForm">
|
||||
|
||||
<!-- Image actuelle -->
|
||||
<div class="mb-5">
|
||||
<label class="form-label fw-bold">Image actuelle :</label><br>
|
||||
<img id="currentImage" src="#" alt="Image actuelle" class="miniature">
|
||||
</div>
|
||||
|
||||
<!-- Remplacer l’image -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">Nouvelle image (optionnel) :</label>
|
||||
<input type="file" id="newImage" class="form-control" accept="image/*">
|
||||
</div>
|
||||
|
||||
<!-- Texte ALT -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">Texte alternatif (obligatoire)</label>
|
||||
<input type="text" id="slideAlt" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- Titre -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">Titre du slide (optionnel)</label>
|
||||
<input type="text" id="slideTitle" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
<div class="d-flex gap-3 mt-4">
|
||||
<a href="../liste_slider/liste_slider.html" class="btn btn-secondary w-50">Annuler</a>
|
||||
<button type="submit" class="btn btn-primary w-50">Enregistrer</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="modifier_slider.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
77
prestations/slider/modifier_slider/modifier_slider.js
Normal file
77
prestations/slider/modifier_slider/modifier_slider.js
Normal file
@@ -0,0 +1,77 @@
|
||||
// Simuler la BDD slider
|
||||
let slides = [
|
||||
{ id: 1, image: "slide1.webp", alt: "Chien toiletté", title: "Promo du mois", order: 1 },
|
||||
{ id: 2, image: "slide2.webp", alt: "Avant / Après", title: "", order: 2 },
|
||||
{ id: 3, image: "slide3.webp", alt: "Coupe ciseaux", title: "Nouveauté", order: 3 }
|
||||
];
|
||||
|
||||
|
||||
const form = document.getElementById("editSlideForm");
|
||||
const currentImage = document.getElementById("currentImage");
|
||||
const newImage = document.getElementById("newImage");
|
||||
const altField = document.getElementById("slideAlt");
|
||||
const titleField = document.getElementById("slideTitle");
|
||||
|
||||
const errorMsg = document.getElementById("errorMsg");
|
||||
const successMsg = document.getElementById("successMsg");
|
||||
|
||||
// Recuperation de l'id dans l'url
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const slideId = parseInt(urlParams.get("id"));
|
||||
|
||||
// Trouver le slide correspondant
|
||||
let slide = slides.find(s => s.id === slideId);
|
||||
|
||||
if (!slide) {
|
||||
errorMsg.classList.remove("d-none");
|
||||
errorMsg.textContent = "Slide introuvable.";
|
||||
}
|
||||
|
||||
// Pré-remplir les champs
|
||||
currentImage.src = "#";
|
||||
altField.value = slide.alt;
|
||||
titleField.value = slide.title;
|
||||
|
||||
|
||||
// Validation + modification
|
||||
form.addEventListener("submit", function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
errorMsg.classList.add("d-none");
|
||||
successMsg.classList.add("d-none");
|
||||
|
||||
// Vérifier ALT obligatoire
|
||||
if (altField.value.trim() === "") {
|
||||
errorMsg.textContent = "Le texte ALT est obligatoire.";
|
||||
errorMsg.classList.remove("d-none");
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier la nouvelle image si elle existe
|
||||
if (newImage.files.length > 0) {
|
||||
const file = newImage.files[0];
|
||||
const validFormats = ["image/jpeg", "image/png", "image/webp"];
|
||||
|
||||
if (!validFormats.includes(file.type)) {
|
||||
errorMsg.textContent = "Format d'image invalide. JPG, PNG et WEBP acceptés.";
|
||||
errorMsg.classList.remove("d-none");
|
||||
return;
|
||||
}
|
||||
|
||||
// Simuler remplacement de l’image
|
||||
slide.image = file.name;
|
||||
}
|
||||
|
||||
// Mettre à jour les données
|
||||
slide.alt = altField.value.trim();
|
||||
slide.title = titleField.value.trim();
|
||||
|
||||
successMsg.classList.remove("d-none");
|
||||
|
||||
console.log("Slide modifié :", slide);
|
||||
|
||||
// Redirection après succès
|
||||
setTimeout(() => {
|
||||
window.location.href = "../liste_slider/liste_slider.html";
|
||||
}, 1500);
|
||||
});
|
||||
Reference in New Issue
Block a user