Affichage sous forme de vignettes

Les propositions de parties d'un événement sont disponibles :
- en planning horaire
- en vignettes (prêt pour un filtrage avec data-*)

assets/styles/app.css

@@ -23,6 +23,10 @@
   }
 }
 
+.event-selector {
+	margin-top: 2rem !important;
+}
+
 .navbar-item svg {
   color: rgb(46,48,146); /* couleur par défaut (mode clair) */
 }
@@ -31,6 +35,15 @@ html[data-theme="dark"] .navbar-item svg {
   color: white; /* couleur en mode sombre */
 }
 
+.overlay-tags {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
 
 .main-content {
     margin-top: 3.25rem;

src/Controller/MainController.php

@@ -55,12 +55,8 @@ final class MainController extends AbstractController
             return $this->redirectToRoute('app_main');
         }
         $event = $events[0];
-
-
-        return $this->render('main/booking.html.twig', [
-            'event' => $event,
-            'events' => $events
-        ]);
+        
+        return $this->redirectToRoute('app_main_booking', ['id' => $event->getId(), 'view' => 'pictures']);
     }
     
     #[Route('/ics/{id}.ics', name: 'app_main_ics', requirements: ['id' => Requirement::UUID_V7], methods: ['GET'])]
@@ -74,8 +70,8 @@ final class MainController extends AbstractController
         return $this->render('main/event.ics.twig', ['event' => $event]);
     }
 
-    #[Route('/booking/{id}', name: 'app_main_booking', requirements: ['id' => Requirement::UUID_V7], methods: ['GET', 'POST'])]
-    public function booking(?Event $event, EventRepository $repository): Response
+    #[Route('/booking/{id}/{view}', name: 'app_main_booking', requirements: ['id' => Requirement::UUID_V7, 'view' => '.*'], methods: ['GET', 'POST'])]
+    public function booking(?Event $event, EventRepository $repository, string $view): Response
     {
         // Contrôler qu'un événement est bien ok
         if (!$event) {
@@ -92,10 +88,19 @@ final class MainController extends AbstractController
                 $onlyPublicAccess = false;
             }
         }
+        
+        // Est-ce qu'une vue est invoquée dans l'URL ? et est-ce une option valide ?
+        if (!$view || !in_array($view, ['info', 'planning', 'pictures'])) {
+            $view = 'pictures';
+        }
+        
+        // Si le planning n'est pas affiché, planning et pictures -> info
+        //if ($event.isHiddenPlanning()  
+        
         // Récupérer la liste des événements visibles
         $events = $repository->findEventsToCome($onlyPublicAccess);
 
