add icons in edit form

This commit is contained in:
Tykayn 2025-05-27 12:17:46 +02:00 committed by tykayn
parent 5d9bb8b5e6
commit 3afc15a86f
15 changed files with 195 additions and 105 deletions

View file

@ -5,10 +5,7 @@ framework:
http_method_override: false
handle_all_throwables: true
default_locale: 'fr'
translator:
default_path: '%kernel.project_dir%/translations'
fallbacks: ['en']
# Enables session support. Note that the session will ONLY be started if you read or write from it.
# Remove or comment this section to explicitly disable session support.

View file

@ -1,5 +1,5 @@
framework:
default_locale: en
default_locale: fr
translator:
default_path: '%kernel.project_dir%/translations'
fallbacks:

View file

@ -64,6 +64,11 @@ final class AdminController extends AbstractController
$this->entityManager->persist($stats);
$this->entityManager->flush();
$stats->computeCompletionPercent();
$this->entityManager->persist($stats);
$this->entityManager->flush();
return $this->render('admin/stats.html.twig', [
'stats' => $stats,
'zip_code' => $zip_code,

View file

@ -65,6 +65,7 @@ class PublicController extends AbstractController
'commerce_overpass' => $commerce_overpass,
'name' => $name,
'commerce' => $place,
'excluded_tags_to_render' => $this->motocultrice->excluded_tags_to_render,
'osm_kind' => $place->getOsmKind(),
"mapbox_token" => $_ENV['MAPBOX_TOKEN'],
"maptiler_token" => $_ENV['MAPTILER_TOKEN'],

View file

@ -10,17 +10,24 @@ class Motocultrice
private $overpassApiUrl = 'https://overpass-api.de/api/interpreter';
private $osmApiUrl = 'https://www.openstreetmap.org/api/0.6';
// ne pas lister les tags qui utilisent des morceaux particuliers de formulaire pour éviter que les gens aient besoin de connaître le tag OSM
public $excluded_tags_to_render = [
'name',
'wheelchair',
'harassment_prevention',
];
// les tags OSM que l'on estime nécessaires pour un commerce
public $base_tags = [
'name',
'opening_hours',
'contact:email',
'contact:phone',
'wheelchair',
'addr:housenumber',
'addr:street',
'contact:website',
'contact:mastodon',
// 'EEEEEEEEEEEEEEEEEEE'
'image',
'note'
];
private $more_tags = ['image', 'ref:FR:SIRET'];
public function __construct(

View file

@ -5,6 +5,7 @@
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- JavaScript Bootstrap avec Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
@ -20,12 +21,12 @@
table, thead, tbody, tr{
width: 100%;
}
table tr:nth-child(odd){
{# table tr:nth-child(odd){
background-color:rgb(235, 235, 235);
}
table tr:nth-child(even){
background-color: #f8f9fa;
}
} #}
</style>
{% block stylesheets %}
@ -54,26 +55,7 @@
{% endfor %}
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 rounded shadow-sm">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="{{ path('app_public_index') }}">{{ 'display.home'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_public_dashboard') }}">{{ 'display.stats'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://openstreetmap.fr/contact/">{{ 'display.contact_humans'|trans }}</a>
</li>
</ul>
</div>
</div>
</nav>
{% include 'public/nav.html.twig' %}
</div>
</div>
</div>
@ -85,6 +67,12 @@
<div class="container">
<div class="row">
<div class="col-12">
{% include 'public/nav.html.twig' %}
</div>
</div>
<div class="row">
<div class="col-12">
<p>OpenStreetMap Mon Commerce</p>
<p>Licence AGPLv3+,
fait par Tykayn de

View file

@ -21,7 +21,7 @@
<div class="col-12">
<h2>Statistiques : {{ stats|length }} commerces</h2>
<table>
<table class="table table-hover table-striped table-responsive">
<thead>
<tr>
<th>Zone</th>
@ -41,7 +41,7 @@
</table>
<h2>Lieux</h2>
<table>
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>Nom</th>

View file

@ -19,6 +19,10 @@
.is-invalid #validation_messages {
color: red;
}
img{
max-width: 100%;
max-height: 400px;
}
</style>
{% endblock %}
@ -26,11 +30,18 @@
<div class="container mt-4">
<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>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="card-title mb-4">{{ 'display.welcome'|trans }}</h1>
<h1 class="card-title mb-4">{{ 'display.welcome'|trans }} {{ commerce_overpass.tags_converted.name }}</h1>
<div id="map" style="height: 400px; width: 100%;" class="rounded"></div>
{% if commerce_overpass is not empty %}
@ -55,76 +66,67 @@
<a class="btn btn-info" href="{{ path('app_public_index') }}">{{ 'display.contact_humans'|trans }}</a>
</div>
{% if commerce.tags_converted.image is defined %}
<img src="{{ commerce.tags_converted.image }}" alt="Image du lieu" class="img-fluid mb-3">
<img class="img-fluid mb-3" src="{{ commerce.tags_converted.image }}" alt="Image du lieu">
{% endif %}
<h2>{{ 'display.attributes'|trans }}</h2>
<div class="row mb-3">
<div class="col-md-5">
<div class="row mb-3">
<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.tags_converted.name is defined %}{{ commerce.tags_converted.name }}{% elseif commerce_overpass['@attributes'].name is defined %}{{ commerce_overpass['@attributes'].name }}{% endif %}">
</div>
</div>
<div class="row mb-3">
<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>
{% include 'public/edit/ask_angela.html.twig' %}
{% include 'public/edit/wheelchair.html.twig' %}
{% include 'public/edit/opening_hours.html.twig' %}
{% 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">{{ 'display.submit'|trans }}</button>
<button type="submit" class="btn btn-primary">
<i class="bi bi-send"></i>
{{ 'display.submit'|trans }}</button>
</form>
{% endif %}
</div>
</div>
</div>
<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>
{{ '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>
<strong>{{ 'display.disclaimer.title'|trans }}:</strong>
{{ 'display.disclaimer.text'|trans }}
</p>
</div>
</div>
<div class="row mt-4">
</div>
<div class="row">
<div class="col-12">
<nav class="bg-light p-3 rounded shadow-sm">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="{{ path('app_public_index') }}">{{ 'display.home'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://openstreetmap.fr/contact/">{{ 'display.contact_humans'|trans }}</a>
</li>
</ul>
</nav>
<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>
{{ '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>
<strong>{{ 'display.disclaimer.title'|trans }}:</strong>
{{ 'display.disclaimer.text'|trans }}
</p>
</div>
</div>
</div>
</div>
{% block javascripts %}
@ -132,9 +134,9 @@
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
<script>
// Validation du formulaire avant envoi
document.querySelector('form').addEventListener('submit', function(e) {
let errors = [];
function check_validity(e){
let errors = [];
// Réinitialiser les classes d'erreur
document.querySelectorAll('.is-invalid').forEach(input => {
input.classList.remove('is-invalid');
@ -173,7 +175,8 @@
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({
@ -198,6 +201,35 @@
}).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1>'))
.addTo(map);
{% 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;
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);
}
// 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 %}

View file

@ -1,18 +1,16 @@
{% block ask_angela %}
<div id="ask_angela">
<fieldset>
<fieldset >
<h2>{{ 'display.ask_angela'|trans }}</h2>
<p class="description">{{ 'display.ask_angela_description'|trans }}</p>
<p class="more-info">
<a href="https://www.openstreetmap.fr/contact/" target="_blank">{{ 'display.ask_angela_more_info'|trans }}</a>
</p>
<div class="p-4">
<img src="https://i0.wp.com/askforangela.co.uk/wp-content/uploads/2022/10/Ask-for-Angela-primary.png?fit=300%2C300&ssl=1" class="img-fluid img-thumbnail mb-3" alt="Image du lieu">
<p class="description"><label for="custom__ask_angela">{{ 'display.ask_angela_description'|trans }} </label></p>
<div class="row mb-3">
<div class="col-md-5">
<label for="custom__ask_angela">{{'display.ask_angela'|trans}}</label>
{% if commerce_overpass.tags_converted.harassment_prevention is defined %}
{{ dump(commerce_overpass.tags_converted.harassment_prevention) }}
{% endif %}
<div class="form-check">
<input class="form-check-input" type="radio" name="custom__ask_angela" id="ask_angela_yes" value="ask_angela" {% if commerce_overpass.tags_converted.harassment_prevention is defined and commerce_overpass.tags_converted.harassment_prevention == 'ask_angela' %}checked{% endif %}>
<label class="form-check-label" for="ask_angela_yes">
@ -30,5 +28,10 @@
</div>
</div>
<p class="more-info">
<a href="https://www.openstreetmap.fr/contact/" target="_blank">{{ 'display.ask_angela_more_info'|trans }}</a>
</p>
</div>
</fieldset>
{% endblock %}

View file

@ -1,16 +1,24 @@
<div id="opening_hours">
<h2>{{ 'display.opening_hours'|trans }}</h2>
<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 %}
{% if commerce_overpass.tags_converted.opening_hours is defined and 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" name="custom__opening_hours" value="">
<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>
<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>
{# <input type="checkbox" name="commerce_tag_value__opening_hours_1" value="yes">
Lundi de

View file

@ -3,15 +3,39 @@
<div id="tags">
{% for k, v in commerce_overpass.tags_converted %}
<div class="row mb-3">
<div class="col-md-5">
<input type="text" class="form-control hidden" name="commerce_tag_key__{{ k }}" value="{{ k }}" readonly>
<span class="label-translated">{{ ('display.keys.' ~ k)|trans }}</span>
{% 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' %}
<i class="bi bi-mastodon"></i>
{% elseif k == 'email' or k == 'contact:email' %}
<i class="bi bi-envelope"></i>
{% elseif k == 'website' or k == 'contact:website' %}
{% elseif k == 'opening_hours' %}
<i class="bi bi-clock"></i>
{% else %}
<i class="bi bi-tag"></i>
{% endif %}
{% endif %}
<input type="text" class="form-control hidden" name="commerce_tag_key__{{ k }}" value="{{ k }}" title="{{ k }}" readonly>
{% if k not in excluded_tags_to_render %}
<span class="label-translated" title="{{ k }}">{{ ('display.keys.' ~ k)|trans }}</span>
{% endif %}
</div>
<div class="col-md-5">
{% if k not in excluded_tags_to_render %}
<input type="text" class="form-control" name="commerce_tag_value__{{ k }}" value="{{ v }}">
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>

View file

@ -1,5 +1,5 @@
<div id="wheelchair">
<h2>{{ 'display.wheelchair'|trans }}</h2>
<h2><i class="bi bi-person-wheelchair"></i> {{ 'display.wheelchair'|trans }}</h2>
<div class="row mb-3 p-4">
<div class="col-md-5">
<div class="form-check">

View file

@ -0,0 +1,20 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 rounded shadow-sm">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="{{ path('app_public_index') }}">{{ 'display.home'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_public_dashboard') }}">{{ 'display.stats'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://openstreetmap.fr/contact/">{{ 'display.contact_humans'|trans }}</a>
</li>
</ul>
</div>
</div>
</nav>

View file

@ -38,6 +38,7 @@ display:
ask_angela: 'Ask Angela'
ask_angela_yes: 'Yes'
ask_angela_no: 'No'
keys:
tags: 'tags'
name: 'Name'

View file

@ -4,7 +4,7 @@ display:
stats: "Statistiques"
contact_humans: "Contacter des humains d'OSM France pour m'aider"
modify: "Modifier"
welcome: "Bienvenue dans les commerces!"
welcome: "Modifier ce lieu:"
modify_commerce: "Modifier votre commerce"
tags: "Tags"
submit: "Envoyer"
@ -22,6 +22,8 @@ display:
attributes: "Attributs"
opening_hours: "Horaires d'ouverture"
opening_hours_description: "De bons horaires d'ouverture sont importants pour que les clients puissent vous trouver."
ask_angela_yes: "Oui"
ask_angela_no: "Non"
values:
wheelchair:
yes: "le lieu est totalement praticable en fauteuil roulant"
@ -50,9 +52,10 @@ display:
contact:website: "Contact du Site web"
contact:mastodon: "Contact Mastodon"
opening_hours: "Horaires d'ouverture"
opening_hours:signed: "Horaires d'ouverture signés"
shop: "Type de commerce"
tourism: "Tourisme"
wheelchair: "Accès PMR"
wheelchair: "Accès Personnes à mobilité réduite (PMR)"
addr:housenumber: "Numéro de rue"
addr:street: "Rue"
addr:city: "Ville"
@ -60,6 +63,7 @@ display:
amenity: "Équipement"
source: "Source"
ref:FR:SIRET: "SIRET"
image: "URL vers une Image"
disclaimer:
title: "Attention"
text: "Ce site est un travail en cours, ceci est une démonstration sur un objet fictif qui utilise les données de l'API OpenStreetMap."