mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
321 lines
10 KiB
JavaScript
321 lines
10 KiB
JavaScript
/*
|
|
* Welcome to your app's main JavaScript file!
|
|
*
|
|
* We recommend including the built version of this JavaScript file
|
|
* (and its CSS file) in your base layout (base.html.twig).
|
|
*/
|
|
|
|
// any CSS you import will output into a single css file (app.css in this case)
|
|
import './styles/app.css';
|
|
import './utils.js';
|
|
import './opening_hours.js';
|
|
import './josm.js';
|
|
|
|
|
|
|
|
// Attendre le chargement du DOM
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('DOMContentLoaded');
|
|
|
|
|
|
|
|
|
|
|
|
updateMapHeightForLargeScreens()
|
|
|
|
function check_validity(e) {
|
|
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 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');
|
|
}
|
|
}
|
|
|
|
if (errors.length > 0) {
|
|
e.preventDefault();
|
|
document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
|
|
document.querySelector('#validation_messages').classList.add('is-invalid');
|
|
}
|
|
}
|
|
// Générer une couleur pastel aléatoire
|
|
const genererCouleurPastel = () => {
|
|
// Utiliser des valeurs plus claires (180-255) pour obtenir des tons pastel
|
|
const r = Math.floor(Math.random() * 75 + 180);
|
|
const g = Math.floor(Math.random() * 75 + 180);
|
|
const b = Math.floor(Math.random() * 75 + 180);
|
|
return `rgb(${r}, ${g}, ${b})`;
|
|
};
|
|
|
|
const randombg = genererCouleurPastel();
|
|
// Appliquer la couleur au body
|
|
document.body.style.backgroundColor = randombg;
|
|
|
|
// Gestion du bouton pour afficher tous les champs
|
|
const btnShowAllFields = document.querySelector('#showAllFields');
|
|
if (btnShowAllFields) {
|
|
console.log('btnShowAllFields détecté');
|
|
btnShowAllFields.addEventListener('click', () => {
|
|
// Sélectionner tous les inputs dans le formulaire
|
|
const form = document.querySelector('form');
|
|
if (form) {
|
|
const hiddenInputs = form.querySelectorAll('.d-none');
|
|
hiddenInputs.forEach(input => {
|
|
input.classList.toggle('d-none');
|
|
});
|
|
}
|
|
});
|
|
}
|
|
const btnClosedCommerce = document.querySelector('#closedCommerce');
|
|
if (btnClosedCommerce) {
|
|
btnClosedCommerce.addEventListener('click', () => {
|
|
|
|
if (!confirm('Êtes-vous sûr de vouloir signaler ce commerce comme fermé ?')) {
|
|
return;
|
|
}
|
|
window.location.href = '/closed_commerce/' + document.getElementById('app_public_closed_commerce').value;
|
|
});
|
|
}
|
|
|
|
openingHoursFormManager.init();
|
|
|
|
|
|
// lister les changesets de l'utilisateur osm-commerces
|
|
async function listChangesets() {
|
|
// const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr');
|
|
// Ajouter le header Accept pour demander du JSON
|
|
const options = {
|
|
headers: {
|
|
'Accept': 'application/json'
|
|
}
|
|
};
|
|
const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr', options);
|
|
const data = await changesets.json();
|
|
console.log(data.changesets.length);
|
|
|
|
// Grouper les changesets par période
|
|
const now = new Date();
|
|
const last24h = new Date(now - 24 * 60 * 60 * 1000);
|
|
const last7days = new Date(now - 7 * 24 * 60 * 60 * 1000);
|
|
const last30days = new Date(now - 30 * 24 * 60 * 60 * 1000);
|
|
|
|
const stats = {
|
|
last24h: 0,
|
|
last7days: 0,
|
|
last30days: 0
|
|
};
|
|
|
|
data.changesets.forEach(changeset => {
|
|
const changesetDate = new Date(changeset.closed_at);
|
|
|
|
if (changesetDate >= last24h) {
|
|
stats.last24h++;
|
|
}
|
|
if (changesetDate >= last7days) {
|
|
stats.last7days++;
|
|
}
|
|
if (changesetDate >= last30days) {
|
|
stats.last30days++;
|
|
}
|
|
});
|
|
|
|
// Afficher les statistiques
|
|
const historyDiv = document.getElementById('userChangesHistory');
|
|
if (historyDiv) {
|
|
historyDiv.innerHTML = `
|
|
<div id="changesets_history">
|
|
<p>Changesets créés :</p>
|
|
<div class="row">
|
|
<div class="col-6">Dernières 24h :</div> <div class="col-6 text-right">${stats.last24h}</div>
|
|
<div class="col-6">7 derniers jours :</div> <div class="col-6 text-right">${stats.last7days}</div>
|
|
<div class="col-6">30 derniers jours :</div> <div class="col-6 text-right">${stats.last30days}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Vérifier si l'élément avec l'ID 'userChangesHistory' existe avant d'appeler la fonction
|
|
if (document.getElementById('userChangesHistory')) {
|
|
listChangesets();
|
|
} else {
|
|
console.log('userChangesHistory non trouvé');
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* mettre à jour la barre de progression
|
|
* pour le formulaire de modification
|
|
*/
|
|
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');
|
|
if (progressBar) {
|
|
progressBar.style.width = completionPercentage + '%';
|
|
progressBar.setAttribute('aria-valuenow', completionPercentage);
|
|
document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('input[type="text"]').forEach(input => {
|
|
input.addEventListener('blur', updateCompletionProgress);
|
|
});
|
|
const form = document.querySelector('form')
|
|
if (form) {
|
|
form.addEventListener('submit', check_validity);
|
|
updateCompletionProgress()
|
|
}
|
|
updateCompletionProgress();
|
|
|
|
// Focus sur le premier champ texte au chargement
|
|
const firstTextInput = document.querySelector('input.form-control');
|
|
if (firstTextInput) {
|
|
firstTextInput.focus();
|
|
console.log('focus sur le premier champ texte', firstTextInput);
|
|
} else {
|
|
console.log('pas de champ texte trouvé');
|
|
}
|
|
|
|
|
|
|
|
function parseCuisine() {
|
|
const cuisineInput = document.querySelector('input[name="commerce_tag_value__cuisine"]');
|
|
|
|
// Récupérer tous les checkboxes de type de cuisine
|
|
const cuisineCheckboxes = document.querySelectorAll('input[name="cuisine_type"]');
|
|
|
|
// Ajouter un écouteur d'événement sur chaque checkbox
|
|
cuisineCheckboxes.forEach(checkbox => {
|
|
checkbox.addEventListener('change', () => {
|
|
// Récupérer toutes les checkboxes cochées
|
|
const checkedCuisines = Array.from(document.querySelectorAll('input[name="cuisine_type"]:checked'))
|
|
.map(input => input.value);
|
|
|
|
// Mettre à jour l'input avec les valeurs séparées par des points-virgules
|
|
cuisineInput.value = checkedCuisines.join(';');
|
|
});
|
|
});
|
|
}
|
|
|
|
parseCuisine();
|
|
|
|
// Tri automatique des tableaux
|
|
const tables = document.querySelectorAll('table');
|
|
tables.forEach(table => {
|
|
table.classList.add('js-sort-table');
|
|
});
|
|
|
|
async function searchInseeCode(query) {
|
|
try {
|
|
|
|
// Afficher l'indicateur de chargement
|
|
document.querySelector('#loading_search_insee').classList.remove('d-none');
|
|
|
|
const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${query}&fields=nom,code,codesPostaux&limit=10`);
|
|
const data = await response.json();
|
|
document.querySelector('#loading_search_insee').classList.add('d-none');
|
|
|
|
return data.map(commune => ({
|
|
label: `${commune.nom} (${commune.codesPostaux.join(', ')}, code insee ${commune.code})`,
|
|
insee: commune.code,
|
|
postcodes: commune.codesPostaux
|
|
}));
|
|
} catch (error) {
|
|
console.error('Erreur lors de la recherche du code INSEE:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Modifier la fonction de recherche existante
|
|
const searchInput = document.getElementById('app_admin_labourer');
|
|
const suggestionList = document.getElementById('suggestionList');
|
|
|
|
if (searchInput && suggestionList) {
|
|
let timeoutId;
|
|
|
|
searchInput.addEventListener('input', () => {
|
|
clearTimeout(timeoutId);
|
|
const query = searchInput.value.trim();
|
|
|
|
if (query.length < 2) {
|
|
suggestionList.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
timeoutId = setTimeout(async () => {
|
|
const suggestions = await searchInseeCode(query);
|
|
suggestionList.innerHTML = '';
|
|
|
|
if (suggestions.length === 0) {
|
|
const li = document.createElement('li');
|
|
li.style.cssText = `
|
|
padding: 8px 12px;
|
|
color: #666;
|
|
font-style: italic;
|
|
`;
|
|
li.textContent = 'Aucun résultat trouvé';
|
|
suggestionList.appendChild(li);
|
|
return;
|
|
}
|
|
|
|
suggestions.forEach(suggestion => {
|
|
const li = document.createElement('li');
|
|
li.style.cssText = `
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #eee;
|
|
`;
|
|
li.textContent = suggestion.label;
|
|
|
|
li.addEventListener('mouseenter', () => {
|
|
li.style.backgroundColor = '#f0f0f0';
|
|
});
|
|
|
|
li.addEventListener('mouseleave', () => {
|
|
li.style.backgroundColor = 'white';
|
|
});
|
|
|
|
li.addEventListener('click', () => {
|
|
searchInput.value = suggestion.insee;
|
|
suggestionList.innerHTML = '';
|
|
labourer();
|
|
});
|
|
|
|
suggestionList.appendChild(li);
|
|
});
|
|
}, 300);
|
|
});
|
|
}
|
|
});
|