osm-commerces/templates/admin/stats.html.twig

{% extends 'base.html.twig' %}

{% block title %}{{ 'display.stats'|trans }}{% endblock %}

{% block body %}
<div class="container">
    <div class="mt-4 p-4">
        <h1 class="title">{{ 'display.stats'|trans }}</h1>
        <p>
            {{ stats.zone }}
        </p>
         {{ stats.getCompletionPercent() }} % complété sur les critères donnés.
         <br>
         <i class="bi bi-building"></i> {{ stats.getPlacesCount() }} commerces dans la zone.
         <br>
         <i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
         <br>
         <i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
         <br>
         <i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
         <br>
         <i class="bi bi-wheelchair"></i> {{ stats.getAvecAccessibilite() }} commerces avec accessibilité renseignée.
         <br>
         <i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
         <br>
    </div>

    <div class="card mt-4">
        <h1 class="card-title">Tableau des commerces</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Nom ({{ stats.getPlacesCount() }})</th>
                    <th>Adresse ({{ stats.getAvecAdresse() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Site web ({{ stats.getAvecSite() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Accessibilité ({{ stats.getAvecAccessibilite() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Note ({{ stats.getAvecNote() }} / {{ stats.getPlacesCount() }})</th>
                </tr>
            </thead>
            <tbody>
                {% for commerce in stats.places %}
                    <tr>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">
                        <a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">{{ commerce.name }}</a>
                        
                        </td>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.address }}</td>
                        <td style="background-color: {{ commerce.hasWebsite() ? 'yellowgreen' : 'transparent' }};">{{ commerce.website }}</td>
                        <td style="background-color: {{ commerce.hasWheelchair() ? 'yellowgreen' : 'transparent' }};">{{ commerce.wheelchair }}</td>
                          <td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>      
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const headers = document.querySelectorAll('th');
        headers.forEach(header => {
            const text = header.textContent;
            const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
            if (match) {
                const [_, completed, total] = match;
                const ratio = completed / total;
                const alpha = ratio.toFixed(2);
                header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
            }
        });
    });

</script>
<style> 
</style>
{% endblock %}