Compare commits

25 Commits
david ... main

Author SHA1 Message Date
75abb10913 validation HTML 2025-12-13 07:45:59 +01:00
6de5eb546e FAQ + TinyMCE globale 2025-12-12 22:39:03 +01:00
a220868c03 Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffi
vendredi 12 au soir
2025-12-12 20:59:09 +01:00
ben
da0dfdc8c7 nettoyage de doucmentation 2025-12-12 17:09:55 +01:00
ben
e37b8c4c7d modifier presta: DOM message + header + chemins. W3C éffectué sur les 3pages commité 2025-12-12 17:03:35 +01:00
ben
946bda115a ajouter slider : DOM message + header + chemins 2025-12-12 16:49:50 +01:00
ben
248bc80da5 Ajouter prestation : DOM message + mise ne place du header+fichier style css prestation 2025-12-12 16:34:45 +01:00
ben
f72b6e9337 mise a jour du dom ajouter catégorie 2025-12-12 15:32:17 +01:00
e40317e726 Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice 2025-12-12 15:06:08 +01:00
dbd1ccee68 script delete 2025-12-12 15:02:57 +01:00
ben
b140b6a4ec Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice 2025-12-12 14:43:16 +01:00
ben
4fe4facd32 mise a jour du Dom de ajouter article et modifier article 2025-12-12 14:38:43 +01:00
f02c69449a feat:creation dossier components 2025-12-12 11:28:09 +01:00
b77f82f216 ups modif prestations accueil 2025-12-12 10:00:08 +01:00
a0ef8c98c9 feat: ajouter une carte 2025-12-12 09:46:52 +01:00
47a1243464 feat: ajouter une categorie mb-4 mt-3 2025-12-12 09:46:01 +01:00
374334de44 feat:modification page prestation 2025-12-12 09:43:17 +01:00
ben
5d86176a97 nettoyage du 12 décembre 2025-12-12 09:35:34 +01:00
f4b7254223 Merge branch 'main' into david 2025-12-12 09:27:16 +01:00
7cebda02ee Merge branch 'main' into david
integration du citations
2025-12-12 09:24:59 +01:00
ce04d847f6 feat:corrections 2025-12-12 09:17:09 +01:00
41d739df95 feat:creation delete-composant.html et delete-composant.js 2025-12-12 08:43:43 +01:00
c7aaa923af feat: creation header composant html et js 2025-12-12 08:43:43 +01:00
c976d4666b Merge avec conservation de ma version locale 2025-12-11 22:29:54 +01:00
55c3b2d050 Merge branch 'david' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice 2025-12-10 18:13:29 +01:00
44 changed files with 2137 additions and 1799 deletions

View File

