up wiki compare
This commit is contained in:
Tykayn
tykayn
parent
d2936d5730
commit
1535cf8ee3
8 changed files with 1036 additions and 79 deletions
|
|
@ -282,7 +282,35 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div id="alertes_osmose"></div>
|
||||
<div class="card mt-4 mb-4">
|
||||
<div class="card-header">
|
||||
<h4><i class="bi bi-exclamation-triangle"></i> Alertes Osmose</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="alertes_osmose">Chargement des alertes...</div>
|
||||
<div id="alertes_liste" class="mt-3" style="display: none;">
|
||||
<h5>Liste complète des alertes</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Élément</th>
|
||||
<th>Position</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="alertes_table_body">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="alertes_distribution" class="mt-4" style="display: none;">
|
||||
<h5>Répartition des alertes par thème</h5>
|
||||
<canvas id="alertesChart" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="themeChart"></canvas>
|
||||
</div>
|
||||
|
|
@ -885,38 +913,70 @@
|
|||
.then(data => {
|
||||
if (!data.issues || data.issues.length === 0) {
|
||||
console.log('Aucune analyse Osmose trouvée pour ce thème dans cette zone.');
|
||||
document.querySelector('#alertes_osmose').innerHTML = '<div class="alert alert-info">Aucune alerte Osmose trouvée pour ce thème dans cette zone.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const divOsmose = document.querySelector(('#alertes_osmose'))
|
||||
// Stocker les données Osmose globalement pour pouvoir les utiliser ailleurs
|
||||
window.osmoseData = data.issues;
|
||||
|
||||
// Mettre à jour le résumé des alertes
|
||||
const divOsmose = document.querySelector('#alertes_osmose');
|
||||
if(divOsmose){
|
||||
if (data.issues.length === 1) {
|
||||
// Si un seul objet, rendre tout le texte cliquable
|
||||
const issueId = data.issues[0].id;
|
||||
divOsmose.innerHTML = `<a href="https://osmose.openstreetmap.fr/fr/error/${issueId}" target="_blank" style="text-decoration: none; color: inherit;">
|
||||
<span class="counter">${data.issues.length}</span> objet à ajouter selon Osmose
|
||||
</a>`;
|
||||
divOsmose.innerHTML = `<div class="alert alert-warning">
|
||||
<a href="https://osmose.openstreetmap.fr/fr/error/${issueId}" target="_blank" style="text-decoration: none; color: inherit;">
|
||||
<span class="counter">${data.issues.length}</span> objet à ajouter selon Osmose
|
||||
</a>
|
||||
</div>`;
|
||||
} else {
|
||||
// Si plusieurs objets, lister chaque objet avec son numéro
|
||||
let content = `<span class="counter">${data.issues.length}</span> objets à ajouter selon Osmose : `;
|
||||
|
||||
// Limiter à 5 objets affichés pour éviter de surcharger l'interface
|
||||
const displayLimit = 5;
|
||||
const displayCount = Math.min(data.issues.length, displayLimit);
|
||||
|
||||
for (let i = 0; i < displayCount; i++) {
|
||||
const issueId = data.issues[i].id;
|
||||
content += `<a href="http://localhost:8111/import?url=https://osmose.openstreetmap.fr/api/0.3/issue/${issueId}/fix/0" target="_blank" class="badge bg-purple mx-1">${i}</a>`;
|
||||
}
|
||||
|
||||
// Indiquer s'il y a plus d'objets que ceux affichés
|
||||
if (data.issues.length > displayLimit) {
|
||||
content += `<span class="text-muted">(et ${data.issues.length - displayLimit} autres)</span>`;
|
||||
}
|
||||
|
||||
divOsmose.innerHTML = content;
|
||||
// Si plusieurs objets, afficher un résumé
|
||||
divOsmose.innerHTML = `<div class="alert alert-warning">
|
||||
<span class="counter">${data.issues.length}</span> objets à ajouter selon Osmose
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Remplir la table des alertes
|
||||
const alertesTableBody = document.querySelector('#alertes_table_body');
|
||||
if (alertesTableBody) {
|
||||
let tableContent = '';
|
||||
|
||||
data.issues.forEach((issue, index) => {
|
||||
const issueId = issue.id;
|
||||
const element = issue.elems && issue.elems.length > 0 ?
|
||||
`${issue.elems[0].type} ${issue.elems[0].id}` : 'Non spécifié';
|
||||
const position = issue.lat && issue.lon ?
|
||||
`${issue.lat.toFixed(5)}, ${issue.lon.toFixed(5)}` : 'Non spécifié';
|
||||
|
||||
tableContent += `
|
||||
<tr>
|
||||
<td>${issueId}</td>
|
||||
<td>${element}</td>
|
||||
<td>${position}</td>
|
||||
<td>
|
||||
<a href="https://osmose.openstreetmap.fr/fr/error/${issueId}" target="_blank" class="btn btn-sm btn-info" title="Voir sur Osmose">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
<a href="http://localhost:8111/import?url=https://osmose.openstreetmap.fr/api/0.3/issue/${issueId}/fix/0" target="_blank" class="btn btn-sm btn-success" title="Corriger dans JOSM">
|
||||
<i class="bi bi-tools"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
alertesTableBody.innerHTML = tableContent;
|
||||
document.querySelector('#alertes_liste').style.display = 'block';
|
||||
}
|
||||
|
||||
// Créer la distribution des alertes par thème
|
||||
createAlertesDistribution(data.issues);
|
||||
|
||||
// Afficher la section de distribution
|
||||
document.querySelector('#alertes_distribution').style.display = 'block';
|
||||
|
||||
console.log(`[Osmose] ${data.issues.length} analyses trouvées pour le thème ${theme}`);
|
||||
|
||||
|
|
@ -954,6 +1014,94 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Fonction pour créer le graphique de distribution des alertes par thème
|
||||
function createAlertesDistribution(issues) {
|
||||
if (!issues || issues.length === 0) return;
|
||||
|
||||
// Compter les alertes par item
|
||||
const itemCounts = {};
|
||||
const itemLabels = {
|
||||
8410: 'Borne de recharge (manquante)',
|
||||
8411: 'Borne de recharge (à compléter)',
|
||||
8031: 'École (manquante)',
|
||||
8211: 'Pharmacie (manquante)',
|
||||
7220: 'Cabinet médical (manquant)',
|
||||
8331: 'Hôpital (manquant)',
|
||||
7240: 'Laboratoire (manquant)',
|
||||
8351: 'Laboratoire (à compléter)',
|
||||
8190: 'Police (manquante)',
|
||||
8191: 'Police (à compléter)',
|
||||
8370: 'Défibrillateur (manquant)'
|
||||
};
|
||||
|
||||
issues.forEach(issue => {
|
||||
if (issue.item) {
|
||||
if (!itemCounts[issue.item]) {
|
||||
itemCounts[issue.item] = 0;
|
||||
}
|
||||
itemCounts[issue.item]++;
|
||||
}
|
||||
});
|
||||
|
||||
// Préparer les données pour le graphique
|
||||
const labels = [];
|
||||
const data = [];
|
||||
const backgroundColor = [];
|
||||
|
||||
// Générer des couleurs aléatoires pour chaque thème
|
||||
function getRandomColor() {
|
||||
const letters = '0123456789ABCDEF';
|
||||
let color = '#';
|
||||
for (let i = 0; i < 6; i++) {
|
||||
color += letters[Math.floor(Math.random() * 16)];
|
||||
}
|
||||
return color;
|
||||
}
|
||||
|
||||
// Trier les items par nombre d'alertes (décroissant)
|
||||
const sortedItems = Object.keys(itemCounts).sort((a, b) => itemCounts[b] - itemCounts[a]);
|
||||
|
||||
sortedItems.forEach(item => {
|
||||
// Utiliser le label s'il existe, sinon utiliser l'ID de l'item
|
||||
labels.push(itemLabels[item] || `Item ${item}`);
|
||||
data.push(itemCounts[item]);
|
||||
backgroundColor.push(getRandomColor());
|
||||
});
|
||||
|
||||
// Créer le graphique
|
||||
const ctx = document.getElementById('alertesChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: data,
|
||||
backgroundColor: backgroundColor,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const label = context.label || '';
|
||||
const value = context.raw;
|
||||
const total = context.dataset.data.reduce((a, b) => a + b, 0);
|
||||
const percentage = Math.round((value / total) * 100);
|
||||
return `${label}: ${value} (${percentage}%)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour charger les détails d'une analyse Osmose
|
||||
function loadOsmoseIssueDetails(issueId) {
|
||||
const detailsUrl = `https://osmose.openstreetmap.fr/api/0.3/issue/${issueId}?langs=auto`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue