Adds broadcast page for rankings

tournaments/models/tournament.py

@@ -185,7 +185,7 @@ class Tournament(models.Model):
                 team = TeamRanking(names, ranking, points, team_registration.logo)
                 rankings.append(team)
 
-        rankings.sort(key=lambda s: s.ranking)
+        rankings.sort(key=lambda r: r.ranking)
         return rankings
 
     def teams(self):
@@ -628,16 +628,17 @@ class TeamRanking:
     def __init__(self, names, ranking, points, image):
         self.names = names
         self.ranking = ranking
-        self.points = points
+        self.formatted_ranking = self.ordinal(ranking)
+        self.points = self.points_earned_display(points)
         self.image = image
 
-    def ranking_display(self):
-        return self.ordinal(self.ranking)
+    # def ranking_display(self):
+    #     return self.ordinal(self.ranking)
 
-    def points_earned_display(self):
-        if self.points is None:
+    def points_earned_display(self, points):
+        if points is None:
             return ""
-        return f"+{self.points} pt{self.plural_suffix(self.points)}"
+        return f"+{points} pt{self.plural_suffix(points)}"
 
     def plural_suffix(self, n):
         if n > 1:
@@ -656,7 +657,8 @@ class TeamRanking:
     def to_dict(self):
         return {
             "names": self.names,
-            "ranking": self.ranking_display(),
-            "points": self.points_earned_display(),
+            "ranking": self.ranking,
+            "formatted_ranking": self.formatted_ranking,
+            "points": self.points,
             "image": self.image,
         }

tournaments/static/tournaments/css/style.css

@@ -200,6 +200,10 @@ tr {
     padding-top: 4px;
 }
 
+.padding-left {
+    padding-left: 10px;
+}
+
 .names {
     /* width: 70%; */
 }
@@ -605,6 +609,15 @@ h-margin {
 }
 
 