@@ -4,22 +4,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter un article</title> <title>Ajouter un article</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/fr.js"></script>
<link rel="stylesheet" href="../../css/blog.css"> <link rel="stylesheet" href="../../css/blog.css">
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<style>
</style>
</head> </head>
<body> <body>
<!-- HEADER -->
<header> <header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm"> <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center"> <div class="container-fluid align-items-center">
@@ -72,82 +64,62 @@
</nav> </nav>
</header> </header>
<div class="container"> <div class="container mt-5">
<h2 class="mb-5 text-center">Ajouter un article</h2> <h2 class="mb-5 text-center">Ajouter un article</h2>
<form id="ajouterArticleForm"> <form id="ajouterArticleForm">
<!--Erreur titre vide--> <div id="messages" class="mb-3"></div>
<div id="errorEmpty" class="alert alert-danger d-none">Le titre de l'article est obligatoire</div>
<!--Erreur image invalide-->
<div id="errorImage" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG
</div>
<!--Erreur titre existant-->
<div id="errorExists" class="alert alert-danger d-none">Ce titre existe déjà. Choisissez un autre titre.</div>
<!--Succès ajout article-->
<div id="successMsg" class="alert alert-success d-none">Article ajouté avec succès !</div>
<!-- Catégorie --> <!-- Catégorie -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Catégorie de l'article (obligatoire)</label> <label class="form-label fw-bold">Catégorie *</label>
<select id="articleCategory" class="form-select" required> <select id="articleCategory" class="form-select">
<option value="" disabled selected>Choisissez une catégorie</option> <option value="">Choisissez une catégorie</option>
<option value="actualités">Actualités</option> <option value="actualités">Actualités</option>
<option value="chien">Chien</option> <option value="chien">Chien</option>
<option value="chat">Chat</option> <option value="chat">Chat</option>
<option value="boutique">Boutique</option> <option value="boutique">Boutique</option>
</select> </select>
</div>
<!-- Titre -->
<div class="mb-4">
<label class="form-label fw-bold">Titre de l'article (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article">
</div>
<!-- Contenu -->
<div class="mb-3">
<label class="form-label fw-bold">Contenu de l'article</label>
<textarea id="articleContent" class="form-control" rows="5" placeholder="Entrez le contenu de l'article"></textarea>
</div>
<!-- Image -->
<div class="mb-4">
<label class="form-label fw-bold">Image de l'article</label>
<input type="file" id="articleImage" class="form-control" accept="image/*">
</div>
<!--Publié-->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label" for="articlePublished">Publié (sera publié sur le facebook)</label>
</div> </div>
<!-- Titre -->
<div class="mb-4">
<label class="form-label fw-bold">Titre *</label>
<input type="text" id="articleTitle" class="form-control">
</div>
<!--Boutons--> <!-- Contenu -->
<div class="mb-3">
<label class="form-label fw-bold">Contenu</label>
<textarea id="articleContent"></textarea>
</div>
<!-- Image -->
<div class="mb-4">
<label class="form-label fw-bold">Image</label>
<input type="file" id="articleImage" class="form-control">
</div>
<!-- Publié -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label">Publié</label>
</div>
<!-- Boutons -->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a> <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
</div> </div>
<script src="../js/ajouter_article.js"></script> <script src="../js/ajouter_article.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script> <script>
tinymce.init({ tinymce.init({
selector: '#articleContent', selector: '#articleContent',
height: 400, height: 400,
@@ -157,10 +129,5 @@ tinymce.init({
}); });
</script> </script>
</body> </body>
</html> </html>

View File

@@ -4,22 +4,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une catégorie</title> <title>Ajouter une catégorie</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/blog.css">
<style>
body{
background: #f4f6f981;
}
.container{
margin-top: 50px;
}
</style>
</head> </head>
<body> <body>
<!-- HEADER -->
<header> <header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm"> <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center"> <div class="container-fluid align-items-center">
@@ -72,28 +61,31 @@
</nav> </nav>
</header> </header>
<div class="container"> <div class="container">
<h2 class="mb-5 text-center">Ajouter une catégorie</h2> <h2 class="mb-5 text-center">Ajouter une catégorie</h2>
<!--Erreur champ vide -->
<div id="errorEmpty" class="alert alert-danger d-none">Le nom de catégorie est obligatoire.</div>
<!--Erreur nom deja existant --> <div id="messages" class="mb-3"></div>
<div id="errorExists" class="alert alert-danger d-none">Cette catégorie existe déjà. Veuillez en choisir une autre.</div>
<!--Succès ajout catégorie -->
<div id="successMessage" class="alert alert-success d-none">Catégorie ajoutée avec succès !</div>
<form id="addCategoryForm"> <form id="addCategoryForm">
<div class="mb-4"> <div class="mb-4">
<label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label> <label class="form-label fw-bold">Nom de la catégorie *</label>
<input type="text" id="categoryName" class="form-control" placeholder="Actualité, chien, chat .." required></div> <input
type="text"
id="categoryName"
class="form-control"
placeholder="Actualité, chien, chat…">
</div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Description</label> <label class="form-label fw-bold">Description</label>
<textarea id="categoryDescription" class="form-control" rows="4" placeholder="Entrez une description (optionnel)"></textarea> <textarea
id="categoryDescription"
class="form-control"
rows="4"
placeholder="Entrez une description (optionnel)">
</textarea>
</div> </div>
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
@@ -101,10 +93,10 @@
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
</div> </div>
<script src="../js/ajouter_categorie.js"></script> <script src="../js/ajouter_categorie.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

View File

@@ -4,32 +4,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un article</title> <title>Modifier un article</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script> <link rel="stylesheet" href="../../css/blog.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/fr.js"></script> <script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
body {
background: #f4f6f9;
}
.container {
margin-top: 40px;
}
.preview-img {
max-width: 15px;
border-radius: 8px
}
.ck-editor__editable {
min-height: 350px;
}
</style>
</head> </head>
<body> <body>
<!-- HEADER -->
<header> <header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm"> <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center"> <div class="container-fluid align-items-center">
@@ -82,107 +66,79 @@
</nav> </nav>
</header> </header>
<div class="container"> <div class="container">
<h2 class="mb-4 text-center">Modifier un article</h2> <h2 class="mb-4 text-center">Modifier un article</h2>
<!--Erreur titre vide-->
<div id="errorEmpty" class="alert alert-danger d-none">
g Le titre de l'article est obligatoire.
</div>
<!--Erreur image invalide--> <div id="messages" class="mb-3"></div>
<div id="errorImage" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG, GIF.
</div>
<!--Erreur titre existant-->
<div id="errorExists" class="alert alert-danger d-none">
Ce titre existe déjà. Veuillez en choisir un autre.
</div>
<!--Succès-->
<div id="successMsg" class="alert alert-success d-none">
L'article a été modifié avec succès !
</div>
<!-- Formulaire -->
<form id="editArticleForm"> <form id="editArticleForm">
<!-- Titre -->
<!--Titre-->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Titre de l'article (obligatoire)</label> <label class="form-label fw-bold">Titre *</label>
<input type="text" id="articleTitle" class="form-control" value="Titre de l'article actuel" placeholder="Modifier le titre"> <input type="text" id="articleTitle" class="form-control">
</div> </div>
<!--Contenu--> <!-- Contenu -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Contenu de l'article</label> <label class="form-label fw-bold">Contenu</label>
<textarea id="articleContent" class="form-control" rows="5">Contenu de l'article actuel...</textarea> <textarea id="articleContent"></textarea>
</div> </div>
<!--Catégorie--> <!-- Catégorie -->
<div class="mb-4"> <div class="mb-4">
<label class="form-label fw-bold">Catégorie de l'article</label> <label class="form-label fw-bold">Catégorie</label>
<input <input type="text" id="articleCategory" class="form-control" list="categories">
type="text"
id="articleCategory"
class="form-control"
list="categories"
placeholder="Entrez une catégorie">
<datalist id="categories"> <datalist id="categories">
<option value="actualités"> <option value="actualités">
<option value="chien"> <option value="chien">
<option value="chat"> <option value="chat">
<option value="boutique"> <option value="boutique">
</datalist> </datalist>
</div> </div>
<!-- Image actuelle --> <!-- Image -->
<label class="fw-bold">Image actuelle</label>
<div class="mb-4"> <div class="mb-4">
<img src="/blog/categories/images/article1.jpg" alt="Image actuelle" class="preview-img mb-2"> <label class="fw-bold">Image actuelle</label>
<input type="file" id="articleImage" class="form-control" accept="image/*"> <div>
<img id="imagePreview" class="preview-img mb-2 d-none" alt="apercu image">
<input type="file" id="articleImage" class="form-control">
</div>
</div> </div>
<!--Publié--> <!-- Publié -->
<div class="form-check mb-3"> <div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished" checked> <input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label">Publié (sera publié sur facebook)</label> <label class="form-check-label">Publié (sera publié sur facebook)</label>
</div> </div>
<!--Boutons--> <!-- Boutons -->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../blog/html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a> <a href="../../blog/html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Enregistrer</button> <button type="submit" class="btn btn-primary w-50">Enregistrer</button>
</div> </div>
</form> </form>
</div> </div>
<script>
ClassicEditor
.create(document.querySelector('#articleContent'), {
language: 'fr',
toolbar: [
'heading',
'bold', 'italic', 'underline',
'bulletedList', 'numberedList',
'undo', 'redo'
]
})
</script>
<script src="../js/modifier_article.js"></script> <script src="../js/modifier_article.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
tinymce.init({
selector: "#articleContent",
height: 400,
language: "fr",
plugins: "lists fullscreen",
toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen",
branding: false,
promotion: false,
menubar: false
});
</script>
</body> </body>
</html> </html>

View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une catégorie</title> <title>Modifier une catégorie</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/blog.css"> <link rel="stylesheet" href="../../css/blog.css">

View File

@@ -1,106 +1,110 @@
const form = document.getElementById('ajouterArticleForm'); const form = document.getElementById("ajouterArticleForm");
const imgField = document.getElementById('articleImage'); const messages = document.getElementById("messages");
const titleField = document.getElementById('articleTitle');
const categoryField = document.getElementById('articleCategory');
const publishedField = document.getElementById('articlePublished');
const errorEmpty = document.getElementById('errorEmpty'); const imgField = document.getElementById("articleImage");
const errorImage = document.getElementById('errorImage'); const titleField = document.getElementById("articleTitle");
const errorExists = document.getElementById('errorExists'); const categoryField = document.getElementById("articleCategory");
const successMsg = document.getElementById('successMsg'); const publishedField = document.getElementById("articlePublished");
// Simulation BDD // Simulation BDD
const titreExistants = ['décoration noel', 'coupe de chien']; const titresExistants = ["décoration noel", "coupe de chien"];
form.addEventListener('submit', function(e) {
function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
function imageValide(file) {
if (!file) return true;
return ["image/jpeg", "image/png"].includes(file.type);
}
form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
const titre = titleField.value.trim().toLowerCase(); const titre = titleField.value.trim();
const fichierImage = imgField.files[0]; const titreLower = titre.toLowerCase();
const contenu = tinymce.get("articleContent").getContent(); const contenu = tinymce.get("articleContent").getContent().trim();
const categorie = categoryField.value; const categorie = categoryField.value;
const published = publishedField.checked; // récupère la case cochée const image = imgField.files[0];
const published = publishedField.checked;
// Reset messages
errorEmpty.classList.add('d-none');
errorImage.classList.add('d-none');
errorExists.classList.add('d-none');
successMsg.classList.add('d-none');
// Catégorie obligatoire // Catégorie obligatoire
if (categorie === "") { if (!categorie) {
errorEmpty.textContent = "Veuillez choisir une catégorie."; showMessage("danger", "Veuillez choisir une catégorie.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// Titre obligatoire // Titre obligatoire
if (titre === "") { if (!titre) {
errorEmpty.textContent = "Le titre de l'article est obligatoire."; showMessage("danger", "Le titre de l'article est obligatoire.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// Titre déjà existant // Titre existant
if (titreExistants.includes(titre)) { if (titresExistants.includes(titreLower)) {
errorExists.classList.remove('d-none'); showMessage("danger", "Ce titre existe déjà. Choisissez-en un autre.");
return; return;
} }
// Contenu obligatoire // Contenu obligatoire
if (contenu.trim() === "") { if (!contenu) {
errorEmpty.textContent = "Le contenu de l'article ne peut pas être vide."; showMessage("danger", "Le contenu de l'article ne peut pas être vide.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// Image invalide // Image valide
if (fichierImage) { if (!imageValide(image)) {
const validFormats = ['image/jpeg', 'image/png']; showMessage("danger", "Format d'image invalide. JPG ou PNG uniquement.");
if (!validFormats.includes(fichierImage.type)) {
errorImage.classList.remove('d-none');
return; return;
} }
}
// Simuler enregistrement // Enregistrement titre simulé
titreExistants.push(titre); titresExistants.push(titreLower);
// CRÉATION DE L'ARTICLE
// Création article
const nouvelArticle = { const nouvelArticle = {
id: Date.now(), id: Date.now(),
titre: titleField.value.trim(), titre,
contenu: contenu, contenu,
categorie: categorie, categorie,
published: published, // valeur TRUE/FALSE pour afficher le badge Facebook published,
date: new Date().toISOString() date: new Date().toISOString()
}; };
// LocalStorage
// SAUVEGARDE DANS LOCALSTORAGE const articles = JSON.parse(localStorage.getItem("articles")) || [];
let articles = JSON.parse(localStorage.getItem("articles")) || [];
articles.push(nouvelArticle); articles.push(nouvelArticle);
localStorage.setItem("articles", JSON.stringify(articles)); localStorage.setItem("articles", JSON.stringify(articles));
console.log("Article enregistré :", nouvelArticle); showMessage("success", "Article ajouté avec succès !");
// Succès // Reset
successMsg.classList.remove('d-none'); form.reset();
tinymce.get("articleContent").setContent("");
// Redirection // Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../html/accueil_blog.html"; window.location.href = "../html/accueil_blog.html";
}, 1000); }, 1500);
}); });
// TinyMCE INIT /* =========================
TinyMCE
========================= */
tinymce.init({ tinymce.init({
selector: '#articleContent', selector: "#articleContent",
height: 400, height: 400,
language: 'fr', language: "fr",
plugins: 'lists fullscreen', plugins: "lists fullscreen",
toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen' toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen"
}); });

View File

@@ -1,47 +1,52 @@
const form = document.getElementById("addCategoryForm"); const form = document.getElementById("addCategoryForm");
const messages = document.getElementById("messages");
const nameField = document.getElementById("categoryName"); const nameField = document.getElementById("categoryName");
const descField = document.getElementById("categoryDescription"); const descField = document.getElementById("categoryDescription");
const errorEmpty = document.getElementById("errorEmpty"); // Catégories existantes (simulation BDD)
const errorExists = document.getElementById("errorExists");
const successMessage = document.getElementById("successMessage");
// Catégories existantes ( à remplacer en BD si besoin)
const existingCategories = ["Actualités", "Chien", "Chat", "Boutique"]; const existingCategories = ["Actualités", "Chien", "Chat", "Boutique"];
function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
form.addEventListener("submit", function (e) { form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
const nom = nameField.value.trim(); const nom = nameField.value.trim();
//Remettre tout a zero // Champ obligatoire
errorEmpty.classList.add("d-none"); if (!nom) {
errorExists.classList.add("d-none"); showMessage("danger", "Le nom de la catégorie est obligatoire.");
successMessage.classList.add("d-none");
//Erreur champs vide
if (nom === "") {
errorEmpty.classList.remove("d-none");
return; return;
} }
//Erreur catégorie existante // Catégorie existante
if (existingCategories.includes(nom)) { if (existingCategories.includes(nom)) {
errorExists.classList.remove("d-none"); showMessage("danger", "Cette catégorie existe déjà. Veuillez en choisir une autre.");
return; return;
} }
// Succès // Ajout catégorie (simulation)
successMessage.classList.remove("d-none"); existingCategories.push(nom);
// Ajout d'une nouvelle catégorie showMessage("success", "Catégorie ajoutée avec succès !");
existingCategories.push(nom);
// Redirection après 1 seconde // Reset formulaire
setTimeout(() => { form.reset();
// Redirection
setTimeout(() => {
window.location.href = "../html/accueil_blog.html"; window.location.href = "../html/accueil_blog.html";
}, 1000); }, 1500);
}); });

View File

@@ -1,59 +1,73 @@
const form = document.getElementById("editArticleForm"); const form = document.getElementById("editArticleForm");
const messages = document.getElementById("messages");
const imgField = document.getElementById("articleImage"); const imgField = document.getElementById("articleImage");
const titleField = document.getElementById("articleTitle"); const titleField = document.getElementById("articleTitle");
const contentField = document.getElementById("articleContent"); const contentField = document.getElementById("articleContent");
const categoryField = document.getElementById("articleCategory"); const categoryField = document.getElementById("articleCategory");
const publishedField = document.getElementById("articlePublished"); const publishedField = document.getElementById("articlePublished");
const errorEmpty = document.getElementById("errorEmpty"); // Simulation BDD pour doublons
const errorImage = document.getElementById("errorImage");
const errorExists = document.getElementById("errorExists");
const successMsg = document.getElementById("successMsg");
// Simulation BDD pour vérifier doublons
const titresExistants = [ const titresExistants = [
"article de test", "article de test",
"nouveautés chiens", "nouveautés chiens",
"actualité du mois", "actualité du mois"
]; ];
function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
function imageValide(file) {
if (!file) return true;
return ["image/jpeg", "image/png", "image/gif"].includes(file.type);
}
form.addEventListener("submit", function (e) { form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
const titre = titleField.value.trim().toLowerCase(); const titre = titleField.value.trim().toLowerCase();
const fichierImage = imgField.files[0]; const contenu = tinymce.get("articleContent").getContent().trim();
const image = imgField.files[0];
// Reset messages // Titre obligatoire
errorEmpty.classList.add("d-none"); if (!titre) {
errorImage.classList.add("d-none"); showMessage("danger", "Le titre de l'article est obligatoire.");
errorExists.classList.add("d-none");
successMsg.classList.add("d-none");
//Titre obligatoire
if (titre === "") {
errorEmpty.classList.remove("d-none");
return; return;
} }
// Titre déjà existant ? // Titre existant
if (titresExistants.includes(titre)) { if (titresExistants.includes(titre)) {
errorExists.classList.remove("d-none"); showMessage("danger", "Ce titre existe déjà. Veuillez en choisir un autre.");
return; return;
} }
//Vérification image // Contenu obligatoire
if (fichierImage) { if (!contenu) {
const validFormats = ["image/jpeg", "image/png", "image/gif"]; showMessage("danger", "Le contenu de l'article ne peut pas être vide.");
if (!validFormats.includes(fichierImage.type)) {
errorImage.classList.remove("d-none");
return; return;
} }
// Image valide
if (!imageValide(image)) {
showMessage("danger", "Format d'image invalide. JPG, PNG ou GIF uniquement.");
return;
} }
// Succès // Succès
successMsg.classList.remove("d-none"); showMessage("success", "L'article a été modifié avec succès !");
// Redirection après succès // Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../../blog/html/accueil_blog.html"; window.location.href = "../../blog/html/accueil_blog.html";
}, 1500); }, 1500);

View File

@@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,58 +10,29 @@
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/citations.css"> <link rel="stylesheet" href="/css/citations.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png"> <link rel="shortcut icon" href="/favicon.png" type="image/png">
</head> </head>
<body> <body>
<header> <header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary"> <nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center"> <div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a> <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<a class="nav-link left-label" aria-current="page" href="#">Blog</a> <li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
</li> <li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"> <li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<a class="nav-link left-label" href="#">Boutique</a> <li class="nav-item"><a class="nav-link left-label" href="#">Fiche renseignements</a></li>
</li> <li class="nav-item"><a class="nav-link left-label" href="#">Partenaires</a></li>
<li class="nav-item"> <li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
<a class="nav-link left-label" href="#">Prestations</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Fiche renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
</li>
<li class="nav-item">
<a class="nav-link active left-label" href="#">Citations</a>
</li>
</ul> </ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a></li>
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a> <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a></li>
</li> <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span> <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
@@ -74,21 +44,21 @@
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
</header> </header>
<main class="my-5 fs-6"> <main class="my-5 fs-6">
<div class="container"> <div class="container">
<header> <header>
<h1 class="title my-4 fs-2">Liste des citations</h1> <h1 class="title my-4 fs-2">Liste des citations</h1>
</header> </header>
<main> <div class="content">
<div class="ajouter"> <div class="ajouter">
<a href="#" class="btn btn-primary btn-sm my-2">Ajouter une citation</a> <a href="#" class="btn btn-primary">Ajouter une citation</a>
</div> </div>
<section class="chiens my-4"> <section class="chiens my-4">
<h2 class="fs-4">Citations chiens</h2> <h2 class="fs-4">Citations chiens</h2>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
@@ -103,15 +73,16 @@
<td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td> <td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end"> <td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a> <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger">Supprimer</a> <a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td> <td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end"> <td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a> <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger">Supprimer</a> <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td> </td>
</tr>
</tbody> </tbody>
</table> </table>
</section> </section>
@@ -130,20 +101,21 @@
<td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td> <td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end"> <td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a> <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger">Supprimer</a> <a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td> <td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end"> <td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a> <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger">Supprimer</a> <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td> </td>
</tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<section class="chats my-4"> <section class="divers my-4">
<h2 class="fs-4">Citations divers</h2> <h2 class="fs-4">Citations divers</h2>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead class="table-dark"> <thead class="table-dark">
@@ -157,26 +129,46 @@
<td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td> <td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end"> <td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a> <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger">Supprimer</a> <a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td> <td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
<td class="text-end"> <td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a> <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger">Supprimer</a> <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td> </td>
</tr>
</tbody> </tbody>
</table> </table>
</section> </section>
</main> </div>
</div> </div>
</main> </main>
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmer la suppression</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Êtes-vous sûr de vouloir supprimer cette citation ? Cette action est définitive.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
</div>
</div>
</div>
</div>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
<script src="/js/confirmDelete.js"></script>
</body> </body>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/contentReduct.js"></script>
</html> </html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une citation - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Fiche renseignements</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2">Ajouter une citation</h1>
</header>
<div class="content">
<form id="ajouterArticleForm">
<div class="mb-4 quote-addition">
<label class="form-label fw-bold" for="citation">La citations (obligatoire)</label>
<input type="text" id="citation" class="form-control"
placeholder="Il faut ne jamais abandonner..." required>
</div>
<div class="mb-3 citation-category">
<label class="form-label fw-bold" for="citationCategory">Catégorie de la citation (obligatoire)</label>
<select id="citationCategory" class="form-select" required>
<option value="" disabled selected>Choisissez une catégorie</option>
<option value="chiens">Chiens</option>
<option value="chats">Chats</option>
<option value="divers">Divers</option>
</select>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une citation - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Fiche renseignements</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2">Modifier une citation</h1>
</header>
<div class="content">
<form id="ajouterArticleForm">
<div class="mb-4 quote-addition">
<label class="form-label fw-bold" for="citation">La citations (obligatoire)</label>
<input type="text" id="citation" class="form-control"
placeholder="Il faut ne jamais abandonner..." value="La citation à modifier" required>
</div>
<div class="mb-3 citation-category">
<label class="form-label fw-bold" for="citationCategory">Catégorie de la citation (obligatoire)</label>
<select id="citationCategory" class="form-select" required>
<option value="" disabled>Choisissez une catégorie</option>
<option value="chiens" selected>Chiens</option>
<option value="chats">Chats</option>
<option value="divers">Divers</option>
</select>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2
css/prestation.css Normal file
View File

@@ -0,0 +1,2 @@
body { background: #f4f6f981; }
.container { margin-top: 50px; }

View File

@@ -42,3 +42,9 @@ a.nav-link{
/*=============================================================================
Divers
=============================================================================*/
a.tox-promotion-link {
display: none !important;
}

169
faq/accueil.html Normal file
View File

@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/citations.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Fiche renseignements</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le
site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2">Liste des FAQ</h1>
</header>
<div class="content">
<section class="themes my-4">
<h2 class="fs-4">Gérer les thèmes des questions</h2>
<div class="d-flex justify-content-start mb-4">
<a href="ajouter.html" class="btn btn-primary">Ajouter un thème</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Thème</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chiens</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Chat</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Autres questions</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
<section class="questions my-5">
<h2 class="fs-4">Gérer les questions</h2>
<div class="d-flex justify-content-start mb-4">
<a href="ajouter.html" class="btn btn-primary">Ajouter une question</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Questions</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pourquoi les chiens lèvent-ils la patte pour uriner ?</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button"
data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
<tr>
<td>Comment savoir si mon chat est heureux ?</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
<a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
data-bs-target="#confirmDeleteModal">Supprimer</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</main>
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmer la suppression</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Êtes-vous sûr de vouloir supprimer ce thème ou cette question ? Cette action est irréversible.
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
</div>
</div>
</div>
</div>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
<script src="/js/confirmDelete.js"></script>
</body>
</html>

103
faq/ajouter_question.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une question - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Fiche renseignements</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2">Ajouter une question</h1>
</header>
<div class="content">
<form>
<div class="mb-4 question-addition">
<label class="form-label fw-bold" for="question">Question (obligatoire)</label>
<input type="text" id="question" class="form-control" placeholder="Une question" required>
</div>
<div class="mb-4 theme-addition">
<label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
<select name="theme" id="theme" class="form-select" required>
<option value="" disabled selected>Choisir un thème</option>
<option value="1">Chiens</option>
<option value="2">Thème 2</option>
<option value="3">Thème 3</option>
</select>
</div>
<div class="mb-4 reponse-addition">
<label class="form-label fw-bold" for="reponse">Réponse (obligatoire)</label>
<textarea id="reponse" class="form-control" placeholder="Votre réponse ici..." required></textarea>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

83
faq/ajouter_theme.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter un thème de questions - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Fiche renseignements</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2">Ajouter un thème de question</h1>
</header>
<div class="content">
<form>
<div class="mb-4 theme-addition">
<label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
<input type="text" id="theme" class="form-control" placeholder="Un thème de question" required>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div>
</form>
</div>
</div>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
</body>
</html>

101
faq/modifier_question.html Normal file
View File

@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une question - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Fiche renseignements</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2">Modifier une question</h1>
</header>
<div class="content">
<form>
<div class="mb-4 question-addition">
<label class="form-label fw-bold" for="question">Question (obligatoire)</label>
<input type="text" id="question" class="form-control"
value="Pourquoi les chiens lèvent-ils la patte quand ils font pipi ?" required>
</div>
<div class="mb-4 theme-addition">
<label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
<select name="theme" id="theme" class="form-select" required>
<option value="" disabled>Choisir un thème</option>
<option value="1" selected>Chiens</option>
<option value="2">Thème 2</option>
<option value="3">Thème 3</option>
</select>
</div>
<div class="mb-4 reponse-addition">
<label class="form-label fw-bold" for="reponse">Réponse (obligatoire)</label>
<textarea id="reponse" class="form-control" required>Car si ils lèvent les deux, ils ne peuvent pas se retenir.</textarea>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Modifier</button>
</div>
</form>
</div>
</div>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

83
faq/modifier_theme.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un thème de questions - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Fiche renseignements</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message
d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i>
Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i>
Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2">Modifier un thème de question</h1>
</header>
<div class="content">
<form>
<div class="mb-4 theme-addition">
<label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
<input type="text" id="theme" class="form-control" value="Le nom du thème à modifier" required>
</div>
<div class="d-flex gap-3 mt-4 confirmation-buttons">
<a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Modifier</button>
</div>
</form>
</div>
</div>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/contentReduct.js"></script>
</body>
</html>

60
js/confirmDelete.js Normal file
View File

@@ -0,0 +1,60 @@
/**
* confirmDelete.js
*
* Modal de confirmation générique pour les actions de suppression.
*
* Usage:
* 1. Ajouter data-bs-toggle="modal" et data-bs-target="#confirmDeleteModal" au lien de suppression.
* 2. Lors de la confirmation, l'attribut href du lien est utilisé pour la navigation (GET).
*/
(function(){
let pendingHref = null;
let pendingModalId = '#confirmDeleteModal';
function getBootstrapModal(modalEl){
//retourne l'instance Bootstrap Modal associée à modalEl, ou en crée une nouvelle si nécessaire
if (!modalEl || !window.bootstrap) return null;
return bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
}
document.addEventListener('click', function(e){
const btn = e.target.closest('a[data-bs-toggle="modal"][data-bs-target]');
if (!btn) return;
const target = btn.getAttribute('data-bs-target');
// Gérer les boutons de type suppression ; restreindre éventuellement en utilisant une classe CSS spécifique
// Pour un appariement plus strict, ajouter une classe dédiée et la vérifier ici.
e.preventDefault();
pendingHref = btn.getAttribute('href');
pendingModalId = btn.getAttribute('data-confirm-modal') || target || '#confirmDeleteModal';
const modalEl = document.querySelector(pendingModalId);
const modal = getBootstrapModal(modalEl);
if (modal) modal.show();
});
document.addEventListener('click', function(e){
const confirmBtn = e.target.closest('#confirmDeleteBtn');
if (!confirmBtn) return;
if (pendingHref && pendingHref !== '#' && pendingHref.trim() !== ''){
window.location.assign(pendingHref);
return; // la navigation va se produire, arrêter le traitement ici
}
// Si aucun href n'est présent, fermer simplement le modal
const modalEl = document.querySelector(pendingModalId);
const modal = getBootstrapModal(modalEl);
if (modal) modal.hide();
pendingHref = null;
pendingModalId = '#confirmDeleteModal';
});
// Réinitialiser l'état stocké lorsque n'importe quel modal Bootstrap est caché
document.addEventListener('hidden.bs.modal', function(){
pendingHref = null;
pendingModalId = '#confirmDeleteModal';
});
})();

View File

@@ -5,6 +5,7 @@
const BREAKPOINT_SM = 1000; const BREAKPOINT_SM = 1000;
const NB_CARACTERES = 40;
(() => { (() => {
// Récupère les cellules td (premier d'un tr) à traiter // Récupère les cellules td (premier d'un tr) à traiter
const getTargetCells = () => { const getTargetCells = () => {
@@ -31,7 +32,7 @@ const BREAKPOINT_SM = 1000;
const full = td.dataset.fullText ?? td.textContent; const full = td.dataset.fullText ?? td.textContent;
const text = (full || "").trim(); const text = (full || "").trim();
if (narrow) { if (narrow) {
td.textContent = text.length > 40 ? text.slice(0, 40) + '...': text; td.textContent = text.length > 40 ? text.slice(0, NB_CARACTERES) + '...': text;
} else { } else {
td.textContent = full; td.textContent = full;
} }

50
js/tinyMce.js Normal file
View File

@@ -0,0 +1,50 @@
/**
* Initialisation de TinyMCE avec des boutons personnalisés pour les titres h3 à h6.
*/
tinymce.init({
selector: "textarea",
height: 400,
language: "fr-FR",
branding: false,
menubar: false,
menu: {},
plugins: "link, lists fullscreen",
toolbar: "h3 h4 h5 h6 | undo redo | link | bold | bullist numlist | outdent indent | fullscreen",
license_key: 'gpl',
setup: function (editor) {
['h3', 'h4', 'h5', 'h6'].forEach(function (tag) {
editor.ui.registry.addToggleButton(tag, {
text: tag.toUpperCase(),
tooltip: 'Titre ' + tag.substring(1),
onAction: function () {
try {
if (editor.formatter && typeof editor.formatter.toggle === 'function') {
editor.formatter.toggle(tag);
} else {
editor.execCommand('FormatBlock', false, tag);
}
} catch (e) {
// fallback
editor.execCommand('FormatBlock', false, tag);
}
},
onSetup: function (api) {
var nodeChangeHandler = function () {
try {
api.setActive(editor.formatter ? !!editor.formatter.match(tag) : false);
} catch (e) {
api.setActive(false);
}
};
editor.on('NodeChange', nodeChangeHandler);
return function () {
editor.off('NodeChange', nodeChangeHandler);
};
}
});
});
}
});

18
package-lock.json generated
View File

@@ -19,6 +19,7 @@
"version": "2.11.8", "version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"license": "MIT",
"peer": true, "peer": true,
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
@@ -39,6 +40,7 @@
"url": "https://opencollective.com/bootstrap" "url": "https://opencollective.com/bootstrap"
} }
], ],
"license": "MIT",
"peerDependencies": { "peerDependencies": {
"@popperjs/core": "^2.11.8" "@popperjs/core": "^2.11.8"
} }
@@ -56,6 +58,7 @@
"version": "19.2.1", "version": "19.2.1",
"resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz", "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
"integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==", "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
"license": "MIT",
"peer": true, "peer": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@@ -65,6 +68,7 @@
"version": "19.2.1", "version": "19.2.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
"integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==", "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
"license": "MIT",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"scheduler": "^0.27.0" "scheduler": "^0.27.0"
@@ -76,17 +80,21 @@
"node_modules/scheduler": { "node_modules/scheduler": {
"version": "0.27.0", "version": "0.27.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==" "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
"license": "MIT",
"peer": true
}, },
"node_modules/tinymce": { "node_modules/tinymce": {
"version": "8.2.2", "version": "8.3.0",
"resolved": "https://registry.npmjs.org/tinymce/-/tinymce-8.2.2.tgz", "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-8.3.0.tgz",
"integrity": "sha512-CFDSZwciMvFGW2czK/Xig1HcOGpXI0qcQMIqaIcG2F4RuuTdf+LQTreyEZunAJoFTQ9L0KAugOqL7OA5TJkoAA==" "integrity": "sha512-9IjrEo8HD5mg9QP6/rKcPSIcyRNVSf5eiYTqapb/q1zAIoISRJgI2DJUs4CJgZvio0hmEH394xSHUJuoGf4Msw==",
"license": "SEE LICENSE IN license.md"
}, },
"node_modules/tinymce-i18n": { "node_modules/tinymce-i18n": {
"version": "25.11.17", "version": "25.11.17",
"resolved": "https://registry.npmjs.org/tinymce-i18n/-/tinymce-i18n-25.11.17.tgz", "resolved": "https://registry.npmjs.org/tinymce-i18n/-/tinymce-i18n-25.11.17.tgz",
"integrity": "sha512-Fi5hGRDL9o42VsdahgNgHRHO/4ClAAqIew45QMu8sa5LQT2wTaVPf/tAXnVDHxR7c6NWZQmZp/E18LosxLq42A==" "integrity": "sha512-Fi5hGRDL9o42VsdahgNgHRHO/4ClAAqIew45QMu8sa5LQT2wTaVPf/tAXnVDHxR7c6NWZQmZp/E18LosxLq42A==",
"license": "MIT"
} }
} }
} }

View File

@@ -0,0 +1,25 @@
<!-- Modale de suppression -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="deleteModalLabel">Confirmer la suppression</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
Voulez-vous vraiment supprimer <strong id="itemName">cet élément</strong> ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
</div>
</div>
</div>
</div>

View File

@@ -1,37 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des slides</title> <title>Header- composant</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="../../css/style.css">
<style> <style>
body { .navbar-brand { font-size: 1.2rem; line-height: 1; padding-top: 0.25rem; padding-bottom: 0.25rem; }
background: #f4f6f9;
padding: 40px; .brand-sep { height: 1.2rem; }
@media (max-width: 1399.98px) {
.navbar .nav-item {
background-color: var(--bs-light);
border: 1px solid var(--bs-border-color);
border-radius: .25rem;
margin-bottom: .375rem;
text-align: center;
} }
.container { #navbarSupportedContent > ul:first-child { margin-top: .5rem; }
max-width: 900px; #navbarSupportedContent > ul:last-child { margin-top: 1rem; }
.bi{
display: none;
} }
.miniature {
width: 90px;
height: 60px;
object-fit: cover;
border-radius: 5px;
}
.action-buttons button,
.action-buttons a {
margin-right: 8px;
} }
</style> </style>
</head> </head>
<body>
<header> <header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary"> <nav class="navbar navbar-expand-xxl bg-body-tertiary">
@@ -96,40 +96,5 @@
</header> </header>
<body>
<div class="container">
<h2 class="text-center mb-4">Slider Liste des images</h2>
<!-- Message succès (suppression / ordre) -->
<div id="successMsg" class="alert alert-success d-none"></div>
<!-- Bouton ajouter -->
<div class="d-flex justify-content-start mb-4">
<a href="../html/ajouter_slider.html" class="btn btn-primary">Ajouter une image au slider</a>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Image</th>
<th>Texte ALT</th>
<th>Titre</th>
<th>Ordre</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody id="sliderTableBody">
<!-- rempli en JS -->
</tbody>
</table>
</div>
<script src="../js/liste_slider.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

View File

@@ -0,0 +1,42 @@
// Injection du modal
fetch("../components/html/delete-composant.html")
.then(res => {
if (!res.ok) throw new Error("Modal HTML introuvable");
return res.text();
})
.then(html => {
document.getElementById("modal-placeholder").innerHTML = html;
initDeleteModalLogic();
})
.catch(err => console.error(err));
// Logique du modal
function initDeleteModalLogic() {
let rowToDelete = null;
const modalElement = document.getElementById("deleteModal");
const itemNameSpan = document.getElementById("itemName");
const confirmBtn = document.getElementById("confirmDeleteBtn");
const deleteModal = new bootstrap.Modal(modalElement);
document.body.addEventListener("click", (event) => {
const button = event.target.closest(".delete-btn");
if (!button) return;
rowToDelete = button.closest("tr");
const firstCell = rowToDelete.querySelector("td");
const itemName = firstCell ? firstCell.textContent.trim() : "cet élément";
itemNameSpan.textContent = itemName;
deleteModal.show();
});
confirmBtn.addEventListener("click", () => {
if (rowToDelete) rowToDelete.remove();
rowToDelete = null;
deleteModal.hide();
});
}

View File

@@ -0,0 +1,5 @@
fetch("../components/html/header-composant.html")
.then(response => response.text())
.then(data => {
document.getElementById("header-placeholder").innerHTML = data;
});

View File

@@ -15,71 +15,7 @@
<body> <body>
<header> <div id="header-placeholder"></div>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Prestations</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Fiche de renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6"> <main class="my-5 fs-6">
@@ -164,6 +100,7 @@
<script src="../js/ajouter_avant_apres.js"></script> <script src="../js/ajouter_avant_apres.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../header-composant.js"></script>
</body> </body>

View File

@@ -1,48 +1,80 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une catégorie</title> <title>Ajouter une prestation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/prestation.css">
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
body {
background: #f4f6f981;
}
.container {
max-width: 600px;
margin-top: 50px;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <header>
<h1 class="mb-5 text-center">Ajouter une prestation</h2> <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<!--Erreur champ vide --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
<div id="errorEmpty" class="alert alert-danger d-none">Le titre est obligatoire.</div> data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Erreur nom deja existant --> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<div id="errorExists" class="alert alert-danger d-none">Cette prestation existe déjà. Veuillez en choisir
une autre.</div>
<!--Succès ajout catégorie --> <!-- MENU GAUCHE -->
<div id="successMessage" class="alert alert-success d-none">Prestation ajoutée avec succès !</div> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
<li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
</ul>
<!-- MENU DROIT -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" data-bs-toggle="dropdown">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<h1 class="mb-5 text-center">Ajouter une prestation</h1>
<!-- Messages DOM -->
<div id="messages" class="mb-3"></div>
<form id="addCategoryForm"> <form id="addCategoryForm">
<div class="mb-4"> <div class="mb-4">
<label class="form-label fw-bold">Titre de la prestation (obligatoire)</label> <label class="form-label fw-bold">Titre de la prestation (obligatoire)</label>
<input type="text" id="categoryName" class="form-control" required> <input type="text" id="categoryName" class="form-control">
</div> </div>
<div class="mb-3"> <div class="mb-3">
@@ -53,18 +85,16 @@
</select> </select>
</div> </div>
<!--Description (liste à puces)-->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Description de la prestation</label> <label class="form-label fw-bold">Description de la prestation</label>
<textarea id="prestationDescription" class="form-control" rows="5"> <textarea id="prestationDescription" class="form-control" rows="5">
</textarea>
</textarea>
</div> </div>
<!--Tariffs-->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Tarif (fourchette)</label> <label class="form-label fw-bold">Tarif (fourchette)</label>
<div class="d-flex gap-3"> <div class="d-flex gap-3">
@@ -74,15 +104,14 @@
</div> </div>
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../prestations/liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a> <a href="../liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
</div> </div>
<script src="ajouter_prestation.js"></script> <script src="ajouter_prestation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,74 +1,147 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ajouter un slide</title> <title>Ajouter un slide</title>
<link
rel="stylesheet"
href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="/css/prestation.css" />
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<style> <button
body { class="navbar-toggler"
background: #f4f6f9; type="button"
padding: 40px; data-bs-toggle="collapse"
} data-bs-target="#navbarSupportedContent"
.container { aria-controls="navbarSupportedContent"
max-width: 600px; aria-expanded="false"
} aria-label="Toggle navigation"
</style> >
</head> <span class="navbar-toggler-icon"></span>
</button>
<body> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- MENU GAUCHE -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prestations</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Fiche de renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Partenaires</a>
</li>
</ul>
<div class="container"> <!-- MENU DROIT -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"
><i class="bi bi-megaphone me-1"></i> Message d'actu</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
><i class="bi bi-gear me-1"></i> Configuration</a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="userMenu"
data-bs-toggle="dropdown"
>
<i class="bi bi-person-circle me-1"></i>
<span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="header-placeholder"></div>
<div class="container">
<h2 class="text-center mb-4">Ajouter une image au slider</h2> <h2 class="text-center mb-4">Ajouter une image au slider</h2>
<!-- Erreur : image manquante --> <!-- Messages DOM -->
<div id="errorEmpty" class="alert alert-danger d-none"> <div id="messages" class="mb-3"></div>
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"> <form id="addSlideForm">
<!-- Image --> <!-- Image -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Image du slide (obligatoire)</label> <label class="form-label fw-bold">Image du slide *</label>
<input type="file" id="slideImage" class="form-control" accept="image/*"> <input
type="file"
id="slideImage"
class="form-control"
accept="image/*"
/>
</div> </div>
<!-- ALT --> <!-- ALT -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Texte ALT (obligatoire)</label> <label class="form-label fw-bold">Texte ALT *</label>
<input type="text" id="slideAlt" class="form-control" placeholder="Description de limage"> <input
type="text"
id="slideAlt"
class="form-control"
placeholder="Description de limage"
/>
</div> </div>
<!-- Titre --> <!-- Titre -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Titre (optionnel)</label> <label class="form-label fw-bold">Titre (optionnel)</label>
<input type="text" id="slideTitle" class="form-control"> <input type="text" id="slideTitle" class="form-control" />
</div> </div>
<!-- Boutons --> <!-- Boutons -->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../../slider/liste_slider/liste_slider.html" class="btn btn-secondary w-50">Annuler</a> <a
href="/prestations/html/prestation_accueil.html"
class="btn btn-secondary w-50"
>Annuler</a
>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
</div> </div>
<script src="ajouter_slider.js"></script> <script src="/prestations/js/ajouter_slider.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</body>
</html> </html>
<!--<script src="../../header-composant.js"></script>-->

View File

@@ -1,144 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des résultats avant/après</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="../../css/style.css">
<link rel="stylesheet" href="../../css/avant_apres.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Prestations</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Fiche de renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title fs-2 my-4">Liste des résultats avant/après</h1>
<!-- Message succès -->
<div id="succesDeleteMsg" class="alert alert-success d-none">
Résultat supprimé avec succès !
</div>
</header>
<div class="section">
<div class="d-flex justify-content-start mb-4">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
Ajouter un résultat
</a>
</div>
<!-- Table responsive -->
<div class="table-responsive">
<table class="table table-striped table-hover align-middle mb-0">
<thead class="table-dark">
<tr>
<th>Titre du résultat</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody id="prestationTableBody">
<!-- JS -->
</tbody>
</table>
</div>
</div>
</div>
<!--- modale de suppression-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
Voulez-vous vraiment supprimer ce résultat avant/après ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
</div>
</div>
</div>
</div>
</main>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/liste_avant_apres.js"></script>
</body>
</html>

View File

@@ -1,59 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des prestations</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<style>
body {
background: #f4f6f9;
padding: 30px;
}
.container {
margin-top: 100px;
}
.action-btns button,
.action-btns a {
margin-right: 100px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="mb-5 text-center">Liste des prestations</h2>
<!--Message succès-->
<div id="succesDeleteMsg" class="alert alert-success d-none">Prestation supprimée avec succès !</div>
<div class="d-flex justify-content-end mb-4">
<a href="../ajouter_prestation/ajouter_prestation.html" class="btn btn-primary">Ajouter une prestation</a>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th>Type</th>
<th>Description</th>
<th>Tarif</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody id="prestationTableBody">
<!--Rempli en JS-->
</tbody>
</table>
</div>
<script src="../../prestations/liste_prestation/liste_prestation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -5,76 +5,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un résultat avant/après</title> <title>Modifier un résultat avant/après</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../node_modules/bs-icon/icons.css"> <link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="../../css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="../../css/avant_apres.css"> <link rel="stylesheet" href="/css/avant_apres.css">
</head> </head>
<body> <body>
<header> <div id="header-placeholder"></div>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Prestations</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Fiche de renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6"> <main class="my-5 fs-6">
<div class="container"> <div class="container">
@@ -164,6 +104,7 @@
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/modifier_avant_apres.js"></script> <script src="../js/modifier_avant_apres.js"></script>
<script src="../../header-composant.js"></script>
</body> </body>

View File

@@ -1,44 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modifier une prestation</title> <title>Modifier une prestation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link
rel="stylesheet"
href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<style> <link rel="stylesheet" href="/css/prestation.css" />
body { </head>
background: #f4f6f9; <body>
} <header>
.container { <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
max-width: 700px; <div class="container-fluid align-items-center">
margin-top: 40px; <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
} </div>
</nav>
</style> </header>
</head>
<body>
<div class="container"> <div class="container">
<h2 class="mb-4 text-center">Modifier une prestation</h2> <h2 class="mb-4 text-center">Modifier une prestation</h2>
<!--Erreur--> <div id="messages" class="mb-3"></div>
<div id="errorEmpty" class="alert alert-danger d-none">Le titre est obligatoire.</div>
<div id="errorTechnical" class="alert alert-danger d-none">Une erreur est survenue. Veuillez réessayer plus tard.</div>
<!--Succès-->
<div id="successMsg" class="alert alert-success d-none">Prestation modifiée avec succès !</div>
<form id="editPrestationForm"> <form id="editPrestationForm">
<!-- Titre -->
<!--Titre-->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Titre de la prestation (obligatoire)</label> <label class="form-label fw-bold">Titre de la prestation *</label>
<input type="text" id="prestationTitle" class="form-control" value="Toilettage complet pour chien"> <input
type="text"
id="prestationTitle"
class="form-control"
value="Toilettage complet pour chien"
/>
</div> </div>
<!--Type--> <!-- Type -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Type de prestation</label> <label class="form-label fw-bold">Type de prestation</label>
<select id="prestationType" class="form-select"> <select id="prestationType" class="form-select">
@@ -47,38 +47,52 @@
</select> </select>
</div> </div>
<!-- Description -->
<!--Description (liste à puces)-->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Description de la prestation</label> <label class="form-label fw-bold">Description de la prestation</label>
<textarea id="prestationDescription" class="form-control" rows="5"> <textarea id="prestationDescription" class="form-control" rows="5">
• Bain complet • Bain complet
• Séchage • Séchage
• Coupe aux ciseaux • Coupe aux ciseaux
• Nettoyage des oreilles</textarea> • Nettoyage des oreilles
</textarea
>
</div> </div>
<!--Tariffs--> <!-- Tarifs -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Tarif (fourchette)</label> <label class="form-label fw-bold">Tarif (fourchette)</label>
<div class="d-flex gap-3"> <div class="d-flex gap-3">
<input type="number" id="priceMin" class="form-control" placeholder="Prix min (€)" value="35"> <input
<input type="number" id="priceMax" class="form-control" placeholder="Prix max (€)" value="60"> type="number"
id="priceMin"
class="form-control"
value="35"
/>
<input
type="number"
id="priceMax"
class="form-control"
value="60"
/>
</div> </div>
</div> </div>
<!-- Boutons --> <!-- Boutons -->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="../../prestations/liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a> <a
<button type="submit" class="btn btn-primary w-50">Enregistrer les modifications</button> href="/prestations/html/prestation_accueil.html"
class="btn btn-secondary w-50"
>Annuler</a
>
<button type="submit" class="btn btn-primary w-50">
Enregistrer les modifications
</button>
</div> </div>
</form> </form>
</div> </div>
<script src="modifier_prestation.js"></script> <script src="/prestations/js/modifier_prestation.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</body>
</html> </html>

View File

@@ -8,6 +8,9 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
body { body {
background: #f4f6f9; background: #f4f6f9;
} }
@@ -27,6 +30,9 @@
<body> <body>
<div id="header-placeholder"></div>
<div class="container"> <div class="container">
<h2 class="text-center mb-5">Modifier une image du slider</h2> <h2 class="text-center mb-5">Modifier une image du slider</h2>
@@ -71,6 +77,7 @@
<script src="modifier_slider.js"></script> <script src="modifier_slider.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../header-composant.js"></script>
</body> </body>
</html> </html>

View File

@@ -4,103 +4,126 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CE sera le titre de la page</title> <title>Gérer les prestations</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../node_modules/bs-icon/icons.css"> <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="../../css/style.css"> <link rel="stylesheet" href="../../css/style.css">
</head> </head>
<body> <body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<div id="header-placeholder"></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Boutique</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Prestations</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Fiche de renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6"> <main class="my-5 fs-6">
<div class="container"> <div class="container">
<header> <header>
<h1 class="title fs-2">Gérer la page prestations</h1> <h1 class="title fs-2 my-4">Gérer la page prestations</h1>
</header> </header>
<main>
<section class="prestations">
<h2 class="fs-3">Gérer les prestations</h2> <div class="section">
<div class="accordion" id="accordionExample"> <div class="accordion" id="accordionExample">
<!-- ACCORDÉON 1 -->
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" <button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
rer les prestations et leur catégorie rer les prestations et leurs catégories
</button> </button>
</h2> </h2>
<div id="collapseOne" class="accordion-collapse collapse show" <div id="collapseOne" class="accordion-collapse collapse show"
data-bs-parent="#accordionExample"> data-bs-parent="#accordionExample">
<div class="accordion-body"> <div class="accordion-body">
Contenu de l'accordéon 1 <section class="presta my-3">
<h3 class="fs-4">Prestations</h3>
<div class="mb-4 mt-2">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
Ajouter une prestation
</a>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<!-- Prestation 1 -->
<tr>
<td>Toilettage complet</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<!-- Prestation 2 -->
<tr>
<td>Toilettage express</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
<section class="carte my-3">
<h3 class="fs-4 mt-4">Cartes</h3>
<div class="mb-4 mt-2">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
Ajouter une carte
</a>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coupe ciseaux</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</tr>
<tr>
<td>Coupe griffes</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
</div> </div>
</div> </div>
</div> </div>
<!-- ACCORDÉON 2 -->
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
@@ -108,185 +131,127 @@
Gérer le slider Gérer le slider
</button> </button>
</h2> </h2>
<div id="collapseTwo" class="accordion-collapse collapse" <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
data-bs-parent="#accordionExample">
<div class="accordion-body"> <div class="accordion-body">
Contenu de l'accordéon 2
</div>
</div>
</div>
</div> <div class="mb-4 mt-2">
<!--
<section class="categories-prestations">
<h3 class="fs-4">Titres des cartes</h3>
<div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm"> <a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
Ajouter une catégorie Ajouter un slider
</a> </a>
</div> </div>
<table class="table table-striped table-hover align-middle">
<table class="table table-striped table-hover">
<section class="slider">
<details open>
<summary class="fs-5 fw-semibold">Gérer le slider</summary>
<h2 class="fs-3 mt-2">Gérer le slider</h2>
<div class="mb-3">
<a href="" class="btn btn-primary btn-sm">Ajouter une slide</a>
</div>
<table class="table table-striped table-hover">
<tr>
<td>Toilletage complet</td>
<td class="text-end">À partir de 60€</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Toilletage complet</td>
<td class="text-end">À partir de 60€</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
<section class="categories-prestations">
<h3 class="fs-4">Les prestations</h3>
<div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-sm btn-primary">
Ajouter une prestation
</table>
</details>
</div>
<section class="galerie-avant-apres">
<details open>
<summary class="fs-5 fw-semibold">Gérer la galerie avant/après</summary>
<h2 class="fs-3 mt-2">Gérer la galerie avant/après</h2>
<div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
Ajouter un résultat avant/après
</a>
</div>
<table class="table table-striped table-hover">
<tr>
<td>Un nom de prestation</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>prestation spécifique</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
</section>
<section class="slider">
</tbody>
</table>
</details>
</section>
</details>
<h2 class="fs-3 mt-2">Gérer le slider</h2>
<div class="mb-3">
<a href="" class="btn btn-primary btn-sm">Ajouter une slide</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark"> <thead class="table-dark">
<tr> <tr>
<th>Titre de la slide</th> <th>Titre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Slide 1 : coupe griffe</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Slide 2 : coupe ciseaux</td>
<td class="text-end">
<a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</section>
<section class="galerie-avant-apres">
<details close>
<summary class="fs-5 fw-semibold">
<h2 class="fs-3 mt-2">Gérer la galerie avant/après</h2>
<div class="mb-3">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
Ajouter un résultat avant/après
</a>
</div>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>Titre du résultat</th>
<th class="text-end">Actions</th> <th class="text-end">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>Petit chien poils longs</td> <td><img src="slide1.webp" alt="Chien toiletté" class="img-thumbnail"></td>
<td class="text-end"> <td class="text-end">
<a href="../html/modifier_avant_apres.html" <a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
class="btn btn-sm btn-outline-primary me-1">Modifier</a> <button
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button> class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Coupe ciseaux</td>
<td>Avant / Après</td>
<td class="text-end"> <td class="text-end">
<a href="../html/modifier_avant_apres.html" <a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
class="btn btn-sm btn-outline-primary me-1">Modifier</a> <button
<button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button> class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Nouveauté</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</summary>
</details>
</section>
-->
</main>
</div> </div>
</div>
</div>
<!-- ACCORDÉON 3 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Gérer la galerie avant/après
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="mb-4 mt-2">
<a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
Ajouter un résultat
</a>
</div>
<table class="table table-striped table-hover align-middle">
<thead class="table-dark">
<tr>
<th>Titre</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toilettage complet</td>
<td class="text-end">
<a href="../html/modifier_avant_apres.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
<tr>
<td>Toilettage complet</td>
<td class="text-end">
<a href="../html/modifier_avant_apres.html"
class="btn btn-sm btn-outline-primary me-1">Modifier</a>
<button
class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> <!-- /#accordionExample -->
</div>
</div>
<div id="modal-placeholder"></div>
</main> </main>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../components/js/header-composant.js"></script>
<script src="../components/js/delete-composant.js"></script>
</body> </body>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</html> </html>

111
prestations/html/verif.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un résultat avant/après</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/avant_apres.css">
</head>
<body>
<div id="header-placeholder"></div>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title fs-2">Modifier un résultat en images (Avant / Après)</h1>
<!-- Messages -->
<div id="successMsg" class="alert alert-success d-none">
Le résultat a été modifié avec succès.
</div>
<div id="errorMsg" class="alert alert-danger d-none">
Une erreur est survenue. Merci de vérifier le formulaire.
</div>
<!-- Erreur : format invalide -->
<div id="errorFormat" class="alert alert-danger d-none">
Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
</div>
</header>
<div class="section">
<!-- Formulaire de modification -->
<form id="editPairForm" class="mt-3">
<!-- ID caché -->
<input type="hidden" id="pairId">
<!-- Titre-->
<div class="mb-3">
<label for="pairTitle" class="form-label fw-bold">Titre du résultat
(obligatoire)</label>
<input type="text" class="form-control" id="pairTitle" required>
</div>
<!-- Type -->
<div class="mb-3">
<label class="form-label fw-bold" for="pairType">Type (obligatoire)</label>
<select id="pairType" class="form-select" required>
<option value="">-- Choisir --</option>
<option value="Chien">Chien</option>
<option value="Chat">Chat</option>
</select>
</div>
<!-- Images AVANT / APRÈS -->
<div class="row gy-4 mb-4">
<!-- Image AVANT -->
<div class="col-12">
<label class="form-label fw-bold" for="beforeImage">
Image AVANT (obligatoire, formats acceptés : jpg, png, webp)
</label>
<input type="file" class="form-control" id="beforeImage" accept="image/*" required>
<img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
</div>
<!-- Image APRÈS -->
<div class="col-12">
<label class="form-label fw-bold" for="afterImage">
Image APRÈS (obligatoire, formats acceptés : jpg, png, webp)
</label>
<input type="file" class="form-control" id="afterImage" accept="image/*" required>
<img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
</div>
</div>
<!-- Boutons -->
<div class="row mt-4 g-3">
<div class="col-12 col-md-6">
<a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
Annuler
</a>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-primary w-100">
Enregistrer les modifications
</button>
</div>
</div>
</form>
</div>
</div>
</main>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/modifier_avant_apres.js"></script>
</body>
</html>

View File

@@ -1,63 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voir le résultat avant/après</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="../../css/style.css">
<link rel="stylesheet" href="../../css/avant_apres.css">
</head>
<body>
<div class="container">
<h1 class="mb-4 text-center">Détails du résultat en images (Avant / Après)</h1>
<!-- Message erreur -->
<div id="errorMsg" class="alert alert-danger d-none">
Impossible d'afficher ce résultat.
</div>
<div id="detailsSection" class="mt-3">
<h2 id="pairTitle" class="text-center mb-4" aria-live="polite">Chargement...</h2>
<!-- AVANT / APRÈS : empilés en mobile, côte à côte en md+ -->
<div class="row justify-content-center align-items-start mb-4 g-4">
<div class="col-12 col-md-6 text-center">
<p class="fw-bold">AVANT</p>
<img id="beforePreview" class="img-preview border img-fluid" src="#" alt="Photo avant">
</div>
<div class="col-12 col-md-6 text-center">
<p class="fw-bold">APRÈS</p>
<img id="afterPreview" class="img-preview border img-fluid" src="#" alt="Photo après">
</div>
</div>
<!-- Bouton retour -->
<div class="text-center mt-4">
<a href="../html/liste_avant_apres.html" class="btn btn-secondary">
Retour à la liste
</a>
</div>
</div>
</div>
<script src="../js/voir_avant_apres.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

View File

@@ -1,16 +1,14 @@
// Récupération des éléments // Éléments
const form = document.getElementById("addCategoryForm"); const form = document.getElementById("addCategoryForm");
const messages = document.getElementById("messages");
const titleField = document.getElementById("categoryName"); const titleField = document.getElementById("categoryName");
const typeField = document.getElementById("prestationType"); const typeField = document.getElementById("prestationType");
const descField = document.getElementById("prestationDescription"); const descField = document.getElementById("prestationDescription");
const priceMinField = document.getElementById("priceMin"); const priceMinField = document.getElementById("priceMin");
const priceMaxField = document.getElementById("priceMax"); const priceMaxField = document.getElementById("priceMax");
const errorEmpty = document.getElementById("errorEmpty"); // Prestations existantes (simulation BDD)
const errorExists = document.getElementById("errorExists");
const successMessage = document.getElementById("successMessage");
// Prestations existantes (simulation)
const existingPrestations = [ const existingPrestations = [
"Toilettage complet", "Toilettage complet",
"Coupe ciseaux", "Coupe ciseaux",
@@ -18,38 +16,42 @@ const existingPrestations = [
"Démêlage poil long" "Démêlage poil long"
]; ];
function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
form.addEventListener("submit", function (e) { form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
// Récupérer le titre
const titre = titleField.value.trim(); const titre = titleField.value.trim();
// Réinitialiser les alertes // Titre obligatoire
errorEmpty.classList.add("d-none"); if (!titre) {
errorExists.classList.add("d-none"); showMessage("danger", "Le titre de la prestation est obligatoire.");
successMessage.classList.add("d-none");
// 1. Vérif : titre obligatoire
if (titre === "") {
errorEmpty.classList.remove("d-none");
return; return;
} }
// 2. Vérif : prestation déjà existante (exemple simple) // Doublon
if (existingPrestations.includes(titre)) { if (existingPrestations.includes(titre)) {
errorExists.classList.remove("d-none"); showMessage("danger", "Cette prestation existe déjà. Veuillez en choisir une autre.");
return; return;
} }
// 3. Tout est ok → succès // Succès
successMessage.classList.remove("d-none");
// Simuler ajout en base
existingPrestations.push(titre); existingPrestations.push(titre);
showMessage("success", "Prestation ajoutée avec succès !");
// Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../liste_prestation/liste_prestation.html"; window.location.href = "../liste_prestation/liste_prestation.html";
}, 1500); }, 1500);
}); });

