tykayn/osm-labo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

précision champs importants et manquants dans edit form

Browse source
This commit is contained in:
Tykayn 2025-07-13 18:01:50 +02:00 • committed by tykayn
parent bf2c5bdf7d
commit 21d3a5dfc7
8 changed files with 304 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

86
assets/edit.js
View file

@ -4,13 +4,36 @@
* pour le formulaire de modification * pour le formulaire de modification
*/ */
function updateCompletionProgress() { function updateCompletionProgress() {
const inputs = document.querySelectorAll('input[type="text"]'); const inputs = document.querySelectorAll('input[data-important]');
let filledInputs = 0; let filledInputs = 0;
let totalInputs = inputs.length; let totalInputs = inputs.length;
let missingFields = [];
inputs.forEach(input => { inputs.forEach(input => {
if (input.value.trim() !== '') { if (input.value.trim() !== '') {
filledInputs++; filledInputs++;
} else {
// Get the field label or name for display in the popup
let fieldName = '';
const label = input.closest('.row')?.querySelector('.form-label, .label-translated');
if (label) {
fieldName = label.textContent.trim();
} else {
// If no label found, try to get a meaningful name from the input
const name = input.getAttribute('name');
if (name) {
// Extract field name from the attribute (e.g., commerce_tag_value__contact:email -> Email)
const parts = name.split('__');
if (parts.length > 1) {
fieldName = parts[1].replace('commerce_tag_value_', '').replace('contact:', '');
// Capitalize first letter
fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
} else {
fieldName = name;
}
}
}
missingFields.push(fieldName || input.getAttribute('name') || 'Champ inconnu');
} }
}); });
@ -19,7 +42,64 @@ function updateCompletionProgress() {
if (progressBar) { if (progressBar) {
progressBar.style.width = completionPercentage + '%'; progressBar.style.width = completionPercentage + '%';
progressBar.setAttribute('aria-valuenow', completionPercentage); progressBar.setAttribute('aria-valuenow', completionPercentage);
document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
// Create the completion display with a clickable question mark
const displayElement = document.querySelector('#completion_display');
// Format missing fields as an HTML list for better readability
let missingFieldsContent = '';
if (missingFields.length > 0) {
missingFieldsContent = '<ul class="list-unstyled mb-0">';
// Filter out empty or undefined field names and sort them alphabetically
missingFields
.filter(field => field && field.trim() !== '')
.sort()
.forEach(field => {
missingFieldsContent += `<li><i class="bi bi-exclamation-circle text-warning"></i> ${field}</li>`;
});
missingFieldsContent += '</ul>';
} else {
missingFieldsContent = 'Tous les champs importants sont remplis !';
}
displayElement.innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}% <a href="#" class="missing-fields-info badge rounded-pill bg-warning text-dark ms-1" style="text-decoration: none; font-weight: bold;" data-bs-toggle="popover" data-bs-placement="bottom" title="Champs manquants" data-bs-html="true" data-bs-content="${missingFieldsContent.replace(/"/g, '&quot;')}">?</a>`;
// Initialize the Bootstrap popover
const popoverTrigger = displayElement.querySelector('.missing-fields-info');
if (popoverTrigger) {
// Add click handler to focus on the first missing field
popoverTrigger.addEventListener('click', function(e) {
e.preventDefault(); // Prevent scrolling to top
// Find the first missing field
const missingInput = document.querySelector('input[data-important]:not(.good_filled)');
if (missingInput) {
// Focus on the first missing field
missingInput.focus();
// Scroll to the field if needed
missingInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
// Use setTimeout to ensure this runs after the current execution context
setTimeout(() => {
if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
// Destroy existing popover if any
const existingPopover = bootstrap.Popover.getInstance(popoverTrigger);
if (existingPopover) {
existingPopover.dispose();
}
// Initialize new popover
new bootstrap.Popover(popoverTrigger, {
html: true,
trigger: 'click',
container: 'body'
});
} else {
console.warn('Bootstrap popover not available');
}
}, 0);
}
} }
} }
@ -43,4 +123,4 @@ function parseCuisine() {
} }
window.updateCompletionProgress = updateCompletionProgress; window.updateCompletionProgress = updateCompletionProgress;
window.parseCuisine = parseCuisine; window.parseCuisine = parseCuisine;