+.table-row-3-colums-ranks {
+    display: grid;
+    grid-template-columns: 80px 1fr auto ;
+    /* first column is a hack */
+    align-items: center;
+    /* Vertically center the content within each column */
+    padding: 5px 0px;
+}
+
 .table-row-3-colums-teams {
     display: grid;
     grid-template-columns: 1px auto auto 80px;

tournaments/templates/tournaments/broadcast.html

@@ -15,6 +15,7 @@
         <div><a href="{% url 'broadcasted-matches' tournament.id %}">Matchs</a></div>
         <div><a href="{% url 'broadcasted-group-stages' tournament.id %}">Poules</a></div>
         <div><a href="{% url 'broadcasted-summons' tournament.id %}">Convocations</a></div>
+        <div><a href="{% url 'broadcasted-rankings' tournament.id %}">Classement</a></div>
     </div>
 
     </div>

tournaments/templates/tournaments/broadcast_club.html

@@ -33,6 +33,7 @@
                         <span><a href="{% url 'broadcasted-matches' tournament.id %}">Matchs</a></span> |
                         <span><a href="{% url 'broadcasted-group-stages' tournament.id %}">Poules</a></span> |
                         <span><a href="{% url 'broadcasted-summons' tournament.id %}">Convocations</a></span>
+                        <span><a href="{% url 'broadcasted-rankings' tournament.id %}">Classement</a></span>
                     </div>
 
                 </div>

tournaments/templates/tournaments/broadcasted_ranking.html

@@ -0,0 +1,14 @@
+{% load static %}
+
+        <div class="table-row-3-colums-ranks bottom-border">
+
+            <div class="table-cell"><div class="mybox center"><span x-text="ranking.formatted_ranking"></div></div>
+            <div class="table-cell table-cell-large padding-left semibold">
+
+                <template x-for="name in ranking.names" >
+                    <div><span x-text="name"></div>
+                </template>
+            </div>
+
+            <div class="table-cell right horizontal-padding"><span x-text="ranking.points"></div>
+        </div>

tournaments/templates/tournaments/broadcasted_rankings.html

@@ -0,0 +1,71 @@
+{% extends 'tournaments/broadcast_base.html' %}
+
+{% block head_title %}Classement{% endblock %}
+{% block first_title %}{{ tournament.display_name }}{% endblock %}
+{% block second_title %}Classement{% 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 = 20
+                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 my-block" x-show="active === i">
+
+                    <div class="bubble">
+                        <template x-for="ranking in column" >
+
+                            {% include 'tournaments/broadcasted_ranking.html' %}
+
+                        </template>
+                    </div>
+                </div>
+            </template>
+        </template>
+    </div>
+</div>
+
+{% endblock %}

tournaments/templates/tournaments/ranking_row.html

@@ -1,13 +1,13 @@
 {% load static %}
 
-        <div class="table-row-3-colums-teams bottom-border">
+        <div class="table-row-3-colums-ranks bottom-border">
 
-            <div class="table-cell table-cell-large semibold">
+            <div class="table-cell"><div class="mybox center">{{ ranking.formatted_ranking }}</div></div>
+            <div class="table-cell table-cell-large padding-left semibold">
                 {% for name in ranking.names %}
                 <div>{{ name }}</div>
                 {% endfor %}
             </div>
 
-            <div class="table-cell right horizontal-padding">{{ ranking.points_earned_display }}</div>
-            <div class="table-cell"><div class="mybox center">{{ ranking.ranking_display }}</div></div>
+            <div class="table-cell right horizontal-padding">{{ ranking.points }}</div>
         </div>

tournaments/urls.py

@@ -11,7 +11,6 @@ urlpatterns = [
         include([
             path('', views.tournament, name='tournament'),
             path('teams/', views.tournament_teams, name='tournament-teams'),
-            path('rankings/', views.tournament_rankings, name='tournament-rankings'),
             path('summons/', views.tournament_summons, name='tournament-summons'),
             path('broadcast/summons/', views.tournament_broadcasted_summons, name='broadcasted-summons'),
             path('summons/json/', views.tournament_summons_json, name='tournament-summons-json'),
@@ -23,6 +22,9 @@ urlpatterns = [
             path('broadcast/group-stages/', views.tournament_broadcasted_group_stages, name='broadcasted-group-stages'),
             path('group-stages/', views.tournament_group_stages, name='group-stages'),
             path('group-stages/json/', views.tournament_live_group_stage_json, name='group-stages-json'),
+            path('rankings/', views.tournament_rankings, name='tournament-rankings'),
+            path('rankings/json/', views.tournament_rankings_json, name='tournament-rankings-json'),
+            path('broadcast/rankings/', views.tournament_broadcast_rankings, name='broadcasted-rankings'),
         ])
     ),
     path('players/', views.players, name='players'),

tournaments/views.py

@@ -45,7 +45,6 @@ def index(request):
         if tournament.display_tournament():
             filtered_after_tomorrow_tournaments.append(tournament)
 
-
     unfinished_tournaments = Tournament.objects.filter(*q_unfinished).order_by('start_date')
 
     live_tournaments = []
@@ -102,16 +101,6 @@ def tournament(request, tournament_id):
         'match_groups': match_groups,
     })
 
-def tournament_rankings(request, tournament_id):
-
-    tournament = get_object_or_404(Tournament, pk=tournament_id)
-    rankings = tournament.rankings()
-
-    return render(request, 'tournaments/rankings.html', {
-        'tournament': tournament,
-        'rankings': rankings,
-    })
-
 def tournament_teams(request, tournament_id):
 
     tournament = get_object_or_404(Tournament, pk=tournament_id)
@@ -215,6 +204,30 @@ def tournament_live_group_stage_json(request, tournament_id):
     data = json.dumps(gs_dicts)
     return HttpResponse(data, content_type='application/json')
 
+def tournament_rankings(request, tournament_id):
+    tournament = get_object_or_404(Tournament, pk=tournament_id)
+    rankings = tournament.rankings()
+
+    return render(request, 'tournaments/rankings.html', {
+        'tournament': tournament,
+        'rankings': rankings,
+    })
+
+def tournament_rankings_json(request, tournament_id):
+    tournament = get_object_or_404(Tournament, pk=tournament_id)
+    rankings = tournament.rankings()
+
+    data = json.dumps(rankings, default=vars)
+    return HttpResponse(data, content_type='application/json')
+
+def tournament_broadcast_rankings(request, tournament_id):
+    tournament = get_object_or_404(Tournament, pk=tournament_id)
+    return render(request, 'tournaments/broadcasted_rankings.html', {
+        'tournament': tournament,
+        'qr_code_url': qr_code_url(request, tournament_id),
+        'qr_code_options': qr_code_options(),
+    })
+
 def players(request):
     return render(request, 'tournaments/test.html')