filtres sur la page zoneplaces
This commit is contained in:
Tykayn
tykayn
parent
8e43908cef
commit
5186eb17bb
3 changed files with 378 additions and 12 deletions
|
|
@ -26,20 +26,80 @@
|
|||
<i class="bi bi-info-circle"></i> Aucun changement enregistré pour cette ville.
|
||||
</div>
|
||||
{% else %}
|
||||
{# Filtres #}
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5><i class="bi bi-funnel"></i> Filtres</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<label class="form-label"><strong>Type de changement :</strong></label>
|
||||
<div class="btn-group" role="group" id="filterChangeType">
|
||||
<button type="button" class="btn btn-outline-primary active" data-filter-type="all">
|
||||
<i class="bi bi-list"></i> Tous
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger" data-filter-type="deletions">
|
||||
<i class="bi bi-trash"></i> Suppressions
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success" data-filter-type="creations">
|
||||
<i class="bi bi-plus-circle"></i> Créations
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<label class="form-label"><strong>Thème :</strong></label>
|
||||
<div class="btn-group flex-wrap" role="group" id="filterTheme">
|
||||
<button type="button" class="btn btn-outline-secondary active" data-filter-theme="all">
|
||||
<i class="bi bi-list"></i> Tous les thèmes
|
||||
</button>
|
||||
{% for theme, label in followup_labels %}
|
||||
{% if theme != 'places' %}
|
||||
{% set themeIcon = followup_icons[theme]|default('bi-question-circle') %}
|
||||
<button type="button" class="btn btn-outline-secondary" data-filter-theme="{{ theme }}">
|
||||
<i class="bi {{ themeIcon }}"></i> {{ label }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if unique_users is defined and unique_users|length > 0 %}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<label class="form-label"><strong>Utilisateur :</strong></label>
|
||||
<div class="btn-group flex-wrap" role="group" id="filterUser">
|
||||
<button type="button" class="btn btn-outline-info active" data-filter-user="all">
|
||||
<i class="bi bi-list"></i> Tous les utilisateurs
|
||||
</button>
|
||||
{% for user in unique_users %}
|
||||
<button type="button" class="btn btn-outline-info" data-filter-user="{{ user|e('html_attr') }}">
|
||||
<i class="bi bi-person"></i> {{ user }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for date, changes in changesByDate %}
|
||||
<div class="card mb-4">
|
||||
<div class="card mb-4 change-date-card" data-date="{{ date }}">
|
||||
<div class="card-header">
|
||||
<h3><i class="bi bi-calendar"></i> {{ date|date('d/m/Y') }}</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{# Suppressions #}
|
||||
{% if changes.deletions is not empty %}
|
||||
<div class="mb-4">
|
||||
<div class="mb-4 change-section" data-change-type="deletions">
|
||||
<h4 class="text-danger"><i class="bi bi-trash"></i> Suppressions</h4>
|
||||
{% for theme, objects in changes.deletions %}
|
||||
{% set themeLabel = followup_labels[theme]|default(theme|capitalize) %}
|
||||
{% set themeIcon = followup_icons[theme]|default('bi-question-circle') %}
|
||||
<div class="mb-3">
|
||||
<div class="mb-3 theme-section" data-theme="{{ theme }}">
|
||||
<h5><i class="bi {{ themeIcon }}"></i> {{ themeLabel }} ({{ objects|length }} suppression{{ objects|length > 1 ? 's' : '' }})</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover">
|
||||
|
|
@ -57,7 +117,7 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
{% for obj in objects %}
|
||||
<tr>
|
||||
<tr data-theme="{{ theme }}" data-change-type="deletions" data-user="{{ obj.user|default('')|e('html_attr') }}">
|
||||
<td><span class="badge bg-info">{{ themeLabel }}</span></td>
|
||||
<td><span class="badge bg-secondary">{{ obj.type|upper }}</span></td>
|
||||
<td><code>{{ obj.id }}</code></td>
|
||||
|
|
@ -71,9 +131,9 @@
|
|||
<span class="text-muted">Inconnu</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<td class="timestamp-cell">
|
||||
{% if obj.timestamp %}
|
||||
{{ obj.timestamp }}
|
||||
<span data-timestamp="{{ obj.timestamp }}">{{ obj.timestamp }}</span>
|
||||
{% else %}
|
||||
<span class="text-muted">N/A</span>
|
||||
{% endif %}
|
||||
|
|
@ -124,12 +184,12 @@
|
|||
|
||||
{# Créations #}
|
||||
{% if changes.creations is not empty %}
|
||||
<div>
|
||||
<div class="change-section" data-change-type="creations">
|
||||
<h4 class="text-success"><i class="bi bi-plus-circle"></i> Créations/Modifications</h4>
|
||||
{% for theme, objects in changes.creations %}
|
||||
{% set themeLabel = followup_labels[theme]|default(theme|capitalize) %}
|
||||
{% set themeIcon = followup_icons[theme]|default('bi-question-circle') %}
|
||||
<div class="mb-3">
|
||||
<div class="mb-3 theme-section" data-theme="{{ theme }}">
|
||||
<h5><i class="bi {{ themeIcon }}"></i> {{ themeLabel }} ({{ objects|length }} objet{{ objects|length > 1 ? 's' : '' }})</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover">
|
||||
|
|
@ -146,8 +206,8 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
{% for obj in objects %}
|
||||
<tr>
|
||||
<td><span class="badge bg-info">{{ theme }}</span></td>
|
||||
<tr data-theme="{{ theme }}" data-change-type="creations" data-user="{{ obj.user|default('')|e('html_attr') }}">
|
||||
<td><span class="badge bg-info">{{ themeLabel }}</span></td>
|
||||
<td><span class="badge bg-success">{{ obj.type|upper }}</span></td>
|
||||
<td><code>{{ obj.id }}</code></td>
|
||||
<td>
|
||||
|
|
@ -160,9 +220,9 @@
|
|||
<span class="text-muted">Inconnu</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<td class="timestamp-cell">
|
||||
{% if obj.timestamp %}
|
||||
{{ obj.timestamp }}
|
||||
<span data-timestamp="{{ obj.timestamp }}">{{ obj.timestamp }}</span>
|
||||
{% else %}
|
||||
<span class="text-muted">N/A</span>
|
||||
{% endif %}
|
||||
|
|
@ -219,3 +279,176 @@
|
|||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let selectedChangeType = 'all';
|
||||
let selectedTheme = 'all';
|
||||
let selectedUser = 'all';
|
||||
|
||||
// Gestion des filtres par type de changement
|
||||
const changeTypeButtons = document.querySelectorAll('#filterChangeType button');
|
||||
changeTypeButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
changeTypeButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
selectedChangeType = this.getAttribute('data-filter-type');
|
||||
applyFilters();
|
||||
});
|
||||
});
|
||||
|
||||
// Gestion des filtres par thème
|
||||
const themeButtons = document.querySelectorAll('#filterTheme button');
|
||||
themeButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
themeButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
selectedTheme = this.getAttribute('data-filter-theme');
|
||||
applyFilters();
|
||||
});
|
||||
});
|
||||
|
||||
// Gestion des filtres par utilisateur
|
||||
const userButtons = document.querySelectorAll('#filterUser button');
|
||||
if (userButtons.length > 0) {
|
||||
userButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
userButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
selectedUser = this.getAttribute('data-filter-user');
|
||||
applyFilters();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const dateCards = document.querySelectorAll('.change-date-card');
|
||||
|
||||
dateCards.forEach(card => {
|
||||
let hasVisibleContent = false;
|
||||
|
||||
// Filtrer les sections de changement
|
||||
const changeSections = card.querySelectorAll('.change-section');
|
||||
changeSections.forEach(section => {
|
||||
const changeType = section.getAttribute('data-change-type');
|
||||
const shouldShowChangeType = selectedChangeType === 'all' || selectedChangeType === changeType;
|
||||
|
||||
if (!shouldShowChangeType) {
|
||||
section.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Filtrer les sections de thème
|
||||
const themeSections = section.querySelectorAll('.theme-section');
|
||||
let hasVisibleTheme = false;
|
||||
|
||||
themeSections.forEach(themeSection => {
|
||||
const theme = themeSection.getAttribute('data-theme');
|
||||
const shouldShowTheme = selectedTheme === 'all' || selectedTheme === theme;
|
||||
|
||||
if (shouldShowTheme) {
|
||||
themeSection.style.display = '';
|
||||
// Filtrer les lignes du tableau
|
||||
const rows = themeSection.querySelectorAll('tbody tr');
|
||||
rows.forEach(row => {
|
||||
const rowTheme = row.getAttribute('data-theme');
|
||||
const rowChangeType = row.getAttribute('data-change-type');
|
||||
const rowUser = row.getAttribute('data-user') || '';
|
||||
const shouldShowTheme = selectedTheme === 'all' || selectedTheme === rowTheme;
|
||||
const shouldShowChangeType = selectedChangeType === 'all' || selectedChangeType === rowChangeType;
|
||||
const shouldShowUser = selectedUser === 'all' || selectedUser === rowUser;
|
||||
|
||||
if (shouldShowTheme && shouldShowChangeType && shouldShowUser) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
hasVisibleTheme = true;
|
||||
} else {
|
||||
themeSection.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
if (hasVisibleTheme) {
|
||||
section.style.display = '';
|
||||
hasVisibleContent = true;
|
||||
} else {
|
||||
section.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Afficher ou masquer la carte de date
|
||||
if (hasVisibleContent) {
|
||||
card.style.display = '';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialiser les filtres
|
||||
applyFilters();
|
||||
|
||||
// Convertir les dates en format relatif
|
||||
function formatRelativeTime(timestamp) {
|
||||
if (!timestamp) return 'N/A';
|
||||
|
||||
try {
|
||||
// Parser la date (format peut être YYYY-MM-DD HH:MM:SS ou ISO)
|
||||
let date;
|
||||
if (timestamp.includes('T')) {
|
||||
date = new Date(timestamp);
|
||||
} else {
|
||||
// Format YYYY-MM-DD HH:MM:SS
|
||||
date = new Date(timestamp.replace(' ', 'T'));
|
||||
}
|
||||
|
||||
if (isNaN(date.getTime())) {
|
||||
return timestamp; // Retourner la date originale si parsing échoue
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffSeconds = Math.floor(diffMs / 1000);
|
||||
const diffMinutes = Math.floor(diffSeconds / 60);
|
||||
const diffHours = Math.floor(diffMinutes / 60);
|
||||
const diffDays = Math.floor(diffHours / 24);
|
||||
|
||||
if (diffDays > 0) {
|
||||
const remainingHours = diffHours % 24;
|
||||
if (remainingHours > 0) {
|
||||
return `il y a ${diffDays} jour${diffDays > 1 ? 's' : ''} et ${remainingHours} heure${remainingHours > 1 ? 's' : ''}`;
|
||||
} else {
|
||||
return `il y a ${diffDays} jour${diffDays > 1 ? 's' : ''}`;
|
||||
}
|
||||
} else if (diffHours > 0) {
|
||||
const remainingMinutes = diffMinutes % 60;
|
||||
if (remainingMinutes > 0) {
|
||||
return `il y a ${diffHours} heure${diffHours > 1 ? 's' : ''} et ${remainingMinutes} minute${remainingMinutes > 1 ? 's' : ''}`;
|
||||
} else {
|
||||
return `il y a ${diffHours} heure${diffHours > 1 ? 's' : ''}`;
|
||||
}
|
||||
} else if (diffMinutes > 0) {
|
||||
return `il y a ${diffMinutes} minute${diffMinutes > 1 ? 's' : ''}`;
|
||||
} else {
|
||||
return 'il y a moins d\'une minute';
|
||||
}
|
||||
} catch (e) {
|
||||
return timestamp; // Retourner la date originale en cas d'erreur
|
||||
}
|
||||
}
|
||||
|
||||
// Appliquer le formatage à toutes les cellules avec timestamp
|
||||
const timestampCells = document.querySelectorAll('.timestamp-cell span[data-timestamp]');
|
||||
timestampCells.forEach(cell => {
|
||||
const timestamp = cell.getAttribute('data-timestamp');
|
||||
const relativeTime = formatRelativeTime(timestamp);
|
||||
cell.textContent = relativeTime;
|
||||
cell.title = timestamp; // Garder la date complète en tooltip
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue