240 lines
12 KiB
PHP
240 lines
12 KiB
PHP
<?php
|
|
// Template : Tableau de statistiques Agenda avec filtres et pagination
|
|
?>
|
|
<div class="wrap">
|
|
<h1><?php esc_html_e('Statistiques Agenda', 'esi_crvi_agenda'); ?></h1>
|
|
|
|
<!-- Zone 1: Filtres -->
|
|
<section class="stats-filters-container" style="background: #fff; padding: 20px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px;">
|
|
<form class="stats-filters" method="get" onsubmit="return false;" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; align-items: end;">
|
|
<div class="filter">
|
|
<label for="stats_date" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Date', 'esi_crvi_agenda'); ?></label>
|
|
<input type="date" id="stats_date" name="date" class="form-control" style="width: 100%;">
|
|
</div>
|
|
<div class="filter">
|
|
<label for="stats_local" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Local', 'esi_crvi_agenda'); ?></label>
|
|
<select id="stats_local" name="local" class="select2 form-control" style="width: 100%;">
|
|
<option value=""><?php esc_html_e('Tous', 'esi_crvi_agenda'); ?></option>
|
|
<?php
|
|
foreach ($locals as $local) {
|
|
echo '<option value="' . esc_attr($local['id']) . '">' . esc_html($local['nom']) . '</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
<div class="filter">
|
|
<label for="stats_personne" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Personne', 'esi_crvi_agenda'); ?></label>
|
|
<select id="stats_personne" name="personne" class="select2 form-control" style="width: 100%;">
|
|
<option value=""><?php esc_html_e('Toutes', 'esi_crvi_agenda'); ?></option>
|
|
<?php
|
|
foreach ($intervenants as $intervenant) {
|
|
echo '<option value="' . esc_attr($intervenant['id']) . '">' . esc_html($intervenant['nom']) . '</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
<div class="filter">
|
|
<label for="stats_type_intervention" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Type d\'intervention', 'esi_crvi_agenda'); ?></label>
|
|
<select id="stats_type_intervention" name="type_intervention" class="select2 form-control" style="width: 100%;">
|
|
<option value=""><?php esc_html_e('Tous', 'esi_crvi_agenda'); ?></option>
|
|
<?php
|
|
foreach ($types_intervention as $type_intervention) {
|
|
echo '<option value="' . esc_attr($type_intervention['id']) . '">' . esc_html($type_intervention['nom']) . '</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
<div class="filter">
|
|
<label for="stats_beneficiaire" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Bénéficiaire', 'esi_crvi_agenda'); ?></label>
|
|
<select id="stats_beneficiaire" name="beneficiaire" class="select2 form-control" style="width: 100%;">
|
|
<option value=""><?php esc_html_e('Tous', 'esi_crvi_agenda'); ?></option>
|
|
<?php
|
|
foreach ($beneficiaires as $beneficiaire) {
|
|
echo '<option value="' . esc_attr($beneficiaire['id']) . '">' . esc_html($beneficiaire['nom']) . '</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
<div class="filter">
|
|
<label for="stats_langue" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Langue', 'esi_crvi_agenda'); ?></label>
|
|
<select id="stats_langue" name="langue" class="select2 form-control" style="width: 100%;">
|
|
<option value=""><?php esc_html_e('Toutes', 'esi_crvi_agenda'); ?></option>
|
|
<?php
|
|
foreach ($langues_beneficiaire as $langue) {
|
|
echo '<option value="' . esc_attr($langue['id']) . '">' . esc_html($langue['nom']) . '</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
<div class="filter">
|
|
<label for="stats_intervenant_externe" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Intervenant externe', 'esi_crvi_agenda'); ?></label>
|
|
<select id="stats_intervenant_externe" name="intervenant_externe" class="select2 form-control" style="width: 100%;">
|
|
<option value=""><?php esc_html_e('Tous', 'esi_crvi_agenda'); ?></option>
|
|
<?php
|
|
foreach ($traducteurs as $traducteur) {
|
|
echo '<option value="' . esc_attr($traducteur['id']) . '">' . esc_html($traducteur['nom']) . '</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
<div class="filter">
|
|
<label for="stats_annee" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Année', 'esi_crvi_agenda'); ?></label>
|
|
<input type="number" id="stats_annee" name="annee" min="2000" max="2100" placeholder="<?php echo date('Y'); ?>" class="form-control" style="width: 100%;">
|
|
</div>
|
|
<div class="filter">
|
|
<label for="stats_statut" style="display: block; margin-bottom: 5px; font-weight: 500;"><?php esc_html_e('Statut', 'esi_crvi_agenda'); ?></label>
|
|
<select id="stats_statut" name="statut" class="select2 form-control" style="width: 100%;">
|
|
<option value=""><?php esc_html_e('Tous', 'esi_crvi_agenda'); ?></option>
|
|
<option value="prevu"><?php esc_html_e('Prévu', 'esi_crvi_agenda'); ?></option>
|
|
<option value="cloture"><?php esc_html_e('Clôturé', 'esi_crvi_agenda'); ?></option>
|
|
<option value="absence"><?php esc_html_e('Absence', 'esi_crvi_agenda'); ?></option>
|
|
<option value="annule"><?php esc_html_e('Annulé', 'esi_crvi_agenda'); ?></option>
|
|
<option value="non_tenu"><?php esc_html_e('Non tenu', 'esi_crvi_agenda'); ?></option>
|
|
</select>
|
|
</div>
|
|
<div class="filter" style="display: flex; gap: 10px; justify-content: flex-end; align-items: end;">
|
|
<button type="button" id="stats_filterBtn" class="btn btn-primary" style="min-width: 100px;">
|
|
<i class="fas fa-filter"></i> <?php esc_html_e('Filtrer', 'esi_crvi_agenda'); ?>
|
|
</button>
|
|
<button type="button" id="stats_resetFiltersBtn" class="btn btn-secondary" style="min-width: 120px;">
|
|
<i class="fas fa-times"></i> <?php esc_html_e('Réinitialiser', 'esi_crvi_agenda'); ?>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Zone 2: Résultats -->
|
|
<section class="stats-results-container" style="background: #f5f5f5; padding: 12px 20px; margin-bottom: 15px; border-radius: 4px;">
|
|
<div class="stats-counters" style="display: flex; align-items: center; gap: 10px; font-size: 14px;">
|
|
<strong><?php esc_html_e('Total événements:', 'esi_crvi_agenda'); ?></strong>
|
|
<span id="total-count" style="font-weight: bold; color: #333;">0</span>
|
|
<span style="margin: 0 5px;">|</span>
|
|
<strong><?php esc_html_e('Affichés:', 'esi_crvi_agenda'); ?></strong>
|
|
<span id="filtered-count" style="font-weight: bold; color: #333;">0</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Zone 3: Tableau -->
|
|
<section class="stats-table-container" style="background: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; min-height: 400px; position: relative;">
|
|
<div id="stats-loading-indicator" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; width: 100%; z-index: 10;">
|
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem; margin-bottom: 20px;">
|
|
<span class="sr-only"><?php esc_html_e('Chargement...', 'esi_crvi_agenda'); ?></span>
|
|
</div>
|
|
<p style="color: #666; font-size: 16px; margin: 0; text-align: center;"><?php esc_html_e('Chargement des événements...', 'esi_crvi_agenda'); ?></p>
|
|
</div>
|
|
<div id="stats-table-wrapper" style="overflow-x: auto; display: none;">
|
|
<table class="table table-striped table-hover stats-table" id="stats-events-table" style="display: none; margin: 0; width: 100%; border-collapse: collapse;">
|
|
<thead style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
|
|
<tr>
|
|
<th style="padding: 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;"><?php esc_html_e('ID', 'esi_crvi_agenda'); ?></th>
|
|
<th style="padding: 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;"><?php esc_html_e('Date/Heure', 'esi_crvi_agenda'); ?></th>
|
|
<th style="padding: 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;"><?php esc_html_e('Intervenant', 'esi_crvi_agenda'); ?></th>
|
|
<th style="padding: 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;"><?php esc_html_e('Bénéficiaire', 'esi_crvi_agenda'); ?></th>
|
|
<th style="padding: 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;"><?php esc_html_e('Traducteur', 'esi_crvi_agenda'); ?></th>
|
|
<th style="padding: 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;"><?php esc_html_e('Langue', 'esi_crvi_agenda'); ?></th>
|
|
<th style="padding: 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;"><?php esc_html_e('Statut', 'esi_crvi_agenda'); ?></th>
|
|
<th style="padding: 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6;"><?php esc_html_e('Commentaire', 'esi_crvi_agenda'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="stats-events-table-body" style="background: #fff;">
|
|
<!-- Rempli dynamiquement par JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="stats-pagination" id="stats-pagination-container" style="display: none; padding: 15px 20px; background: #f8f9fa; border-top: 1px solid #dee2e6;">
|
|
<!-- Rempli dynamiquement par JavaScript -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<style>
|
|
.stats-table tbody tr {
|
|
border-bottom: 1px solid #e9ecef;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.stats-table tbody tr:hover {
|
|
background-color: #f8f9fa !important;
|
|
}
|
|
|
|
.stats-table tbody tr:nth-child(even) {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.stats-table tbody tr:nth-child(odd) {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.stats-table td {
|
|
padding: 12px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.stats-table .badge {
|
|
padding: 4px 8px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
}
|
|
|
|
.stats-table .badge-success {
|
|
background-color: #28a745;
|
|
color: #fff;
|
|
}
|
|
|
|
.stats-table .badge-danger {
|
|
background-color: #dc3545;
|
|
color: #fff;
|
|
}
|
|
|
|
.stats-table .badge-warning {
|
|
background-color: #ffc107;
|
|
color: #212529;
|
|
}
|
|
|
|
.stats-table .badge-secondary {
|
|
background-color: #6c757d;
|
|
color: #fff;
|
|
}
|
|
|
|
.stats-table .badge-info {
|
|
background-color: #17a2b8;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Spinner Bootstrap */
|
|
.spinner-border {
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
vertical-align: text-bottom;
|
|
border: 0.25em solid currentColor;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spinner-border 0.75s linear infinite;
|
|
}
|
|
|
|
.spinner-border.text-primary {
|
|
color: #007bff !important;
|
|
}
|
|
|
|
@keyframes spinner-border {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
</style>
|