add icons in edit form

config/packages/framework.yaml

@@ -5,10 +5,7 @@ framework:
     http_method_override: false
     handle_all_throwables: true
 
-    default_locale: 'fr'
+
-    translator:
-        default_path: '%kernel.project_dir%/translations'
-        fallbacks: ['en']
 
     # Enables session support. Note that the session will ONLY be started if you read or write from it.
     # Remove or comment this section to explicitly disable session support.

config/packages/translation.yaml

@@ -1,5 +1,5 @@
 framework:
-    default_locale: en
+    default_locale: fr
     translator:
         default_path: '%kernel.project_dir%/translations'
         fallbacks:

src/Controller/AdminController.php

@@ -64,6 +64,11 @@ final class AdminController extends AbstractController
         $this->entityManager->persist($stats);
         $this->entityManager->flush();
 
+        $stats->computeCompletionPercent();
+        $this->entityManager->persist($stats);
+        $this->entityManager->flush();
+
+
         return $this->render('admin/stats.html.twig', [
             'stats' => $stats,
             'zip_code' => $zip_code,

src/Controller/PublicController.php

@@ -65,6 +65,7 @@ class PublicController extends AbstractController
             'commerce_overpass' => $commerce_overpass,
             'name' => $name,
             'commerce' => $place,
+            'excluded_tags_to_render' => $this->motocultrice->excluded_tags_to_render,
             'osm_kind' => $place->getOsmKind(),
             "mapbox_token" => $_ENV['MAPBOX_TOKEN'],
             "maptiler_token" => $_ENV['MAPTILER_TOKEN'],

src/Service/Motocultrice.php

@@ -10,17 +10,24 @@ class Motocultrice
     private $overpassApiUrl = 'https://overpass-api.de/api/interpreter';
     private $osmApiUrl = 'https://www.openstreetmap.org/api/0.6';
 
+    // ne pas lister les tags qui utilisent des morceaux particuliers de formulaire pour éviter que les gens aient besoin de connaître le tag OSM
+    public $excluded_tags_to_render = [
+        'name',
+        'wheelchair',
+        'harassment_prevention',
+    ];
+    // les tags OSM que l'on estime nécessaires pour un commerce
     public $base_tags = [
         'name',
         'opening_hours',
         'contact:email',
         'contact:phone',
-        'wheelchair',
         'addr:housenumber',
         'addr:street',
         'contact:website',
         'contact:mastodon',
-        // 'EEEEEEEEEEEEEEEEEEE'
+        'image',        
+        'note'
     ];
     private $more_tags = ['image', 'ref:FR:SIRET'];
     public function __construct(

templates/base.html.twig

@@ -5,6 +5,7 @@
         <title>{% block title %}Welcome!{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
         <!-- CSS Bootstrap -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
         <!-- 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>
@@ -20,12 +21,12 @@
     table, thead, tbody, tr{
         width: 100%;
     }
-    table tr:nth-child(odd){
+    {# table tr:nth-child(odd){
         background-color:rgb(235, 235, 235);
     }
     table tr:nth-child(even){
         background-color: #f8f9fa;
-    }
+    } #}
         </style>
         {% block stylesheets %}
 
@@ -54,26 +55,7 @@
             {% endfor %}
             <div class="row">
         <div class="col-12">
-            <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 rounded shadow-sm">
+            {% include 'public/nav.html.twig' %}
-                <div class="container-fluid">
-                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
-                    <div class="collapse navbar-collapse" id="navbarNav">
-                        <ul class="navbar-nav">
-                            <li class="nav-item">
-                                <a class="nav-link active" href="{{ path('app_public_index') }}">{{ 'display.home'|trans }}</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ path('app_public_dashboard') }}">{{ 'display.stats'|trans }}</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="https://openstreetmap.fr/contact/">{{ 'display.contact_humans'|trans }}</a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </nav>
         </div>
     </div>
         </div>
@@ -85,6 +67,12 @@
         <div class="container">
             <div class="row">
                 <div class="col-12">
+                    {% include 'public/nav.html.twig' %}
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12">
+                
                     <p>OpenStreetMap Mon Commerce</p>
                     <p>Licence AGPLv3+,
                     fait par Tykayn de 

templates/public/dashboard.html.twig

@@ -21,7 +21,7 @@
         <div class="col-12">
             <h2>Statistiques : {{ stats|length }} commerces</h2>
 
-              <table>
+              <table class="table table-hover table-striped table-responsive">
                   <thead>
                       <tr>
                           <th>Zone</th>
@@ -41,7 +41,7 @@
               </table>
 
               <h2>Lieux</h2>
-              <table>
+              <table class="table table-striped table-hover table-responsive">
                   <thead>
                       <tr>
                           <th>Nom</th>

templates/public/edit.html.twig

@@ -19,6 +19,10 @@
         .is-invalid #validation_messages {
             color: red;
         }
+        img{
+            max-width: 100%;
+            max-height: 400px;
+        }
     </style>
 {% endblock %}
 
@@ -26,11 +30,18 @@
 <div class="container mt-4">
     
 
+
+<div id="completion_progress">
+
+<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar" style="width: 0%"></div>
+</div>
+</div>
     <div class="row">
         <div class="col-12">
             <div class="card shadow-sm">
                 <div class="card-body">
-                    <h1 class="card-title mb-4">{{ 'display.welcome'|trans }}</h1>
+                    <h1 class="card-title mb-4">{{ 'display.welcome'|trans }} {{ commerce_overpass.tags_converted.name }}</h1>
                     <div id="map" style="height: 400px; width: 100%;" class="rounded"></div>
 
                     {% if commerce_overpass is not empty %}
@@ -55,41 +66,45 @@
                                 <a class="btn btn-info" href="{{ path('app_public_index') }}">{{ 'display.contact_humans'|trans }}</a>
                             </div>
 
-
                             {% if commerce.tags_converted.image is defined %}
-                                <img src="{{ commerce.tags_converted.image }}" alt="Image du lieu" class="img-fluid mb-3">
+                                <img class="img-fluid mb-3" src="{{ commerce.tags_converted.image }}" alt="Image du lieu">
                             {% endif %}
 
                             <h2>{{ 'display.attributes'|trans }}</h2>
  
-                            <div class="row mb-3">
-                                <div class="col-md-5">
                                
                             <div class="row mb-3">
                                     <div class="col-md-5">
                                     <label for="commerce_tag_value__name">{{'display.keys.name'|trans}}</label>
                                     </div>
                                     <div class="col-md-5">
-                                                <input type="text" class="form-control" name="commerce_tag_value__name" value=" {% if commerce.tags_converted.name is defined %}{{ commerce.tags_converted.name }}{% elseif commerce_overpass['@attributes'].name is defined %}{{ commerce_overpass['@attributes'].name }}{% endif %}">
+                                        <input type="text" class="form-control" name="commerce_tag_value__name" value="{% if commerce_overpass.tags_converted.name is defined %}{{ commerce_overpass.tags_converted.name }}{% elseif commerce_overpass['@attributes'].name is defined %}{{ commerce_overpass['@attributes'].name }}{% endif %}">
                                     </div>
                                 </div>
   
-                                </div>
-                            </div>
 
-                            {% include 'public/edit/ask_angela.html.twig' %}
-                            {% include 'public/edit/wheelchair.html.twig' %}
-                            {% include 'public/edit/opening_hours.html.twig' %}
                             {% include 'public/edit/address.html.twig' %}
+                            {% include 'public/edit/opening_hours.html.twig' %}
+                            {% include 'public/edit/wheelchair.html.twig' %}
+                            {% include 'public/edit/ask_angela.html.twig' %}
                             {% include 'public/edit/tags.html.twig' %}
                             
                             <div id="validation_messages"></div>
-                            <button type="submit" class="btn btn-primary">{{ 'display.submit'|trans }}</button>
+                            <button type="submit" class="btn btn-primary">
+                            <i class="bi bi-send"></i>
+                            
+                            {{ 'display.submit'|trans }}</button>
                         </form>
                     {% endif %}
                 </div>
             </div>
         </div>
+        
+
+    </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
             <span class="p-4">
                 <span class="last-modification">{{ 'display.last_modification'|trans }}: {{ commerce_overpass['@attributes'].timestamp }}</span>, 
                 <strong>
@@ -102,7 +117,6 @@
                 </div>
 
             </span>
-
             <div class="disclaimer p-3">
                 <p>
                     <strong>{{ 'display.disclaimer.title'|trans }}:</strong>
@@ -110,21 +124,9 @@
                 </p>
             </div>
         </div>
+    </div>
+
     
-    <div class="row mt-4">
-        <div class="col-12">
-            <nav class="bg-light p-3 rounded shadow-sm">
-                <ul class="nav justify-content-center">
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ path('app_public_index') }}">{{ 'display.home'|trans }}</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="https://openstreetmap.fr/contact/">{{ 'display.contact_humans'|trans }}</a>
-                    </li>
-                </ul>
-            </nav>
-        </div>
-    </div>
 </div>
 
 {% block javascripts %}
@@ -132,8 +134,8 @@
     <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script> 
      <script>
 
-        // Validation du formulaire avant envoi
+
-        document.querySelector('form').addEventListener('submit', function(e) {
+function check_validity(e){
  let errors = [];
             // Réinitialiser les classes d'erreur
             document.querySelectorAll('.is-invalid').forEach(input => {
@@ -173,7 +175,8 @@
                 document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
                 document.querySelector('#validation_messages').classList.add('is-invalid');
             }
-        });
+}
+
         {% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty and commerce_overpass['@attributes'].lon is defined and commerce_overpass['@attributes'].lat is defined %}
         mapboxgl.accessToken = '{{ mapbox_token }}'; 
         map = new mapboxgl.Map({
@@ -198,6 +201,35 @@
             }).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1>'))
             .addTo(map);
          {% endif %}
+
+    // Fonction pour calculer et mettre à jour la barre de progression
+    function updateCompletionProgress() {
+        const inputs = document.querySelectorAll('input[type="text"]');
+        let filledInputs = 0;
+        let totalInputs = inputs.length;
+
+        inputs.forEach(input => {
+            if (input.value.trim() !== '') {
+                filledInputs++;
+            }
+        });
+
+        const completionPercentage = (filledInputs / totalInputs) * 100;
+        const progressBar = document.querySelector('#completion_progress .progress-bar');
+        
+        progressBar.style.width = completionPercentage + '%';
+        progressBar.setAttribute('aria-valuenow', completionPercentage);
+    }
+
+    // Ajouter les écouteurs d'événements sur tous les champs input
+    document.querySelectorAll('input[type="text"]').forEach(input => {
+        input.addEventListener('blur', updateCompletionProgress);
+    });
+        // Validation du formulaire avant envoi
+    document.querySelector('form').addEventListener('submit', check_validity);
+
+    // Calculer la progression initiale au chargement
+    document.addEventListener('DOMContentLoaded', updateCompletionProgress);
     </script> 
 {% endblock %}
 {% endblock %}

templates/public/edit/ask_angela.html.twig

@@ -2,17 +2,15 @@
 <div id="ask_angela">
 <fieldset >
     <h2>{{ 'display.ask_angela'|trans }}</h2>
-    <p class="description">{{ 'display.ask_angela_description'|trans }}</p>
+    <div class="p-4">
-    <p class="more-info">
+    <img src="https://i0.wp.com/askforangela.co.uk/wp-content/uploads/2022/10/Ask-for-Angela-primary.png?fit=300%2C300&ssl=1" class="img-fluid img-thumbnail mb-3" alt="Image du lieu">
-    <a href="https://www.openstreetmap.fr/contact/" target="_blank">{{ 'display.ask_angela_more_info'|trans }}</a>
+    <p class="description"><label for="custom__ask_angela">{{ 'display.ask_angela_description'|trans }} </label></p>
-    </p>
+    
 
     <div class="row mb-3">
         <div class="col-md-5">
-        <label for="custom__ask_angela">{{'display.ask_angela'|trans}}</label>
+         
-        {% if commerce_overpass.tags_converted.harassment_prevention is defined %}
+        
-            {{ dump(commerce_overpass.tags_converted.harassment_prevention) }}
-  {% endif %}
         <div class="form-check">
             <input class="form-check-input" type="radio" name="custom__ask_angela" id="ask_angela_yes" value="ask_angela" {% if commerce_overpass.tags_converted.harassment_prevention is defined and commerce_overpass.tags_converted.harassment_prevention == 'ask_angela' %}checked{% endif %}>
             <label class="form-check-label" for="ask_angela_yes">
@@ -30,5 +28,10 @@
  
         </div>
     </div>
+    <p class="more-info">
+    <a href="https://www.openstreetmap.fr/contact/" target="_blank">{{ 'display.ask_angela_more_info'|trans }}</a>
+    </p>
+    </div>
+
 </fieldset>
 {% endblock %}

templates/public/edit/opening_hours.html.twig

@@ -1,16 +1,24 @@
 <div id="opening_hours">
-                                <h2>{{ 'display.opening_hours'|trans }}</h2>
+                                <h2>
+                                <i class="bi bi-clock"></i> 
+                                {{ 'display.opening_hours'|trans }}</h2>
                                 <p class="description">{{ 'display.opening_hours_description'|trans }}</p>
 
-                                {% if commerce_overpass.tags_converted.opening_hours is defined %}
+                                {% if commerce_overpass.tags_converted.opening_hours is defined and commerce_overpass.tags_converted.opening_hours != '' %}
                                     {{ dump(commerce_overpass.tags_converted.opening_hours) }} 
+                                    <input type="text" placeholder="Remplissez" class="form-control" name="custom__opening_hours" value="{{ commerce_overpass.tags_converted.opening_hours }}">
                                 {% else %}
-                                    <input type="text" name="custom__opening_hours" value="">
+                                    <input type="text" placeholder="Lundi de 10h à 12h et de 14h à 18h" class="form-control" name="custom__opening_hours" value="">
                                     <br>  ajoutez les horaires au format OSM
-
-
                                 {% endif %}
 
+                                <span class="examples">Exemples :</span>
+                                <ul>
+                                    <li>Écrivez "24/7" pour indiquer que le commerce est ouvert 24 heures sur 24</li>
+                                    <li>Écrivez "Mo-Fr 9:00 - 18:00" pour indiquer que le commerce est ouvert du lundi au vendredi de 9h à 18h</li>
+                                    <li>Pour des horaires plus complexes, écrivez "Mo-Fr 9:00 - 18:00; Sa 9:00 - 12:00" pour indiquer que le commerce est ouvert du lundi au vendredi de 9h à 18h et le samedi de 9h à 12h</li>
+                                </ul>
+
                                 {# <input type="checkbox" name="commerce_tag_value__opening_hours_1" value="yes">
                                 Lundi de 
 

templates/public/edit/tags.html.twig

@@ -3,15 +3,39 @@
 <div id="tags">
     
         {% for k, v in commerce_overpass.tags_converted %}
+        
             <div class="row mb-3">
                 <div class="col-md-5">
-                    <input type="text" class="form-control hidden" name="commerce_tag_key__{{ k }}" value="{{ k }}" readonly>
+                {% if k not in excluded_tags_to_render %}
-                    <span class="label-translated">{{ ('display.keys.' ~ k)|trans }}</span>
+                    {% if k == 'phone' or k == 'contact:phone' %}
+                        <i class="bi bi-telephone"></i>
+                    {% elseif k == 'addr:housenumber' or k == 'addr:street' or k == 'addr:city' or k == 'addr:postcode' or k == 'addr:country' %}
+                        <i class="bi bi-geo-alt"></i>
+                    {% elseif k == 'mastodon' %}
+                        <i class="bi bi-mastodon"></i>
+                    {% elseif k == 'email' or k == 'contact:email' %}
+                        <i class="bi bi-envelope"></i>
+                    {% elseif k == 'website' or k == 'contact:website' %}
+                    {% elseif k == 'opening_hours' %}   
+                        <i class="bi bi-clock"></i>
+                    {% else %}
+                    <i class="bi bi-tag"></i>
+                    {% endif %}
+                 {% endif %}
+                    <input type="text" class="form-control hidden" name="commerce_tag_key__{{ k }}" value="{{ k }}" title="{{ k }}" readonly>
+                    {% if k not in excluded_tags_to_render %}
+
+                    <span class="label-translated" title="{{ k }}">{{ ('display.keys.' ~ k)|trans }}</span>
+                    {% endif %}
                 </div>
                 <div class="col-md-5">
+                {% if k not in excluded_tags_to_render %}
+
                     <input type="text" class="form-control" name="commerce_tag_value__{{ k }}" value="{{ v }}">
+                {% endif %}
                 </div>
             </div>
+        
         {% endfor %}
     
 </div>

templates/public/edit/wheelchair.html.twig

@@ -1,5 +1,5 @@
 <div id="wheelchair">
-    <h2>{{ 'display.wheelchair'|trans }}</h2>
+    <h2><i class="bi bi-person-wheelchair"></i> {{ 'display.wheelchair'|trans }}</h2>
     <div class="row mb-3 p-4">
         <div class="col-md-5">
             <div class="form-check">

templates/public/nav.html.twig

@@ -0,0 +1,20 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 rounded shadow-sm">
+                <div class="container-fluid">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="collapse navbar-collapse" id="navbarNav">
+                        <ul class="navbar-nav">
+                            <li class="nav-item">
+                                <a class="nav-link active" href="{{ path('app_public_index') }}">{{ 'display.home'|trans }}</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="{{ path('app_public_dashboard') }}">{{ 'display.stats'|trans }}</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="https://openstreetmap.fr/contact/">{{ 'display.contact_humans'|trans }}</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>

translations/messages.en.yaml

@@ -38,6 +38,7 @@ display:
     ask_angela: 'Ask Angela'
     ask_angela_yes: 'Yes'
     ask_angela_no: 'No'
+    
   keys:
     tags: 'tags'
     name: 'Name'

translations/messages.fr.yaml

@@ -4,7 +4,7 @@ display:
   stats: "Statistiques"
   contact_humans: "Contacter des humains d'OSM France pour m'aider"
   modify: "Modifier"
-  welcome: "Bienvenue dans les commerces!"
+  welcome: "Modifier ce lieu:"
   modify_commerce: "Modifier votre commerce"
   tags: "Tags"
   submit: "Envoyer"
@@ -22,6 +22,8 @@ display:
   attributes: "Attributs"
   opening_hours: "Horaires d'ouverture"
   opening_hours_description: "De bons horaires d'ouverture sont importants pour que les clients puissent vous trouver."
+  ask_angela_yes: "Oui"
+  ask_angela_no: "Non"
   values:
     wheelchair:
       yes: "le lieu est totalement praticable en fauteuil roulant"
@@ -50,9 +52,10 @@ display:
     contact:website: "Contact du Site web"
     contact:mastodon: "Contact Mastodon"
     opening_hours: "Horaires d'ouverture"
+    opening_hours:signed: "Horaires d'ouverture signés"
     shop: "Type de commerce"
     tourism: "Tourisme"
-    wheelchair: "Accès PMR"
+    wheelchair: "Accès Personnes à mobilité réduite (PMR)"
     addr:housenumber: "Numéro de rue"
     addr:street: "Rue"
     addr:city: "Ville"
@@ -60,6 +63,7 @@ display:
     amenity: "Équipement"
     source: "Source"
     ref:FR:SIRET: "SIRET"
+    image: "URL vers une Image"
   disclaimer:
     title: "Attention"
     text: "Ce site est un travail en cours, ceci est une démonstration sur un objet fictif qui utilise les données de l'API OpenStreetMap."