forked from ScoDoc/ScoDoc
265 lines
10 KiB
Django/Jinja
265 lines
10 KiB
Django/Jinja
<div class="assi-tableau">
|
|
<div class="scobox-title">{{ titre }}</div>
|
|
<div class="options-tableau">
|
|
{% if afficher_options != false %}
|
|
<input type="checkbox" id="show_pres" name="show_pres"
|
|
onclick="updateTableau()" {{'checked' if options.show_pres else ''}}>
|
|
<label for="show_pres">afficher les présences</label>
|
|
|
|
<input type="checkbox" id="show_reta" name="show_reta"
|
|
onclick="updateTableau()" {{'checked' if options.show_reta else ''}}>
|
|
<label for="show_reta">afficher les retards</label>
|
|
|
|
<input type="checkbox" id="show_desc" name="show_desc"
|
|
onclick="updateTableau()" {{'checked' if options.show_desc else ''}}>
|
|
<label for="with_desc">afficher les descriptions</label>
|
|
|
|
<a style="margin-left:32px;" href="{{request.url}}&fmt=xlsx">{{scu.ICON_XLS|safe}}</a>
|
|
<br>
|
|
{% endif %}
|
|
<label for="nb_ligne_page">Nombre de lignes par page :</label>
|
|
<select name="nb_ligne_page" id="nb_ligne_page" onchange="updateTableau()">
|
|
{% for i in [25,50,100,1000] %}
|
|
{% if i == options.nb_ligne_page %}
|
|
<option selected value="{{i}}">{{i}}</option>
|
|
{% else %}
|
|
<option value="{{i}}">{{i}}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
<label for="annee_sco">Année scolaire :</label>
|
|
<select name="annee_sco" id="annee_sco" onchange="updateTableau()">
|
|
<option value="-1">Tout afficher</option>
|
|
{% for annee in range(scu.annee_scolaire(), scu.annee_scolaire()-6, -1) %}
|
|
{% if annee == options.annee_sco or (options.annee_sco == None and annee == scu.annee_scolaire()) %}
|
|
<option value="{{annee}}" selected>
|
|
{{annee}} - {{annee + 1}}
|
|
</option>
|
|
{% else %}
|
|
<option value="{{annee}}">
|
|
{{annee}} - {{annee + 1}}
|
|
</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
<br>
|
|
{% if moduleimpl_select %}
|
|
<label for="moduleimpl_select">
|
|
Filtrage du module
|
|
{{moduleimpl_select | safe}}
|
|
</label>
|
|
{% endif %}
|
|
<br>
|
|
|
|
</div>
|
|
<div class="div-tableau">
|
|
<div class="options-tableau">
|
|
<!--Pagination basée sur : https://app.uxcel.com/courses/ui-components-best-practices/best-practices-005 -->
|
|
<!-- Mettre les flèches -->
|
|
{% if total_pages > 1 %}
|
|
<ul class="pagination">
|
|
<li class="{{'disabled' if options.page == 1 else ''}}">
|
|
<a onclick="navigateToPage({{options.page - 1}})"><</a>
|
|
</li>
|
|
<!-- Toujours afficher la première page -->
|
|
<li class="{% if options.page == 1 %}active{% endif %}">
|
|
<a onclick="navigateToPage({{1}})">1</a>
|
|
</li>
|
|
|
|
<!-- Afficher les ellipses si la page courante est supérieure à 2 -->
|
|
<!-- et qu'il y a plus d'une page entre le 1 et la page courante-1 -->
|
|
{% if options.page > 2 and (options.page - 1) - 1 > 1 %}
|
|
<li class="disabled"><span>...</span></li>
|
|
{% endif %}
|
|
|
|
<!-- Afficher la page précédente, la page courante, et la page suivante -->
|
|
{% for i in range(options.page - 1, options.page + 2) %}
|
|
{% if i > 1 and i < total_pages %}
|
|
<li class="{% if options.page == i %}active{% endif %}">
|
|
<a onclick="navigateToPage({{i}})">{{ i }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<!-- Afficher les ellipses si la page courante est inférieure à l'avant-dernière page -->
|
|
<!-- et qu'il y a plus d'une page entre le total_pages et la page courante+1 -->
|
|
{% if options.page < total_pages - 1 and total_pages - (options.page + 1 ) > 1 %}
|
|
<li class="disabled"><span>...</span></li>
|
|
{% endif %}
|
|
|
|
<!-- Toujours afficher la dernière page -->
|
|
<li class="{% if options.page == total_pages %}active{% endif %}">
|
|
<a onclick="navigateToPage({{total_pages}})">{{ total_pages }}</a>
|
|
</li>
|
|
<li class="{{'disabled' if options.page == total_pages else ''}}">
|
|
<a onclick="navigateToPage({{options.page + 1}})">></a>
|
|
</li>
|
|
</ul>
|
|
{% else %}
|
|
<!-- Afficher un seul bouton si il n'y a qu'une seule page -->
|
|
<ul class="pagination">
|
|
<li class="active"><a onclick="navigateToPage({{1}})">1</a></li>
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
{{table.html() | safe}}
|
|
<div class="options-tableau">
|
|
<!--Pagination basée sur : https://app.uxcel.com/courses/ui-components-best-practices/best-practices-005 -->
|
|
<!-- Mettre les flèches -->
|
|
{% if total_pages > 1 %}
|
|
<ul class="pagination">
|
|
<li class="">
|
|
<a onclick="navigateToPage({{options.page - 1}})"><</a>
|
|
</li>
|
|
<!-- Toujours afficher la première page -->
|
|
<li class="{% if options.page == 1 %}active{% endif %}">
|
|
<a onclick="navigateToPage({{1}})">1</a>
|
|
</li>
|
|
|
|
<!-- Afficher les ellipses si la page courante est supérieure à 2 -->
|
|
<!-- et qu'il y a plus d'une page entre le 1 et la page courante-1 -->
|
|
{% if options.page > 2 and (options.page - 1) - 1 > 1 %}
|
|
<li class="disabled"><span>...</span></li>
|
|
{% endif %}
|
|
|
|
<!-- Afficher la page précédente, la page courante, et la page suivante -->
|
|
{% for i in range(options.page - 1, options.page + 2) %}
|
|
{% if i > 1 and i < total_pages %}
|
|
<li class="{% if options.page == i %}active{% endif %}">
|
|
<a onclick="navigateToPage({{i}})">{{ i }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<!-- Afficher les ellipses si la page courante est inférieure à l'avant-dernière page -->
|
|
<!-- et qu'il y a plus d'une page entre le total_pages et la page courante+1 -->
|
|
{% if options.page < total_pages - 1 and total_pages - (options.page + 1 ) > 1 %}
|
|
<li class="disabled"><span>...</span></li>
|
|
{% endif %}
|
|
|
|
<!-- Toujours afficher la dernière page -->
|
|
<li class="{% if options.page == total_pages %}active{% endif %}">
|
|
<a onclick="navigateToPage({{total_pages}})">{{ total_pages }}</a>
|
|
</li>
|
|
<li class="">
|
|
<a onclick="navigateToPage({{options.page + 1}})">></a>
|
|
</li>
|
|
</ul>
|
|
{% else %}
|
|
<!-- Afficher un seul bouton si il n'y a qu'une seule page -->
|
|
<ul class="pagination">
|
|
<li class="active"><a onclick="navigateToPage({{1}})">1</a></li>
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
// Fonction pour mettre à jour l'url avec les options du tableau
|
|
function updateTableau() {
|
|
const url = new URL(location.href);
|
|
const formValues = document.querySelectorAll(".options-tableau *[name]");
|
|
formValues.forEach((el) => {
|
|
if (el.type == "checkbox") {
|
|
url.searchParams.set(el.name, el.checked)
|
|
} else {
|
|
url.searchParams.set(el.name, el.value)
|
|
}
|
|
})
|
|
if (!url.href.endsWith("#options-tableau")) {
|
|
location.href = url.href + "#options-tableau";
|
|
} else {
|
|
location.href = url.href;
|
|
}
|
|
}
|
|
|
|
const total_pages = {{total_pages}};
|
|
// Fonction pour naviguer entre les pages, modifie le champ n_page de l'url
|
|
function navigateToPage(pageNumber){
|
|
if(pageNumber > total_pages || pageNumber < 1) return;
|
|
const url = new URL(location.href);
|
|
url.searchParams.set("n_page", pageNumber)
|
|
|
|
if (!url.href.endsWith("#options-tableau")) {
|
|
location.href = url.href + "#options-tableau";
|
|
} else {
|
|
location.href = url.href;
|
|
}
|
|
|
|
}
|
|
// Préparation des opérations de trai sur les colonnes "external-sort"
|
|
window.addEventListener('load', ()=>{
|
|
const table_columns = [...document.querySelectorAll('th.external-sort')];
|
|
table_columns.forEach((e)=>e.addEventListener('click', ()=>{
|
|
|
|
// récupération de l'ordre "ascending" / "descending"
|
|
let order = e.ariaSort;
|
|
// récupération de la colonne à ordonner
|
|
// il faut avoir une classe `external-type:<NOM COL>`
|
|
let order_col = e.className.split(" ").find((e)=>e.indexOf("external-type:") != -1);
|
|
|
|
//Création de la nouvelle url avec le tri
|
|
const url = new URL(location.href);
|
|
url.searchParams.set("order", order);
|
|
url.searchParams.set("order_col", order_col.split(":")[1]);
|
|
|
|
location.href = url.href;
|
|
|
|
}));
|
|
|
|
const selecteur = document.querySelector("#moduleimpl_select");
|
|
selecteur?.addEventListener('change', ()=>{
|
|
const url = new URL(location.href);
|
|
url.searchParams.set("moduleimpl_id", selecteur?.value);
|
|
location.href = url.href;
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.small-font {
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.div-tableau{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: fit-content;
|
|
}
|
|
|
|
.pagination li>*{
|
|
cursor: pointer;
|
|
|
|
/*Style pour les boutons de pagination*/
|
|
border: 1px solid #ccc;
|
|
background-color: #f1f1f1;
|
|
padding: 8px 16px;
|
|
font-size: 16px;
|
|
border-radius: 4px;
|
|
margin: 8px 1px;
|
|
|
|
}
|
|
.pagination li:hover >a, .pagination li.active>*{
|
|
/*Style pour les boutons actifs*/
|
|
background-color: var(--sco-color-ues);
|
|
color: white !important;
|
|
|
|
}
|
|
|
|
.pagination li.disabled>*{
|
|
/*Style pour les boutons désactivés*/
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
</style>
|