mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
195 lines
10 KiB
Twig
195 lines
10 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}{{ 'display.title'|trans }}{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
{{ 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; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container mt-4">
|
|
<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 }} {{ commerce_overpass.tags_converted.name }}</h1>
|
|
<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">
|
|
<label for="commerce_id" class="form-label">{{ 'display.modify_commerce'|trans }}:
|
|
<strong>
|
|
{% if commerce_overpass.tags_converted.name is defined %}
|
|
{{ commerce_overpass.tags_converted.name }}
|
|
{% elseif commerce_overpass['@attributes'].name is defined %}
|
|
{{ commerce_overpass['@attributes'].name }}
|
|
{% else %}
|
|
{{ 'display.unknown'|trans }}
|
|
{% endif %}
|
|
</strong>
|
|
</label>
|
|
<br/>
|
|
<a class="btn btn-info" href="{{ path('app_public_index') }}">{{ 'display.contact_humans'|trans }}</a>
|
|
</div>
|
|
|
|
{% if commerce.tags_converted.image is defined %}
|
|
<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">
|
|
<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>
|
|
|
|
{% 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/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>
|
|
</form>
|
|
{% endif %}
|
|
</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>
|
|
{{ '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 %}
|
|
{{ parent() }}
|
|
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
|
|
<script>
|
|
function check_validity(e) {
|
|
let errors = [];
|
|
document.querySelectorAll('.is-invalid').forEach(input => {
|
|
input.classList.remove('is-invalid');
|
|
});
|
|
|
|
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');
|
|
}
|
|
|
|
const emailInput = document.querySelector('input[name="commerce_tag_value__contact:email"]');
|
|
if (emailInput && emailInput.value) {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(emailInput.value)) {
|
|
errors.push("L'adresse email n'est pas valide");
|
|
emailInput.classList.add('is-invalid');
|
|
}
|
|
}
|
|
|
|
const phoneInput = document.querySelector('input[name="commerce_tag_value__contact:phone"]');
|
|
if (phoneInput && phoneInput.value) {
|
|
const phoneRegex = /^(\+33|0)[1-9](\d{2}){4}$/;
|
|
if (!phoneRegex.test(phoneInput.value.replace(/\s/g, ''))) {
|
|
errors.push("Le numéro de téléphone n'est pas valide");
|
|
phoneInput.classList.add('is-invalid');
|
|
}
|
|
}
|
|
|
|
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 }}],
|
|
zoom: 14
|
|
});
|
|
|
|
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>'))
|
|
.addTo(map);
|
|
{% endif %}
|
|
|
|
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);
|
|
|
|
document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
|
|
}
|
|
|
|
document.querySelectorAll('input[type="text"]').forEach(input => {
|
|
input.addEventListener('blur', updateCompletionProgress);
|
|
});
|
|
|
|
document.querySelector('form').addEventListener('submit', check_validity);
|
|
document.addEventListener('DOMContentLoaded', updateCompletionProgress);
|
|
|
|
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %}
|