mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-10-04 17:04:53 +02:00
ajout api controller, failsafe sur js bubble
This commit is contained in:
parent
adf9daa117
commit
884c190ee5
3 changed files with 469 additions and 203 deletions
|
@ -258,27 +258,27 @@
|
|||
</div> #}
|
||||
|
||||
<div class="completion-info mt-4">
|
||||
<div class="alert alert-info">
|
||||
<div class="d-flex align-items-center" style="cursor: pointer;" onclick="toggleCompletionInfo()">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<p class="mb-0">Comment est calculé le score de complétion ?</p>
|
||||
<i class="bi bi-chevron-down ms-auto" id="completionInfoIcon"></i>
|
||||
</div>
|
||||
<div id="completionInfoContent" style="display: none;" class="mt-3">
|
||||
<p>Le score de complétion est calculé en fonction de plusieurs critères :</p>
|
||||
<ul>
|
||||
<li>Nom du commerce</li>
|
||||
<li>Adresse complète (numéro, rue, code postal)</li>
|
||||
<li>Horaires d'ouverture</li>
|
||||
<li>Site web</li>
|
||||
<li>Numéro de téléphone</li>
|
||||
<li>Accessibilité PMR</li>
|
||||
</ul>
|
||||
<p>Chaque critère rempli augmente le score de complétion d'une part égale.
|
||||
Un commerce parfaitement renseigné aura un score de 100%.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<div class="d-flex align-items-center completion-hover-trigger" style="cursor: pointer;">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<p class="mb-0">Comment est calculé le score de complétion ?</p>
|
||||
<i class="bi bi-chevron-down ms-auto" id="completionInfoIcon"></i>
|
||||
</div>
|
||||
<div id="completionInfoContent" style="display: none;" class="mt-3">
|
||||
<p>Le score de complétion est calculé en fonction de plusieurs critères :</p>
|
||||
<ul>
|
||||
<li>Nom du commerce</li>
|
||||
<li>Adresse complète (numéro, rue, code postal)</li>
|
||||
<li>Horaires d'ouverture</li>
|
||||
<li>Site web</li>
|
||||
<li>Numéro de téléphone</li>
|
||||
<li>Accessibilité PMR</li>
|
||||
</ul>
|
||||
<p>Chaque critère rempli augmente le score de complétion d'une part égale.
|
||||
Un commerce parfaitement renseigné aura un score de 100%.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
|
@ -543,32 +543,50 @@
|
|||
}
|
||||
const ctx = container_tags.getContext ? container_tags.getContext('2d') : null;
|
||||
if(ctx){
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Répartition des tags',
|
||||
data: data,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true
|
||||
}
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Répartition des tags',
|
||||
data: data,
|
||||
backgroundColor: [
|
||||
'rgba(54, 162, 235, 0.7)',
|
||||
'rgba(255, 99, 132, 0.7)',
|
||||
'rgba(255, 206, 86, 0.7)',
|
||||
'rgba(75, 192, 192, 0.7)',
|
||||
'rgba(153, 102, 255, 0.7)',
|
||||
'rgba(255, 159, 64, 0.7)',
|
||||
'rgba(201, 203, 207, 0.7)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)',
|
||||
'rgba(153, 102, 255, 1)',
|
||||
'rgba(255, 159, 64, 1)',
|
||||
'rgba(201, 203, 207, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Répartition des tags principaux'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Graphique de distribution du taux de complétion
|
||||
const completionData = [];
|
||||
{% for commerce in stats.places %}
|
||||
|
@ -622,4 +640,38 @@ if(dc ){
|
|||
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const trigger = document.querySelector('.completion-hover-trigger');
|
||||
const content = document.getElementById('completionInfoContent');
|
||||
const icon = document.getElementById('completionInfoIcon');
|
||||
if (trigger && content) {
|
||||
trigger.addEventListener('mouseenter', function() {
|
||||
content.style.display = 'block';
|
||||
if (icon) {
|
||||
icon.classList.remove('bi-chevron-down');
|
||||
icon.classList.add('bi-chevron-up');
|
||||
}
|
||||
});
|
||||
trigger.addEventListener('mouseleave', function() {
|
||||
content.style.display = 'none';
|
||||
if (icon) {
|
||||
icon.classList.remove('bi-chevron-up');
|
||||
icon.classList.add('bi-chevron-down');
|
||||
}
|
||||
});
|
||||
// Pour garder la popup ouverte si la souris va sur la popup
|
||||
content.addEventListener('mouseenter', function() {
|
||||
content.style.display = 'block';
|
||||
});
|
||||
content.addEventListener('mouseleave', function() {
|
||||
content.style.display = 'none';
|
||||
if (icon) {
|
||||
icon.classList.remove('bi-chevron-up');
|
||||
icon.classList.add('bi-chevron-down');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue