feat:avant apres+media queries+modale de suppression
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
<!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">
|
||||||
@@ -8,14 +9,6 @@
|
|||||||
<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">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
|
||||||
background: #f4f6f9;
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 800px;
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
.img-preview {
|
.img-preview {
|
||||||
max-width: 150px;
|
max-width: 150px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -23,68 +16,83 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
<body class="bg-light py-4 py-md-5">
|
||||||
|
|
||||||
<h2 class="mb-5 text-center">Ajouter une paire avant/après</h2>
|
<div class="container" style="max-width: 800px;">
|
||||||
|
|
||||||
<!-- Message succès -->
|
<h1 class="mb-4 mb-md-5 text-center">Ajouter une paire avant/après</h1>
|
||||||
<div id="successMsg" class="alert alert-success d-none">
|
|
||||||
Nouvelle paire ajoutée avec succès !
|
<!-- Message succès -->
|
||||||
|
<div id="successMsg" class="alert alert-success d-none">
|
||||||
|
Nouvelle paire ajoutée avec succès !
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Message erreur -->
|
||||||
|
<div id="errorMsg" class="alert alert-danger d-none">
|
||||||
|
Merci de remplir tous les champs obligatoires.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Erreur : format invalide -->
|
||||||
|
<div id="errorFormat" class="alert alert-danger d-none">
|
||||||
|
Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="addPairForm" class="mt-3">
|
||||||
|
|
||||||
|
<!-- Titre / label -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="pairTitle">Titre de la paire (obligatoire)</label>
|
||||||
|
<input type="text" id="pairTitle" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Type -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" 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>
|
||||||
|
|
||||||
|
<!-- Image AVANT -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="form-label" for="beforeImage">Image AVANT (obligatoire)</label>
|
||||||
|
<input type="file" id="beforeImage" class="form-control" accept="image/*" required>
|
||||||
|
|
||||||
|
<img id="beforePreview" class="img-preview border mt-2" src="#" alt="image avant">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Image APRÈS -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="form-label" for="afterImage">Image APRÈS (obligatoire)</label>
|
||||||
|
<input type="file" id="afterImage" class="form-control" accept="image/*" required>
|
||||||
|
|
||||||
|
<img id="afterPreview" class="img-preview border mt-2" src="#" alt="image après">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Boutons : empilés en mobile, côte à côte en md+ -->
|
||||||
|
<div class="row mt-4 g-3">
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<a href="../liste_avant_apres/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">
|
||||||
|
Ajouter
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Message erreur -->
|
<script src="ajouter_avant_apres.js"></script>
|
||||||
<div id="errorMsg" class="alert alert-danger d-none">
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
Merci de remplir tous les champs obligatoires.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form id="addPairForm">
|
|
||||||
|
|
||||||
<!-- Titre / label -->
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Titre de la paire *</label>
|
|
||||||
<input type="text" id="pairTitle" class="form-control" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Type -->
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Type *</label>
|
|
||||||
<select id="pairType" class="form-select" required>
|
|
||||||
<option value="">-- Choisir --</option>
|
|
||||||
<option value="Chien">Chien</option>
|
|
||||||
<option value="Chat">Chat</option>
|
|
||||||
<option value="Autre">Autre</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Image AVANT -->
|
|
||||||
<div class="mb-4">
|
|
||||||
<label class="form-label">Image AVANT *</label>
|
|
||||||
<input type="file" id="beforeImage" class="form-control" accept="image/*">
|
|
||||||
|
|
||||||
<img id="beforePreview" class="img-preview border mt-2">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Image APRÈS -->
|
|
||||||
<div class="mb-4">
|
|
||||||
<label class="form-label">Image APRÈS *</label>
|
|
||||||
<input type="file" id="afterImage" class="form-control" accept="image/*">
|
|
||||||
|
|
||||||
<img id="afterPreview" class="img-preview border mt-2">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Boutons -->
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<a href="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary">Annuler</a>
|
|
||||||
<button type="submit" class="btn btn-primary">Ajouter</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="ajouter_avant_apres.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@@ -1,60 +1,84 @@
|
|||||||
<!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>Liste des paires avant/apres</title>
|
<title>Liste des paires avant/après</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">
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: #f4f6f9;
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
.action-btns button,
|
|
||||||
.action-btns a {
|
|
||||||
margin-right: 100px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="mb-5 text-center">Liste des paires avant/apres</h2>
|
|
||||||
|
|
||||||
<!--Message succès-->
|
|
||||||
<div id="succesDeleteMsg" class="alert alert-success d-none">Paire supprimée avec succès !</div>
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-end mb-4">
|
<body class="bg-light py-4 py-md-5">
|
||||||
<a href="../ajouter_avant_apres/ajouter_avant_apres.html" class="btn btn-primary">Ajouter une paire</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<table class="table table-striped table-hover align-middle">
|
<div class="container" style="max-width: 1000px;">
|
||||||
<thead class="table-dark">
|
<h1 class="mb-4 mb-md-5 text-center">Liste des paires avant/après</h1>
|
||||||
<tr>
|
|
||||||
<th>Titre paire</th>
|
<!-- Message succès -->
|
||||||
<th>Type</th>
|
<div id="succesDeleteMsg" class="alert alert-success d-none">
|
||||||
<th>Avant</th>
|
Paire supprimée avec succès !
|
||||||
<th>Apres</th>
|
|
||||||
<th class="text-center">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody id="prestationTableBody">
|
|
||||||
<!--JS-->
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="liste_avant_apres.js"></script>
|
<div class="d-flex justify-content-end mb-4">
|
||||||
|
<a href="../ajouter_avant_apres/ajouter_avant_apres.html" class="btn btn-primary">
|
||||||
|
Ajouter une paire
|
||||||
|
</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 paire</th>
|
||||||
|
<th>Type</th>
|
||||||
|
<th>Avant</th>
|
||||||
|
<th>Après</th>
|
||||||
|
<th class="text-center">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="prestationTableBody">
|
||||||
|
<!-- JS -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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 cette paire 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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="liste_avant_apres.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
<!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">
|
||||||
@@ -7,24 +8,17 @@
|
|||||||
<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">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
|
||||||
background: #f4f6f9;
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
margin-top: 100px;
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
.img-preview {
|
.img-preview {
|
||||||
max-width: 150px;
|
max-width: 150px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
<body class="bg-light py-4 py-md-5">
|
||||||
<h2 class="mb-5 text-center">Modifier une paire avant/après</h2>
|
|
||||||
|
<div class="container" style="max-width: 800px;">
|
||||||
|
<h2 class="mb-4 mb-md-5 text-center">Modifier une paire avant/après</h2>
|
||||||
|
|
||||||
<!-- Messages -->
|
<!-- Messages -->
|
||||||
<div id="successMsg" class="alert alert-success d-none">
|
<div id="successMsg" class="alert alert-success d-none">
|
||||||
@@ -34,71 +28,71 @@
|
|||||||
Une erreur est survenue. Merci de vérifier le formulaire.
|
Une erreur est survenue. Merci de vérifier le formulaire.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Erreur : format invalide -->
|
||||||
|
<div id="errorFormat" class="alert alert-danger d-none">
|
||||||
|
Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Formulaire de modification -->
|
<!-- Formulaire de modification -->
|
||||||
<form id="editPairForm">
|
<form id="editPairForm" class="mt-3">
|
||||||
|
|
||||||
<!-- ID caché -->
|
<!-- ID caché -->
|
||||||
<input type="hidden" id="pairId">
|
<input type="hidden" id="pairId">
|
||||||
|
|
||||||
<!-- Titre / label -->
|
<!-- Titre / label -->
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="pairTitle" class="form-label">Titre / label de la paire *</label>
|
<label for="pairTitle" class="form-label">Titre / label de la paire (obligatoire)</label>
|
||||||
<input type="text" class="form-control" id="pairTitle" required>
|
<input type="text" class="form-control" id="pairTitle" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Type -->
|
<!-- Type -->
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="pairType" class="form-label">Type</label>
|
<label class="form-label" for="pairType">Type (obligatoire)</label>
|
||||||
<select id="pairType" class="form-select">
|
<select id="pairType" class="form-select" required>
|
||||||
|
<option value="">-- Choisir --</option>
|
||||||
<option value="Chien">Chien</option>
|
<option value="Chien">Chien</option>
|
||||||
<option value="Chat">Chat</option>
|
<option value="Chat">Chat</option>
|
||||||
<option value="Autre">Autre</option>
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Image AVANT -->
|
<!-- Images AVANT / APRÈS sur une ligne en md+, empilées en mobile -->
|
||||||
<div class="mb-4 row">
|
<div class="row gy-4 mb-4">
|
||||||
<div class="col-md-6">
|
<!-- Image AVANT -->
|
||||||
<label class="form-label" for="beforeImage">Image AVANT</label>
|
<div class="col-12 col-md-6">
|
||||||
<input type="file" class="form-control" id="beforeImage" accept="image/*">
|
<label class="form-label" for="beforeImage">Image AVANT (obligatoire)</label>
|
||||||
<div class="form-text">
|
<input type="file" class="form-control" id="beforeImage" accept="image/*" required>
|
||||||
Laisser vide pour conserver l'image actuelle.
|
<!-- Aperçu éventuel -->
|
||||||
</div>
|
<img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 text-center">
|
|
||||||
<p class="mb-1">Aperçu actuel AVANT</p>
|
<!-- Image APRÈS -->
|
||||||
<img id="beforePreview" src="" alt="Image avant" class="img-preview border">
|
<div class="col-12 col-md-6">
|
||||||
|
<label class="form-label" for="afterImage">Image APRÈS (obligatoire)</label>
|
||||||
|
<input type="file" class="form-control" id="afterImage" accept="image/*" required>
|
||||||
|
<!-- Aperçu éventuel -->
|
||||||
|
<img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Image APRES -->
|
<!-- Boutons : empilés en mobile, côte à côte en md+ -->
|
||||||
<div class="mb-4 row">
|
<div class="row mt-4 g-3">
|
||||||
<div class="col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
<label class="form-label" for="afterImage">Image APRÈS</label>
|
<a href="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary w-100">
|
||||||
<input type="file" class="form-control" id="afterImage" accept="image/*">
|
Annuler
|
||||||
<div class="form-text">
|
</a>
|
||||||
Laisser vide pour conserver l'image actuelle.
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 text-center">
|
<div class="col-12 col-md-6">
|
||||||
<p class="mb-1">Aperçu actuel APRÈS</p>
|
<button type="submit" class="btn btn-primary w-100">
|
||||||
<img id="afterPreview" src="" alt="Image après" class="img-preview border">
|
Enregistrer les modifications
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Boutons -->
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<a href="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary">
|
|
||||||
Annuler
|
|
||||||
</a>
|
|
||||||
<button type="submit" class="btn btn-primary">
|
|
||||||
Enregistrer les modifications
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="modifier_avant_apres.js"></script>
|
<script src="modifier_avant_apres.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>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -8,46 +8,39 @@
|
|||||||
<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">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
|
||||||
background: #f4f6f9;
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 800px;
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
.img-preview {
|
.img-preview {
|
||||||
max-width: 250px;
|
max-width: 250px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-light py-4 py-md-5">
|
||||||
|
|
||||||
<div class="container">
|
<div class="container" style="max-width: 800px;">
|
||||||
|
|
||||||
<h2 class="mb-5 text-center">Détails de la paire avant/après</h2>
|
<h1 class="mb-4 mb-md-5 text-center">Détails de la paire avant/après</h1>
|
||||||
|
|
||||||
<!-- Message erreur -->
|
<!-- Message erreur -->
|
||||||
<div id="errorMsg" class="alert alert-danger d-none">
|
<div id="errorMsg" class="alert alert-danger d-none">
|
||||||
Impossible d'afficher cette paire.
|
Impossible d'afficher cette paire.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="detailsSection">
|
<div id="detailsSection" class="mt-3">
|
||||||
|
|
||||||
<!-- Titre -->
|
<h2 id="pairTitle" class="text-center mb-4" aria-live="polite">Chargement...</h2>
|
||||||
<h4 id="pairTitle" class="text-center mb-4"></h4>
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-around align-items-center mb-4">
|
|
||||||
|
|
||||||
<div class="text-center">
|
<!-- 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>
|
<p class="fw-bold">AVANT</p>
|
||||||
<img id="beforePreview" class="img-preview border" src="">
|
<img id="beforePreview" class="img-preview border img-fluid" src="#" alt="Photo avant">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="col-12 col-md-6 text-center">
|
||||||
<p class="fw-bold">APRÈS</p>
|
<p class="fw-bold">APRÈS</p>
|
||||||
<img id="afterPreview" class="img-preview border" src="">
|
<img id="afterPreview" class="img-preview border img-fluid" src="#" alt="Photo après" >
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -68,3 +61,4 @@
|
|||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@@ -30,13 +30,48 @@ const afterPreview = document.getElementById("afterPreview");
|
|||||||
|
|
||||||
const successMsg = document.getElementById("successMsg");
|
const successMsg = document.getElementById("successMsg");
|
||||||
const errorMsg = document.getElementById("errorMsg");
|
const errorMsg = document.getElementById("errorMsg");
|
||||||
|
const errorFormat = document.getElementById("errorFormat");
|
||||||
|
|
||||||
|
// Formats autorisés
|
||||||
|
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
|
||||||
|
|
||||||
// ===============================
|
// ===============================
|
||||||
// Prévisualisation images
|
// Fonctions utilitaires
|
||||||
|
// ===============================
|
||||||
|
function hideMessages() {
|
||||||
|
successMsg.classList.add("d-none");
|
||||||
|
errorMsg.classList.add("d-none");
|
||||||
|
errorFormat.classList.add("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
function isValidFormat(file) {
|
||||||
|
if (!file) return false;
|
||||||
|
return allowedTypes.includes(file.type);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===============================
|
||||||
|
// Prévisualisation image AVANT
|
||||||
|
// + contrôle du format
|
||||||
// ===============================
|
// ===============================
|
||||||
beforeInput.addEventListener("change", function () {
|
beforeInput.addEventListener("change", function () {
|
||||||
|
hideMessages();
|
||||||
|
|
||||||
const file = this.files[0];
|
const file = this.files[0];
|
||||||
if (!file) return;
|
|
||||||
|
if (!file) {
|
||||||
|
beforePreview.style.display = "none";
|
||||||
|
beforePreview.src = "#";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vérif format
|
||||||
|
if (!isValidFormat(file)) {
|
||||||
|
errorFormat.classList.remove("d-none");
|
||||||
|
this.value = ""; // reset le champ
|
||||||
|
beforePreview.style.display = "none";
|
||||||
|
beforePreview.src = "#";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = e => {
|
reader.onload = e => {
|
||||||
@@ -46,9 +81,29 @@ beforeInput.addEventListener("change", function () {
|
|||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ===============================
|
||||||
|
// Prévisualisation image APRÈS
|
||||||
|
// + contrôle du format
|
||||||
|
// ===============================
|
||||||
afterInput.addEventListener("change", function () {
|
afterInput.addEventListener("change", function () {
|
||||||
|
hideMessages();
|
||||||
|
|
||||||
const file = this.files[0];
|
const file = this.files[0];
|
||||||
if (!file) return;
|
|
||||||
|
if (!file) {
|
||||||
|
afterPreview.style.display = "none";
|
||||||
|
afterPreview.src = "#";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vérif format
|
||||||
|
if (!isValidFormat(file)) {
|
||||||
|
errorFormat.classList.remove("d-none");
|
||||||
|
this.value = ""; // reset le champ
|
||||||
|
afterPreview.style.display = "none";
|
||||||
|
afterPreview.src = "#";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = e => {
|
reader.onload = e => {
|
||||||
@@ -64,23 +119,35 @@ afterInput.addEventListener("change", function () {
|
|||||||
form.addEventListener("submit", function (e) {
|
form.addEventListener("submit", function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// Reset messages
|
hideMessages();
|
||||||
errorMsg.classList.add("d-none");
|
|
||||||
successMsg.classList.add("d-none");
|
|
||||||
|
|
||||||
// Validation simple
|
// Champs obligatoires
|
||||||
if (!titleInput.value.trim() || !typeInput.value.trim() || !beforeInput.files[0] || !afterInput.files[0]) {
|
if (
|
||||||
|
!titleInput.value.trim() ||
|
||||||
|
!typeInput.value.trim() ||
|
||||||
|
!beforeInput.files[0] ||
|
||||||
|
!afterInput.files[0]
|
||||||
|
) {
|
||||||
errorMsg.classList.remove("d-none");
|
errorMsg.classList.remove("d-none");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const beforeFile = beforeInput.files[0];
|
||||||
|
const afterFile = afterInput.files[0];
|
||||||
|
|
||||||
|
// Vérification format des deux images
|
||||||
|
if (!isValidFormat(beforeFile) || !isValidFormat(afterFile)) {
|
||||||
|
errorFormat.classList.remove("d-none");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Nouvelle entrée (simulation)
|
// Nouvelle entrée (simulation)
|
||||||
const newPair = {
|
const newPair = {
|
||||||
id: galleryPairs.length + 1,
|
id: galleryPairs.length + 1,
|
||||||
titre: titleInput.value.trim(),
|
titre: titleInput.value.trim(),
|
||||||
type: typeInput.value.trim(),
|
type: typeInput.value.trim(),
|
||||||
avant: URL.createObjectURL(beforeInput.files[0]),
|
avant: URL.createObjectURL(beforeFile),
|
||||||
apres: URL.createObjectURL(afterInput.files[0])
|
apres: URL.createObjectURL(afterFile)
|
||||||
};
|
};
|
||||||
|
|
||||||
galleryPairs.push(newPair);
|
galleryPairs.push(newPair);
|
||||||
|
|||||||
@@ -22,6 +22,14 @@ let galleryPairs = [
|
|||||||
const tableBody = document.getElementById("prestationTableBody");
|
const tableBody = document.getElementById("prestationTableBody");
|
||||||
const succesDeleteMsg = document.getElementById("succesDeleteMsg");
|
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
|
// Fonction d'affichage
|
||||||
// ===============================
|
// ===============================
|
||||||
@@ -36,27 +44,33 @@ function displayPairs() {
|
|||||||
<td>${pair.type}</td>
|
<td>${pair.type}</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<img src="${pair.avant}" width="80" class="rounded">
|
<img src="${pair.avant}" class="img-thumbnail" style="max-width: 80px;">
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<img src="${pair.apres}" width="80" class="rounded">
|
<img src="${pair.apres}" class="img-thumbnail" style="max-width: 80px;">
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-center action-btns">
|
<td class="text-center text-md-start">
|
||||||
|
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-start gap-2">
|
||||||
|
|
||||||
<!-- Bouton Voir -->
|
<!-- Bouton Voir -->
|
||||||
<a href="../voir_avant_apres/voir_avant_apres.html?id=${pair.id}"
|
<a href="../voir_avant_apres/voir_avant_apres.html?id=${pair.id}"
|
||||||
class="btn btn-info btn-sm">Voir</a>
|
class="btn btn-info btn-sm">
|
||||||
|
Voir
|
||||||
|
</a>
|
||||||
|
|
||||||
<!-- Bouton Modifier -->
|
<!-- Bouton Modifier -->
|
||||||
<a href="../modifier_avant_apres/modifier_avant_apres.html?id=${pair.id}"
|
<a href="../modifier_avant_apres/modifier_avant_apres.html?id=${pair.id}"
|
||||||
class="btn btn-warning btn-sm">Modifier</a>
|
class="btn btn-warning btn-sm">
|
||||||
|
Modifier
|
||||||
|
</a>
|
||||||
|
|
||||||
<!-- Bouton Supprimer -->
|
<!-- Bouton Supprimer -->
|
||||||
<button class="btn btn-danger btn-sm" onclick="deletePair(${pair.id})">
|
<button class="btn btn-danger btn-sm" onclick="openDeleteModal(${pair.id})">
|
||||||
Supprimer
|
Supprimer
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@@ -65,26 +79,39 @@ function displayPairs() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ===============================
|
// ===============================
|
||||||
// Fonction de suppression
|
// Ouvrir le modal de suppression
|
||||||
|
// ===============================
|
||||||
|
function openDeleteModal(id) {
|
||||||
|
pairIdToDelete = id; // on mémorise l'id
|
||||||
|
deleteModal.show(); // on ouvre le modal
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===============================
|
||||||
|
// Fonction de suppression réelle
|
||||||
// ===============================
|
// ===============================
|
||||||
function deletePair(id) {
|
function deletePair(id) {
|
||||||
if (!confirm("Voulez-vous vraiment supprimer cette paire ?")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
galleryPairs = galleryPairs.filter(pair => pair.id !== id);
|
galleryPairs = galleryPairs.filter(pair => pair.id !== id);
|
||||||
displayPairs();
|
displayPairs();
|
||||||
|
|
||||||
succesDeleteMsg.classList.remove("d-none");
|
succesDeleteMsg.classList.remove("d-none");
|
||||||
|
|
||||||
// Disparaît après 2 secondes
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
succesDeleteMsg.classList.add("d-none");
|
succesDeleteMsg.classList.add("d-none");
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ===============================
|
||||||
|
// Clic sur "Supprimer" dans le modal
|
||||||
|
// ===============================
|
||||||
|
confirmDeleteBtn.addEventListener("click", () => {
|
||||||
|
if (pairIdToDelete !== null) {
|
||||||
|
deletePair(pairIdToDelete);
|
||||||
|
pairIdToDelete = null;
|
||||||
|
}
|
||||||
|
deleteModal.hide();
|
||||||
|
});
|
||||||
|
|
||||||
// ===============================
|
// ===============================
|
||||||
// Chargement initial
|
// Chargement initial
|
||||||
// ===============================
|
// ===============================
|
||||||
displayPairs();
|
displayPairs();
|
||||||
|
|
||||||
|
|||||||
@@ -19,6 +19,11 @@ const galleryPairs = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// ===============================
|
||||||
|
// Formats d'images autorisés
|
||||||
|
// ===============================
|
||||||
|
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
|
||||||
|
|
||||||
// Sélecteurs
|
// Sélecteurs
|
||||||
const editForm = document.getElementById("editPairForm");
|
const editForm = document.getElementById("editPairForm");
|
||||||
const pairIdInput = document.getElementById("pairId");
|
const pairIdInput = document.getElementById("pairId");
|
||||||
@@ -31,6 +36,7 @@ const afterPreview = document.getElementById("afterPreview");
|
|||||||
|
|
||||||
const successMsg = document.getElementById("successMsg");
|
const successMsg = document.getElementById("successMsg");
|
||||||
const errorMsg = document.getElementById("errorMsg");
|
const errorMsg = document.getElementById("errorMsg");
|
||||||
|
const errorFormat = document.getElementById("errorFormat");
|
||||||
|
|
||||||
// ===============================
|
// ===============================
|
||||||
// Récup ID dans l'URL
|
// Récup ID dans l'URL
|
||||||
@@ -71,23 +77,39 @@ function loadPairData() {
|
|||||||
afterPreview.src = pair.apres;
|
afterPreview.src = pair.apres;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prévisu des nouvelles images
|
// ===============================
|
||||||
beforeInput.addEventListener("change", function () {
|
// Gestion du changement d'image
|
||||||
const file = this.files[0];
|
// ===============================
|
||||||
|
function handleImageChange(inputEl, previewEl) {
|
||||||
|
const file = inputEl.files[0];
|
||||||
if (!file) return;
|
if (!file) return;
|
||||||
|
|
||||||
|
// Vérification format
|
||||||
|
if (!allowedTypes.includes(file.type)) {
|
||||||
|
// Format non autorisé
|
||||||
|
errorFormat.classList.remove("d-none");
|
||||||
|
inputEl.value = ""; // reset du champ
|
||||||
|
previewEl.src = ""; // reset de la prévisu
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format OK → on cache le message d'erreur
|
||||||
|
errorFormat.classList.add("d-none");
|
||||||
|
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = e => beforePreview.src = e.target.result;
|
reader.onload = e => {
|
||||||
|
previewEl.src = e.target.result;
|
||||||
|
};
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prévisu des nouvelles images + contrôle format
|
||||||
|
beforeInput.addEventListener("change", function () {
|
||||||
|
handleImageChange(beforeInput, beforePreview);
|
||||||
});
|
});
|
||||||
|
|
||||||
afterInput.addEventListener("change", function () {
|
afterInput.addEventListener("change", function () {
|
||||||
const file = this.files[0];
|
handleImageChange(afterInput, afterPreview);
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = e => afterPreview.src = e.target.result;
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Soumission
|
// Soumission
|
||||||
@@ -96,6 +118,7 @@ editForm.addEventListener("submit", function (e) {
|
|||||||
|
|
||||||
errorMsg.classList.add("d-none");
|
errorMsg.classList.add("d-none");
|
||||||
successMsg.classList.add("d-none");
|
successMsg.classList.add("d-none");
|
||||||
|
errorFormat.classList.add("d-none");
|
||||||
|
|
||||||
if (!titleInput.value.trim()) {
|
if (!titleInput.value.trim()) {
|
||||||
errorMsg.textContent = "Le titre est obligatoire.";
|
errorMsg.textContent = "Le titre est obligatoire.";
|
||||||
@@ -103,7 +126,16 @@ editForm.addEventListener("submit", function (e) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ici ce serait un fetch vers l'API en vrai.
|
// Double check format côté submit (au cas où)
|
||||||
|
const filesToCheck = [beforeInput.files[0], afterInput.files[0]];
|
||||||
|
for (const file of filesToCheck) {
|
||||||
|
if (!file || !allowedTypes.includes(file.type)) {
|
||||||
|
errorFormat.classList.remove("d-none");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
successMsg.classList.remove("d-none");
|
successMsg.classList.remove("d-none");
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user