ajout api controller, failsafe sur js bubble

This commit is contained in:
Tykayn 2025-06-23 23:36:50 +02:00 committed by tykayn
parent adf9daa117
commit 884c190ee5
3 changed files with 469 additions and 203 deletions

View file

@ -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 %}