add sortable tables, orange for no named places

assets/app.js

@@ -578,6 +578,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
   parseCuisine();
 
+  // Tri automatique des tableaux
+  const tables = document.querySelectorAll('table');
+  tables.forEach(table => {
+    table.classList.add('js-sort-table');
+  });
 
 
 });

assets/styles/app.css

@@ -12,3 +12,7 @@ body {
     padding-bottom: 10rem;
     background-color: #dfe5eb;
 }
+
+.no-name {
+    color: #df5a0d;
+}

templates/admin/stats.html.twig

@@ -41,7 +41,13 @@
                 {% for commerce in stats.places %}
                     <tr>
                         <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">
-                        <a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}"> {% if commerce.name |length %} {{ commerce.name |slice(0, 20) }}... {% else %} (lieu sans nom) {% endif %}</a>
+                        <a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">
+                        {% if not commerce.name |length  %}
+                        <span class="no-name">
+                         (lieu sans nom) 
+                        </span>
+                         {% endif %}
+                         {% if commerce.name |length > 50 %} {{ commerce.name |slice(0, 50) }}... {% else %} {{ commerce.name }} {% endif %}</a>
                         
                         </td>
                         <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.address }}</td>

templates/base.html.twig

@@ -12,13 +12,17 @@
         <link rel="stylesheet" href="{{ asset('css/main.css') }}">
         <!-- JavaScript Bootstrap avec Popper.js -->
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+        <script src="https://www.cssscript.com/demo/html-table-sortable/sort-table.js"></script>
+
+
         <link rel="icon" type="image/png" href="{{ asset('logo-osm.png') }}">
         <!-- Script pour le tri automatique des tableaux -->
         <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
         {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
          {% block stylesheets %}
             {{ encore_entry_link_tags('app') }}
-
+            <link rel="stylesheet" href="https://www.cssscript.com/demo/html-table-sortable/sort-table.css">
              <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
         {% endblock %}
     </head>
@@ -108,24 +112,6 @@
                 });
 
 
-  // Tri automatique des tableaux
-  // Sélectionner la première table du document
-  if( Sortable) {
-    const firstTable = document.querySelector('table');
-    if (firstTable) {
-        console.log('première table trouvée', firstTable);
-        var sortable = new Sortable(firstTable, {
-        animation: 150,
-        ghostClass: 'sortable-ghost',
-        chosenClass: 'sortable-chosen',
-        dragClass: 'sortable-drag'
-        });
-    } else {
-        console.log('pas de table trouvée');
-    }
-  }else{
-    console.log('Sortable non trouvé');
-  }
             </script>
         {% endblock %}
     </body>