You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
9.0 KiB
218 lines
9.0 KiB
<!DOCTYPE html> |
|
<html lang="fr"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
<title>IAProf</title> |
|
<!-- SB Admin Bootstrap CSS --> |
|
<link href="https://cdn.jsdelivr.net/npm/startbootstrap-sb-admin@7.0.6/dist/css/styles.min.css" rel="stylesheet"> |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
<style> |
|
:root { |
|
color-scheme: light dark; |
|
} |
|
body, .bg-light { |
|
background-color: #f8f9fa; |
|
color: #212529; |
|
} |
|
@media (prefers-color-scheme: dark) { |
|
html, body, .bg-light { |
|
background-color: #181a1b !important; |
|
color: #f8f9fa !important; |
|
} |
|
.card, .card-header, .card-body { |
|
background-color: #23272b !important; |
|
color: #f8f9fa !important; |
|
} |
|
.table { |
|
color: #f8f9fa; |
|
background-color: #23272b; |
|
} |
|
.table-bordered th, .table-bordered td { |
|
border-color: #444c56; |
|
} |
|
.form-select, .form-label, .btn, .alert { |
|
background-color: #23272b !important; |
|
color: #f8f9fa !important; |
|
border-color: #444c56 !important; |
|
} |
|
.btn-primary { |
|
background-color: #375a7f !important; |
|
border-color: #375a7f !important; |
|
} |
|
.btn-danger { |
|
background-color: #c9302c !important; |
|
border-color: #c9302c !important; |
|
} |
|
.btn-success { |
|
background-color: #449d44 !important; |
|
border-color: #449d44 !important; |
|
} |
|
.navbar, .navbar-dark, .bg-dark { |
|
background-color: #23272b !important; |
|
} |
|
.alert-warning { |
|
background-color: #3a3a3a !important; |
|
color: #ffe082 !important; |
|
border-color: #444c56 !important; |
|
} |
|
[class*="bg-"] { |
|
background-color: inherit !important; |
|
} |
|
#processingModal .modal-content, #processingModal .modal-header, #processingModal .modal-body, #processingModal p, #processingModal .modal-body * { |
|
background-color: #fff !important; |
|
color: #212529 !important; |
|
} |
|
@media (prefers-color-scheme: dark) { |
|
#processingModal .modal-content, #processingModal .modal-header, #processingModal .modal-body, #processingModal p, #processingModal .modal-body * { |
|
background-color: #fff !important; |
|
color: #212529 !important; |
|
} |
|
} |
|
#btn-aide { |
|
background-color: #ffe082 !important; |
|
color: #23272b !important; |
|
border: 1px solid #444c56 !important; |
|
font-weight: 600; |
|
} |
|
@media (prefers-color-scheme: dark) { |
|
#btn-aide { |
|
background-color: #ffe082 !important; |
|
color: #23272b !important; |
|
border: 1px solid #444c56 !important; |
|
font-weight: 600; |
|
} |
|
} |
|
} |
|
#aideModal .modal-content, #aideModal .modal-header, #aideModal .modal-body, #aideModal p, #aideModal .modal-body * { |
|
background-color: #fff !important; |
|
color: #212529 !important; |
|
} |
|
@media (prefers-color-scheme: dark) { |
|
#aideModal .modal-content, #aideModal .modal-header, #aideModal .modal-body, #aideModal p, #aideModal .modal-body * { |
|
background-color: #fff !important; |
|
color: #212529 !important; |
|
} |
|
} |
|
html, body { |
|
height: 100%; |
|
margin: 0; |
|
padding: 0; |
|
overflow: hidden; |
|
} |
|
body { |
|
min-height: 100vh; |
|
overflow: hidden; |
|
} |
|
#layoutSidenav { |
|
min-height: 0; |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
#layoutSidenav_content { |
|
min-height: 0; |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
main { |
|
min-height: 0; |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
.container-fluid { |
|
min-height: 0; |
|
overflow: hidden; |
|
} |
|
.card.shadow.mb-4 { |
|
min-height: 0; |
|
overflow: hidden; |
|
} |
|
.card-body { |
|
min-height: 0; |
|
overflow: hidden; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body class="bg-light"> |
|
<nav class="navbar navbar-expand navbar-dark bg-dark"> |
|
<a class="navbar-brand ps-3" href="#">IAProf</a> |
|
<ul class="navbar-nav ms-auto me-3"> |
|
<li class="nav-item"> |
|
<a class="nav-link" href="/logout/">Se déconnecter</a> |
|
</li> |
|
</ul> |
|
</nav> |
|
<div id="layoutSidenav"> |
|
<div id="layoutSidenav_content"> |
|
<main> |
|
<div class="container-fluid px-4 mt-4"> |
|
<div class="card shadow mb-4"> |
|
<div class="card-header py-3 d-flex justify-content-between align-items-center"> |
|
<h2 class="m-0 font-weight-bold text-primary">Choix du fichier de bulletins à traiter :</h2> |
|
<button id="btn-aide" type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#aideModal">Aide</button> |
|
</div> |
|
<div class="modal fade" id="aideModal" tabindex="-1" aria-labelledby="aideModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title" id="aideModalLabel">Aide : Exporter un PDF Pronote</h5> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button> |
|
</div> |
|
<div class="modal-body"> |
|
Dans Pronote, aller dans <b>Bulletins > Bulletin</b>, choisir la classe et appuyer en haut à droite sur <b>PDF</b>, puis sur l'engrenage en sélectionnant <b>"Bulletins élèves de toute la classe"</b>.<br>Valider puis appuyer sur <b>Voir le PDF</b>.<br>Enregistrer ce PDF pour le mettre dans l'application IAProf. |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="card-body"> |
|
{% if success %} |
|
<div class="alert alert-success">Fichiers reçus avec succès !<br> |
|
Appréciations : {{ appreciations_filename }}<br> |
|
{% if modele_filename %}Modèle : {{ modele_filename }}<br>{% endif %} |
|
<strong>Résultat du traitement :</strong> {{ resultat }} |
|
</div> |
|
{% endif %} |
|
<div id="processingModal" class="modal fade" tabindex="-1" aria-labelledby="processingModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog modal-dialog-centered"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title" id="processingModalLabel">Traitement en cours</h5> |
|
</div> |
|
<div class="modal-body text-center"> |
|
<div class="spinner-border text-primary" role="status"> |
|
<span class="visually-hidden">Chargement...</span> |
|
</div> |
|
<p class="mt-3">Veuillez patienter pendant l'extraction des données du PDF...</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<form method="post" enctype="multipart/form-data" id="generationForm"> |
|
{% csrf_token %} |
|
<div class="mb-3"> |
|
<label for="appreciations_pdf" class="form-label">Fichier PDF du bulletin de la classe à traiter (export Pronote) :</label> |
|
<input class="form-control" type="file" id="appreciations_pdf" name="appreciations_pdf" |
|
accept="application/pdf" required> |
|
</div> |
|
<button type="submit" class="btn btn-primary">Traiter</button> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
</div> |
|
</div> |
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> |
|
<script> |
|
document.getElementById('generationForm').addEventListener('submit', function(e) { |
|
var modal = new bootstrap.Modal(document.getElementById('processingModal')); |
|
modal.show(); |
|
}); |
|
</script> |
|
</body> |
|
</html> |