|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Gestion des Données</title> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> |
|
<style> |
|
body { |
|
background-color: #f8f9fa; |
|
} |
|
.card { |
|
margin-bottom: 20px; |
|
} |
|
.nav-tabs .nav-link.active { |
|
background-color: #ffffff; |
|
border-color: #dee2e6 #dee2e6 #ffffff; |
|
} |
|
.editable { |
|
display: none; |
|
} |
|
.list-group-item { |
|
position: relative; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container mt-4"> |
|
<h1 class="mb-4">Gestion des Données</h1> |
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %} |
|
{% if messages %} |
|
{% for category, message in messages %} |
|
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert"> |
|
{{ message }} |
|
<button type="button" class="close" data-dismiss="alert" aria-label="Fermer"> |
|
<span aria-hidden="true">×</span> |
|
</button> |
|
</div> |
|
{% endfor %} |
|
{% endif %} |
|
{% endwith %} |
|
|
|
|
|
<ul class="nav nav-tabs" id="gestionTab" role="tablist"> |
|
<li class="nav-item"> |
|
<a class="nav-link active" id="matieres-tab" data-toggle="tab" href="#matieres" role="tab" aria-controls="matieres" aria-selected="true">Matières</a> |
|
</li> |
|
<li class="nav-item"> |
|
<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> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link" id="textes-tab" data-toggle="tab" href="#textes" role="tab" aria-controls="textes" aria-selected="false">Textes</a> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link" id="ajouter-tab" data-toggle="tab" href="#ajouter" role="tab" aria-controls="ajouter" aria-selected="false">Ajouter</a> |
|
</li> |
|
</ul> |
|
|
|
<div class="tab-content" id="gestionTabContent"> |
|
|
|
<div class="tab-pane fade show active" id="matieres" role="tabpanel" aria-labelledby="matieres-tab"> |
|
<div class="card mt-3"> |
|
<div class="card-header"> |
|
Liste des Matières |
|
</div> |
|
<ul class="list-group list-group-flush"> |
|
{% for matiere in matieres %} |
|
<li class="list-group-item"> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<span class="display-mode">{{ matiere.nom }}</span> |
|
<div> |
|
<button class="btn btn-warning btn-sm edit-button">Modifier</button> |
|
<form method="post" class="d-inline"> |
|
<input type="hidden" name="action" value="delete_matiere_{{ matiere.id }}"> |
|
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette matière ?');">Supprimer</button> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<form method="post" class="editable mt-2"> |
|
<input type="hidden" name="action" value="edit_matiere_{{ matiere.id }}"> |
|
<div class="input-group"> |
|
<input type="text" name="edit_nom_matiere_{{ matiere.id }}" value="{{ matiere.nom }}" class="form-control"> |
|
<div class="input-group-append"> |
|
<button type="submit" class="btn btn-success">Enregistrer</button> |
|
<button type="button" class="btn btn-secondary cancel-edit">Annuler</button> |
|
</div> |
|
</div> |
|
</form> |
|
</li> |
|
{% else %} |
|
<li class="list-group-item">Aucune matière trouvée.</li> |
|
{% endfor %} |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="tab-pane fade" id="sous-categories" role="tabpanel" aria-labelledby="sous-categories-tab"> |
|
<div class="card mt-3"> |
|
<div class="card-header"> |
|
Liste des Sous-Catégories |
|
</div> |
|
<ul class="list-group list-group-flush"> |
|
{% for sous_categorie in sous_categories %} |
|
<li class="list-group-item"> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<span class="display-mode"> |
|
{{ sous_categorie.nom }} <small class="text-muted">({{ sous_categorie.matiere.nom }})</small> |
|
</span> |
|
<div> |
|
<button class="btn btn-warning btn-sm edit-button">Modifier</button> |
|
<form method="post" class="d-inline"> |
|
<input type="hidden" name="action" value="delete_sous_categorie_{{ sous_categorie.id }}"> |
|
<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> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<form method="post" class="editable mt-2"> |
|
<input type="hidden" name="action" value="edit_sous_categorie_{{ sous_categorie.id }}"> |
|
<div class="form-row"> |
|
<div class="col-md-6 mb-2"> |
|
<input type="text" name="edit_nom_sous_categorie_{{ sous_categorie.id }}" value="{{ sous_categorie.nom }}" class="form-control"> |
|
</div> |
|
<div class="col-md-4 mb-2"> |
|
<select name="edit_matiere_id_{{ sous_categorie.id }}" class="form-control"> |
|
{% for matiere in matieres %} |
|
<option value="{{ matiere.id }}" {% if matiere.id == sous_categorie.matiere_id %}selected{% endif %}> |
|
{{ matiere.nom }} |
|
</option> |
|
{% endfor %} |
|
</select> |
|
</div> |
|
<div class="col-md-2"> |
|
<button type="submit" class="btn btn-success btn-block">Enregistrer</button> |
|
</div> |
|
</div> |
|
<button type="button" class="btn btn-secondary btn-sm cancel-edit">Annuler</button> |
|
</form> |
|
</li> |
|
{% else %} |
|
<li class="list-group-item">Aucune sous-catégorie trouvée.</li> |
|
{% endfor %} |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="tab-pane fade" id="textes" role="tabpanel" aria-labelledby="textes-tab"> |
|
<div class="card mt-3"> |
|
<div class="card-header"> |
|
Liste des Textes |
|
</div> |
|
<ul class="list-group list-group-flush"> |
|
{% for texte in textes %} |
|
<li class="list-group-item"> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<span class="display-mode"> |
|
<strong>{{ texte.titre }}</strong> <br> |
|
<small class="text-muted">{{ texte.sous_categorie.nom }} ({{ texte.sous_categorie.matiere.nom }})</small> |
|
</span> |
|
<div> |
|
<button class="btn btn-warning btn-sm edit-button">Modifier</button> |
|
<form method="post" class="d-inline"> |
|
<input type="hidden" name="action" value="delete_texte_{{ texte.id }}"> |
|
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce texte ?');">Supprimer</button> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<form method="post" class="editable mt-2"> |
|
<input type="hidden" name="action" value="edit_texte_{{ texte.id }}"> |
|
<div class="form-group"> |
|
<input type="text" name="edit_titre_texte_{{ texte.id }}" value="{{ texte.titre }}" class="form-control mb-2"> |
|
</div> |
|
<div class="form-group"> |
|
<textarea name="edit_contenu_texte_{{ texte.id }}" class="form-control mb-2" rows="3">{{ texte.contenu }}</textarea> |
|
</div> |
|
<div class="form-row"> |
|
<div class="col-md-8 mb-2"> |
|
<select name="edit_sous_categorie_id_{{ texte.id }}" class="form-control"> |
|
{% for sous_categorie in sous_categories %} |
|
<option value="{{ sous_categorie.id }}" {% if sous_categorie.id == texte.sous_categorie_id %}selected{% endif %}> |
|
{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }}) |
|
</option> |
|
{% endfor %} |
|
</select> |
|
</div> |
|
<div class="col-md-4"> |
|
<button type="submit" class="btn btn-success btn-block">Enregistrer</button> |
|
</div> |
|
</div> |
|
<button type="button" class="btn btn-secondary btn-sm cancel-edit">Annuler</button> |
|
</form> |
|
</li> |
|
{% else %} |
|
<li class="list-group-item">Aucun texte trouvé.</li> |
|
{% endfor %} |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="tab-pane fade" id="ajouter" role="tabpanel" aria-labelledby="ajouter-tab"> |
|
|
|
<div class="card mt-3"> |
|
<div class="card-header">Ajouter une Matière</div> |
|
<div class="card-body"> |
|
<form method="post"> |
|
<input type="hidden" name="action" value="add_matiere"> |
|
<div class="form-group"> |
|
<label for="nom_matiere">Nom de la Matière</label> |
|
<input type="text" id="nom_matiere" name="nom_matiere" class="form-control" required> |
|
</div> |
|
<button type="submit" class="btn btn-primary">Ajouter</button> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<div class="card mt-3"> |
|
<div class="card-header">Ajouter une Sous-Catégorie</div> |
|
<div class="card-body"> |
|
<form method="post"> |
|
<input type="hidden" name="action" value="add_sous_categorie"> |
|
<div class="form-group"> |
|
<label for="nom_sous_categorie">Nom de la Sous-Catégorie</label> |
|
<input type="text" id="nom_sous_categorie" name="nom_sous_categorie" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="matiere_id">Matière associée</label> |
|
<select id="matiere_id" name="matiere_id" class="form-control" required> |
|
{% for matiere in matieres %} |
|
<option value="{{ matiere.id }}">{{ matiere.nom }}</option> |
|
{% endfor %} |
|
</select> |
|
</div> |
|
<button type="submit" class="btn btn-primary">Ajouter</button> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<div class="card mt-3"> |
|
<div class="card-header">Ajouter un Texte</div> |
|
<div class="card-body"> |
|
<form method="post"> |
|
<input type="hidden" name="action" value="add_texte"> |
|
<div class="form-group"> |
|
<label for="titre_texte">Titre du Texte</label> |
|
<input type="text" id="titre_texte" name="titre_texte" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="contenu_texte">Contenu du Texte</label> |
|
<textarea id="contenu_texte" name="contenu_texte" class="form-control" rows="5" required></textarea> |
|
</div> |
|
<div class="form-group"> |
|
<label for="sous_categorie_id">Sous-Catégorie</label> |
|
<select id="sous_categorie_id" name="sous_categorie_id" class="form-control" required> |
|
{% for sous_categorie in sous_categories %} |
|
<option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option> |
|
{% endfor %} |
|
</select> |
|
</div> |
|
<button type="submit" class="btn btn-primary">Ajouter</button> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> |
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|
<script> |
|
$(document).ready(function() { |
|
|
|
$('.edit-button').click(function() { |
|
$(this).closest('li').find('.editable').slideDown(); |
|
$(this).closest('li').find('.display-mode').hide(); |
|
$(this).hide(); |
|
}); |
|
|
|
$('.cancel-edit').click(function() { |
|
$(this).closest('form').slideUp(); |
|
$(this).closest('li').find('.display-mode').show(); |
|
$(this).closest('li').find('.edit-button').show(); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
