Hugging Face's logo

Spaces:
Docfile
/
bbd
Sleeping

App Files Community
Docfile commited on
Commit
697eb3f
·
verified ·
1 Parent(s): c01f0dc

Update templates/gere.html

Browse files
Files changed (1) hide show
  1. templates/gere.html +268 -70
templates/gere.html CHANGED
@@ -4,30 +4,158 @@
4
  <meta charset="UTF-8">
5
  <title>Gestion des Données</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <!-- Bootstrap CSS -->
8
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 
9
  <style>
10
  body {
11
  background-color: #f8f9fa;
 
12
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  .card {
14
  margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
 
16
  .nav-tabs .nav-link.active {
17
- background-color: #ffffff;
18
- border-color: #dee2e6 #dee2e6 #ffffff;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  .editable {
21
  display: none;
 
 
 
 
22
  }
23
- .list-group-item {
24
- position: relative;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  }
26
  </style>
27
  </head>
28
  <body>
29
  <div class="container mt-4">
30
- <h1 class="mb-4">Gestion des Données</h1>
31
 
32
  {% with messages = get_flashed_messages(with_categories=true) %}
33
  {% if messages %}
@@ -42,88 +170,108 @@
42
  {% endif %}
43
  {% endwith %}
44
 
45
- <!-- Onglets de navigation -->
46
  <ul class="nav nav-tabs" id="gestionTab" role="tablist">
47
  <li class="nav-item">
48
- <a class="nav-link active" id="matieres-tab" data-toggle="tab" href="#matieres" role="tab" aria-controls="matieres" aria-selected="true">Matières</a>
 
 
49
  </li>
50
  <li class="nav-item">
51
- <a class="nav-link" id="sous-categories-tab" data-toggle="tab" href="#sous-categories" role="tab" aria-controls="sous-categories" aria-selected="false">Sous-Catégories</a>
 
 
52
  </li>
53
  <li class="nav-item">
54
- <a class="nav-link" id="textes-tab" data-toggle="tab" href="#textes" role="tab" aria-controls="textes" aria-selected="false">Textes</a>
 
 
55
  </li>
56
  <li class="nav-item">
57
- <a class="nav-link" id="ajouter-tab" data-toggle="tab" href="#ajouter" role="tab" aria-controls="ajouter" aria-selected="false">Ajouter</a>
 
 
58
  </li>
59
  </ul>
60
 
61
  <div class="tab-content" id="gestionTabContent">
62
  <!-- Onglet Matières -->
63
- <div class="tab-pane fade show active" id="matieres" role="tabpanel" aria-labelledby="matieres-tab">
64
- <div class="card mt-3">
65
  <div class="card-header">
66
- Liste des Matières
67
  </div>
68
  <ul class="list-group list-group-flush">
69
  {% for matiere in matieres %}
70
  <li class="list-group-item">
71
  <div class="d-flex justify-content-between align-items-center">
72
  <span class="display-mode">{{ matiere.nom }}</span>
73
- <div>
74
- <button class="btn btn-warning btn-sm edit-button">Modifier</button>
 
 
75
  <form method="post" class="d-inline">
76
  <input type="hidden" name="action" value="delete_matiere_{{ matiere.id }}">
77
- <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette matière ?');">Supprimer</button>
 
 
78
  </form>
79
  </div>
80
  </div>
81
- <!-- Formulaire d'édition caché -->
82
- <form method="post" class="editable mt-2">
83
  <input type="hidden" name="action" value="edit_matiere_{{ matiere.id }}">
84
  <div class="input-group">
85
  <input type="text" name="edit_nom_matiere_{{ matiere.id }}" value="{{ matiere.nom }}" class="form-control">
86
  <div class="input-group-append">
87
- <button type="submit" class="btn btn-success">Enregistrer</button>
88
- <button type="button" class="btn btn-secondary cancel-edit">Annuler</button>
 
 
 
 
89
  </div>
90
  </div>
91
  </form>
92
  </li>
93
  {% else %}
94
- <li class="list-group-item">Aucune matière trouvée.</li>
95
  {% endfor %}
96
  </ul>
97
  </div>
98
  </div>
99
 
100
  <!-- Onglet Sous-Catégories -->
101
- <div class="tab-pane fade" id="sous-categories" role="tabpanel" aria-labelledby="sous-categories-tab">
102
- <div class="card mt-3">
103
  <div class="card-header">
104
- Liste des Sous-Catégories
105
  </div>
106
  <ul class="list-group list-group-flush">
107
  {% for sous_categorie in sous_categories %}
108
  <li class="list-group-item">
109
  <div class="d-flex justify-content-between align-items-center">
110
  <span class="display-mode">
111
- {{ sous_categorie.nom }} <small class="text-muted">({{ sous_categorie.matiere.nom }})</small>
 
 
 
112
  </span>
113
- <div>
114
- <button class="btn btn-warning btn-sm edit-button">Modifier</button>
 
 
115
  <form method="post" class="d-inline">
116
  <input type="hidden" name="action" value="delete_sous_categorie_{{ sous_categorie.id }}">
117
- <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette sous-catégorie ?');">Supprimer</button>
 
 
118
  </form>
119
  </div>
120
  </div>
121
- <!-- Formulaire d'édition caché -->
122
- <form method="post" class="editable mt-2">
123
  <input type="hidden" name="action" value="edit_sous_categorie_{{ sous_categorie.id }}">
124
  <div class="form-row">
125
  <div class="col-md-6 mb-2">
126
- <input type="text" name="edit_nom_sous_categorie_{{ sous_categorie.id }}" value="{{ sous_categorie.nom }}" class="form-control">
127
  </div>
128
  <div class="col-md-4 mb-2">
129
  <select name="edit_matiere_id_{{ sous_categorie.id }}" class="form-control">
@@ -135,49 +283,62 @@
135
  </select>
136
  </div>
137
  <div class="col-md-2">
138
- <button type="submit" class="btn btn-success btn-block">Enregistrer</button>
 
 
 
 
 
 
 
139
  </div>
140
  </div>
141
- <button type="button" class="btn btn-secondary btn-sm cancel-edit">Annuler</button>
142
  </form>
143
  </li>
144
  {% else %}
145
- <li class="list-group-item">Aucune sous-catégorie trouvée.</li>
146
  {% endfor %}
147
  </ul>
148
  </div>
149
  </div>
150
 
151
  <!-- Onglet Textes -->
152
- <div class="tab-pane fade" id="textes" role="tabpanel" aria-labelledby="textes-tab">
153
- <div class="card mt-3">
154
  <div class="card-header">
155
- Liste des Textes
156
  </div>
157
  <ul class="list-group list-group-flush">
158
  {% for texte in textes %}
159
  <li class="list-group-item">
160
  <div class="d-flex justify-content-between align-items-center">
161
  <span class="display-mode">
162
- <strong>{{ texte.titre }}</strong> <br>
163
- <small class="text-muted">{{ texte.sous_categorie.nom }} ({{ texte.sous_categorie.matiere.nom }})</small>
 
 
 
 
164
  </span>
165
- <div>
166
- <button class="btn btn-warning btn-sm edit-button">Modifier</button>
 
 
167
  <form method="post" class="d-inline">
168
  <input type="hidden" name="action" value="delete_texte_{{ texte.id }}">
169
- <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce texte ?');">Supprimer</button>
 
 
170
  </form>
171
  </div>
172
  </div>
173
- <!-- Formulaire d'édition caché -->
174
- <form method="post" class="editable mt-2">
175
  <input type="hidden" name="action" value="edit_texte_{{ texte.id }}">
176
  <div class="form-group">
177
- <input type="text" name="edit_titre_texte_{{ texte.id }}" value="{{ texte.titre }}" class="form-control mb-2">
178
  </div>
179
  <div class="form-group">
180
- <textarea name="edit_contenu_texte_{{ texte.id }}" class="form-control mb-2" rows="3">{{ texte.contenu }}</textarea>
181
  </div>
182
  <div class="form-row">
183
  <div class="col-md-8 mb-2">
@@ -190,24 +351,32 @@
190
  </select>
191
  </div>
192
  <div class="col-md-4">
193
- <button type="submit" class="btn btn-success btn-block">Enregistrer</button>
 
 
 
 
 
 
 
194
  </div>
195
  </div>
196
- <button type="button" class="btn btn-secondary btn-sm cancel-edit">Annuler</button>
197
  </form>
198
  </li>
199
  {% else %}
200
- <li class="list-group-item">Aucun texte trouvé.</li>
201
  {% endfor %}
202
  </ul>
203
  </div>
204
  </div>
205
 
206
  <!-- Onglet Ajouter -->
207
- <div class="tab-pane fade" id="ajouter" role="tabpanel" aria-labelledby="ajouter-tab">
208
  <!-- Formulaire d'ajout d'une matière -->
209
  <div class="card mt-3">
210
- <div class="card-header">Ajouter une Matière</div>
 
 
211
  <div class="card-body">
212
  <form method="post">
213
  <input type="hidden" name="action" value="add_matiere">
@@ -215,13 +384,18 @@
215
  <label for="nom_matiere">Nom de la Matière</label>
216
  <input type="text" id="nom_matiere" name="nom_matiere" class="form-control" required>
217
  </div>
218
- <button type="submit" class="btn btn-primary">Ajouter</button>
 
 
219
  </form>
220
  </div>
221
  </div>
 
222
  <!-- Formulaire d'ajout d'une sous-catégorie -->
223
  <div class="card mt-3">
224
- <div class="card-header">Ajouter une Sous-Catégorie</div>
 
 
225
  <div class="card-body">
226
  <form method="post">
227
  <input type="hidden" name="action" value="add_sous_categorie">
@@ -237,13 +411,18 @@
237
  {% endfor %}
238
  </select>
239
  </div>
240
- <button type="submit" class="btn btn-primary">Ajouter</button>
 
 
241
  </form>
242
  </div>
243
  </div>
 
244
  <!-- Formulaire d'ajout d'un texte -->
245
  <div class="card mt-3">
246
- <div class="card-header">Ajouter un Texte</div>
 
 
247
  <div class="card-body">
248
  <form method="post">
249
  <input type="hidden" name="action" value="add_texte">
@@ -263,31 +442,50 @@
263
  {% endfor %}
264
  </select>
265
  </div>
266
- <button type="submit" class="btn btn-primary">Ajouter</button>
 
 
267
  </form>
268
  </div>
269
  </div>
270
  </div>
271
- </div><!-- Fin du tab-content -->
272
- </div><!-- Fin du container -->
273
 
274
- <!-- jQuery, Popper et Bootstrap JS -->
275
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
276
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
277
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
278
  <script>
279
  $(document).ready(function() {
280
- // Afficher le formulaire d'édition au clic sur "Modifier"
281
- $('.edit-button').click(function() {
282
- $(this).closest('li').find('.editable').slideDown();
283
- $(this).closest('li').find('.display-mode').hide();
 
 
284
  $(this).hide();
285
  });
286
- // Annuler l'édition
287
- $('.cancel-edit').click(function() {
288
- $(this).closest('form').slideUp();
289
- $(this).closest('li').find('.display-mode').show();
290
- $(this).closest('li').find('.edit-button').show();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
  });
292
  });
293
  </script>
 
4
  <meta charset="UTF-8">
5
  <title>Gestion des Données</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
7
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
9
  <style>
10
  body {
11
  background-color: #f8f9fa;
12
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
  }
14
+
15
+ .container {
16
+ max-width: 1200px;
17
+ margin: 0 auto;
18
+ padding: 2rem;
19
+ }
20
+
21
+ .page-title {
22
+ color: #2c3e50;
23
+ margin-bottom: 2rem;
24
+ font-weight: 600;
25
+ }
26
+
27
  .card {
28
  margin-bottom: 20px;
29
+ border: none;
30
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
31
+ transition: transform 0.2s ease-in-out;
32
+ }
33
+
34
+ .card:hover {
35
+ transform: translateY(-2px);
36
+ }
37
+
38
+ .card-header {
39
+ background-color: #f8f9fa;
40
+ border-bottom: 2px solid #e9ecef;
41
+ font-weight: 600;
42
+ padding: 1rem 1.25rem;
43
+ }
44
+
45
+ .nav-tabs {
46
+ border-bottom: 2px solid #dee2e6;
47
+ margin-bottom: 1rem;
48
+ }
49
+
50
+ .nav-tabs .nav-link {
51
+ border: none;
52
+ color: #6c757d;
53
+ font-weight: 500;
54
+ padding: 1rem 1.5rem;
55
+ transition: all 0.2s ease-in-out;
56
+ }
57
+
58
+ .nav-tabs .nav-link:hover {
59
+ border: none;
60
+ color: #007bff;
61
  }
62
+
63
  .nav-tabs .nav-link.active {
64
+ background-color: transparent;
65
+ border: none;
66
+ border-bottom: 2px solid #007bff;
67
+ color: #007bff;
68
+ }
69
+
70
+ .list-group-item {
71
+ border: none;
72
+ border-bottom: 1px solid #e9ecef;
73
+ padding: 1rem;
74
+ }
75
+
76
+ .list-group-item:last-child {
77
+ border-bottom: none;
78
+ }
79
+
80
+ .btn {
81
+ border-radius: 4px;
82
+ padding: 0.5rem 1rem;
83
+ transition: all 0.2s ease-in-out;
84
+ }
85
+
86
+ .btn-warning {
87
+ background-color: #ffc107;
88
+ border-color: #ffc107;
89
+ color: #212529;
90
+ }
91
+
92
+ .btn-danger {
93
+ background-color: #dc3545;
94
+ border-color: #dc3545;
95
+ color: #fff;
96
+ }
97
+
98
+ .btn-success {
99
+ background-color: #28a745;
100
+ border-color: #28a745;
101
+ color: #fff;
102
+ }
103
+
104
+ .form-control {
105
+ border-radius: 4px;
106
+ border: 1px solid #ced4da;
107
+ padding: 0.5rem;
108
  }
109
+
110
+ .form-control:focus {
111
+ border-color: #80bdff;
112
+ box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
113
+ }
114
+
115
+ .alert {
116
+ border-radius: 4px;
117
+ margin-bottom: 1rem;
118
+ animation: fadeInOut 5s ease-in-out;
119
+ }
120
+
121
+ @keyframes fadeInOut {
122
+ 0% { opacity: 0; }
123
+ 10% { opacity: 1; }
124
+ 90% { opacity: 1; }
125
+ 100% { opacity: 0; }
126
+ }
127
+
128
  .editable {
129
  display: none;
130
+ background-color: #f8f9fa;
131
+ padding: 1rem;
132
+ border-radius: 4px;
133
+ margin-top: 0.5rem;
134
  }
135
+
136
+ .display-mode {
137
+ line-height: 1.5;
138
+ }
139
+
140
+ .action-buttons {
141
+ display: flex;
142
+ gap: 0.5rem;
143
+ }
144
+
145
+ .text-muted {
146
+ font-size: 0.875rem;
147
+ }
148
+
149
+ .btn-icon {
150
+ display: inline-flex;
151
+ align-items: center;
152
+ gap: 0.5rem;
153
  }
154
  </style>
155
  </head>
156
  <body>
157
  <div class="container mt-4">
158
+ <h1 class="page-title">Gestion des Données</h1>
159
 
160
  {% with messages = get_flashed_messages(with_categories=true) %}
161
  {% if messages %}
 
170
  {% endif %}
171
  {% endwith %}
172
 
 
173
  <ul class="nav nav-tabs" id="gestionTab" role="tablist">
174
  <li class="nav-item">
175
+ <a class="nav-link active" id="matieres-tab" data-toggle="tab" href="#matieres" role="tab">
176
+ <i class="fas fa-book"></i> Matières
177
+ </a>
178
  </li>
179
  <li class="nav-item">
180
+ <a class="nav-link" id="sous-categories-tab" data-toggle="tab" href="#sous-categories" role="tab">
181
+ <i class="fas fa-list"></i> Sous-Catégories
182
+ </a>
183
  </li>
184
  <li class="nav-item">
185
+ <a class="nav-link" id="textes-tab" data-toggle="tab" href="#textes" role="tab">
186
+ <i class="fas fa-file-alt"></i> Textes
187
+ </a>
188
  </li>
189
  <li class="nav-item">
190
+ <a class="nav-link" id="ajouter-tab" data-toggle="tab" href="#ajouter" role="tab">
191
+ <i class="fas fa-plus-circle"></i> Ajouter
192
+ </a>
193
  </li>
194
  </ul>
195
 
196
  <div class="tab-content" id="gestionTabContent">
197
  <!-- Onglet Matières -->
198
+ <div class="tab-pane fade show active" id="matieres" role="tabpanel">
199
+ <div class="card">
200
  <div class="card-header">
201
+ <i class="fas fa-book mr-2"></i>Liste des Matières
202
  </div>
203
  <ul class="list-group list-group-flush">
204
  {% for matiere in matieres %}
205
  <li class="list-group-item">
206
  <div class="d-flex justify-content-between align-items-center">
207
  <span class="display-mode">{{ matiere.nom }}</span>
208
+ <div class="action-buttons">
209
+ <button class="btn btn-warning btn-sm btn-icon edit-button">
210
+ <i class="fas fa-edit"></i> Modifier
211
+ </button>
212
  <form method="post" class="d-inline">
213
  <input type="hidden" name="action" value="delete_matiere_{{ matiere.id }}">
214
+ <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette matière ?');">
215
+ <i class="fas fa-trash"></i> Supprimer
216
+ </button>
217
  </form>
218
  </div>
219
  </div>
220
+ <form method="post" class="editable">
 
221
  <input type="hidden" name="action" value="edit_matiere_{{ matiere.id }}">
222
  <div class="input-group">
223
  <input type="text" name="edit_nom_matiere_{{ matiere.id }}" value="{{ matiere.nom }}" class="form-control">
224
  <div class="input-group-append">
225
+ <button type="submit" class="btn btn-success btn-icon">
226
+ <i class="fas fa-check"></i> Enregistrer
227
+ </button>
228
+ <button type="button" class="btn btn-secondary btn-icon cancel-edit">
229
+ <i class="fas fa-times"></i> Annuler
230
+ </button>
231
  </div>
232
  </div>
233
  </form>
234
  </li>
235
  {% else %}
236
+ <li class="list-group-item text-center text-muted">Aucune matière trouvée.</li>
237
  {% endfor %}
238
  </ul>
239
  </div>
240
  </div>
241
 
242
  <!-- Onglet Sous-Catégories -->
243
+ <div class="tab-pane fade" id="sous-categories" role="tabpanel">
244
+ <div class="card">
245
  <div class="card-header">
246
+ <i class="fas fa-list mr-2"></i>Liste des Sous-Catégories
247
  </div>
248
  <ul class="list-group list-group-flush">
249
  {% for sous_categorie in sous_categories %}
250
  <li class="list-group-item">
251
  <div class="d-flex justify-content-between align-items-center">
252
  <span class="display-mode">
253
+ {{ sous_categorie.nom }}
254
+ <small class="text-muted">
255
+ <i class="fas fa-book mr-1"></i>{{ sous_categorie.matiere.nom }}
256
+ </small>
257
  </span>
258
+ <div class="action-buttons">
259
+ <button class="btn btn-warning btn-sm btn-icon edit-button">
260
+ <i class="fas fa-edit"></i> Modifier
261
+ </button>
262
  <form method="post" class="d-inline">
263
  <input type="hidden" name="action" value="delete_sous_categorie_{{ sous_categorie.id }}">
264
+ <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette sous-catégorie ?');">
265
+ <i class="fas fa-trash"></i> Supprimer
266
+ </button>
267
  </form>
268
  </div>
269
  </div>
270
+ <form method="post" class="editable">
 
271
  <input type="hidden" name="action" value="edit_sous_categorie_{{ sous_categorie.id }}">
272
  <div class="form-row">
273
  <div class="col-md-6 mb-2">
274
+ <input type="text" name="edit_nom_sous_categorie_{{ sous_categorie.id }}" value="{{ sous_categorie.nom }}" class="form-control" placeholder="Nom">
275
  </div>
276
  <div class="col-md-4 mb-2">
277
  <select name="edit_matiere_id_{{ sous_categorie.id }}" class="form-control">
 
283
  </select>
284
  </div>
285
  <div class="col-md-2">
286
+ <div class="btn-group">
287
+ <button type="submit" class="btn btn-success btn-icon">
288
+ <i class="fas fa-check"></i> Enregistrer
289
+ </button>
290
+ <button type="button" class="btn btn-secondary btn-icon cancel-edit">
291
+ <i class="fas fa-times"></i> Annuler
292
+ </button>
293
+ </div>
294
  </div>
295
  </div>
 
296
  </form>
297
  </li>
298
  {% else %}
299
+ <li class="list-group-item text-center text-muted">Aucune sous-catégorie trouvée.</li>
300
  {% endfor %}
301
  </ul>
302
  </div>
303
  </div>
304
 
305
  <!-- Onglet Textes -->
306
+ <div class="tab-pane fade" id="textes" role="tabpanel">
307
+ <div class="card">
308
  <div class="card-header">
309
+ <i class="fas fa-file-alt mr-2"></i>Liste des Textes
310
  </div>
311
  <ul class="list-group list-group-flush">
312
  {% for texte in textes %}
313
  <li class="list-group-item">
314
  <div class="d-flex justify-content-between align-items-center">
315
  <span class="display-mode">
316
+ <strong>{{ texte.titre }}</strong>
317
+ <br>
318
+ <small class="text-muted">
319
+ <i class="fas fa-list mr-1"></i>{{ texte.sous_categorie.nom }}
320
+ <i class="fas fa-book ml-2 mr-1"></i>{{ texte.sous_categorie.matiere.nom }}
321
+ </small>
322
  </span>
323
+ <div class="action-buttons">
324
+ <button class="btn btn-warning btn-sm btn-icon edit-button">
325
+ <i class="fas fa-edit"></i> Modifier
326
+ </button>
327
  <form method="post" class="d-inline">
328
  <input type="hidden" name="action" value="delete_texte_{{ texte.id }}">
329
+ <button type="submit" class="btn btn-danger btn-sm btn-icon" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce texte ?');">
330
+ <i class="fas fa-trash"></i> Supprimer
331
+ </button>
332
  </form>
333
  </div>
334
  </div>
335
+ <form method="post" class="editable">
 
336
  <input type="hidden" name="action" value="edit_texte_{{ texte.id }}">
337
  <div class="form-group">
338
+ <input type="text" name="edit_titre_texte_{{ texte.id }}" value="{{ texte.titre }}" class="form-control" placeholder="Titre">
339
  </div>
340
  <div class="form-group">
341
+ <textarea name="edit_contenu_texte_{{ texte.id }}" class="form-control" rows="3" placeholder="Contenu">{{ texte.contenu }}</textarea>
342
  </div>
343
  <div class="form-row">
344
  <div class="col-md-8 mb-2">
 
351
  </select>
352
  </div>
353
  <div class="col-md-4">
354
+ <div class="btn-group">
355
+ <button type="submit" class="btn btn-success btn-icon">
356
+ <i class="fas fa-check"></i> Enregistrer
357
+ </button>
358
+ <button type="button" class="btn btn-secondary btn-icon cancel-edit">
359
+ <i class="fas fa-times"></i> Annuler
360
+ </button>
361
+ </div>
362
  </div>
363
  </div>
 
364
  </form>
365
  </li>
366
  {% else %}
367
+ <li class="list-group-item text-center text-muted">Aucun texte trouvé.</li>
368
  {% endfor %}
369
  </ul>
370
  </div>
371
  </div>
372
 
373
  <!-- Onglet Ajouter -->
374
+ <div class="tab-pane fade" id="ajouter" role="tabpanel">
375
  <!-- Formulaire d'ajout d'une matière -->
376
  <div class="card mt-3">
377
+ <div class="card-header">
378
+ <i class="fas fa-plus-circle mr-2"></i>Ajouter une Matière
379
+ </div>
380
  <div class="card-body">
381
  <form method="post">
382
  <input type="hidden" name="action" value="add_matiere">
 
384
  <label for="nom_matiere">Nom de la Matière</label>
385
  <input type="text" id="nom_matiere" name="nom_matiere" class="form-control" required>
386
  </div>
387
+ <button type="submit" class="btn btn-primary btn-icon">
388
+ <i class="fas fa-plus"></i> Ajouter
389
+ </button>
390
  </form>
391
  </div>
392
  </div>
393
+
394
  <!-- Formulaire d'ajout d'une sous-catégorie -->
395
  <div class="card mt-3">
396
+ <div class="card-header">
397
+ <i class="fas fa-plus-circle mr-2"></i>Ajouter une Sous-Catégorie
398
+ </div>
399
  <div class="card-body">
400
  <form method="post">
401
  <input type="hidden" name="action" value="add_sous_categorie">
 
411
  {% endfor %}
412
  </select>
413
  </div>
414
+ <button type="submit" class="btn btn-primary btn-icon">
415
+ <i class="fas fa-plus"></i> Ajouter
416
+ </button>
417
  </form>
418
  </div>
419
  </div>
420
+
421
  <!-- Formulaire d'ajout d'un texte -->
422
  <div class="card mt-3">
423
+ <div class="card-header">
424
+ <i class="fas fa-plus-circle mr-2"></i>Ajouter un Texte
425
+ </div>
426
  <div class="card-body">
427
  <form method="post">
428
  <input type="hidden" name="action" value="add_texte">
 
442
  {% endfor %}
443
  </select>
444
  </div>
445
+ <button type="submit" class="btn btn-primary btn-icon">
446
+ <i class="fas fa-plus"></i> Ajouter
447
+ </button>
448
  </form>
449
  </div>
450
  </div>
451
  </div>
452
+ </div>
453
+ </div>
454
 
455
+ <!-- Scripts -->
456
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
457
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
458
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
459
  <script>
460
  $(document).ready(function() {
461
+ // Gestion des boutons Modifier
462
+ $(document).on('click', '.edit-button', function(e) {
463
+ e.preventDefault();
464
+ const listItem = $(this).closest('li');
465
+ listItem.find('.editable').slideDown();
466
+ listItem.find('.display-mode').hide();
467
  $(this).hide();
468
  });
469
+
470
+ // Gestion des boutons Annuler
471
+ $(document).on('click', '.cancel-edit', function(e) {
472
+ e.preventDefault();
473
+ const listItem = $(this).closest('li');
474
+ listItem.find('.editable').slideUp();
475
+ listItem.find('.display-mode').show();
476
+ listItem.find('.edit-button').show();
477
+ });
478
+
479
+ // Animation pour les alertes
480
+ $('.alert').delay(4000).fadeOut(500);
481
+
482
+ // Confirmation personnalisée pour la suppression
483
+ $('form[method="post"]').on('submit', function(e) {
484
+ if ($(this).find('button[type="submit"]').hasClass('btn-danger')) {
485
+ if (!confirm('Êtes-vous sûr de vouloir supprimer cet élément ?')) {
486
+ e.preventDefault();
487
+ }
488
+ }
489
  });
490
  });
491
  </script>