454 lines
31 KiB
Twig
454 lines
31 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Historique ZonePlaces - {{ stats.name }}{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
<link href='{{ asset('css/city-sidebar.css') }}' rel='stylesheet'/>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar de navigation -->
|
|
<div class="col-12">
|
|
{% include 'admin/_city_sidebar.html.twig' with {'stats': stats, 'active_menu': 'zone_places_history'} %}
|
|
</div>
|
|
|
|
<!-- Contenu principal -->
|
|
<div class="col-md-9 col-lg-10 main-content">
|
|
<div class="p-4">
|
|
<h1>Historique ZonePlaces - {{ stats.name }} ({{ stats.zone }})</h1>
|
|
<p class="text-muted">Historique combiné des suppressions et créations d'objets OSM par thème, groupé par date.</p>
|
|
|
|
{% if changesByDate is empty %}
|
|
<div class="alert alert-info">
|
|
<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 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 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 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">
|
|
<thead>
|
|
<tr>
|
|
<th>Thème</th>
|
|
<th>Type</th>
|
|
<th>ID</th>
|
|
<th>Contributeur</th>
|
|
<th>Dernière modification</th>
|
|
<th>Changeset</th>
|
|
<th>Date suppression</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for obj in objects %}
|
|
<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>
|
|
<td>
|
|
{% if obj.user %}
|
|
<a href="https://www.openstreetmap.org/user/{{ obj.user|url_encode }}" target="_blank">
|
|
{{ obj.user }}
|
|
<i class="bi bi-box-arrow-up-right"></i>
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted">Inconnu</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="timestamp-cell">
|
|
{% if obj.timestamp %}
|
|
<span data-timestamp="{{ obj.timestamp }}">{{ obj.timestamp }}</span>
|
|
{% else %}
|
|
<span class="text-muted">N/A</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if obj.changeset %}
|
|
<a href="https://overpass-api.de/achavi/?changeset={{ obj.changeset }}" target="_blank">
|
|
<code>{{ obj.changeset }}</code>
|
|
<i class="bi bi-box-arrow-up-right"></i>
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted">N/A</span>
|
|
{% endif %}
|
|
</td>
|
|
<td><span class="text-danger">{{ obj.noticed_deleted_date }}</span></td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
{% set josm_type = obj.type == 'node' ? 'n' : (obj.type == 'way' ? 'w' : 'r') %}
|
|
<a href="http://127.0.0.1:8111/load_object?objects={{ josm_type }}{{ obj.id }}"
|
|
class="btn btn-primary btn-sm"
|
|
title="Ouvrir dans JOSM"
|
|
target="_blank">
|
|
<i class="bi bi-tools"></i> JOSM
|
|
</a>
|
|
<a href="https://osmlab.github.io/osm-deep-history/#/{{ obj.type }}/{{ obj.id }}"
|
|
class="btn btn-info btn-sm"
|
|
title="Voir l'historique dans OSM Deep History"
|
|
target="_blank">
|
|
<i class="bi bi-clock-history"></i> Historique
|
|
</a>
|
|
<a href="https://www.openstreetmap.org/{{ obj.type }}/{{ obj.id }}"
|
|
class="btn btn-secondary btn-sm"
|
|
title="Voir sur OSM"
|
|
target="_blank">
|
|
<i class="bi bi-geo-alt"></i> OSM
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Créations #}
|
|
{% if changes.creations is not empty %}
|
|
<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 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">
|
|
<thead>
|
|
<tr>
|
|
<th>Thème</th>
|
|
<th>Type</th>
|
|
<th>ID</th>
|
|
<th>Contributeur</th>
|
|
<th>Date modification</th>
|
|
<th>Changeset</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for obj in objects %}
|
|
<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>
|
|
{% if obj.user %}
|
|
<a href="https://www.openstreetmap.org/user/{{ obj.user|url_encode }}" target="_blank">
|
|
{{ obj.user }}
|
|
<i class="bi bi-box-arrow-up-right"></i>
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted">Inconnu</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="timestamp-cell">
|
|
{% if obj.timestamp %}
|
|
<span data-timestamp="{{ obj.timestamp }}">{{ obj.timestamp }}</span>
|
|
{% else %}
|
|
<span class="text-muted">N/A</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if obj.changeset %}
|
|
<a href="https://overpass-api.de/achavi/?changeset={{ obj.changeset }}" target="_blank">
|
|
<code>{{ obj.changeset }}</code>
|
|
<i class="bi bi-box-arrow-up-right"></i>
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted">N/A</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
{% set josm_type = obj.type == 'node' ? 'n' : (obj.type == 'way' ? 'w' : 'r') %}
|
|
<a href="http://127.0.0.1:8111/load_object?objects={{ josm_type }}{{ obj.id }}"
|
|
class="btn btn-primary btn-sm"
|
|
title="Ouvrir dans JOSM"
|
|
target="_blank">
|
|
<i class="bi bi-tools"></i> JOSM
|
|
</a>
|
|
<a href="https://osmlab.github.io/osm-deep-history/#/{{ obj.type }}/{{ obj.id }}"
|
|
class="btn btn-info btn-sm"
|
|
title="Voir l'historique dans OSM Deep History"
|
|
target="_blank">
|
|
<i class="bi bi-clock-history"></i> Historique
|
|
</a>
|
|
<a href="https://www.openstreetmap.org/{{ obj.type }}/{{ obj.id }}"
|
|
class="btn btn-secondary btn-sm"
|
|
title="Voir sur OSM"
|
|
target="_blank">
|
|
<i class="bi bi-geo-alt"></i> OSM
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 %}
|
|
|