mise a jour de l'arborescence et des chemins de navigation

2025-12-09 11:57:26 +01:00
parent a6194bee38
commit 735bc334af
6 changed files with 5 additions and 5 deletions
--- a/prestations/slider/ajouter_slider/ajouter_slider.html
+++ b/prestations/slider/ajouter_slider/ajouter_slider.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ajouter 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;
+            padding: 40px;
+        }
+        .container {
+            max-width: 600px;
+        }
+    </style>
+</head>
+
+<body>
+
+<div class="container">
+    <h2 class="text-center mb-4">Ajouter une image au slider</h2>
+
+    <!-- Erreur : image manquante -->
+    <div id="errorEmpty" class="alert alert-danger d-none">
+        Merci de sélectionner une image.
+    </div>
+
+    <!-- Erreur : format invalide -->
+    <div id="errorFormat" class="alert alert-danger d-none">
+        Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
+    </div>
+
+    <!-- Succès -->
+    <div id="successMsg" class="alert alert-success d-none">
+        Slide ajouté avec succès !
+    </div>
+
+    <form id="addSlideForm">
+
+        <!-- Image -->
+        <div class="mb-3">
+            <label class="form-label fw-bold">Image du slide (obligatoire)</label>
+            <input type="file" id="slideImage" class="form-control" accept="image/*">
+        </div>
+
+        <!-- ALT -->
+        <div class="mb-3">
+            <label class="form-label fw-bold">Texte ALT (obligatoire)</label>
+            <input type="text" id="slideAlt" class="form-control" placeholder="Description de l’image">
+        </div>
+
+        <!-- Titre -->
+        <div class="mb-3">
+            <label class="form-label fw-bold">Titre (optionnel)</label>
+            <input type="text" id="slideTitle" class="form-control">
+        </div>
+
+        <!-- Boutons -->
+        <div class="d-flex gap-3 mt-4">
+            <a href="../../../slider/liste_slider/liste_slider.html" class="btn btn-secondary w-50">Annuler</a>
+            <button type="submit" class="btn btn-primary w-50">Ajouter</button>
+        </div>
+
+    </form>
+</div>
+
+<script src="ajouter_slider.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+</body>
+</html>
--- a/prestations/slider/ajouter_slider/ajouter_slider.js
+++ b/prestations/slider/ajouter_slider/ajouter_slider.js
@@ -0,0 +1,63 @@
+const form = document.getElementById('addSlideForm');
+const imgField = document.getElementById('slideImage');
+const altField = document.getElementById('slideAlt');
+const titleField = document.getElementById('slideTitle');
+
+const errorEmpty = document.getElementById('errorEmpty');
+const errorFormat = document.getElementById('errorFormat');
+const successMsg = document.getElementById('successMsg');
+
+// Création du tableau simulant la BDD
+let slides = [];
+
+form.addEventListener('submit', function (e) {
+    e.preventDefault();
+
+    // Reset messages
+    errorEmpty.classList.add('d-none');
+    errorFormat.classList.add('d-none');
+    successMsg.classList.add('d-none');
+
+    const image = imgField.files[0];
+    const alt = altField.value.trim();
+
+    // Image obligatoire
+    if (!image) {
+        errorEmpty.textContent = "Merci de sélectionner une image.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
+    // ALT obligatoire
+    if (alt === "") {
+        errorEmpty.textContent = "Le texte ALT est obligatoire.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
+    // Vérification format
+    const validFormats = ["image/jpeg", "image/png", "image/webp"];
+    if (!validFormats.includes(image.type)) {
+        errorFormat.classList.remove('d-none');
+        return;
+    }
+
+    // Enregistrement simulé
+    slides.push({
+        id: Date.now(),
+        image: image.name,
+        alt: alt,
+        title: titleField.value.trim(),
+        order: slides.length + 1
+    });
+
+    console.log("Nouveau slide ajouté :", slides);
+
+    // Succès
+    successMsg.classList.remove('d-none');
+
+    // Redirection
+    setTimeout(() => {
+        window.location.href = "../../../slider/liste_slider/liste_slider.html";
+    }, 1500);
+});