View File

@@ -1,44 +1,52 @@
const form = document.getElementById('addSlideForm'); const form = document.getElementById("addSlideForm");
const imgField = document.getElementById('slideImage'); const messages = document.getElementById("messages");
const altField = document.getElementById('slideAlt');
const titleField = document.getElementById('slideTitle');
const errorEmpty = document.getElementById('errorEmpty'); const imgField = document.getElementById("slideImage");
const errorFormat = document.getElementById('errorFormat'); const altField = document.getElementById("slideAlt");
const successMsg = document.getElementById('successMsg'); const titleField = document.getElementById("slideTitle");
// Création du tableau simulant la BDD // Simulation BDD
let slides = []; let slides = [];
form.addEventListener('submit', function (e) {
e.preventDefault();
// Reset messages function showMessage(type, text) {
errorEmpty.classList.add('d-none'); messages.innerHTML = "";
errorFormat.classList.add('d-none');
successMsg.classList.add('d-none'); const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
form.addEventListener("submit", function (e) {
e.preventDefault();
messages.innerHTML = "";
const image = imgField.files[0]; const image = imgField.files[0];
const alt = altField.value.trim(); const alt = altField.value.trim();
const title = titleField.value.trim();
// Image obligatoire // Image obligatoire
if (!image) { if (!image) {
errorEmpty.textContent = "Merci de sélectionner une image."; showMessage("danger", "Merci de sélectionner une image.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// ALT obligatoire // ALT obligatoire
if (alt === "") { if (!alt) {
errorEmpty.textContent = "Le texte ALT est obligatoire."; showMessage("danger", "Le texte ALT est obligatoire.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// Vérification format // Vérification format
const validFormats = ["image/jpeg", "image/png", "image/webp"]; const validFormats = ["image/jpeg", "image/png", "image/webp"];
if (!validFormats.includes(image.type)) { if (!validFormats.includes(image.type)) {
errorFormat.classList.remove('d-none'); showMessage(
"danger",
"Format d'image invalide. Formats acceptés : JPG, PNG, WEBP."
);
return; return;
} }
@@ -46,18 +54,18 @@ form.addEventListener('submit', function (e) {
slides.push({ slides.push({
id: Date.now(), id: Date.now(),
image: image.name, image: image.name,
alt: alt, alt,
title: titleField.value.trim(), title,
order: slides.length + 1 order: slides.length + 1
}); });
console.log("Nouveau slide ajouté :", slides); console.log("Nouveau slide ajouté :", slides);
// Succès // Succès
successMsg.classList.remove('d-none'); showMessage("success", "Slide ajouté avec succès !");
// Redirection // Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../../../slider/liste_slider/liste_slider.html"; window.location.href = "/prestations/html/prestation_accueil.html";
}, 1500); }, 1500);
}); });

View File

@@ -1,103 +0,0 @@
// ===============================
// Données simulées (à remplacer plus tard par une BDD)
// ===============================
let galleryPairs = [
{
id: 1,
titre: "Petit chien poils longs",
},
{
id: 2,
titre: "Coupe ciseaux",
}
];
// Sélecteurs
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
// ===============================
function displayPairs() {
tableBody.innerHTML = ""; // reset tableau
galleryPairs.forEach(pair => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${pair.titre}</td>
<td class="text-center text-md-start">
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-end gap-2">
<!-- Bouton Modifier -->
<a href="../html/modifier_avant_apres.html?id=${pair.id}"
class="btn btn-outline-primary btn-sm">
Modifier
</a>
<!-- Bouton Supprimer -->
<button class="btn btn-outline-danger btn-sm" onclick="openDeleteModal(${pair.id})">
Supprimer
</button>
</div>
</td>
`;
tableBody.appendChild(row);
});
}
// ===============================
// 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) {
galleryPairs = galleryPairs.filter(pair => pair.id !== id);
displayPairs();
succesDeleteMsg.classList.remove("d-none");
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();

View File

@@ -1,61 +0,0 @@
// Exemple BDD
const prestations = [
{
id: 1,
titre: "Toilettage complet",
type: "Chien",
description: "• Bain complet \n• Séchage \n• Coupe aux ciseaux\n• Nettoyage des oreilles",
prixMin: 35,
prixMax: 60
},
{
id: 2,
titre: "Toilettage express",
type: "Chat",
description: "• Bain rapide\n• Séchage\n• Brossage",
prixMin: 20,
prixMax: 35
}
];
// Sélection des éléments
const tableBody = document.getElementById('prestationTableBody');
const successDeleteMsg = document.getElementById('successDeleteMsg');
// Fonction pour extrait description
function extrait(desc, limite = 60) {
return desc.length > limite ? desc.substring(0, limite) + '...' : desc;
}
// Affichage du tableau
function afficherPrestations() {
tableBody.innerHTML = '';
prestations.forEach((p, index) => {
const row = `
<tr>
<td>${p.titre}</td>
<td>${p.type}</td>
<td>${extrait(p.description.replace(/\n/g, " "))}</td>
<td>${p.prixMin}€ - ${p.prixMax}€</td>
<td class="text-center action-btns">
<a href="consulter_prestation.html?id=${p.id}" class="btn btn-info btn-sm">Voir</a>
<a href="../../prestations/modifier_prestation/modifier_prestation.html?id=${p.id}" class="btn btn-warning btn-sm">Modifier</a>
<button class="btn btn-danger btn-sm" onclick="supprimerPrestation(${index})">Supprimer</button>
</td>
</tr>
`;
tableBody.innerHTML += row;
});
}
afficherPrestations();
// Suppression
function supprimerPrestation(index) {
prestations.splice(index, 1);
afficherPrestations();
successDeleteMsg.classList.remove("d-none");
}

View File

@@ -1,87 +0,0 @@
// Simulation 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 tableBody = document.getElementById("sliderTableBody");
const successMsg = document.getElementById("successMsg");
function afficherSlides() {
// trier par ordre
slides.sort((a, b) => a.order - b.order);
tableBody.innerHTML = "";
slides.forEach((slide, index) => {
const row = `
<tr>
<td><img src="#" alt="${slide.alt}" class="miniature"></td>
<td>${slide.alt}</td>
<td>${slide.title || "-"}</td>
<td>${slide.order}</td>
<td class="text-center action-buttons">
<button class="btn btn-secondary btn-sm" onclick="monter(${index})">↑</button>
<button class="btn btn-secondary btn-sm" onclick="descendre(${index})">↓</button>
<a href="../../slider/modifier_slider/modifier_slider.html?id=${slide.id}"
class="btn btn-warning btn-sm">Modifier</a>
<button class="btn btn-danger btn-sm" onclick="supprimerSlide(${index})">Supprimer</button>
</td>
</tr>
`;
tableBody.innerHTML += row;
});
}
afficherSlides();
// Suppression
function supprimerSlide(index) {
if (confirm("Voulez-vous vraiment supprimer cette image du slider ?")) {
slides.splice(index, 1);
// Réordonner après suppression
slides.forEach((s, i) => s.order = i + 1);
afficherSlides();
successMsg.textContent = "Image du slider supprimée avec succès.";
successMsg.classList.remove("d-none");
}
}
// Monter
function monter(index) {
if (index === 0) return; // déjà en haut
[slides[index - 1], slides[index]] = [slides[index], slides[index - 1]];
// recalcul ordre
slides.forEach((s, i) => s.order = i + 1);
afficherSlides();
successMsg.textContent = "Ordre mis à jour.";
successMsg.classList.remove("d-none");
}
// Descendre
function descendre(index) {
if (index === slides.length - 1) return; // déjà en bas
[slides[index], slides[index + 1]] = [slides[index + 1], slides[index]];
slides.forEach((s, i) => s.order = i + 1);
afficherSlides();
successMsg.textContent = "Ordre mis à jour.";
successMsg.classList.remove("d-none");
}

View File

@@ -1,41 +1,45 @@
const form = document.getElementById("editPrestationForm");
const messages = document.getElementById("messages");
const form = document.getElementById('editPrestationForm'); const titleField = document.getElementById("prestationTitle");
const titleField = document.getElementById('prestationTitle'); const descriptionField = document.getElementById("prestationDescription");
const descriptionField = document.getElementById('prestationDescription'); const typeField = document.getElementById("prestationType");
const typeField = document.getElementById('prestationType'); const priceMinField = document.getElementById("priceMin");
const priceMinField = document.getElementById('priceMin'); const priceMaxField = document.getElementById("priceMax");
const priceMaxField = document.getElementById('priceMax');
const errorEmpty = document.getElementById('errorEmpty');
const errorTechnical = document.getElementById('errorTechnical');
const successMsg = document.getElementById('successMsg');
form.addEventListener('submit', function (e) { function showMessage(type, text) {
messages.innerHTML = "";
const div = document.createElement("div");
div.className = `alert alert-${type}`;
div.textContent = text;
messages.appendChild(div);
}
form.addEventListener("submit", function (e) {
e.preventDefault(); e.preventDefault();
messages.innerHTML = "";
errorEmpty.classList.add('d-none');
errorTechnical.classList.add('d-none');
successMsg.classList.add('d-none');
const title = titleField.value.trim(); const title = titleField.value.trim();
// Champ obligatoire
// champ obligatoire manquant if (!title) {
if (title === '') { showMessage("danger", "Le titre de la prestation est obligatoire.");
errorEmpty.classList.remove('d-none');
return; return;
} }
// 2 Simulation derreur technique // Simulation erreur technique
const erreurTechnique = false; // mettre true pour tester const erreurTechnique = false; // mettre true pour tester
if (erreurTechnique) { if (erreurTechnique) {
errorTechnical.classList.remove('d-none'); showMessage("danger", "Une erreur est survenue. Veuillez réessayer plus tard.");
return; return;
} }
//Succès // Succès
successMsg.classList.remove('d-none'); showMessage("success", "Prestation modifiée avec succès !");
console.log("Nouvelles données :", { console.log("Nouvelles données :", {
titre: title, titre: title,
@@ -45,8 +49,8 @@ form.addEventListener('submit', function (e) {
prixMax: priceMaxField.value prixMax: priceMaxField.value
}); });
// Redirection après un court délai // Redirection
setTimeout(() => { setTimeout(() => {
window.location.href = "../liste_prestation/liste_prestation.html"; window.location.href = "/prestations/html/prestation_accueil.html";
}, 1500); }, 1500);
}); });

View File

@@ -1,58 +0,0 @@
// ===============================
// Données simulées (à remplacer plus tard par BDD / API)
// ===============================
let 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 titleEl = document.getElementById("pairTitle");
const beforePreview = document.getElementById("beforePreview");
const afterPreview = document.getElementById("afterPreview");
const errorMsg = document.getElementById("errorMsg");
const detailsSection = document.getElementById("detailsSection");
// ===============================
// Récup ID dans l'URL
// ===============================
function getIdFromUrl() {
const params = new URLSearchParams(window.location.search);
return parseInt(params.get("id"));
}
// ===============================
// Charger les infos de la paire
// ===============================
function loadPairDetails() {
const id = getIdFromUrl();
const pair = galleryPairs.find(p => p.id === id);
if (!pair) {
errorMsg.classList.remove("d-none");
detailsSection.classList.add("d-none");
return;
}
// Affichage du titre
titleEl.textContent = pair.titre;
// Affichage des images
beforePreview.src = pair.avant;
afterPreview.src = pair.apres;
}
// Initialisation
loadPairDetails();

View File

@@ -7,8 +7,8 @@
<title>CE sera le titre de la page</title> <title>CE sera le titre de la page</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="node_modules/bs-icon/icons.css"> <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="favicon.png" type="image/png"> <link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="/css/style.css">
@@ -64,12 +64,15 @@
<a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a> <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span> <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a> </a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu"> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item" href="#">Profil</a></li> <li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li> <li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li> <li><a class="dropdown-item" href="#">Sortir</a></li>
</ul> </ul>
</li> </li>
@@ -85,9 +88,9 @@
<header> <header>
<h1 class="title my-4 fs-2">Titre de la page</h1> <h1 class="title my-4 fs-2">Titre de la page</h1>
</header> </header>
<main> <div class="content">
Contenu de la page Contenu de la page
</main> </div>
</div> </div>
</main> </main>