From f785e67f49380fc71985a5cd961e55e6b3c90411 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 23 Jun 2025 00:38:13 +0200
Subject: [PATCH] fix imports js

---
 assets/app.js                        |  20 ++++-
 assets/dashboard-charts.js           |   6 +-
 assets/utils.js                      |  24 ++++--
 src/Entity/Place.php                 |  26 +++++--
 templates/admin/stats.html.twig      | 107 +++++++++++++++++++++++++--
 templates/public/dashboard.html.twig |  22 ++----
 6 files changed, 163 insertions(+), 42 deletions(-)

diff --git a/assets/app.js b/assets/app.js
index d27d220..f290bca 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -23,7 +23,16 @@ import './dashboard-charts.js';
 import Chart from 'chart.js/auto';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import maplibregl from 'maplibre-gl';
-import { genererCouleurPastel, setupCitySearch, handleAddCityFormSubmit, enableLabourageForm, getLabourerUrl, adjustListGroupFontSize, toggleCompletionInfo } from './utils.js';
+import {
+  genererCouleurPastel,
+  setupCitySearch,
+  handleAddCityFormSubmit,
+  enableLabourageForm,
+  getLabourerUrl,
+  adjustListGroupFontSize,
+  toggleCompletionInfo,
+  updateMapHeightForLargeScreens
+} from './utils.js';
 import Tablesort from 'tablesort';
 
 window.Chart = Chart;
@@ -34,6 +43,7 @@ window.getLabourerUrl = getLabourerUrl;
 window.ChartDataLabels = ChartDataLabels;
 window.maplibregl = maplibregl;
 window.toggleCompletionInfo = toggleCompletionInfo;
+window.updateMapHeightForLargeScreens = updateMapHeightForLargeScreens;
 
 Chart.register(ChartDataLabels);
 
@@ -41,6 +51,11 @@ Chart.register(ChartDataLabels);
 document.addEventListener('DOMContentLoaded', () => {
   console.log('DOMContentLoaded');
 
+  if(updateMapHeightForLargeScreens){
+
+    updateMapHeightForLargeScreens();
+    window.addEventListener('resize', updateMapHeightForLargeScreens);
+  }
 
   const randombg = genererCouleurPastel();
   // Appliquer la couleur au body
@@ -184,7 +199,6 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  enableLabourageForm(); 
+  enableLabourageForm();
   adjustListGroupFontSize('.list-group-item');
 });
- 
\ No newline at end of file
diff --git a/assets/dashboard-charts.js b/assets/dashboard-charts.js
index 1976d38..ea5ab2a 100644
--- a/assets/dashboard-charts.js
+++ b/assets/dashboard-charts.js
@@ -97,7 +97,7 @@ document.addEventListener('DOMContentLoaded', function() {
                                 align: 'center',
                                 color: '#000',
                                 display: true,
-                                font: { weight: 'bold' },
+                                font: { weight: '400', size : "1rem" },
                                 formatter: (value, context) => {
                                     return context.dataset.data[context.dataIndex].label;
                                 }
@@ -107,7 +107,7 @@ document.addEventListener('DOMContentLoaded', function() {
                             label: 'Régression linéaire',
                             type: 'line',
                             data: regressionLine,
-                            borderColor: 'rgba(0, 0, 0, 0.7)',
+                            borderColor: 'rgba(162, 255, 40, 0.7)',
                             borderWidth: 2,
                             pointRadius: 0,
                             fill: false,
@@ -135,7 +135,7 @@ document.addEventListener('DOMContentLoaded', function() {
                                     return [
                                         `${d.label}`,
                                         `Population: ${d.x.toLocaleString()}`,
-                                        `Lieux / 1000 hab: ${d.y.toFixed(2)}`,
+                                        `Lieux / hab: ${d.y.toFixed(2)}`,
                                         `Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
                                         `Complétion: ${d.completion}%`
                                     ];
diff --git a/assets/utils.js b/assets/utils.js
index a6db706..616e643 100644
--- a/assets/utils.js
+++ b/assets/utils.js
@@ -97,7 +97,7 @@ async function searchInseeCode(query) {
   }
 }
 
-function updateMapHeightForLargeScreens() {
+export function updateMapHeightForLargeScreens() {
   const mapFound = document.querySelector('#map');
   if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
     mapFound.style.height = window.innerWidth * 0.8 + 'px';
@@ -171,13 +171,24 @@ export function enableLabourageForm() {
     const form = citySearchInput.closest('form');
     setupCitySearch('citySearch', 'citySuggestions', function (result_search) {
       if (form) {
-        const labourageBtn = form.querySelector('.btn-labourer');
+        const labourageBtn = form.querySelector('button[type="submit"]');
         if (labourageBtn) {
-          labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Chargement...';
-          labourageBtn.disabled = true;
+            // Remplir le champ caché avec le code INSEE
+            const inseeInput = form.querySelector('#selectedZipCode');
+            if (inseeInput) {
+                inseeInput.value = result_search.insee;
+            }
+            // Changer l'action du formulaire pour pointer vers la bonne URL
+            form.action = getLabourerUrl(result_search);
+
+            // Changer le texte du bouton et le désactiver
+            labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Labourage de ' + result_search.name + '...';
+            labourageBtn.disabled = true;
+
+            // Soumettre le formulaire
+            form.submit();
         }
       }
-      window.location.href = getLabourerUrl(result_search);
     });
   }
 }
@@ -191,7 +202,7 @@ export function setupCitySearch(inputId, suggestionListId, onSelect) {
   let timeoutId = null;
   let searchOngoing = false;
 
-  searchInput.addEventListener('input', function () {
+  searchInput.addEventListener('keyup', function () {
     clearTimeout(timeoutId);
     const query = this.value.trim();
     if (query.length < 3) {
@@ -329,7 +340,6 @@ export function calculateCompletion(properties) {
     if (properties.website || properties['contact:website']) completed++;
     if (properties.phone || properties['contact:phone']) completed++;
     if (properties.wheelchair) completed++;
-    if (properties.note) completed++;
 
     return {
         percentage: total > 0 ? (completed / total) * 100 : 0,
diff --git a/src/Entity/Place.php b/src/Entity/Place.php
index 3196a7b..d7d204d 100644
--- a/src/Entity/Place.php
+++ b/src/Entity/Place.php
@@ -22,7 +22,7 @@ class Place
     #[ORM\Column(length: 10)]
     private ?string $osm_kind = null;
 
-    #[ORM\Column(length: 255)]
+    #[ORM\Column(length: 255, nullable: true)]
     private ?string $email = null;
 
     #[ORM\Column]
@@ -252,20 +252,31 @@ class Place
         
         // Setters from tags
         $this->setName($tags['name'] ?? null);
-        $this->setStreet($tags['addr:street'] ?? $tags['contact:street'] ?? null);
-        $this->setHousenumber($tags['addr:housenumber'] ?? $tags['contact:housenumber'] ?? null);
+        
+        $street = isset($tags['addr:street']) ? $tags['addr:street'] : (isset($tags['contact:street']) ? $tags['contact:street'] : null);
+        $this->setStreet($street);
+
+        $housenumber = isset($tags['addr:housenumber']) ? $tags['addr:housenumber'] : (isset($tags['contact:housenumber']) ? $tags['contact:housenumber'] : null);
+        $this->setHousenumber($housenumber);
+
         if (isset($tags['addr:postcode'])) {
             $this->setZipCode(intval($tags['addr:postcode']));
         }
-        $this->setEmail($tags['contact:email'] ?? $tags['email'] ?? null);
-        $this->setSiret($tags['ref:FR:SIRET'] ?? null);
+        
+        $email = isset($tags['contact:email']) ? $tags['contact:email'] : (isset($tags['email']) ? $tags['email'] : null);
+        $this->setEmail($email);
+        
+        $siret = isset($tags['ref:FR:SIRET']) ? $tags['ref:FR:SIRET'] : null;
+        $this->setSiret($siret);
     
         // Boolean "has" properties
         $this->setHasOpeningHours(!empty($tags['opening_hours']));
         $this->setHasWheelchair(!empty($tags['wheelchair']));
     
         // has address logic
-        $this->setHasAddress(!empty($this->getStreet()) && !empty($this->getHousenumber()));
+
+        $this->setHasAddress(!empty($this->getStreet()) && !empty($this->getHousenumber()) 
+        | (isset($tags['addr:street']) && isset($tags['addr:housenumber'])) );
         
         // has website logic (with multiple possible tags)
         $websiteTags = ['website', 'contact:website', 'url', 'contact:url'];
@@ -277,6 +288,7 @@ class Place
             }
         }
         $this->setHasWebsite($hasWebsite);
+
     
         // has note logic
         $noteContent = '';
@@ -335,7 +347,7 @@ class Place
         return $this->email;
     }
 
-    public function setEmail(string $email): static
+    public function setEmail(?string $email): static
     {
         $this->email = $email;
 
diff --git a/templates/admin/stats.html.twig b/templates/admin/stats.html.twig
index b72fd66..a125ce2 100644
--- a/templates/admin/stats.html.twig
+++ b/templates/admin/stats.html.twig
@@ -305,7 +305,8 @@
 
 {% block javascripts %}
     {{ parent() }}
-<script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
     document.addEventListener('DOMContentLoaded', function() {
         const geojsonData = {{ geojson|raw }};
         const map_token = "{{ maptiler_token }}";
@@ -520,11 +521,105 @@
         } else if (modifCanvas) {
             modifCanvas.parentNode.innerHTML = '<div class="alert alert-info">Aucune donnée de modification disponible pour cette ville.</div>';
         }
+
+        // Créer un graphique de la répartition des tags
+        const tagsCount = {};
+        const places = {{ geojson|raw }}.features;
+
+        places.forEach(place => {
+            const mainTag = place.properties.main_tag;
+            if (mainTag) {
+                tagsCount[mainTag] = (tagsCount[mainTag] || 0) + 1;
+            }
+        });
+
+        const sortedTags = Object.entries(tagsCount).sort(([, a], [, b]) => b - a);
+        const labels = sortedTags.map(item => item[0]);
+        const data = sortedTags.map(item => item[1]);
+        const container_tags= document.getElementById('repartition_tags');
+        if(!container_tags){
+            console.log('pas de container_tags', container_tags)
+            return;
+        }
+        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
+                    }
+                },
+                responsive: true,
+                maintainAspectRatio: false
+            }
+        });
+
+                        }
+        // Graphique de distribution du taux de complétion
+        const completionData = [];
+        {% for commerce in stats.places %}
+            completionData.push({{ commerce.getCompletionPercentage() }});
+        {% endfor %}
+
+        const completionDistribution = {};
+        completionData.forEach(percent => {
+            const range = Math.floor(percent / 10) * 10;
+            const key = `${range}-${range + 10}%`;
+            completionDistribution[key] = (completionDistribution[key] || 0) + 1;
+        });
+
+        const completionLabels = Object.keys(completionDistribution).sort((a, b) => {
+            return parseInt(a.split('-')[0]) - parseInt(b.split('-')[0]);
+        });
+        const completionValues = completionLabels.map(label => completionDistribution[label]);
+const dc = document.getElementById('distribution_completion');
+
+if(dc ){
+    const completionCtx = dc.getContext ? dc.getContext('2d') : null;
+    if(!completionCtx){
+        console.log('pas de completionCtx' )
+        return ;
+    }
+        new Chart(completionCtx, {
+            type: 'bar',
+            data: {
+                labels: completionLabels,
+                datasets: [{
+                    label: 'Distribution du Taux de Complétion',
+                    data: completionValues,
+                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                },
+                responsive: true,
+                maintainAspectRatio: false
+            }
+        });
+}else{
+    console.log('pas de distribution_completion')
+}
+        
     });
-</script>
-
-    <script>
-        window.modificationsByQuarter = {{ modificationsByQuarter|raw }};
     </script>
-
 {% endblock %} 
diff --git a/templates/public/dashboard.html.twig b/templates/public/dashboard.html.twig
index 030af77..72210de 100644
--- a/templates/public/dashboard.html.twig
+++ b/templates/public/dashboard.html.twig
@@ -260,20 +260,9 @@
                     {
                         label: 'Villes',
                         data: bubbleChartData,
-                        backgroundColor: bubbleChartData.map(d => `rgba(255, 99, 132, ${d.completion / 100})`),
-                        borderColor: 'rgba(255, 99, 132, 1)',
-                    },
-                    // regressionLine ? {
-                    //     label: 'Régression linéaire',
-                    //     type: 'line',
-                    //     data: regressionLine,
-                    //     borderColor: 'rgba(0, 0, 0, 0.7)',
-                    //     borderWidth: 2,
-                    //     pointRadius: 0,
-                    //     fill: false,
-                    //     order: 0,
-                    //     tension: 0
-                    // } : null
+                        backgroundColor: bubbleChartData.map(d => `rgba(75, 192, 192, ${d.completion / 100})`),
+                        borderColor: 'rgba(75, 192, 192, 1)',
+                    }, 
                 ].filter(Boolean)
             },
             options: {
@@ -284,7 +273,8 @@
                         align: 'center',
                         color: '#000',
                         font: {
-                            weight: 'bold'
+                            weight: '400',
+                            size: "10px",
                         },
                         formatter: (value, context) => {
                             return context.dataset.data[context.dataIndex].label;
@@ -303,7 +293,7 @@
                                 return [
                                     `${d.label}`,
                                     `Population: ${d.x.toLocaleString()}`,
-                                    `Lieux / 1000 hab: ${d.y.toFixed(2)}`,
+                                    `Lieux / hab: ${d.y.toFixed(2)}`,
                                     `Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
                                     `Complétion: ${d.completion}%`
                                 ];