orgasso/templates/components/Planning.html.twig

{# Template pour les plannings #}

{% set cols = event.getSpaces()|length +1 %}

{# début du block de grille #}
<div class="block">
    {# Nombre de colonnes = nombre d'espaces + colonne d'intro #}
    <div class="fixed-grid has-{{ cols }}-cols">
        <div class="grid is-gap-0">

            {# en-tête avec les noms des espaces #}
            <div class="cell is-coll-start planning-cell planning-cell-heading">
                Espaces
            </div>
            {% for space in event.getSpaces() %}
            <div class="cell planning-cell planning-cell-heading">
                {{ space.name }}
            </div>
            {% endfor %}

            {# On ajoute les horaires période par période #}
            {% for period in event.getPeriods() %}
                <div class="cell planning-cell planning-cell-wide is-col-span-{{ cols }}">
                    Période du {{ period.startOn|date('d/m/Y H:i', app_timezone) }} à {{ period.endOn|date('H:i', app_timezone) }}
                </div>

                {# On affiche tous les slots de la période, space par space #}
                {% for dateRef in this.getDateOrdered(period) %}
                    <div class="cell planning-cell planning-cell-heading">
                        {{ dateRef|date('H:i', app_timezone) }}
                    </div>
                    {% for space in event.getSpaces() %}
                        {# extraction du slot de cet espace, ce moment et cette période #}
                        {# set thisSlot = this.getThisSlot(dateRef, space, period) #}
                        {% set thisSlot = this.getThisSlotInfo(dateRef, space, period) %}

                        {# si le slot est Indisponible #}
                        {% if thisSlot.unavailable %}
                            {% if displayLocked %}
                            <div class="cell planning-cell planning-cell-locked  has-text-centered" data-id="{{ thisSlot.id }}">
                                <div class="icon"><twig:ux:icon name="bi:lock-fill" /></div>
                            </div>
                            {% else %}
                            <div class="cell planning-cell planning-cell-locked">
                            </div>
                            {% endif %}
                        {% endif %}
                        {# si une partie est sur le slot #}
                        {% if thisSlot.party  %}
                            {% if thisSlot.party.isValidated or displayUnvalidates %}
                                {% if thisSlot == thisSlot.party.slots[0] %}
                                {# Premier slot d'une partie ou partie non validée #}
                                <div class="cell planning-cell planning-cell-game-parent">
                                    <div class="planning-cell-game {% if thisSlot.party.getSeatsLeft < 1 %}planning-cell-game-isfull {% endif %}{% if pathFullSlot %} open-modal" href="{{ path(pathFullSlot, {id: thisSlot.id}) }}"{% else %}"{% endif %} style="height: {{ thisSlot.party.slots|length * 4 * app_hmult }}rem !important">
                                      {# Carte "jeu" DEBUT #}
                                        <div class="card has-background-primary-45 has-text-primary-45-invert" style="{% if thisSlot.party.game.picture %}background-image: url('/images/games/{{ thisSlot.party.game.picture }}');{% endif %} height: {{ thisSlot.party.slots|length * 4 * app_hmult - 0.7 }}rem !important; {% if not thisSlot.party.isValidated %}filter:grayscale(1) opacity(0.3);{% endif %};">
                                            
                                                <div class="card-header">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <figure class="image is-48x48">
                                                                
                                                                {% if thisSlot.party.gamemaster.picture %}
                                                                <img class="is-rounded" src="/images/gamemasters/{{ thisSlot.party.gamemaster.picture }}"  />
                                                                {% else %}
                                                                <twig:ux:icon name="bi:person-fill"/>
                                                                {% endif %}
                                                                
                                                            </figure>
                                                        </div>
                                                    </div>
                                                        <div class="media-content">
                                                            <small class="hax-text-grey-light">{{ thisSlot.party.gamemaster.preferedName }}</small><br/>
                                                            <span class="title is-6 has-text-primary-45-invert">{{ thisSlot.party.game.name }}</span>
                                                            
                                                        </div>

                                                </div>
                                                <div class="card-content">
                                                    <p><span class="tag is-dark m-1">Places : {{ thisSlot.party.getSeatsLeft }}/{{ thisSlot.party.getMaxParticipants }}</span></p>
                                                    {% if thisSlot.party.gamemasterIsAuthor %}<p><span class="tag is-warning m-1">partie animée par l'auteur</span></p>{% endif %}
                                                    <p>{% for genre in thisSlot.party.game.genre %}<span class="tag is-info m-1">{{ genre.genre }}</span>{% endfor %}</p>
                                                    
                                                </div>

                                            {% if pathFullSlot %}</a>{% endif %}
                                        </div>                             
                                      {# Carte "jeu" FIN #}
                                    </div>
                                </div>
                                {% else %}
                                {# Slot suivant d'une partie #}
                                <div class="cell planning-cell planning-cell-game-parent">
                                </div>
                                {% endif %}
                            {% else %}
                                {# Partie non validée masquée #}
                                <div class="cell planning-cell planning-cell-free">
                                </div>
                            {% endif %}
                        {% endif %}
                        {# si le slot est disponible et sans partie #}
                        {% if not thisSlot.unavailable and not thisSlot.party %}
                            {% if pathEmptySlot %}
                            <a href="{{ path(pathEmptySlot, {id: thisSlot.id}) }}"  class="open-modal">
                            <div class="cell planning-cell planning-cell-free has-text-centered" data-id="{{ thisSlot.id }}">
                                <div class="icon"><twig:ux:icon name="bi:plus-circle" /></div>
                            </div>
                            </a>
                            {% elseif displayLocked %}
                            <div class="cell planning-cell planning-cell-free has-text-centered" data-id="{{ thisSlot.id }}">
                                <div class="icon"><twig:ux:icon name="bi:unlock-fill" /></div>
                            </div>
                            {% else %}
                            <div class="cell planning-cell planning-cell-free" data-id="{{ thisSlot.id }}">
                                
                            </div>                            
                            {% endif %}

                        {% endif %}               

                    {% endfor %}
                {% endfor %}

            {% endfor %}

{# fin du block de grille #}
        </div>
    </div>
</div>