mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-10-04 17:04:53 +02:00
up recherche home
This commit is contained in:
Tykayn
tykayn
parent
c89751b45c
commit
7887356dd9
3 changed files with 281 additions and 251 deletions
|
|
@ -21,7 +21,13 @@
|
|||
{% if main_tag %}
|
||||
{{ tag_emoji(main_tag) }}
|
||||
{% endif %}
|
||||
{{ commerce_overpass.tags_converted.name }} - {{ commerce.stats.name }}
|
||||
{% if commerce_overpass.tags_converted.name is defined %}
|
||||
{{ commerce_overpass.tags_converted.name }}
|
||||
|
||||
{% endif %}
|
||||
{% if commerce.stats.name is defined %}
|
||||
- {{ commerce.stats.name }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
<div id="map" style="height: 400px; width: 100%;" class="rounded mb-4"></div>
|
||||
|
||||
|
|
@ -54,12 +60,12 @@
|
|||
<i class="bi bi-phone me-2"></i>
|
||||
Téléphone
|
||||
</span>
|
||||
<input type="text" class="form-control"
|
||||
id="commerce_tag_value__contact:phone"
|
||||
name="commerce_tag_value__contact:phone"
|
||||
data-important="true"
|
||||
value="{{ commerce_overpass.tags_converted['contact:phone'] ?? '' }}"
|
||||
placeholder="+33 1 23 45 67 89">
|
||||
<input type="text" class="form-control"
|
||||
id="commerce_tag_value__contact:phone"
|
||||
name="commerce_tag_value__contact:phone"
|
||||
data-important="true"
|
||||
value="{{ commerce_overpass.tags_converted['contact:phone'] ?? '' }}"
|
||||
placeholder="+33 1 23 45 67 89">
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
|
@ -75,7 +81,9 @@
|
|||
<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="{{ commerce_overpass.tags_converted['contact:email'] ?? '' }}">
|
||||
id="commerce_tag_value__contact:email"
|
||||
name="commerce_tag_value__contact:email"
|
||||
value="{{ commerce_overpass.tags_converted['contact:email'] ?? '' }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -92,7 +100,9 @@
|
|||
<div class="input-group">
|
||||
<input type="text" class="form-control"
|
||||
data-important="true"
|
||||
id="commerce_tag_value__contact:website" name="commerce_tag_value__contact:website" value="{{ commerce_overpass.tags_converted['contact:website'] ?? '' }}">
|
||||
id="commerce_tag_value__contact:website"
|
||||
name="commerce_tag_value__contact:website"
|
||||
value="{{ commerce_overpass.tags_converted['contact:website'] ?? '' }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -110,7 +120,8 @@
|
|||
<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="">
|
||||
id="commerce_tag_value__contact:mastodon"
|
||||
name="commerce_tag_value__contact:mastodon" value="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -185,16 +196,16 @@
|
|||
|
||||
{% include 'public/edit/tags.html.twig' %}
|
||||
|
||||
{# <div class="mb-4" id="previsualisation_tags">#}
|
||||
{# <h4>Prévisualisation des tags OSM (texte à copier-coller)</h4>#}
|
||||
{# {% set tags_for_textarea = {} %}#}
|
||||
{# {% for k, v in commerce_overpass.tags_converted %}#}
|
||||
{# {% if v is not empty %}#}
|
||||
{# {% set tags_for_textarea = tags_for_textarea|merge({ (k): v }) %}#}
|
||||
{# {% endif %}#}
|
||||
{# {% endfor %}#}
|
||||
{# {% include 'public/_tags_textarea.html.twig' with { 'tags': tags_for_textarea } %}#}
|
||||
{# </div>#}
|
||||
{# <div class="mb-4" id="previsualisation_tags"> #}
|
||||
{# <h4>Prévisualisation des tags OSM (texte à copier-coller)</h4> #}
|
||||
{# {% set tags_for_textarea = {} %} #}
|
||||
{# {% for k, v in commerce_overpass.tags_converted %} #}
|
||||
{# {% if v is not empty %} #}
|
||||
{# {% set tags_for_textarea = tags_for_textarea|merge({ (k): v }) %} #}
|
||||
{# {% endif %} #}
|
||||
{# {% endfor %} #}
|
||||
{# {% include 'public/_tags_textarea.html.twig' with { 'tags': tags_for_textarea } %} #}
|
||||
{# </div> #}
|
||||
|
||||
<div id="validation_messages" class="alert alert-danger d-none"></div>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
|
||||
|
|
@ -313,197 +324,197 @@
|
|||
<script src='{{ asset('js/utils.js') }}'></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 %}
|
||||
mapboxgl.accessToken = '{{ mapbox_token }}';
|
||||
let map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
|
||||
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
|
||||
zoom: 17
|
||||
});
|
||||
mapboxgl.accessToken = '{{ mapbox_token }}';
|
||||
let map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
|
||||
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
|
||||
zoom: 17
|
||||
});
|
||||
|
||||
new mapboxgl.Marker()
|
||||
.setLngLat([{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}])
|
||||
.setPopup(new mapboxgl.Popup({offset: 25}).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1>'))
|
||||
.addTo(map);
|
||||
new mapboxgl.Marker()
|
||||
.setLngLat([{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}])
|
||||
.setPopup(new mapboxgl.Popup({offset: 25}).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1>'))
|
||||
.addTo(map);
|
||||
{% endif %}
|
||||
|
||||
|
||||
// Ajouter un écouteur d'événement pour le redimensionnement de la fenêtre
|
||||
window.addEventListener('resize', () => {
|
||||
updateMapHeightForLargeScreens();
|
||||
});
|
||||
// Ajouter un écouteur d'événement pour le redimensionnement de la fenêtre
|
||||
window.addEventListener('resize', () => {
|
||||
updateMapHeightForLargeScreens();
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* indiquer la complétion des champs importants dans ce formulaire
|
||||
* @param e
|
||||
*/
|
||||
function check_validity(e) {
|
||||
/**
|
||||
* indiquer la complétion des champs importants dans ce formulaire
|
||||
* @param e
|
||||
*/
|
||||
function check_validity(e) {
|
||||
|
||||
list_inputs_good_to_fill = [
|
||||
'input[name="commerce_tag_value__name"]',
|
||||
'input[name="commerce_tag_value__contact:email"]',
|
||||
'input[name="commerce_tag_value__contact:phone"]',
|
||||
'input[name="commerce_tag_value__contact:website"]',
|
||||
'input[name="commerce_tag_value__contact:mastodon"]',
|
||||
'input[name="commerce_tag_value__address"]',
|
||||
'input[name="custom_opening_hours"]',
|
||||
'input[name="commerce_tag_value__contact:street"]',
|
||||
'input[name="commerce_tag_value__contact:housenumber"]',
|
||||
'input[name="custom__cuisine"]',
|
||||
]
|
||||
list_inputs_good_to_fill = [
|
||||
'input[name="commerce_tag_value__name"]',
|
||||
'input[name="commerce_tag_value__contact:email"]',
|
||||
'input[name="commerce_tag_value__contact:phone"]',
|
||||
'input[name="commerce_tag_value__contact:website"]',
|
||||
'input[name="commerce_tag_value__contact:mastodon"]',
|
||||
'input[name="commerce_tag_value__address"]',
|
||||
'input[name="custom_opening_hours"]',
|
||||
'input[name="commerce_tag_value__contact:street"]',
|
||||
'input[name="commerce_tag_value__contact:housenumber"]',
|
||||
'input[name="custom__cuisine"]',
|
||||
]
|
||||
|
||||
list_inputs_good_to_fill.forEach(selector => {
|
||||
const input = document.querySelector(selector);
|
||||
if (input) {
|
||||
if (input.value.trim() !== '') {
|
||||
input.classList.add('good_filled');
|
||||
} else {
|
||||
input.classList.remove('good_filled');
|
||||
}
|
||||
}
|
||||
});
|
||||
let errors = [];
|
||||
document.querySelectorAll('.is-invalid').forEach(input => {
|
||||
input.classList.remove('is-invalid');
|
||||
});
|
||||
list_inputs_good_to_fill.forEach(selector => {
|
||||
const input = document.querySelector(selector);
|
||||
if (input) {
|
||||
if (input.value.trim() !== '') {
|
||||
input.classList.add('good_filled');
|
||||
} else {
|
||||
input.classList.remove('good_filled');
|
||||
}
|
||||
}
|
||||
});
|
||||
let errors = [];
|
||||
document.querySelectorAll('.is-invalid').forEach(input => {
|
||||
input.classList.remove('is-invalid');
|
||||
});
|
||||
|
||||
const nameInput = document.querySelector('input[name="commerce_tag_value__name"]');
|
||||
if (!nameInput.value.trim()) {
|
||||
errors.push("Le nom de l'établissement est obligatoire");
|
||||
nameInput.classList.add('is-invalid');
|
||||
}
|
||||
const nameInput = document.querySelector('input[name="commerce_tag_value__name"]');
|
||||
if (!nameInput.value.trim()) {
|
||||
errors.push("Le nom de l'établissement est obligatoire");
|
||||
nameInput.classList.add('is-invalid');
|
||||
}
|
||||
|
||||
const emailInput = document.querySelector('input[name="commerce_tag_value__contact:email"]');
|
||||
if (emailInput && emailInput.value) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(emailInput.value)) {
|
||||
errors.push("L'adresse email n'est pas valide");
|
||||
emailInput.classList.add('is-invalid');
|
||||
}
|
||||
}
|
||||
const emailInput = document.querySelector('input[name="commerce_tag_value__contact:email"]');
|
||||
if (emailInput && emailInput.value) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(emailInput.value)) {
|
||||
errors.push("L'adresse email n'est pas valide");
|
||||
emailInput.classList.add('is-invalid');
|
||||
}
|
||||
}
|
||||
|
||||
const phoneInput = document.querySelector('input[name="commerce_tag_value__contact:phone"]');
|
||||
if (phoneInput && phoneInput.value) {
|
||||
const phoneRegex = /^(\+33|0)[1-9](\d{2}){4}$/;
|
||||
if (!phoneRegex.test(phoneInput.value.replace(/\s/g, ''))) {
|
||||
errors.push("Le numéro de téléphone n'est pas valide");
|
||||
phoneInput.classList.add('is-invalid');
|
||||
}
|
||||
}
|
||||
const phoneInput = document.querySelector('input[name="commerce_tag_value__contact:phone"]');
|
||||
if (phoneInput && phoneInput.value) {
|
||||
const phoneRegex = /^(\+33|0)[1-9](\d{2}){4}$/;
|
||||
if (!phoneRegex.test(phoneInput.value.replace(/\s/g, ''))) {
|
||||
errors.push("Le numéro de téléphone n'est pas valide");
|
||||
phoneInput.classList.add('is-invalid');
|
||||
}
|
||||
}
|
||||
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
// 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();
|
||||
if (errors.length > 0 || missingImportantFields.length > 0) {
|
||||
e.preventDefault();
|
||||
|
||||
// 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();
|
||||
// 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>';
|
||||
}
|
||||
// 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>');
|
||||
}
|
||||
// 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, '"')}">?</a>`;
|
||||
}
|
||||
// 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, '"')}">?</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').innerHTML = validationMessage;
|
||||
document.querySelector('#validation_messages').classList.remove('d-none');
|
||||
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
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
// 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' });
|
||||
}
|
||||
});
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue