From b60b527ee1c168408c1679d4ff16a3ea88800ecb Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Sun, 1 Jun 2025 19:04:11 +0200
Subject: [PATCH] add sortable tables, orange for no named places

---
 assets/app.js                   |  5 +++++
 assets/styles/app.css           |  4 ++++
 templates/admin/stats.html.twig |  8 +++++++-
 templates/base.html.twig        | 24 +++++-------------------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/assets/app.js b/assets/app.js
index 01af674..d1d1a0b 100644
--- a/assets/app.js
+++ b/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');
+  });
 
 
 });
diff --git a/assets/styles/app.css b/assets/styles/app.css
index 80c7071..548e377 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -11,4 +11,8 @@ body {
 .main-footer {
     padding-bottom: 10rem;
     background-color: #dfe5eb;
+}
+
+.no-name {
+    color: #df5a0d;
 }
\ No newline at end of file
diff --git a/templates/admin/stats.html.twig b/templates/admin/stats.html.twig
index 44df53d..06654b6 100644
--- a/templates/admin/stats.html.twig
+++ b/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>
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 0b9e7d6..9e84c30 100644
--- a/templates/base.html.twig
+++ b/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>