-        return $this->render('main/booking.html.twig', [
+        return $this->render('main/booking.'.$view.'.html.twig', [
             'event' => $event,
             'events' => $events
         ]);

src/Twig/Components/Pictures.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Twig\Components;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use App\Entity\Event;
+
+#[AsTwigComponent]
+class Pictures
+{
+    public ?string $pathLink = null;
+    public Event $event;
+    public bool $displayUnvalidates = false;
+
+
+    public function mount(Event $event): void
+    {
+        $this->event = $event;
+    }
+
+}

templates/bulma.html.twig

@@ -11,7 +11,7 @@
           <meta property="og:title" content="{{ event.name }}">
           <meta property="og:description" content="{{ event.description }}">
           <meta property="og:type" content="website">
-          <meta property="og:url" content="{{ app_url }}/{{ path('app_main_booking', {id:event.id}) }}">
+          <meta property="og:url" content="{{ app_url }}/{{ path('app_main_booking', {id:event.id, view:'pictures'}) }}">
           {% if event.picture %}
           <meta property="og:image" content="{{  app_url  }}/images/events/{{ event.picture }}">
           {%  else %}

templates/components/Pictures.html.twig

@@ -0,0 +1,66 @@
+{# Template pour les vignettes #}
+
+<div class="block">
+	<div class="fixed-grid has-3-cols-fullhd has-3-cols-widescreen has-2-cols-desktop has-2-cols-tablet has-1-cols-mobile">
+		<div class="grid is-col-min-12">
+		
+			{% for party in event.getParties|sort((a, b) => a.startOn <=> b.startOn) %}
+			<div class="cell{% if party.getSeatsLeft < 1 %} planning-cell-game-isfull{% endif %}">
+				<div class="card">
+					<div class="card-image" data-starton='{{ party.startOn|date('Ymdhi', app_timezone) }}' data-game='{{ party.game.slug }}' data-gamemaster='{{ party.gamemaster.slug }}' data-genre='{{ party.game.genre|map(p => p.slug)|join('|') }}'>
+						{% if party.getSeatsLeft > 0 %}<a href="{{ path(pathLink, {id: party.getSlots.first.id}) }}" class="open-modal">{% endif %}
+              <figure class="image is-3by1">
+	              {% if party.game.picture %}
+                  <img src="/images/games/{{ party.game.picture }}"  />
+          	    {% else %}
+                  <img src="/images/games/placeholder.webp"  />
+        	      {% endif %}
+              	<div class="overlay-tags">
+              		{% if party.getSeatsLeft > 0 %}
+                  <strong class="tag is-dark m-1 is-rounded" title="Places libres / places maximum">Places : {{ party.getSeatsLeft }}/{{ party.getMaxParticipants }}</strong>
+                  {% else %}
+                  <strong class="tag is-danger m-1 is-rounded">Complet !</strong>
+                  {%  endif %}
+                  {% if party.getGame.getAgeRecommendation %}<span class="tag m-1 is-primary is-rounded" title="{{ party.getGame.getAgeRecommendationLabel }}">{{ party.getGame.getAgeRecommendationLabel }}</span>{% endif %}
+    	            {% if party.gamemasterIsAuthor %}<span class="tag is-warning m-1 is-rounded">partie animée par l'auteur</span>{% endif %}
+      	          
+  	          	</div>
+  	         	</figure>
+						{% if party.getSeatsLeft > 0 %}</a>{% endif %}
+					</div>
+					<div class="card-content">
+						<div class="content ">
+								<div class="media">
+                    <div class="media-left">
+                        <figure class="image is-48x48">
+                            {% if party.gamemaster.picture %}
+                                <img class="is-rounded" src="/images/gamemasters/{{ party.gamemaster.picture }}"  />
+                            {% else %}
+                                <twig:ux:icon name="bi:person-fill"/>
+                            {% endif %}
+                        </figure>
+                    </div>
+                
+                    <div class="media-content">
+    		           		<small class="has-text-grey-darker">animée par {{ party.gamemaster.preferedName }}</small><br/>
+    	 								<strong class="title is-4">{{ party.game.name }}</strong>
+                    </div>
+                
+  			      	</div>
+							{% for genre in party.game.genre %}<span class="tag is-info m-1">{{ genre.genre }}</span>{% endfor %}
+						</div>
+
+						
+						
+					</div>
+					<div class="card-footer">
+						<div class="card-footer-item">
+							<small>Le {{ party.startOn|date('d/m/Y \\d\\e H:i', app_timezone) }} à {{ party.endOn|date('H:i', app_timezone) }}</small>
+						</div>
+					</div>
+				</div>
+			</div>
+			{%  endfor %}
+		</div>
+	</div>
+</div>

templates/main/booking.html.twig

@@ -1,102 +0,0 @@
-{% extends 'bulma.html.twig' %}
-
-{% block title %}Réservations pour {{ event.name }}{% endblock %}
-
-{% block content %}
-
-{{ component('Modal')}}
-
-<div class="columns">
-  <div class="column is-one-third">
-<div class="card" {{ stimulus_controller('dropdown')}} >
-  <div class="card-image">
-    <figure class="image is-3by1">
-      {% if event.picture %}
-        <img src="/images/events/{{ event.picture }}" />
-      {% else %}
-        <img src="/images/events/placeholder.webp" />
-      {% endif %}
-    </figure>
-  </div>
-
-  <div class="card-footer">
-    <div class="dropdown card-footer-item is-flex is-justify-content-space-between is-align-items-center" data-action="click->dropdown#toggle">
-      <button>
-        <span><strong>{{ event.name }}</strong></span>        
-      </button>
-      {% if events|length > 1 %}
-      <span class="icon is-small">
-        <twig:ux:icon name="bi:chevron-down" />&nbsp;
-      </span>
-      <div data-dropdown-target="menu" class="dropdown-menu">
-        <div class="dropdown-content">
-          {% for evt in events %}
-          {% if event.id != evt.id %}
-          <a href="{{ path('app_main_booking', {id: evt.id})}}" class="dropdown-item"><strong>{{ evt.name }}</strong><small> du {{ evt.startOn|date('d/m/y H:i', app_timezone) }} au {{ evt.endOn|date('d/m/y H:i', app_timezone)}}</small></a>
-          {% endif %}
-          {% endfor %}
-        </div>
-      </div>
-      {% endif %}
-    </div>
-  </div>
-
-</div>
-
-</div>
-<div class="column">
-  <div class="hero is-small">
-    <div class="hero-body">
-      <h2 class="title is-2">{{ event.name }}{% if event.moreLink %}<a href="{{ event.moreLink }}" target="_blank" title="En savoir plus sur le site de l'événement.">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:link-45deg"/></small></a>{% endif %}<a href="{{ app_url|replace({'https://':'webcal://'}) }}{{ path('app_main_ics', {id: event.id}) }}" target="_blank" title="Ajouter à mon agenda">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:calendar-plus"/></small></a></h2> 
-      <p class="subtitle is-4">du {{ event.startOn|date('d/m/y à H:i', app_timezone) }} au {{ event.endOn|date('d/m/y à H:i', app_timezone)}}</p>
-      <article>
-        <p>{{ event.description }}</p>
-        
-      </article>
-    </div>
-  </div>
-</div>
-
-</div>
-
-<div class="box is-clearfix">
-  <div class="columns">
-    {% if not event.isHiddenPlanning %}
-    <div class="column">
-      <p>{{ event.getParties()|length }} parties proposées</p>
-    </div>
-    {% endif %}
-    <div class="column">
-      <p class="is-inline-block icon-text">{{ event.getGamemastersAssigned|length }} meneur(euse)s de jeu
-        {% for gamemaster in event.getGamemastersAssigned %}
-          <span class="icon">
-              <a href="{{ path('app_gamemaster_public_profile', {id: gamemaster.id}) }}" class="open-modal" title="{{ gamemaster.preferedName }}"><figure class="image is-24x24 is-inline-block">
-              {% if gamemaster.picture %}
-              <img class="is-rounded" src="/images/gamemasters/{{ gamemaster.picture }}"  alt="{{ gamemaster.preferedName }}"/>
-              {% else %}
-              <twig:ux:icon name="bi:person-fill"/>
-              {% endif %}
-              </figure></a>
-          </span>   
-        {% endfor %}
-      </p>
-    </div>
-    {% if event.isEveryoneCanAskForGame and is_granted('ROLE_USER') %}
-    <div class="column">
-      <a href="{{ path('app_party_request', {id: event.id}) }}" class="button is-primary open-modal">Demander une partie</a>
-    </div>
-    {% endif %}
-  </div>
-
-</div>
-
-{% if not event.isHiddenPlanning or is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
-<section>
-  <hr />
-  <div id="planning">
-    {{ component('Planning', {event: event,pathFullSlot: 'app_participation'}) }}
-  </div>
-</section>
-{% endif %}
-
-{% endblock %}

templates/main/booking.info.html.twig

@@ -0,0 +1,89 @@
+{% extends 'bulma.html.twig' %}
+
+{% block title %}Réservations pour {{ event.name }}{% endblock %}
+
+{% block content %}
+
+{{ component('Modal')}}
+
+<div class="columns">
+  <div class="column is-one-third">
+		<div class="card event-selector" {{ stimulus_controller('dropdown')}} >
+  		<div class="card-image">
+    		<figure class="image is-3by1">
+          {% if event.picture %}
+          <img src="/images/events/{{ event.picture }}" />
+          {% else %}
+          <img src="/images/events/placeholder.webp" />
+          {% endif %}
+    		</figure>
+  	  </div>
+  	  <div class="card-footer">
+    		<div class="dropdown card-footer-item is-flex is-justify-content-space-between is-align-items-center" data-action="click->dropdown#toggle">
+      	  <button>
+        		<span><strong>{{ event.name }}</strong></span>        
+      	  </button>
+          {% if events|length > 1 %}
+      		<span class="icon is-small">
+        		<twig:ux:icon name="bi:chevron-down" />&nbsp;
+      		</span>
+      		<div data-dropdown-target="menu" class="dropdown-menu">
+        		<div class="dropdown-content">
+              {% for evt in events %}
+                {% if event.id != evt.id %}
+          				<a href="{{ path('app_main_booking', {id: evt.id})}}" class="dropdown-item"><strong>{{ evt.name }}</strong><small> du {{ evt.startOn|date('d/m/y H:i', app_timezone) }} au {{ evt.endOn|date('d/m/y H:i', app_timezone)}}</small></a>
+                {% endif %}
+              {% endfor %}
+        		</div>
+      		</div>
+          {% endif %}
+    		</div>
+  		</div>
+		</div>
+	</div>
+	
+	<div class="column">
+  	<div class="hero is-small">
+    	<div class="hero-body">
+      	<h2 class="title is-2">{{ event.name }}{% if event.moreLink %}<a href="{{ event.moreLink }}" target="_blank" title="En savoir plus sur le site de l'événement.">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:link-45deg"/></small></a>{% endif %}<a href="{{ app_url|replace({'https://':'webcal://'}) }}{{ path('app_main_ics', {id: event.id}) }}" target="_blank" title="Ajouter à mon agenda">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:calendar-plus"/></small></a></h2> 
+      	<p class="subtitle is-4">du {{ event.startOn|date('d/m/y à H:i', app_timezone) }} au {{ event.endOn|date('d/m/y à H:i', app_timezone)}}</p>
+      	<article>
+        	<p>{{ event.description }}</p>
+        </article>
+    	</div>
+  	</div>
+	</div>
+
+</div>
+
+{% if event.isEveryoneCanAskForGame %}
+<div class="block is-clearfix">
+	<div class="message is-info">
+	  <div class="message-body">
+    	<p class="block">Cet événement vous propose de demander votre parties ! Choissez un jeu, choissez un(e) meneur(euse) de jeu et nous planifierons, si possible votre partie.</p> 
+    	{%  if is_granted('ROLE_USER') %}
+    	<p class="block"><a href="{{ path('app_party_request', {id: event.id}) }}" class="button is-info open-modal">Demander une partie</a></p>
+    	{% else %}
+    	<p>Vous devez disposer d'un compte utilisateur pour réaliser une demande. <a href="{{ app_url }}login">Connectez-vous ou créez un compte.</a></p>
+    	{% endif %}
+    </div>
+	</div>
+</div>
+{% endif %}
+
+{% if not event.isHiddenPlanning or is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
+<div class="tabs is-boxed">
+	<ul>
+		<li class="is-active"><a>Informations</a></li>
+		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'pictures'}) }}">Vignettes</a></li>
+ 		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'planning'}) }}">Planning</a></li>
+	</ul>
+</div>
+{%  endif %}
+
+
+<section class="container">
+</section>
+
+
+{% endblock %}