19
assets/styles/app.css
View file

@ -18,13 +18,22 @@ body {
#qrcode { #qrcode {
margin-bottom: 8rem; margin-bottom: 8rem;
} }
input[data-important]{
.filled { border-color: #7a8fbb ;
background-color: rgba(0, 255, 0, 0.2) !important; border-left-width: 5px ;
} }
.filled:hover { input[data-important]:before{
background-color: #8abb7a !important; content : ">" !important ;
}
.filled, .good_filled {
border-color: rgba(0, 255, 0, 0.8) !important;
color: #082b0a !important;
}
.filled:hover , .good_filled:hover {
background-color: #d9ffd1 !important;
} }
.no-name { .no-name {

11
src/Controller/PublicController.php
View file

@ -319,7 +319,11 @@ class PublicController extends AbstractController
$osm_kind = $request->request->get('osm_kind', 'node'); $osm_kind = $request->request->get('osm_kind', 'node');
// Récupérer tous les tags du formulaire // Récupérer tous les tags du formulaire
$tags = []; $tags = [];
$request_post = $request->request->all(); $request_post = $request->request->all();
var_dump($request_post);
$request_post = $this->motocultrice->map_post_values($request_post); $request_post = $this->motocultrice->map_post_values($request_post);
$request_post = $request_post ?? []; $request_post = $request_post ?? [];
// Log temporaire pour debug POST // Log temporaire pour debug POST
@ -343,6 +347,11 @@ class PublicController extends AbstractController
// Récupérer le token OSM depuis les variables d'environnement // Récupérer le token OSM depuis les variables d'environnement
$osm_api_token = $_ENV['APP_OSM_BEARER']; $osm_api_token = $_ENV['APP_OSM_BEARER'];
var_dump($tags_after_modif);
die("tosssp");
try { try {
$client = new Client(); $client = new Client();

4
src/Service/Motocultrice.php
View file

@ -27,6 +27,10 @@ class Motocultrice
'harassment_prevention', 'harassment_prevention',
'image', 'image',
'panoramax', 'panoramax',
'opening_hours',
'email',
'contact:email',
'contact:mastodon',
]; ];
// les tags OSM que l'on estime nécessaires pour un commerce // les tags OSM que l'on estime nécessaires pour un commerce
public $base_tags = [ public $base_tags = [

179
templates/public/edit.html.twig
View file

@ -12,7 +12,7 @@
<fieldset class="d-none"> <fieldset class="d-none">
<pre> <pre>
{{ dump(commerce_overpass.tags_converted )}} {{ dump(commerce_overpass.tags_converted ) }}
</pre> </pre>
</fieldset> </fieldset>
<h1 class="card-title h2 mb-4"> <h1 class="card-title h2 mb-4">
@ -38,6 +38,7 @@
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">
<input type="text" class="form-control" <input type="text" class="form-control"
name="commerce_tag_value__name" name="commerce_tag_value__name"
data-important="true"
value="{% if commerce_overpass.tags_converted.name is defined %}{{ commerce_overpass.tags_converted.name }}{% endif %}"> value="{% if commerce_overpass.tags_converted.name is defined %}{{ commerce_overpass.tags_converted.name }}{% endif %}">
</div> </div>
@ -49,18 +50,56 @@
<div class="input-group mb-2"> <div class="input-group mb-2">
<span class="input-group-text" style="width: 10rem;"> <span class="input-group-text" style="width: 10rem;">
<i class="bi bi-phone me-2"></i> <i class="bi bi-phone me-2"></i>
Téléphone Téléphone
</span> </span>
<input type="text" class="form-control" <input type="text" class="form-control"
id="commerce_tag_value__contact:phone" id="commerce_tag_value__contact:phone"
name="commerce_tag_value__contact:phone" name="commerce_tag_value__contact:phone"
value="{{ commerce_overpass.tags_converted['contact:phone'] ?? '' }}" data-important="true"
placeholder="+33 1 23 45 67 89"> value="{{ commerce_overpass.tags_converted['contact:phone'] ?? '' }}"
placeholder="+33 1 23 45 67 89">
</div> </div>
</fieldset> </fieldset>
<fieldset>
<div id="email" class="row mb-3 ">
<div class="col-md-5">
<div class="d-flex align-items-center">
<i class="bi bi-envelope me-2"></i>
<span class="label-translated" title="contact:email">Email</span>
</div>
</div>
<div class="col-md-5">
<div class="input-group">
<input type="text" class="form-control"
data-important="true"
id="commerce_tag_value__contact:email" name="commerce_tag_value__contact:email" value="">
</div>
</div>
</div>
</fieldset>
<fieldset>
<div id="mastodon" class="row mb-3 ">
<div class="col-md-5">
<div class="d-flex align-items-center">
<i class="bi bi-mastodon me-2"></i>
<span class="label-translated" title="contact:mastodon">Contact Mastodon</span>
</div>
</div>
<div class="col-md-5">
<div class="input-group">
<input type="text" class="form-control"
data-important="true"
id="commerce_tag_value__contact:mastodon" name="commerce_tag_value__contact:mastodon" value="">
</div>
</div>
</div>
</fieldset>
{% include 'public/edit/opening_hours.html.twig' %}
<div id="images"> <div id="images">
{% if commerce_overpass.tags_converted.image is defined and commerce_overpass.tags_converted.image|length > 0 %} {% if commerce_overpass.tags_converted.image is defined and commerce_overpass.tags_converted.image|length > 0 %}
<img class="img-fluid img-thumbnail mb-3" style="height: 500px; width: auto;" <img class="img-fluid img-thumbnail mb-3" style="height: 500px; width: auto;"
@ -103,7 +142,6 @@
opening_hours {{ 'display.already_filled'|trans }} opening_hours {{ 'display.already_filled'|trans }}
</span> </span>
{% endif %} {% endif %}
{% include 'public/edit/opening_hours.html.twig' %}
{% include 'public/edit/clim.html.twig' %} {% include 'public/edit/clim.html.twig' %}
@ -192,8 +230,8 @@
class="btn btn-outline-secondary"> class="btn btn-outline-secondary">
<i class="bi bi-globe"></i> {{ 'display.view_on_osm'|trans }} <i class="bi bi-globe"></i> {{ 'display.view_on_osm'|trans }}
<i class="bi bi-map"></i> <i class="bi bi-map"></i>
{# <img src="{{ asset('img/logo-osm.png') }}" alt="logo OpenStreetMap"#} {# <img src="{{ asset('img/logo-osm.png') }}" alt="logo OpenStreetMap" #}
{# class="img-fluid thumbnail">#} {# class="img-fluid thumbnail"> #}
</a> </a>
<button onclick="openInJOSM('{{ commerce.osmKind }}', '{{ commerce_overpass['@attributes'].id }}')" <button onclick="openInJOSM('{{ commerce.osmKind }}', '{{ commerce_overpass['@attributes'].id }}')"
title="Ouvrir dans JOSM" title="Ouvrir dans JOSM"
@ -258,7 +296,7 @@
<script> <script>
{% 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 %} {% 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 }}'; mapboxgl.accessToken = '{{ mapbox_token }}';
map = new mapboxgl.Map({ let map = new mapboxgl.Map({
container: 'map', container: 'map',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}', style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}], center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
@ -278,9 +316,14 @@
}); });
/**
* indiquer la complétion des champs importants dans ce formulaire
* @param e
*/
function check_validity(e) { function check_validity(e) {
list_inputs_good_to_fill = [ list_inputs_good_to_fill = [
'input[name="commerce_tag_value__name"]',
'input[name="commerce_tag_value__contact:email"]', 'input[name="commerce_tag_value__contact:email"]',
'input[name="commerce_tag_value__contact:phone"]', 'input[name="commerce_tag_value__contact:phone"]',
'input[name="commerce_tag_value__contact:website"]', 'input[name="commerce_tag_value__contact:website"]',
@ -331,14 +374,118 @@
} }
} }
if (errors.length > 0) { // Collect all missing important fields
const missingImportantFields = [];
list_inputs_good_to_fill.forEach(selector => {
const input = document.querySelector(selector);
if (input && input.value.trim() === '') {
// Get the field label or name for display
let fieldName = '';
const label = input.closest('.row')?.querySelector('.form-label, .label-translated');
if (label) {
fieldName = label.textContent.trim();
} else {
// If no label found, try to get a meaningful name from the input
const name = input.getAttribute('name');
if (name) {
// Extract field name from the attribute (e.g., commerce_tag_value__contact:email -> Email)
const parts = name.split('__');
if (parts.length > 1) {
fieldName = parts[1].replace('commerce_tag_value_', '').replace('contact:', '');
// Capitalize first letter
fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
} else {
fieldName = name;
}
}
}
missingImportantFields.push(fieldName || input.getAttribute('name') || 'Champ inconnu');
}
});
if (errors.length > 0 || missingImportantFields.length > 0) {
e.preventDefault(); e.preventDefault();
document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
// Format missing fields as an HTML list for better readability
let missingFieldsContent = '';
if (missingImportantFields.length > 0) {
// Filter out empty or undefined field names and sort them alphabetically
const filteredMissingFields = missingImportantFields
.filter(field => field && field.trim() !== '')
.sort();
// Create the HTML content for the popover
missingFieldsContent = '<ul class="list-unstyled mb-0">';
filteredMissingFields.forEach(field => {
missingFieldsContent += `<li><i class="bi bi-exclamation-circle text-warning"></i> ${field}</li>`;
});
missingFieldsContent += '</ul>';
}
// Display validation errors
let validationMessage = '';
if (errors.length > 0) {
validationMessage += errors.join('<br>');
}
// Add information about missing fields with a popover
if (missingImportantFields.length > 0) {
if (validationMessage) {
validationMessage += '<br>';
}
validationMessage += `Champs manquants: ${missingImportantFields.length} <a href="#" class="missing-fields-info badge rounded-pill bg-warning text-dark ms-1" style="text-decoration: none; font-weight: bold;" data-bs-toggle="popover" data-bs-placement="bottom" title="Champs manquants" data-bs-html="true" data-bs-content="${missingFieldsContent.replace(/"/g, '&quot;')}">?</a>`;
}
document.querySelector('#validation_messages').innerHTML = validationMessage;
document.querySelector('#validation_messages').classList.remove('d-none');
document.querySelector('#validation_messages').classList.add('is-invalid'); document.querySelector('#validation_messages').classList.add('is-invalid');
// Initialize the Bootstrap popover
const popoverTrigger = document.querySelector('.missing-fields-info');
if (popoverTrigger) {
// Add click handler to focus on the first missing field
popoverTrigger.addEventListener('click', function(e) {
e.preventDefault(); // Prevent scrolling to top
// Find the first missing field from the list_inputs_good_to_fill
let firstMissingField = null;
for (const selector of list_inputs_good_to_fill) {
const input = document.querySelector(selector);
if (input && input.value.trim() === '') {
firstMissingField = input;
break;
}
}
if (firstMissingField) {
// Focus on the first missing field
firstMissingField.focus();
// Scroll to the field if needed
firstMissingField.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
// Use setTimeout to ensure this runs after the current execution context
setTimeout(() => {
if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
// Destroy existing popover if any
const existingPopover = bootstrap.Popover.getInstance(popoverTrigger);
if (existingPopover) {
existingPopover.dispose();
}
// Initialize new popover
new bootstrap.Popover(popoverTrigger, {
html: true,
trigger: 'click',
container: 'body'
});
}
}, 0);
}
} }
} }
check_validity ? check_validity() : null; check_validity ? check_validity() : null;
</script> </script>
{% endblock %} {% endblock %}

13
templates/public/edit/address.html.twig
View file

@ -4,12 +4,17 @@
{# {{ dump(commerce_overpass)}} #} {# {{ dump(commerce_overpass)}} #}
<div class="row mb-3"> <div class="row mb-3">
<div class="col-12 col-md-2"> <div class="col-12 col-md-2">
<label for="commerce_tag_value__contact:housenumber">{{'display.keys.contact:housenumber'|trans}}</label> <label for="commerce_tag_value__contact:housenumber">{{ 'display.keys.contact:housenumber'|trans }}</label>
<input type="text" class="form-control text-end" name="commerce_tag_value__contact:housenumber" value="{% if commerce_overpass.tags_converted['contact:housenumber'] is defined %}{{ commerce_overpass.tags_converted['contact:housenumber'] }}{% endif %}"> <input type="text" class="form-control text-end"
name="commerce_tag_value__contact:housenumber"
data-important="true"
value="{% if commerce_overpass.tags_converted['contact:housenumber'] is defined %}{{ commerce_overpass.tags_converted['contact:housenumber'] }}{% endif %}">
</div> </div>
<div class="col-12 col-md-10"> <div class="col-12 col-md-10">
<label for="commerce_tag_value__contact:street">{{'display.keys.contact:street'|trans}}</label> <label for="commerce_tag_value__contact:street">{{ 'display.keys.contact:street'|trans }}</label>
<input type="text" class="form-control" name="commerce_tag_value__contact:street" value="{% if commerce_overpass.tags_converted['contact:street'] is defined %}{{ commerce_overpass.tags_converted['contact:street'] }}{% endif %}"> <input type="text" class="form-control" name="commerce_tag_value__contact:street"
data-important="true"
value="{% if commerce_overpass.tags_converted['contact:street'] is defined %}{{ commerce_overpass.tags_converted['contact:street'] }}{% endif %}">
</div> </div>
</div> </div>
</div> </div>

36
templates/public/edit/opening_hours.html.twig
View file

@ -1,24 +1,26 @@
<div id="opening_hours"> <div id="opening_hours">
<h2> <h2 class="mt-4">
<i class="bi bi-clock"></i> <i class="bi bi-clock"></i>
{{ 'display.opening_hours'|trans }}</h2> {{ 'display.opening_hours'|trans }}</h2>
<p class="description">{{ 'display.opening_hours_description'|trans }}</p> <p class="description">{{ 'display.opening_hours_description'|trans }}</p>
{% if commerce_overpass.tags_converted.opening_hours is defined and commerce_overpass.tags_converted.opening_hours != '' %} {% if commerce_overpass.tags_converted.opening_hours is defined and commerce_overpass.tags_converted.opening_hours != '' %}
<input type="text" <input type="text"
placeholder="Remplissez" placeholder="Remplissez"
class="form-control" class="form-control"
name="custom__opening_hours" name="custom__opening_hours"
id="custom__opening_hours" id="custom__opening_hours"
value="{{ commerce_overpass.tags_converted.opening_hours }}"> data-important="true"
value="{{ commerce_overpass.tags_converted.opening_hours }}">
{% else %} {% else %}
<input type="text" <input type="text"
placeholder="Mo-Fr 10:00-12:00 " placeholder="Mo-Fr 10:00-12:00 "
class="form-control" class="form-control"
name="custom__opening_hours" name="custom__opening_hours"
id="custom__opening_hours" id="custom__opening_hours"
value=""> data-important="true"
value="">
<br> <br>
{% endif %} {% endif %}
<hr> <hr>
</div> </div>

4
templates/public/edit/tags.html.twig
View file

@ -27,7 +27,7 @@
{% endif %} {% endif %}
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
{# {% if k not in excluded_tags_to_render %} #} {% if k not in excluded_tags_to_render %}
<div class="input-group"> <div class="input-group">
<input type="text" <input type="text"
class="form-control" class="form-control"
@ -36,7 +36,7 @@
value="{{ v }}" value="{{ v }}"
{% if hide_filled_inputs is defined and v %}style="display: none;"{% endif %}> {% if hide_filled_inputs is defined and v %}style="display: none;"{% endif %}>
</div> </div>
{# {% endif %} #} {% endif %}
</div> </div>
</div> </div>
{% endfor %} {% endfor %}