Merge pull request #40 from altercampagne/alterpotes-map

Introduce Alterpotes map

.tiime-trc-baseline

@@ -6,7 +6,6 @@ payment_initiate_membership_payment
 payment_callback_back
 payment_callback_error
 payment_callback_return
-profile_memberships
 profile_registrations
 registration_cancel
 logout

assets/app.js

@@ -11,6 +11,7 @@ import './styles/app.scss'
 
 import './scripts/AlternativeMap.js'
 import './scripts/AlternativesMap.js'
+import './scripts/AlterpotesMap.js'
 import './scripts/EventRegistrationBikeSelector.js'
 import './scripts/EventRegistrationChooseDates.js'
 import './scripts/EventRegistrationChoosePrice.js'

assets/scripts/AlternativeMap.js

@@ -7,7 +7,7 @@ class AlternativeMap extends Map {
       longitude: container.dataset.longitude,
     });
 
-    L.marker([container.dataset.latitude, container.dataset.longitude], { icon: this.customIcon }).addTo(this.map)
+    L.marker([container.dataset.latitude, container.dataset.longitude], { icon: this.customIconBlue }).addTo(this.map)
       .bindPopup(container.dataset.tooltip)
       .openPopup();
   }

assets/scripts/AlternativesMap.js

@@ -8,7 +8,7 @@ class AlternativesMap extends Map {
 
     const markers = new L.FeatureGroup();
     container.querySelectorAll('ul > li').forEach((element) => {
-      const marker = L.marker([element.dataset.latitude, element.dataset.longitude], { icon: this.customIcon })
+      const marker = L.marker([element.dataset.latitude, element.dataset.longitude], { icon: this.customIconBlue })
         .bindPopup(element.innerHTML)
       ;
 
@@ -36,7 +36,6 @@ class AlternativesMap extends Map {
         let geojson;
         geojson = L.geoJson(data, {
           style: (feature) => {
-            console.log(feature);
             let count = alternativeCountByDepartments[parseInt(feature.properties.code)];
 
             return {

assets/scripts/AlterpotesMap.js

@@ -0,0 +1,24 @@
+import Map from './Map.js'
+
+class AlterpotesMap extends Map {
+  constructor(container) {
+    super(container, { zoomLevel: 6 });
+
+    const markers = new L.FeatureGroup();
+    container.querySelectorAll('ul > li').forEach((element) => {
+      const marker = L.marker([element.dataset.latitude, element.dataset.longitude], { icon: element.dataset.itself ? this.customIconPurple : this.customIconBlue })
+        .bindPopup(element.innerHTML)
+      ;
+
+      markers.addLayer(marker);
+    });
+
+    this.map.addLayer(markers);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  if (null !== document.querySelector('#alterpotes-map')) {
+    (() => new AlterpotesMap(document.querySelector('#alterpotes-map')))();
+  };
+});

assets/scripts/Map.js

@@ -7,8 +7,14 @@ export default class Map {
     longitude = 1.7191,
     zoomLevel = 13,
   } = {}) {
-    this.customIcon = L.icon({
-      iconUrl: document.getElementById('leaflet-config').dataset.markerIcon,
+    this.customIconBlue = L.icon({
+      iconUrl: document.getElementById('leaflet-config').dataset.markerIconBlue,
+      iconSize: [30, 45],
+      popupAnchor: [0, -10],
+    });
+
+    this.customIconPurple = L.icon({
+      iconUrl: document.getElementById('leaflet-config').dataset.markerIconPurple,
       iconSize: [30, 45],
       popupAnchor: [0, -10],
     });

migrations/Version20241127192114.php

@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20241127192114 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE "user" ADD visible_on_alterpotes_map BOOLEAN DEFAULT false NOT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE SCHEMA public');
+        $this->addSql('ALTER TABLE "user" DROP visible_on_alterpotes_map');
+    }
+}

src/Controller/AlterpotesController.php

@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use App\Entity\User;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Security\Http\Attribute\IsGranted;
+
+#[IsGranted('ROLE_USER')]
+#[Route('/alterpotes', name: 'alterpotes_map')]
+class AlterpotesController extends AbstractController
+{
+    public function __construct(
+        private readonly EntityManagerInterface $em,
+    ) {
+    }
+
+    public function __invoke(): Response
+    {
+        /** @var User $user */
+        $user = $this->getUser();
+
+        if (!$user->isMember()) {
+            $this->addFlash('danger', 'Une adhésion à jour est nécessaire pour accéder à la carte des alterpotes !');
+
+            return $this->redirectToRoute('profile_memberships');
+        }
+
+        $qb = $this->em->createQueryBuilder();
+        $qb
+            ->select('u')
+            ->from(User::class, 'u')
+            ->andWhere('u.visibleOnAlterpotesMap = true')
+            ->andWhere('u.address.latitude IS NOT NULL')
+            ->andWhere('u.address.longitude IS NOT NULL')
+        ;
+
+        $users = $qb->getQuery()->getResult();
+
+        return $this->render('alterpotes.html.twig', [
+            'users' => $users,
+        ]);
+    }
+}

src/Entity/User.php

@@ -114,6 +114,11 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface, Located
     #[ORM\Column(type: 'boolean')]
     private bool $isVerified = false;
 
+    #[ORM\Column(type: 'boolean', options: [
+        'default' => false,
+    ])]
+    private bool $visibleOnAlterpotesMap = false;
+
     #[ORM\Column]
     private readonly \DateTimeImmutable $createdAt;
 
@@ -433,6 +438,18 @@ public function setHasDrivingLicence(bool $hasDrivingLicence): self
         return $this;
     }
 
+    public function visibleOnAlterpotesMap(): bool
+    {
+        return $this->visibleOnAlterpotesMap;
+    }
+
+    public function setVisibleOnAlterpotesMap(bool $visibleOnAlterpotesMap): self
+    {
+        $this->visibleOnAlterpotesMap = $visibleOnAlterpotesMap;
+
+        return $this;
+    }
+
     public function getCreatedAt(): \DateTimeImmutable
     {
         return $this->createdAt;

src/Form/ProfileUpdateFormType.php

@@ -9,6 +9,7 @@
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\Extension\Core\Type\EnumType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
@@ -47,15 +48,14 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 'help_html' => true,
                 'required' => false,
             ])
-            ->add('biography', TextType::class, [
-                'label' => false,
-                'attr' => [
-                    'placeholder' => 'Ta présentation',
-                ],
-                'row_attr' => [
-                    'class' => 'form-floating mb-3',
-                ],
-                'help' => 'N\'hésite pas à nous en dire un peu plus te concernant (aucune obligation bien sûr). 😊',
+            ->add('visibleOnAlterpotesMap', CheckboxType::class, [
+                'label' => "J'accepte d'apparaitre sur la carte des alterpotes",
+                'help' => 'La carte est visible uniquement pour les membres à jour de leur cotisation.',
+                'required' => false,
+            ])
+            ->add('biography', TextareaType::class, [
+                'label' => 'Ta présentation (visible sur la carte)',
+                'help' => 'N\'hésite pas à ajouter des informations utiles pour les autres membres de l\'association : est-ce que tu acceptes d\'héberger des altercyclistes ? dans quel contexte ?',
                 'required' => false,
             ])
         ;

templates/_base.html.twig

@@ -19,6 +19,11 @@
                             <li class="nav-item">
                                 <a class="nav-link active" aria-current="page" href="{{ path('alternative_map') }}">Alternatives</a>
                             </li>
+                            {% if is_granted('ROLE_USER') and app.user.isMember %}
+                                <li class="nav-item">
+                                    <a class="nav-link active" aria-current="page" href="{{ path('alterpotes_map') }}">Carte des alterpotes</a>
+                                </li>
+                            {% endif %}
                             <li class="nav-item">
                                 <a class="nav-link active" aria-current="page" href="{{ path('faq') }}">Foire aux questions</a>
                             </li>
@@ -128,5 +133,11 @@
         </footer>
     {% endblock %}
 
-    <div class="d-none" id="leaflet-config" data-marker-icon="{{ asset('images/leaflet/marker-icon.png') }}"></div>
+    <div
+        class="d-none"
+        id="leaflet-config"
+        data-marker-icon="{{ asset('images/leaflet/marker-icon.png') }}"
+        data-marker-icon-blue="{{ asset('images/leaflet/marker-icon-blue.svg') }}"
+        data-marker-icon-purple="{{ asset('images/leaflet/marker-icon-purple.svg') }}"
+    ></div>
 {% endblock %}

templates/alterpotes.html.twig

@@ -0,0 +1,67 @@
+{% extends '_base.html.twig' %}
+
+{% block title %}La carte des alterpotes{% endblock %}
+
+{% block main %}
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col">
+                <div class="mb-3 text-center">
+                    <h1>La carte des alterpotes</h1>
+                </div>
+            </div>
+        </div>
+
+        <div class="row justify-content-center mt-3">
+            {% if not app.user.visibleOnAlterpotesMap %}
+                <div class="alert alert-danger">
+                    <b>Pour le moment, tu ne figures pas sur la carte des alterpotes !</b><br />
+                    Tu souhaites appraitre dessus ? Il te suffit de <a href="{{ path('profile_update_profile') }}"> modifier tes préférences</a>.
+                </div>
+            {% endif %}
+
+            <div class="bg-white p-3 rounded border border-secondary-outline mt-2">
+                <div
+                    id="alterpotes-map"
+                    style="height: 650px"
+                >
+                    <ul class="d-none">
+                        {% for user in users %}
+                            <li
+                                data-latitude="{{ user.address.latitude }}"
+                                data-longitude="{{ user.address.longitude }}"
+                                data-itself="{{ app.user == user }}"
+                            >
+                                <div class="text-center">
+                                    <h5 class="mt-2">{{ user.publicName }}</h5>
+                                    {% if user.biography is not null %}
+                                        <p>
+                                            {{ user.biography }}
+                                        </p>
+                                    {% endif %}
+
+                                    <hr />
+
+                                    <a class="btn btn-link btn-sm" href="tel:{{ user.phoneNumber|phone_number_format }}">
+                                        {{ user.phoneNumber|phone_number_format }}
+                                    </a>
+                                    <a class="btn btn-link btn-sm" href="mailto:{{ user.email }}">
+                                        {{ user.email }}
+                                    </a>
+
+                                    {% if user == app.user %}
+                                        <hr />
+
+                                        <a href="{{ path('profile_update_profile') }}" class="btn btn-primary text-white btn-sm">
+                                            Modifier mes informations
+                                        </a>
+                                    {% endif %}
+                                </div>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}

templates/profile/update_profile.html.twig

@@ -53,9 +53,16 @@
                         </ul>
                     {% endif %}
 
+
                     <fieldset class="form-group border p-3 mt-3">
-                        <legend class="w-auto px-2"><i class="fa-solid fa-user me-2"></i> Ta présentation <i class="text-secondary">(facultative)</i></legend>
+                        <legend class="w-auto px-2">
+                            <i class="fa-solid fa-map me-2"></i> Carte des alterpotes
+                            <small><a href="#" class=" mx-2" data-bs-toggle="modal" data-bs-target="#alterpotesMapDetails">
+                                (plus d'infos)
+                            </a></small>
+                        </legend>
 
+                        {{ form_row(form.visibleOnAlterpotesMap) }}
                         {{ form_row(form.biography) }}
                     </fieldset>
 
@@ -117,4 +124,24 @@
             </div>
         </div>
     </div>
+
+    <div class="modal" id="alterpotesMapDetails" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="exampleModalLabel">La carte des alterpotes ?</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="alert bg-info-subtle">
+                        La carte des alterpotes est visible uniquement par les membres à jour de leur cotisation, tes coordonées ne seront donc pas visibles publiquement.
+                    </div>
+
+                    <p>
+                        La carte des alterpotes permet de visualiser où habitent toutes les personnes qui le souhaitent et éventuellement de mettre les membres en relation les uns avec les autres.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock %}

tests/DatabaseUtilTrait.php

@@ -15,8 +15,7 @@ trait DatabaseUtilTrait
 {
     public function save(object ...$objects): void
     {
-        /** @var EntityManagerInterface $em */
-        $em = static::getContainer()->get(EntityManagerInterface::class);
+        $em = $this->getEntityManager();
 
         foreach ($objects as $object) {
             $em->persist($object);
@@ -77,4 +76,12 @@ protected function getBookableEvent(): Event
 
         return $event;
     }
+
+    protected function getEntityManager(): EntityManagerInterface
+    {
+        /** @var EntityManagerInterface $em */
+        $em = static::getContainer()->get(EntityManagerInterface::class);
+
+        return $em;
+    }
 }