templates/main/booking.pictures.html.twig

@@ -0,0 +1,101 @@
+{% extends 'bulma.html.twig' %}
+
+{% block title %}Réservations pour {{ event.name }}{% endblock %}
+
+{% block content %}
+
+{{ component('Modal')}}
+
+<div class="columns">
+  <div class="column is-one-third">
+		<div class="card event-selector" {{ stimulus_controller('dropdown')}} >
+  		<div class="card-image">
+    		<figure class="image is-3by1">
+          {% if event.picture %}
+          <img src="/images/events/{{ event.picture }}" />
+          {% else %}
+          <img src="/images/events/placeholder.webp" />
+          {% endif %}
+    		</figure>
+  	  </div>
+  	  <div class="card-footer">
+    		<div class="dropdown card-footer-item is-flex is-justify-content-space-between is-align-items-center" data-action="click->dropdown#toggle">
+      	  <button>
+        		<span><strong>{{ event.name }}</strong></span>        
+      	  </button>
+          {% if events|length > 1 %}
+      		<span class="icon is-small">
+        		<twig:ux:icon name="bi:chevron-down" />&nbsp;
+      		</span>
+      		<div data-dropdown-target="menu" class="dropdown-menu">
+        		<div class="dropdown-content">
+              {% for evt in events %}
+                {% if event.id != evt.id %}
+          				<a href="{{ path('app_main_booking', {id: evt.id})}}" class="dropdown-item"><strong>{{ evt.name }}</strong><small> du {{ evt.startOn|date('d/m/y H:i', app_timezone) }} au {{ evt.endOn|date('d/m/y H:i', app_timezone)}}</small></a>
+                {% endif %}
+              {% endfor %}
+        		</div>
+      		</div>
+          {% endif %}
+    		</div>
+  		</div>
+		</div>
+	</div>
+	
+	<div class="column">
+  	<div class="hero is-small">
+    	<div class="hero-body">
+      	<h2 class="title is-2">{{ event.name }}{% if event.moreLink %}<a href="{{ event.moreLink }}" target="_blank" title="En savoir plus sur le site de l'événement.">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:link-45deg"/></small></a>{% endif %}<a href="{{ app_url|replace({'https://':'webcal://'}) }}{{ path('app_main_ics', {id: event.id}) }}" target="_blank" title="Ajouter à mon agenda">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:calendar-plus"/></small></a></h2> 
+      	<p class="subtitle is-4">du {{ event.startOn|date('d/m/y à H:i', app_timezone) }} au {{ event.endOn|date('d/m/y à H:i', app_timezone)}}</p>
+      	<article>
+        	<p>{{ event.description }}</p>
+        </article>
+    	</div>
+  	</div>
+	</div>
+
+</div>
+
+{% if event.isEveryoneCanAskForGame %}
+<div class="block is-clearfix">
+	<div class="message is-info">
+	  <div class="message-body">
+    	<p class="block">Cet événement vous propose de demander votre partie ! Choissez un jeu, choissez un(e) meneur(euse) de jeu et nous planifierons, si possible votre partie.</p> 
+    	{%  if is_granted('ROLE_USER') %}
+    	<p class="block"><a href="{{ path('app_party_request', {id: event.id}) }}" class="button is-info open-modal">Demander une partie</a></p>
+    	{% else %}
+    	<p>Vous devez disposer d'un compte utilisateur pour réaliser une demande. <a href="{{ app_url }}login">Connectez-vous ou créez un compte.</a></p>
+    	{% endif %}
+    </div>
+	</div>
+</div>
+{% endif %}
+
+{% if not event.isHiddenPlanning or is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
+<div class="tabs is-boxed">
+	<ul>
+		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'info'}) }}">Informations</a></li>
+		<li class="is-active"><a>Vignettes</a></li>
+ 		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'planning'}) }}">Planning</a></li>
+	</ul>
+</div>
+{%  endif %}
+
+{% if not event.isHiddenPlanning or is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
+<section class="container">
+  <div id="pictures">
+    {{ component('Pictures', {event: event,pathLink: 'app_participation'}) }}
+  </div>
+</section>
+{% else %}
+<div class="block message is-danger">
+	<div class="message-header">
+	<p>Accès réservé</p>
+	</div>
+	<div class="message-body">
+	<p>L'affichage du planning est réservé aux gestionnaires de l'événement.</p>
+	</div>
+</div>
+{% endif %}
+
+{% endblock %}

templates/main/booking.planning.html.twig

@@ -0,0 +1,101 @@
+{% extends 'bulma.html.twig' %}
+
+{% block title %}Réservations pour {{ event.name }}{% endblock %}
+
+{% block content %}
+
+{{ component('Modal')}}
+
+<div class="columns">
+  <div class="column is-one-third">
+		<div class="card event-selector" {{ stimulus_controller('dropdown')}} >
+  		<div class="card-image">
+    		<figure class="image is-3by1">
+          {% if event.picture %}
+          <img src="/images/events/{{ event.picture }}" />
+          {% else %}
+          <img src="/images/events/placeholder.webp" />
+          {% endif %}
+    		</figure>
+  	  </div>
+  	  <div class="card-footer">
+    		<div class="dropdown card-footer-item is-flex is-justify-content-space-between is-align-items-center" data-action="click->dropdown#toggle">
+      	  <button>
+        		<span><strong>{{ event.name }}</strong></span>        
+      	  </button>
+          {% if events|length > 1 %}
+      		<span class="icon is-small">
+        		<twig:ux:icon name="bi:chevron-down" />&nbsp;
+      		</span>
+      		<div data-dropdown-target="menu" class="dropdown-menu">
+        		<div class="dropdown-content">
+              {% for evt in events %}
+                {% if event.id != evt.id %}
+          				<a href="{{ path('app_main_booking', {id: evt.id})}}" class="dropdown-item"><strong>{{ evt.name }}</strong><small> du {{ evt.startOn|date('d/m/y H:i', app_timezone) }} au {{ evt.endOn|date('d/m/y H:i', app_timezone)}}</small></a>
+                {% endif %}
+              {% endfor %}
+        		</div>
+      		</div>
+          {% endif %}
+    		</div>
+  		</div>
+		</div>
+	</div>
+	
+	<div class="column">
+  	<div class="hero is-small">
+    	<div class="hero-body">
+      	<h2 class="title is-2">{{ event.name }}{% if event.moreLink %}<a href="{{ event.moreLink }}" target="_blank" title="En savoir plus sur le site de l'événement.">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:link-45deg"/></small></a>{% endif %}<a href="{{ app_url|replace({'https://':'webcal://'}) }}{{ path('app_main_ics', {id: event.id}) }}" target="_blank" title="Ajouter à mon agenda">&nbsp;<small class="icon is-6"><twig:ux:icon name="bi:calendar-plus"/></small></a></h2> 
+      	<p class="subtitle is-4">du {{ event.startOn|date('d/m/y à H:i', app_timezone) }} au {{ event.endOn|date('d/m/y à H:i', app_timezone)}}</p>
+      	<article>
+        	<p>{{ event.description }}</p>
+        </article>
+    	</div>
+  	</div>
+	</div>
+
+</div>
+
+{% if event.isEveryoneCanAskForGame %}
+<div class="block is-clearfix">
+	<div class="message is-info">
+	  <div class="message-body">
+    	<p class="block">Cet événement vous propose de demander votre partie ! Choissez un jeu, choissez un(e) meneur(euse) de jeu et nous planifierons, si possible votre partie.</p> 
+    	{%  if is_granted('ROLE_USER') %}
+    	<p class="block"><a href="{{ path('app_party_request', {id: event.id}) }}" class="button is-info open-modal">Demander une partie</a></p>
+    	{% else %}
+    	<p>Vous devez disposer d'un compte utilisateur pour réaliser une demande. <a href="{{ app_url }}login">Connectez-vous ou créez un compte.</a></p>
+    	{% endif %}
+    </div>
+	</div>
+</div>
+{% endif %}
+
+{% if not event.isHiddenPlanning or is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
+<div class="tabs is-boxed">
+	<ul>
+		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'info'}) }}">Informations</a></li>
+		<li><a href="{{ path('app_main_booking', {id: event.id, view: 'pictures'}) }}">Vignettes</a></li>
+ 		<li class="is-active"><a>Planning</a></li>
+	</ul>
+</div>
+{%  endif %}
+
+{% if not event.isHiddenPlanning or is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
+<section class="container">
+  <div id="planning">
+    {{ component('Planning', {event: event,pathFullSlot: 'app_participation'}) }}
+  </div>
+</section>
+{% else %}
+<div class="block message is-danger">
+	<div class="message-header">
+	<p>Accès réservé</p>
+	</div>
+	<div class="message-body">
+	<p>L'affichage du planning est réservé aux gestionnaires de l'événement.</p>
+	</div>
+</div>
+{% endif %}
+
+{% endblock %}

templates/main/index.html.twig

@@ -3,6 +3,7 @@
 {% block title %}Bienvenue !{% endblock %}
 
 {% block content %}
+
 <div class="fixed-grid has-3-cols-fullhd has-3-cols-widescreen has-2-cols-desktop has-2-cols-tablet has-1-cols-mobile">
         <div class="grid is-col-min-12">
           {% for event in events %}
@@ -11,7 +12,7 @@
             
             <div class="card">
               <div class="card-image">
-                <a href="{{ path('app_main_booking', {id: event.id}) }}" title="Réserver une place">
+                <a href="{{ path('app_main_booking', {id: event.id, 'view': 'pictures'}) }}" title="Réserver une place">
                   <figure class="image is-3by1">
 
                       {% if event.picture %}
@@ -38,7 +39,7 @@
 
               </div>
               <div class="card-footer">
-                <a class="card-footer-item" href="{{ path('app_main_booking', {id: event.id}) }}">Réserver une place</a>
+                <a class="card-footer-item" href="{{ path('app_main_booking', {id: event.id, 'view': 'pictures'}) }}">Réserver une place</a>
                 {% if is_granted('ROLE_MANAGER') or is_granted('ROLE_ADMIN') %}
                 <a class="card-footer-item" href="{{ path('app_manage_planning', {id: event.id}) }}">Gérer</a>
                 {% endif %}