mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
add icons in edit form
This commit is contained in:
Tykayn
tykayn
parent
5d9bb8b5e6
commit
3afc15a86f
15 changed files with 195 additions and 105 deletions
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue