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

retapage accueil, gestion de Demandes

Browse source
This commit is contained in:
Tykayn 2025-07-16 17:00:09 +02:00 • committed by tykayn
parent d777221d0d
commit f4c5e048ff
26 changed files with 2498 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

138
templates/public/cities.html.twig Normal file
View file

@ -0,0 +1,138 @@
{% extends 'base.html.twig' %}
{% block title %}{{ 'display.title'|trans }}{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>
<style>
#citiesMap {
height: 400px;
width: 100%;
margin-bottom: 1rem;
}
</style>
{% endblock %}
{% block body %}
{% if citiesForMap is not empty %}
<div id="cities" class="container">
<div class="alert-info alert">
Les contributrices et contributeurs aguerris d'OSM peuvent ajouter ici de quoi suivre les évolutions thématiques de complétion dans une ville donnée.
</div>
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h3><i class="bi bi-geo-alt"></i> Carte des villes disponibles</h3>
<p class="mb-0">Cliquez sur un marqueur pour voir les statistiques de la ville</p>
</div>
<a href="{{ path('app_public_add_city') }}" class="btn btn-success">
<i class="bi bi-plus-circle"></i> Ajouter ma ville
</a>
</div>
<div class="card-body p-0">
<div class="map-container">
<div id="citiesMap"></div>
<div class="map-legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #28a745;"></div>
<span>Complétion > 80%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #17a2b8;"></div>
<span>Complétion 50-80%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffc107;"></div>
<span>Complétion < 50%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row city-list ">
<div id="stats_bubble"></div>
<div class="mt-5">
<h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
<p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre
ville grâce à OpenStreetMap</p>
</div>
{% set sorted_stats = stats|sort((a, b) => a.zone <=> b.zone) %}
{% for stat in sorted_stats %}
{% if stat.zone != 'undefined' and stat.zone matches '/^\\d+$/' %}
<a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}"
class="list-group-item list-group-item-action d-flex p-4 rounded-3 justify-content-between align-items-center">
<div class="d-flex flex-column">
<span class="zone">{{ stat.zone }}</span>
<span class="name">{{ stat.name }}</span>
</div>
<div class="d-flex flex-column">
<span class="badge bg-primary rounded-pill">{{ stat.placesCount }} lieux</span>
<span class="badge rounded-pill completion {% if stat.completionPercent > 80 %}bg-success{% else %}bg-info{% endif %}">{{ stat.completionPercent }}%</span>
</div>
</a>
{% endif %}
{% endfor %}
{% include 'public/labourage-form.html.twig' %}
</div>
</div>
</div>
{% endif %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize the map
const map = new maplibregl.Map({
container: 'citiesMap',
style: 'https://api.maptiler.com/maps/streets/style.json?key={{ maptiler_token }}',
center: [2.213749, 46.227638], // Center of France
zoom: 5
});
// Add navigation controls
map.addControl(new maplibregl.NavigationControl());
let color = '#ffc107'; // Yellow by default
// Add markers for each city
{% if citiesForMap is not empty %}
{% for city in citiesForMap %}
{% if city.lat and city.lon %}
// Determine marker color based on completion percentage
{% if city.completionPercent > 80 %}
color = '#28a745'; // Green for high completion
{% elseif city.completionPercent > 50 %}
color = '#17a2b8'; // Blue for medium completion
{% endif %}
// Create marker and popup
new maplibregl.Marker({color: color})
.setLngLat([{{ city.lon }}, {{ city.lat }}])
.setPopup(new maplibregl.Popup().setHTML(`
<strong>{{ city.name }}</strong><br>
Code INSEE: {{ city.zone }}<br>
Nombre de lieux: {{ city.placesCount }}<br>
Complétion: {{ city.completionPercent }}%<br>
<a href="{{ path('app_admin_stats', {'insee_code': city.zone}) }}" class="btn btn-sm btn-primary mt-2">
Voir les statistiques
</a>
`))
.addTo(map);
{% endif %}
{% endfor %}
{% endif %}
});
</script>
{% endblock %}

24
templates/public/dashboard.html.twig
View file

@ -88,7 +88,7 @@
<div class="row mb-2">
<div class="col-12 text-end">
<div class="form-check form-switch d-inline-block">
<input class="form-check-input" type="checkbox" id="toggleBubbleSize" checked>
<input class="form-check-input" type="checkbox" id="toggleBubbleSize">
<label class="form-check-label" for="toggleBubbleSize">
Taille des bulles proportionnelle au nombre de lieux
</label>
@ -314,6 +314,26 @@
const angleElem = document.getElementById('dashboard-regression-angle');
if (angleElem) angleElem.innerText = angleStr;
console.log('Angle de la régression linéaire :', angleStr);
// Envoyer les données de régression au serveur pour créer un followup
fetch('/api/dashboard/regression', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
angle: angle,
slope: slope,
intercept: intercept
}),
})
.then(response => response.json())
.then(data => {
console.log('Données de régression enregistrées:', data);
})
.catch((error) => {
console.error('Erreur lors de l\'enregistrement des données de régression:', error);
});
}
Chart.register(window.ChartDataLabels);
const bubbleChart = new Chart(chartCanvas.getContext('2d'), {
@ -482,4 +502,4 @@
}
});
</script>
{% endblock %}
{% endblock %}

642
templates/public/home.html.twig
View file

@ -26,7 +26,7 @@
background: white;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 12px;
z-index: 1000;
}
@ -116,242 +116,227 @@
{% endblock %}
{% block body %}
<div class="container mt-4">
<div class="row">
<div class="col-12">
<h1>
<i class="bi bi-shop"></i> Mon Commerce OSM
</h1>
<p class="mt-4 p-4">
Bonjour, ce site permet de modifier les informations de votre commerce sur OpenStreetMap afin de
gagner en visibilité sur des milliers de sites web à la fois en une minute, c'est gratuit et sans
engagement.
<br>Nous sommes bénévoles dans une association à but non lucratif.
<br>Nous vous enverrons un lien unique pour cela par email, et si vous en avez besoin, nous pouvons
vous aider.
</p>
<div class="row">
<div class="col-12">
<label class="label" for="researchShop">
<i class="bi bi-search bi-2x"></i> Rechercher un commerce, écrivez son nom et la ville
</label>
<input class="form-control" type="text" id="researchShop" placeholder="Mon commerce, Paris">
<!-- Hero Section -->
<div class="container-fluid bg-primary text-black py-5 mb-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8 d-none d-lg-block">
<h1 class="display-4 fw-bold mb-4">
<img src="{{ asset('logo-osm.png') }}" alt="OpenStreetMap Logo" class="img-fluid"
style="max-height: 250px;">
<i class="bi bi-shop"></i> Mon Commerce OSM
</h1>
<p class="lead mb-4">
Améliorez la visibilité de votre commerce sur des milliers de sites web et applications en
quelques minutes.
</p>
</div>
<div class="col-lg-4">
<div class="d-flex gap-3">
<a href="#search-section" class="btn btn-light btn-lg">
<i class="bi bi-search"></i> Trouver mon commerce
</a>
<a href="{{ path('faq') }}" class="btn btn-outline-light btn-lg">
<i class="bi bi-info-circle"></i> En savoir plus
</a>
</div>
</div>
<div id="resultsList"></div>
<div id="proposeLink" class="d-none"></div>
<div id="proposeMail" class="d-none">
<input type="email" id="emailInput" class="form-control"
placeholder="mon_email_de_commerce@exemple.com">
<button type="submit" class="btn btn-primary p-4 d-block"><i class="bi bi-envelope"></i> Envoyer
</button>
</div>
<div id="emailForm"></div>
{% if citiesForMap is not empty %}
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div>
<h3><i class="bi bi-geo-alt"></i> Carte des villes disponibles</h3>
<p class="mb-0">Cliquez sur un marqueur pour voir les statistiques de la ville</p>
</div>
<a href="{{ path('app_public_add_city') }}" class="btn btn-success">
<i class="bi bi-plus-circle"></i> Ajouter ma ville
</a>
</div>
<div class="card-body p-0">
<div class="map-container">
<div id="citiesMap"></div>
<div class="map-legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #28a745;"></div>
<span>Complétion > 80%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #17a2b8;"></div>
<span>Complétion 50-80%</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #ffc107;"></div>
<span>Complétion < 50%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="row city-list ">
<div id="stats_bubble"></div>
<div class="mt-5">
<h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
<p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre
ville grâce à OpenStreetMap</p>
</div>
<div class="container mt-5">
<!-- Benefits Section -->
<div class="row mb-5">
<div class="col-12 text-center mb-4">
<h2 class="fw-bold">Pourquoi mettre à jour vos informations sur OpenStreetMap ?</h2>
<p class="lead text-muted">Un seul ajout, une visibilité sur des milliers de plateformes</p>
</div>
{% set sorted_stats = stats|sort((a, b) => a.zone <=> b.zone) %}
{% for stat in sorted_stats %}
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm border-0">
<div class="card-body text-center p-4">
<div class="mb-3">
<i class="bi bi-globe text-primary" style="font-size: 3rem;"></i>
</div>
<h3 class="card-title h5 fw-bold">Visibilité Maximale</h3>
<p class="card-text">Vos informations apparaîtront sur Google Maps, Apple Plans, Facebook et des
centaines d'autres applications.</p>
</div>
</div>
</div>
{% if stat.zone != 'undefined' and stat.zone matches '/^\\d+$/' %}
<a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}"
class="list-group-item list-group-item-action d-flex p-4 rounded-3 justify-content-between align-items-center">
<div class="d-flex flex-column">
<span class="zone">{{ stat.zone }}</span>
<span class="name">{{ stat.name }}</span>
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm border-0">
<div class="card-body text-center p-4">
<div class="mb-3">
<i class="bi bi-clock text-primary" style="font-size: 3rem;"></i>
</div>
<div class="d-flex flex-column">
<span class="badge bg-primary rounded-pill">{{ stat.placesCount }} lieux</span>
<span class="badge rounded-pill completion {% if stat.completionPercent > 80 %}bg-success{% else %}bg-info{% endif %}">{{ stat.completionPercent }}%</span>
<h3 class="card-title h5 fw-bold">Rapide et Simple</h3>
<p class="card-text">Mettez à jour vos horaires, contacts et services en quelques minutes
seulement.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm border-0">
<div class="card-body text-center p-4">
<div class="mb-3">
<i class="bi bi-cash-coin text-primary" style="font-size: 3rem;"></i>
</div>
</a>
{% endif %}
{% endfor %}
{% include 'public/labourage-form.html.twig' %}
<h3 class="card-title h5 fw-bold">100% Gratuit</h3>
<p class="card-text">Service entièrement gratuit et sans engagement, fourni par une association
à but non lucratif.</p>
</div>
</div>
</div>
</div>
<!-- Search Section -->
<div id="search-section" class="row mb-5">
<div class="col-lg-8 mx-auto">
<div class="card shadow border-0">
<div class="card-header bg-white py-3">
<h3 class="mb-0 fw-bold">
<i class="bi bi-search"></i> Rechercher votre commerce
</h3>
</div>
<div class="card-body p-4">
<p class="mb-4">
Entrez le nom de votre commerce et sa ville pour commencer à mettre à jour vos informations.
</p>
<div class="mb-4">
<label class="form-label fw-bold" for="researchShop">
Nom du commerce et ville
</label>
<div class="input-group input-group-lg">
<span class="input-group-text bg-white">
<i class="bi bi-building"></i>
</span>
<input class="form-control" type="text" id="researchShop"
placeholder="Ex: Boulangerie Dupont, Paris">
</div>
<div class="form-text">
<i class="bi bi-info-circle"></i> Exemple: Café de la Place, Lyon
</div>
</div>
<div id="resultsList" class="mt-4"></div>
<div id="proposeLink" class="d-none"></div>
<div id="proposeMail" class="d-none">
<div class="mb-3">
<label for="emailInput" class="form-label fw-bold">Votre email professionnel</label>
<div class="input-group">
<span class="input-group-text bg-white">
<i class="bi bi-envelope"></i>
</span>
<input type="email" id="emailInput" class="form-control"
placeholder="contact@moncommerce.fr">
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg">
<i class="bi bi-send"></i> Recevoir mon lien de modification
</button>
</div>
<div id="emailForm"></div>
</div>
</div>
</div>
</div>
<!-- How It Works Section -->
<div class="row mb-5">
<div class="col-12 text-center mb-4">
<h2 class="fw-bold">Comment ça marche ?</h2>
<p class="lead text-muted">Un processus simple en 3 étapes</p>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 border-0 bg-light">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="bg-primary text-white rounded-circle p-3 me-3"
style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
<span class="fw-bold">1</span>
</div>
<h3 class="card-title h5 fw-bold mb-0">Recherchez votre commerce</h3>
</div>
<p class="card-text">Entrez le nom de votre établissement et sa localité pour le retrouver dans
notre base de données.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 border-0 bg-light">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="bg-primary text-white rounded-circle p-3 me-3"
style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
<span class="fw-bold">2</span>
</div>
<h3 class="card-title h5 fw-bold mb-0">Recevez votre lien unique</h3>
</div>
<p class="card-text">Nous vous envoyons par email un lien sécurisé pour accéder à votre fiche
commerce.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100 border-0 bg-light">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<div class="bg-primary text-white rounded-circle p-3 me-3"
style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
<span class="fw-bold">3</span>
</div>
<h3 class="card-title h5 fw-bold mb-0">Mettez à jour vos informations</h3>
</div>
<p class="card-text">Modifiez facilement vos horaires, contacts, services et autres informations
importantes.</p>
</div>
</div>
</div>
</div>
<!-- Help Section -->
<div class="row mb-5">
<div class="col-lg-10 mx-auto">
<div class="card bg-light border-0">
<div class="card-body p-4 text-center">
<h3 class="fw-bold mb-3">
<i class="bi bi-question-circle"></i> Besoin d'aide ?
</h3>
<p class="mb-4">
Notre équipe de bénévoles est là pour vous accompagner dans la mise à jour de vos
informations.
</p>
<a href="{{ path('app_public_ask_for_help') }}" class="btn btn-primary btn-lg">
<i class="bi bi-envelope"></i> Contactez-nous
</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
{# <script src='{{ asset('js/utils.js') }}'></script> #}
<script type="module">
// import { adjustListGroupFontSize } from '{{ asset('js/utils.js') }}';
// document.addEventListener('DOMContentLoaded', function() {
// adjustListGroupFontSize('.list-group-item');
// });
</script>
<script>
// Données des villes pour la carte
const citiesData = {{ citiesForMap|json_encode|raw }};
const mapToken = '{{ maptiler_token }}';
// Initialiser la carte si des données sont disponibles
if (citiesData.length > 0 && mapToken) {
document.addEventListener('DOMContentLoaded', function() {
// Créer les features GeoJSON pour la carte
const features = citiesData.map(city => ({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [city.coordinates.lon, city.coordinates.lat]
},
properties: {
name: city.name,
zone: city.zone,
placesCount: city.placesCount,
completionPercent: city.completionPercent,
population: city.population,
url: city.url
}
}));
const geojson = {
type: 'FeatureCollection',
features: features
};
document.addEventListener('DOMContentLoaded', function () {
// Calculer le centre de la carte (moyenne des coordonnées)
const bounds = new maplibregl.LngLatBounds();
features.forEach(feature => {
bounds.extend(feature.geometry.coordinates);
});
// Initialiser la carte
const map = new maplibregl.Map({
container: 'citiesMap',
style: `https://api.maptiler.com/maps/streets/style.json?key=${mapToken}`,
bounds: bounds,
fitBoundsOptions: {
padding: 50
}
});
// Ajouter les marqueurs
features.forEach(feature => {
const properties = feature.properties;
// Déterminer la couleur selon le pourcentage de complétion
let color = '#ffc107'; // Jaune par défaut
if (properties.completionPercent > 80) {
color = '#28a745'; // Vert
} else if (properties.completionPercent > 50) {
color = '#17a2b8'; // Bleu
}
// Créer le marqueur
const marker = new maplibregl.Marker({
color: color,
scale: 0.8
})
.setLngLat(feature.geometry.coordinates)
.setPopup(
new maplibregl.Popup({ offset: 25 })
.setHTML(`
<div style="min-width: 200px;">
<h6 style="margin: 0 0 10px 0; color: #333;">${properties.name}</h6>
<div style="font-size: 12px; color: #666;">
<div><strong>Code INSEE:</strong> ${properties.zone}</div>
<div><strong>Lieux:</strong> ${properties.placesCount}</div>
<div><strong>Complétion:</strong> ${properties.completionPercent}%</div>
${properties.population ? `<div><strong>Population:</strong> ${properties.population.toLocaleString()}</div>` : ''}
</div>
<div style="margin-top: 10px;">
<a href="${properties.url}" class="btn btn-sm btn-primary" style="text-decoration: none;">
Voir les statistiques
</a>
</div>
</div>
`)
)
.addTo(map);
// Ajouter le nom de la ville comme label
const label = new maplibregl.Marker({
element: (() => {
const el = document.createElement('div');
el.className = 'city-label';
el.style.cssText = `
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 4px;
padding: 2px 6px;
font-size: 11px;
font-weight: bold;
color: #333;
white-space: nowrap;
pointer-events: none;
margin-top: -25px;
margin-left: 15px;
`;
el.textContent = properties.name;
return el;
})()
})
.setLngLat(feature.geometry.coordinates)
.addTo(map);
});
// Ajouter les contrôles de navigation
map.addControl(new maplibregl.NavigationControl());
});
}
// Créer le formulaire email
const emailFormHtml = `
console.log('content loaded')
// Créer le formulaire email
const emailFormHtml = `
<form id="emailForm" class="mt-3">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
@ -361,25 +346,33 @@
</form>
`;
// Créer les divs pour les messages
const proposeLinkHtml = `
// Créer les divs pour les messages
const proposeLinkHtml = `
<div id="proposeLink" class="alert alert-success ">
Un email a déjà été enregistré pour ce commerce. Nous vous enverrons le lien de modification.
</div>
`;
const proposeMailHtml = `
const proposeMailHtml = `
<div id="proposeMail" class="alert alert-info " >
Aucun email n'est enregistré pour ce commerce. Veuillez saisir votre email pour recevoir le lien de modification.
${emailFormHtml}
</div>
`;
// Ajouter les éléments au DOM
document.querySelector('#proposeLink').innerHTML = proposeLinkHtml;
document.querySelector('#proposeMail').innerHTML = proposeMailHtml;
// Ajouter les éléments au DOM
// Initialize the elements only if they exist
const proposeLinkElement = document.querySelector('#proposeLink');
const proposeMailElement = document.querySelector('#proposeMail');
if (proposeLinkElement) {
proposeLinkElement.innerHTML = proposeLinkHtml;
}
if (proposeMailElement) {
proposeMailElement.innerHTML = proposeMailHtml;
}
document.addEventListener('DOMContentLoaded', function () {
const searchInput = document.querySelector('#researchShop');
const resultsList = document.querySelector('#resultsList');
resultsList.classList.add('list-group', 'mt-2');
@ -389,17 +382,134 @@
clearTimeout(timeoutId);
resultsList.innerHTML = '';
if (e.target.value.length < 3) return;
if (e.target.value.length < 2) return;
const query_input_user = e.target.value;
timeoutId = setTimeout(() => {
fetch(`https://demo.addok.xyz/search?q=${e.target.value}&limit=5`)
fetch(`https://demo.addok.xyz/search?q=${query_input_user}&limit=5`)
.then(response => response.json())
.then(data => {
console.log(data);
resultsList.innerHTML = '';
const ul = document.createElement('ul');
ul.classList.add('list-group');
resultsList.appendChild(ul);
// Show a message if there are no results
if (data.features.length === 0) {
const noResultsMessage = document.createElement('div');
noResultsMessage.classList.add('alert', 'alert-info', 'mt-3');
noResultsMessage.innerHTML = `
<i class="bi bi-info-circle"></i> Aucun résultat trouvé pour votre recherche.
`;
resultsList.appendChild(noResultsMessage);
}
// Add "Not found" button
if (true) {
const notFoundButton = document.createElement('div');
notFoundButton.classList.add('mt-3', 'text-center');
notFoundButton.innerHTML = `
<button id="notFoundButton" class="btn btn-outline-secondary">
<i class="bi bi-search"></i> Je ne trouve pas mon commerce dans ces propositions
</button>
`;
resultsList.appendChild(notFoundButton);
// Add event listener to the "Not found" button
document.getElementById('notFoundButton').addEventListener('click', () => {
// Clear results list
resultsList.innerHTML = '';
// Show form to enter email
const notFoundForm = document.createElement('div');
notFoundForm.classList.add('card', 'mt-3');
notFoundForm.innerHTML = `
<div class="card-header">
<h5>Vous ne trouvez pas votre commerce ?</h5>
</div>
<div class="card-body">
<p>Laissez-nous votre email et nous vous aiderons à ajouter votre commerce.</p>
<form id="notFoundForm">
<div class="mb-3">
<label for="notFoundEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="notFoundEmail" required>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
</div>
`;
resultsList.appendChild(notFoundForm);
// Add event listener to the form
document.getElementById('notFoundForm').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('notFoundEmail').value;
const query = document.querySelector('#researchShop').value;
// Try to get the INSEE code from the first search result
let insee = null;
if (data.features && data.features.length > 0) {
insee = data.features[0].properties.citycode;
}
// Create a Demande with the business name and email
fetch('/api/demande/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
businessName: query,
insee: insee
}),
})
.then(response => response.json())
.then(data => {
if (data.success) {
const demandeId = data.id;
// Update the Demande with the email
fetch(`/api/demande/${demandeId}/email`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email
}),
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Show success message
resultsList.innerHTML = `
<div class="alert alert-success mt-3">
<i class="bi bi-check-circle"></i> Votre demande a été enregistrée. Nous vous contacterons bientôt.
</div>
`;
} else {
alert('Erreur: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Une erreur est survenue lors de la mise à jour de la demande.');
});
} else {
alert('Erreur: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Une erreur est survenue lors de la création de la demande.');
});
});
});
}
data.features.forEach(feature => {
const li = document.createElement('li');
li.classList.add('list-group-item', 'cursor-pointer');
@ -415,31 +525,84 @@
);
out body;`;
console.log('li clicked', li)
fetch('https://overpass-api.de/api/interpreter', {
method: 'POST',
body: query
})
.then(response => response.json())
.then(osmData => {
console.log('osmData', osmData)
if (osmData.elements.length > 0) {
const place = osmData.elements[0];
console.log('osmData.elements', osmData.elements)
const place = osmData.elements[1];
console.log('place', place)
console.log(`https://www.openstreetmap.org/${place.type}/${place.id}`, place.tags);
if (place.tags && (place.tags['contact:email'] || place.tags['email'])) {
document.querySelector('#proposeLink').classList.remove('d-none');
document.querySelector('#proposeMail').classList.add('d-none');
} else {
document.querySelector('#proposeMail').classList.remove('d-none');
document.querySelector('#proposeLink').classList.add('d-none');
// Create a Demande with the business name
fetch('/api/demande/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
businessName: `${query_input_user} __ ${place.tags.name}` || `${feature.properties.name}, ${feature.properties.city}`,
insee: feature.properties.citycode
}),
})
.then(response => response.json())
.then(data => {
if (data.success) {
const demandeId = data.id;
const emailForm = document.querySelector('#proposeMail form');
emailForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = emailForm.querySelector('#emailInput').value;
window.location.href = `/propose-email/${email}/${place.type}/${place.id}`;
if (place.tags && (place.tags['contact:email'] || place.tags['email'])) {
document.querySelector('#proposeLink').classList.remove('d-none');
document.querySelector('#proposeMail').classList.add('d-none');
} else {
document.querySelector('#proposeMail').classList.remove('d-none');
document.querySelector('#proposeLink').classList.add('d-none');
const emailForm = document.querySelector('#proposeMail form');
emailForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = emailForm.querySelector('#emailInput').value;
// Update the Demande with the email
fetch(`/api/demande/${demandeId}/email`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email
}),
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Redirect to the original route for backward compatibility
window.location.href = `/propose-email/${email}/${place.type}/${place.id}`;
} else {
alert('Erreur: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Une erreur est survenue lors de la mise à jour de la demande.');
});
});
}
} else {
alert('Erreur: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Une erreur est survenue lors de la création de la demande.');
});
}
}
});
});
@ -450,12 +613,7 @@
}, 500);
});
function displayStatsBubble() {
const statsBubble = document.querySelector('#stats_bubble');
}
});
</script>
{% endblock %}

7
templates/public/nav.html.twig
View file

@ -17,12 +17,14 @@
</a>
<ul class="dropdown-menu" aria-labelledby="dataDropdown">
<li><a class="dropdown-item" href="{{ path('app_public_dashboard') }}"><i class="bi bi-bar-chart-fill"></i> {{ 'display.stats'|trans }}</a></li>
<li><a class="dropdown-item" href="{{ path('app_public_cities') }}"><i class="bi bi-geo-alt-fill"></i> Suivi des villes</a></li>
<li><a class="dropdown-item" href="{{ path('app_public_closed_commerces') }}"><i class="bi bi-x-circle-fill"></i> {{ 'display.closed_commerces'|trans }}</a></li>
<li><a class="dropdown-item" href="{{ path('app_public_places_with_note') }}"><i class="bi bi-file-earmark-text"></i> {{ 'display.places_with_note'|trans }}</a></li>
<li><a class="dropdown-item" href="{{ path('app_public_latest_changes') }}"><i class="bi bi-clock-fill"></i> {{ 'display.latest_changes'|trans }}</a></li>
<li><a class="dropdown-item" href="{{ path('admin_fraicheur_histogramme') }}"><i class="bi bi-clock-history"></i> Fraîcheur de la donnée</a></li>
<li><a class="dropdown-item" href="/api/v1/stats/export?pretty=1"><i class="bi bi-download"></i> Export JSON des villes</a></li>
<li><a class="dropdown-item" href="/admin/export_csv"><i class="bi bi-filetype-csv"></i> Exporter les villes (CSV)</a></li>
<li><a class="dropdown-item" href="{{ path('app_public_rss_demandes') }}"><i class="bi bi-rss-fill"></i> Flux RSS des demandes</a></li>
</ul>
</li>
<li class="nav-item">
@ -39,6 +41,9 @@
<i class="bi bi-gear"></i> Admin
</a>
<ul class="dropdown-menu" aria-labelledby="adminDropdown">
<li><a class="dropdown-item" href="{{ path('app_admin_demandes') }}"><i class="bi bi-list-ul"></i> Liste des demandes</a></li>
<li><a class="dropdown-item" href="{{ path('app_admin_contacted_places') }}"><i class="bi bi-envelope"></i> Places contactées</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{{ path('app_admin_podium_contributeurs_osm') }}"><i class="bi bi-trophy-fill"></i> Podium des contributeurs OSM</a></li>
<li><a class="dropdown-item" href="{{ path('admin_followup_global_graph') }}"><i class="bi bi-globe"></i> Suivi global OSM</a></li>
<li><a class="dropdown-item" href="{{ path('app_admin_import_stats') }}"><i class="bi bi-upload"></i> Import Stats</a></li>
@ -47,4 +52,4 @@
</ul>
</div>
</div>
</nav>
</nav>

35
templates/public/rss/demandes.xml.twig Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Mon Commerce OSM - Demandes</title>
<link>https://{{ base_url }}</link>
<description>Flux RSS des demandes de modification de commerces sur OpenStreetMap</description>
<language>fr-fr</language>
<pubDate>{{ "now"|date("D, d M Y H:i:s O") }}</pubDate>
<atom:link href="https://{{ base_url }}{{ path('app_public_rss_demandes') }}" rel="self" type="application/rss+xml" />
{% for demande in demandes %}
<item>
<title>{{ demande.query }}</title>
<link>https://{{ base_url }}{{ path('app_admin_demande_edit', {'id': demande.id}) }}</link>
<guid>https://{{ base_url }}{{ path('app_admin_demande_edit', {'id': demande.id}) }}</guid>
<pubDate>{{ demande.createdAt|date("D, d M Y H:i:s O") }}</pubDate>
<description>
<![CDATA[
<p><strong>Nom du commerce:</strong> {{ demande.query }}</p>
{% if demande.email %}
<p><strong>Email:</strong> {{ demande.email }}</p>
{% endif %}
<p><strong>Statut:</strong> {{ demande.status }}</p>
{% if demande.insee %}
<p><strong>Code INSEE:</strong> {{ demande.insee }}</p>
{% endif %}
{% if demande.lastContactAttempt %}
<p><strong>Dernière tentative de contact:</strong> {{ demande.lastContactAttempt|date("d/m/Y H:i:s") }}</p>
{% endif %}
]]>
</description>
</item>
{% endfor %}
</channel>
</rss>