tykayn/osm-commerces
1
0
Fork 0
mirror of https://forge.chapril.org/tykayn/osm-commerces synced 2025-06-20 01:44:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

affichage de modif qui cache les champs déjà remplis

Browse source
This commit is contained in:
Tykayn 2025-05-27 19:13:35 +02:00 • committed by tykayn
parent 2628b1c7f7
commit f11ab48bb9
8 changed files with 166 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

21
templates/base.html.twig
View file

@ -35,7 +35,8 @@
min-height: 100vh;
}
.main-footer{
padding-bottom: 3rem;
padding-bottom: 15rem;
margin-top: 5rem;
}
{# table tr:nth-child(odd){
background-color:rgb(235, 235, 235);
@ -53,10 +54,14 @@
<body>
<header class="main-header">
<div id="completion_progress">
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
<div class="container">
<div id="completion_display"></div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
@ -84,7 +89,7 @@
<div class="body-landing">
{% block body %}{% endblock %}
</div>
<footer class="main-footer">
<footer class="main-footer dark">
<div class="container">
<div class="row">
<div class="col-12">
@ -96,9 +101,11 @@
<p>OpenStreetMap Mon Commerce</p>
<p>Licence AGPLv3+,
fait par Tykayn de
fait par <a href="https://mastodon.cipherbliss.com/@tykayn">Tykayn</a> de
<a href="https://www.cipherbliss.com">CipherBliss EI</a>, membre de la fédération des professionels d'OpenStreetMap, Sources des données : <a href="https://www.openstreetmap.org/">OpenStreetMap</a>.
<br> <a href="https://www.openstreetmap.org/copyright">OpenStreetMap France</a></p>
<br> <a href="https://www.openstreetmap.org/copyright">OpenStreetMap France</a>.
<br> <a href="https://www.openstreetmap.org/copyright">Sources du logiciel.</a>.
</p>
</div>
</div>
</div>

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

@ -6,35 +6,16 @@
{{ parent() }}
<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
<style>
.hidden {
display: none;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
}
.is-invalid {
border: 1px solid red;
}
.is-invalid #validation_messages {
color: red;
}
img{
max-width: 100%;
max-height: 400px;
}
.hidden { display: none; }
input[type="checkbox"] { width: 20px; height: 20px; }
.is-invalid { border: 1px solid red; }
.is-invalid #validation_messages { color: red; }
img { max-width: 100%; max-height: 400px; }
</style>
{% endblock %}
{% block body %}
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="card shadow-sm">
@ -43,8 +24,6 @@
<div id="map" style="height: 400px; width: 100%;" class="rounded"></div>
{% if commerce_overpass is not empty %}
<form action="{{ path('app_public_submit', {'osm_object_id': commerce_overpass['@attributes'].id, 'version': commerce_overpass['@attributes'].version, 'changesetID': commerce_overpass['@attributes'].changeset }) }}" method="post" class="needs-validation">
<input type="hidden" name="osm_kind" value="{{ osm_kind }}">
<div class="mb-3">
@ -60,7 +39,6 @@
</strong>
</label>
<br/>
<a class="btn btn-info" href="{{ path('app_public_index') }}">{{ 'display.contact_humans'|trans }}</a>
</div>
@ -69,51 +47,55 @@
{% endif %}
<h2>{{ 'display.attributes'|trans }}</h2>
<div class="row mb-3">
<div class="col-md-5">
<div class="col-md-5">
<label for="commerce_tag_value__name">{{'display.keys.name'|trans}}</label>
</div>
<div class="col-md-5">
<input type="text" class="form-control" name="commerce_tag_value__name" value="{% if commerce_overpass.tags_converted.name is defined %}{{ commerce_overpass.tags_converted.name }}{% elseif commerce_overpass['@attributes'].name is defined %}{{ commerce_overpass['@attributes'].name }}{% endif %}">
</div>
</div>
<div class="col-md-5">
<input type="text" class="form-control" name="commerce_tag_value__name" value="{% if commerce_overpass.tags_converted.name is defined %}{{ commerce_overpass.tags_converted.name }}{% elseif commerce_overpass['@attributes'].name is defined %}{{ commerce_overpass['@attributes'].name }}{% endif %}">
</div>
</div>
{% if hide_filled_inputs and
(commerce_overpass.tags_converted['addr:street']) is defined and commerce_overpass.tags_converted['addr:street'] is not empty
%}
{% include 'public/edit/address.html.twig' %}
{% endif %}
{% if hide_filled_inputs and (commerce_overpass.tags_converted.opening_hours) is defined and commerce_overpass.tags_converted.opening_hours is not empty %}
{% include 'public/edit/opening_hours.html.twig' %}
{% endif %}
{% if hide_filled_inputs and (commerce_overpass.tags_converted.wheelchair) is defined and commerce_overpass.tags_converted.wheelchair is not empty %}
{% include 'public/edit/wheelchair.html.twig' %}
{% endif %}
{% if hide_filled_inputs and (commerce_overpass.tags_converted.ask_angela) is defined and commerce_overpass.tags_converted.ask_angela is not empty %}
{% include 'public/edit/ask_angela.html.twig' %}
{% endif %}
{% include 'public/edit/address.html.twig' %}
{% include 'public/edit/opening_hours.html.twig' %}
{% include 'public/edit/wheelchair.html.twig' %}
{% include 'public/edit/ask_angela.html.twig' %}
{% include 'public/edit/tags.html.twig' %}
<div id="validation_messages"></div>
<button type="submit" class="btn btn-primary">
<i class="bi bi-send"></i>
{{ 'display.submit'|trans }}</button>
<i class="bi bi-send"></i>
{{ 'display.submit'|trans }}
</button>
</form>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<span class="p-4">
<span class="last-modification">{{ 'display.last_modification'|trans }}: {{ commerce_overpass['@attributes'].timestamp }}</span>,
<strong>
{{ 'display.days_ago'|trans({'%days%': date(commerce_overpass['@attributes'].timestamp).diff(date()).days}) }} </strong>
<strong>{{ 'display.days_ago'|trans({'%days%': date(commerce_overpass['@attributes'].timestamp).diff(date()).days}) }}</strong>
{{ 'display.by'|trans }}
<a href="https://www.openstreetmap.org/user/{{ commerce_overpass['@attributes'].user }}" target="_blank">{{ commerce_overpass['@attributes'].user }}</a>
<div class="lien-OpenStreetMap">
<a href="https://www.openstreetmap.org/node/{{ commerce_overpass['@attributes'].id }}" target="_blank">{{ 'display.view_on_osm'|trans }}</a>
</div>
</span>
<div class="disclaimer p-3">
<p>
@ -123,31 +105,24 @@
</div>
</div>
</div>
</div>
{% block javascripts %}
{{ parent() }}
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
<script>
function check_validity(e){
let errors = [];
// Réinitialiser les classes d'erreur
<script>
function check_validity(e) {
let errors = [];
document.querySelectorAll('.is-invalid').forEach(input => {
input.classList.remove('is-invalid');
});
// Vérification du nom
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');
}
// Vérification de l'email
const emailInput = document.querySelector('input[name="commerce_tag_value__contact:email"]');
if (emailInput && emailInput.value) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@ -157,7 +132,6 @@ function check_validity(e){
}
}
// Vérification du téléphone
const phoneInput = document.querySelector('input[name="commerce_tag_value__contact:phone"]');
if (phoneInput && phoneInput.value) {
const phoneRegex = /^(\+33|0)[1-9](\d{2}){4}$/;
@ -167,67 +141,55 @@ function check_validity(e){
}
}
// Affichage des erreurs si présentes
if (errors.length > 0) {
e.preventDefault();
document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
document.querySelector('#validation_messages').classList.add('is-invalid');
}
}
}
{% 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 }}';
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 }}
],
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
zoom: 14
});
// Ajout du marqueur
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>'))
.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 %}
{% endif %}
// Fonction pour calculer et mettre à jour la barre de progression
function updateCompletionProgress() {
const inputs = document.querySelectorAll('input[type="text"]');
let filledInputs = 0;
let totalInputs = inputs.length;
function updateCompletionProgress() {
const inputs = document.querySelectorAll('input[type="text"]');
let filledInputs = 0;
let totalInputs = inputs.length;
inputs.forEach(input => {
if (input.value.trim() !== '') {
filledInputs++;
}
inputs.forEach(input => {
if (input.value.trim() !== '') {
filledInputs++;
}
});
const completionPercentage = (filledInputs / totalInputs) * 100;
const progressBar = document.querySelector('#completion_progress .progress-bar');
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 completionPercentage = (filledInputs / totalInputs) * 100;
const progressBar = document.querySelector('#completion_progress .progress-bar');
document.querySelector('form').addEventListener('submit', check_validity);
document.addEventListener('DOMContentLoaded', updateCompletionProgress);
progressBar.style.width = completionPercentage + '%';
progressBar.setAttribute('aria-valuenow', completionPercentage);
}
// Ajouter les écouteurs d'événements sur tous les champs input
document.querySelectorAll('input[type="text"]').forEach(input => {
input.addEventListener('blur', updateCompletionProgress);
});
// Validation du formulaire avant envoi
document.querySelector('form').addEventListener('submit', check_validity);
// Calculer la progression initiale au chargement
document.addEventListener('DOMContentLoaded', updateCompletionProgress);
</script>
{% endblock %}
{% endblock %}

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

@ -5,20 +5,24 @@
<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 != '' %}
{{ dump(commerce_overpass.tags_converted.opening_hours) }}
{# {{ dump(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> ajoutez les horaires au format OSM
{% endif %}
<span class="examples">Exemples :</span>
<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>
{# <input type="checkbox" name="commerce_tag_value__opening_hours_1" value="yes">
Lundi de

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

@ -4,14 +4,14 @@
{% for k, v in commerce_overpass.tags_converted %}
<div class="row mb-3">
<div class="row mb-3 {% if hide_filled_inputs and v is not empty %}d-none{% endif %}">
<div class="col-md-5">
{% if k not in excluded_tags_to_render %}
{% if k not in excluded_tags_to_render %}
{% if k == 'phone' or k == 'contact:phone' %}
<i class="bi bi-telephone"></i>
{% elseif k == 'addr:housenumber' or k == 'addr:street' or k == 'addr:city' or k == 'addr:postcode' or k == 'addr:country' %}
<i class="bi bi-geo-alt"></i>
{% elseif k == 'mastodon' %}
{% elseif k == 'contact:mastodon' %}
<i class="bi bi-mastodon"></i>
{% elseif k == 'email' or k == 'contact:email' %}
<i class="bi bi-envelope"></i>

9
templates/public/edit/wheelchair.html.twig
View file

@ -13,18 +13,27 @@
<label class="form-check-label" for="wheelchair_yes">
{{'display.values.wheelchair.yes'|trans}}
</label>
<p>
toutes les pièces sont accessibles sans marche.
</p>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="commerce_tag_value__wheelchair" id="wheelchair_limited" value="limited" {% if commerce_overpass.tags_converted.wheelchair is defined and commerce_overpass.tags_converted.wheelchair == 'limited' %}checked{% endif %}>
<label class="form-check-label" for="wheelchair_limited">
{{'display.values.wheelchair.limited'|trans}}
</label>
<p>
les pièces principales sont accessibles sans marche.
</p>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="commerce_tag_value__wheelchair" id="wheelchair_no" value="no" {% if commerce_overpass.tags_converted.wheelchair is defined and commerce_overpass.tags_converted.wheelchair == 'no' %}checked{% endif %}>
<label class="form-check-label" for="wheelchair_no">
{{'display.values.wheelchair.no'|trans}}
</label>
<p>
autres cas. une marche fait plus de 7cm, entrée trop étroite ou bien plusieurs marches.
</p>
</div>
</div>
</div>