padelclub_backend/tournaments/templates/tournaments/broadcast/broadcasted_rankings.html

{% extends 'tournaments/broadcast/broadcast_base.html' %}

{% block head_title %}Classement{% endblock %}
{% block first_title %}{{ tournament.broadcast_event_display_name }}{% endblock %}
{% block second_title %}Classement {{ tournament.broadcast_display_name }}{% endblock %}
{% block sponsors %}
    {% if tournament.event.images.exists %}
    <div class="bubble" style="display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0;">
        <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center;">
            {% for image in tournament.event.images.all %}
                <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
                     style="max-height: 100px; max-width: 100px; object-fit: contain;">
            {% endfor %}
        </div>
    </div>
    {% endif %}
{% endblock %}
{% block content %}

{% load static %}

<div x-data="{
        paginatedRankings: null,
        active: 1,
        retrieveRankings() {
            fetch('/tournament/{{ tournament.id }}/rankings/json/')
                .then(res => res.json())
                .then((data) => {

                let pageSize = 16
                this.paginatedRankings = this.paginate(data, pageSize)

                const splitGroups = [];
                this.paginatedRankings.forEach(group => {
                    const firstHalf = group.slice(0, pageSize / 2);
                    const secondHalf = group.slice(pageSize / 2);
                    if (secondHalf.length > 0) {
                        splitGroups.push([firstHalf, secondHalf]);
                    } else {
                        splitGroups.push([firstHalf]);
                    }
                });
                this.paginatedRankings = splitGroups;

                })
        },
        paginate(array, pageSize) {
            let paginatedArray = [];
            for (let i = 0; i < array.length; i += pageSize) {
                paginatedArray.push(array.slice(i, i + pageSize));
            }
            return paginatedArray;
        },
        loop() {
            this.retrieveRankings()
            setInterval(() => {
                this.retrieveRankings()
                this.active = this.active === this.paginatedRankings.length ? 1 : this.active+1
            }, 15000)
        }

    }" x-init="loop()">

    <div class="grid-x">
        <template x-for="i in paginatedRankings.length" >
            <template x-for="column in paginatedRankings[i-1]" >
                <div class="cell medium-6 large-6 topblock padding10" x-show="active === i">
                    {% include 'tournaments/broadcast/broadcasted_ranking.html' %}
                </div>
            </template>
        </template>
    </div>
</div>

{% endblock %}