mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
refacto fonctions
This commit is contained in:
Tykayn
tykayn
parent
1b0d2d425d
commit
9b09b0d59d
8 changed files with 191 additions and 163 deletions
108
assets/app.js
108
assets/app.js
|
|
@ -10,19 +10,14 @@ import './styles/app.css';
|
|||
import './utils.js';
|
||||
import './opening_hours.js';
|
||||
import './josm.js';
|
||||
|
||||
import './edit.js';
|
||||
|
||||
|
||||
// Attendre le chargement du DOM
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOMContentLoaded');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
updateMapHeightForLargeScreens()
|
||||
|
||||
|
||||
const randombg = genererCouleurPastel();
|
||||
// Appliquer la couleur au body
|
||||
document.body.style.backgroundColor = randombg;
|
||||
|
|
@ -56,61 +51,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
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();
|
||||
|
|
@ -118,32 +58,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
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);
|
||||
});
|
||||
|
|
@ -165,24 +79,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
|
||||
|
||||
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();
|
||||
|
||||
|
|
|
|||
46
assets/edit.js
Normal file
46
assets/edit.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
|
||||
/**
|
||||
* 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)}%`;
|
||||
}
|
||||
}
|
||||
|
||||
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(';');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
window.updateCompletionProgress = updateCompletionProgress;
|
||||
window.parseCuisine = parseCuisine;
|
||||
|
|
@ -74,3 +74,4 @@ function openInJOSM(map, map_is_loaded, osmElements) {
|
|||
document.body.removeChild(tempLink);
|
||||
|
||||
}
|
||||
window.openInJOSM = openInJOSM;
|
||||
|
|
@ -1,23 +1,35 @@
|
|||
|
||||
|
||||
/**
|
||||
* Gestion du formulaire d'horaires d'ouverture
|
||||
*
|
||||
*/
|
||||
const openingHoursFormManager = {
|
||||
defaultOpeningHours: '',
|
||||
init: function () {
|
||||
inputSelector: '',
|
||||
init: function (inputSelector = 'input[name="custom__opening_hours"]') {
|
||||
// Rechercher l'élément par son attribut name plutôt que par son id
|
||||
const openingHoursInput = document.querySelector('input[name="custom__opening_hours"]');
|
||||
this.setInputSelector(inputSelector);
|
||||
const openingHoursInput = document.querySelector(inputSelector);
|
||||
if (!openingHoursInput) {
|
||||
console.warn('Élément input[name="custom__opening_hours"] non trouvé');
|
||||
console.warn('Élément ', inputSelector, ' non trouvé');
|
||||
return;
|
||||
}
|
||||
this.defaultOpeningHours = openingHoursInput.value;
|
||||
|
||||
this.makeForm();
|
||||
this.makeForm(inputSelector);
|
||||
|
||||
if (this.defaultOpeningHours !== '') {
|
||||
this.parseOpeningHoursValue();
|
||||
this.parseOpeningHoursValue(inputSelector);
|
||||
}
|
||||
},
|
||||
parseOpeningHoursValue: function () {
|
||||
setInputSelector: function (inputSelector) {
|
||||
this.inputSelector = inputSelector;
|
||||
},
|
||||
/**
|
||||
* convertir les checkboxes et inputs en horaires OSM dans l'input de référence
|
||||
* @param {string} inputSelector
|
||||
*/
|
||||
parseOpeningHoursValue: function (inputSelector = 'input[name="custom__opening_hours"]') {
|
||||
// Analyser la chaîne d'horaires d'ouverture
|
||||
const parsedOpeningHours = {};
|
||||
|
||||
|
|
@ -78,8 +90,8 @@ const openingHoursFormManager = {
|
|||
|
||||
console.log(parsedOpeningHours);
|
||||
},
|
||||
makeForm: function () {
|
||||
const customOpeningHours = document.querySelector('input[name="custom__opening_hours"]');
|
||||
makeForm: function (inputSelector = 'input[name="custom__opening_hours"]') {
|
||||
const customOpeningHours = document.querySelector(inputSelector);
|
||||
console.log('makeForm customOpeningHours', customOpeningHours);
|
||||
|
||||
if (customOpeningHours) {
|
||||
|
|
@ -146,7 +158,7 @@ const openingHoursFormManager = {
|
|||
// Ajouter l'événement pour afficher/masquer les plages horaires
|
||||
input.addEventListener('change', (e) => {
|
||||
horairesContainer.classList.toggle('d-none', !e.target.checked);
|
||||
this.convertToOSMOpeningHours();
|
||||
this.convertToOSMOpeningHours(inputSelector);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -318,7 +330,7 @@ const openingHoursFormManager = {
|
|||
return container;
|
||||
},
|
||||
|
||||
convertToOSMOpeningHours: function () {
|
||||
convertToOSMOpeningHours: function (inputSelector = 'input[name="custom__opening_hours"]') {
|
||||
const jours = {
|
||||
'Lundi': 'Mo',
|
||||
'Mardi': 'Tu',
|
||||
|
|
@ -363,7 +375,7 @@ const openingHoursFormManager = {
|
|||
}
|
||||
|
||||
// Mettre à jour l'input custom__opening_hours
|
||||
const customOpeningHours = document.querySelector('input[name="custom__opening_hours"]');
|
||||
const customOpeningHours = document.querySelector(inputSelector);
|
||||
if (customOpeningHours) {
|
||||
customOpeningHours.value = osmFormat;
|
||||
}
|
||||
|
|
@ -386,3 +398,4 @@ const openingHoursFormManager = {
|
|||
return null;
|
||||
}
|
||||
}
|
||||
window.openingHoursFormManager = openingHoursFormManager;
|
||||
|
|
@ -61,16 +61,6 @@ const genererCouleurPastel = () => {
|
|||
};
|
||||
|
||||
|
||||
function updateMapHeightForLargeScreens() {
|
||||
|
||||
const mapFound = document.querySelector('#map');
|
||||
if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
|
||||
mapFound.style.height = '80vh';
|
||||
} else {
|
||||
console.log('window.innerHeight', window.innerHeight);
|
||||
}
|
||||
}
|
||||
|
||||
async function searchInseeCode(query) {
|
||||
try {
|
||||
|
||||
|
|
@ -90,4 +80,86 @@ async function searchInseeCode(query) {
|
|||
console.error('Erreur lors de la recherche du code INSEE:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateMapHeightForLargeScreens() {
|
||||
|
||||
const mapFound = document.querySelector('#map');
|
||||
if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
|
||||
|
||||
mapFound.style.height = window.innerWidth * 0.8 + 'px';
|
||||
} else {
|
||||
console.log('window.innerHeight', window.innerHeight);
|
||||
}
|
||||
}
|
||||
|
||||
// lister les changesets de l'utilisateur osm-commerces
|
||||
async function listChangesets() {
|
||||
// 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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function openInPanoramax() {
|
||||
const center = map.getCenter();
|
||||
const zoom = map.getZoom();
|
||||
const panoramaxUrl = `https://api.panoramax.xyz/?focus=map&map=${zoom}/${center.lat}/${center.lng}`;
|
||||
window.open(panoramaxUrl);
|
||||
}
|
||||
|
||||
window.openInPanoramax = openInPanoramax;
|
||||
window.listChangesets = listChangesets;
|
||||
window.updateMapHeightForLargeScreens = updateMapHeightForLargeScreens;
|
||||
window.searchInseeCode = searchInseeCode;
|
||||
window.genererCouleurPastel = genererCouleurPastel;
|
||||
window.check_validity = check_validity;
|
||||
|
|
|
|||
|
|
@ -181,17 +181,11 @@
|
|||
{{ parent() }}
|
||||
<script src={{asset('js/mapbox/mapbox-gl.js')}}></script>
|
||||
<script>
|
||||
function openInJOSM(type, id) {
|
||||
{# function openInJOSM(type, id) {
|
||||
const josmUrl = `http://localhost:8111/load_object?objects=${type}${id}`;
|
||||
window.open(josmUrl);
|
||||
}
|
||||
} #}
|
||||
|
||||
function openInPanoramax() {
|
||||
const center = map.getCenter();
|
||||
const zoom = map.getZoom();
|
||||
const panoramaxUrl = `https://api.panoramax.xyz/?focus=map&map=${zoom}/${center.lat}/${center.lng}`;
|
||||
window.open(panoramaxUrl);
|
||||
}
|
||||
|
||||
{% 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 }}';
|
||||
|
|
@ -208,5 +202,11 @@
|
|||
.addTo(map);
|
||||
{% endif %}
|
||||
|
||||
|
||||
// Ajouter un écouteur d'événement pour le redimensionnement de la fenêtre
|
||||
window.addEventListener('resize', () => {
|
||||
updateMapHeightForLargeScreens();
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -3,10 +3,11 @@
|
|||
|
||||
{# {{ dump(commerce_overpass)}} #}
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-5">
|
||||
<div class="col-12 col-md-2">
|
||||
<label for="commerce_tag_value__addr:housenumber">{{'display.keys.contact:housenumber'|trans}}</label>
|
||||
<input type="text" class="form-control" 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" value="{% if commerce_overpass.tags_converted['contact:housenumber'] is defined %}{{ commerce_overpass.tags_converted['contact:housenumber'] }}{% endif %}">
|
||||
</div>
|
||||
<div class="col-12 col-md-10">
|
||||
<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 %}">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
<div id="opening_hours">
|
||||
<h2>
|
||||
<i class="bi bi-clock"></i>
|
||||
{{ 'display.opening_hours'|trans }}</h2>
|
||||
<p class="description">{{ 'display.opening_hours_description'|trans }}</p>
|
||||
<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 and 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" placeholder="Lundi de 10h à 12h et de 14h à 18h" class="form-control" name="custom__opening_hours" value="">
|
||||
<br>
|
||||
{% endif %}
|
||||
|
||||
{# <div class="examples d-none">
|
||||
Exemples :
|
||||
<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>
|
||||
</div> #}
|
||||
<hr>
|
||||
<script src="{{ asset('js/main.js') }}"></script>
|
||||
</script>
|
||||
</div>
|
||||
{% if commerce_overpass.tags_converted.opening_hours is defined and commerce_overpass.tags_converted.opening_hours != '' %}
|
||||
<input type="text"
|
||||
placeholder="Remplissez"
|
||||
class="form-control"
|
||||
name="custom__opening_hours"
|
||||
id="custom__opening_hours"
|
||||
value="{{ commerce_overpass.tags_converted.opening_hours }}">
|
||||
{% else %}
|
||||
<input type="text"
|
||||
placeholder="Mo-Fr 10:00-12:00 "
|
||||
class="form-control"
|
||||
name="custom__opening_hours"
|
||||
id="custom__opening_hours"
|
||||
value="">
|
||||
<br>
|
||||
{% endif %}
|
||||
<hr>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue