From 7ac58ffd7397cbca4a2b6b2912fbfb33f284979b Mon Sep 17 00:00:00 2001
From: Laurent <laurent@staxriver.com>
Date: Thu, 28 Mar 2024 16:31:25 +0100
Subject: [PATCH] First commit for broadcast page

---
 tournaments/models/group_stage.py             |  10 +-
 tournaments/models/match.py                   |  19 +++
 tournaments/models/round.py                   |   2 +-
 tournaments/models/tournament.py              |   4 +-
 .../templates/tournaments/broadcasted.html    |  90 +++++++++++
 .../tournaments/broadcasted_group_stage.html  |  48 ++++++
 .../tournaments/broadcasted_match.html        |  63 ++++++++
 .../tournaments/broadcasted_matches.html      | 140 +++++++++---------
 .../tournaments/broadcasted_summon.html       |  15 ++
 .../tournaments/broadcasted_summons.html      |   6 -
 tournaments/urls.py                           |   1 +
 tournaments/views.py                          |  22 ++-
 12 files changed, 334 insertions(+), 86 deletions(-)
 create mode 100644 tournaments/templates/tournaments/broadcasted.html
 create mode 100644 tournaments/templates/tournaments/broadcasted_group_stage.html
 create mode 100644 tournaments/templates/tournaments/broadcasted_match.html
 create mode 100644 tournaments/templates/tournaments/broadcasted_summon.html

diff --git a/tournaments/models/group_stage.py b/tournaments/models/group_stage.py
index f63f13b..b9efcaf 100644
--- a/tournaments/models/group_stage.py
+++ b/tournaments/models/group_stage.py
@@ -142,8 +142,8 @@ class GroupStageTeam:
             return f"{self.diff}"
 
     def to_dict(self):
-            return {
-                "names": self.names,
-                "win_loss": self.wins_losses(),
-                "diff": self.formatted_diff()
-            }
+        return {
+            "names": self.names,
+            "win_loss": self.wins_losses(),
+            "diff": self.formatted_diff()
+        }
diff --git a/tournaments/models/match.py b/tournaments/models/match.py
index d0c05d8..a163f2c 100644
--- a/tournaments/models/match.py
+++ b/tournaments/models/match.py
@@ -155,6 +155,15 @@ class Team:
         self.weight = weight
         self.is_winner = is_winner
 
+    # def to_dict(self):
+    #     return {
+    #         "image": self.image,
+    #         "names": self.names,
+    #         "scores": self.scores,
+    #         "weight": self.weight,
+    #         "is_winner": self.is_winner,
+    #     }
+
 class LiveMatch:
     def __init__(self, title, date, duration, court, started):
         self.title = title
@@ -166,3 +175,13 @@ class LiveMatch:
 
     def add_team(self, team):
         self.teams.append(team)
+
+    # def to_dict(self):
+    #     return {
+    #         "title": self.title,
+    #         "date": self.date,
+    #         "teams": [team.to_dict() for team in self.teams],
+    #         "duration": self.duration,
+    #         "court": self.court,
+    #         "started": self.started,
+    #     }
diff --git a/tournaments/models/round.py b/tournaments/models/round.py
index 627efaa..0a8b2c0 100644
--- a/tournaments/models/round.py
+++ b/tournaments/models/round.py
@@ -42,6 +42,6 @@ class Round(models.Model):
         return matches
 
     def all_matches(self):
-        matches = self.match_set.all()
+        matches = list(self.match_set.all())
         matches.extend(self.ranking_matches(True))
         return matches
diff --git a/tournaments/models/tournament.py b/tournaments/models/tournament.py
index 7ee277a..a43206b 100644
--- a/tournaments/models/tournament.py
+++ b/tournaments/models/tournament.py
@@ -151,7 +151,7 @@ class Tournament(models.Model):
         else:
             matches = self.group_stages_matches()
 
-        return matches
+        return [match.live_match() for match in matches]
 
     def last_match(self):
         matches = []
@@ -161,7 +161,7 @@ class Tournament(models.Model):
             matches.extend(group_stage.match_set.all())
 
         matches = [m for m in matches if m.start_date]
-        matches.sort(key=lambda m: -m.start_date)
+        matches.sort(key=lambda m: m.start_date, reverse=True)
         return matches[0]
 
     def round_for_index(self, index):
diff --git a/tournaments/templates/tournaments/broadcasted.html b/tournaments/templates/tournaments/broadcasted.html
new file mode 100644
index 0000000..176220e
--- /dev/null
+++ b/tournaments/templates/tournaments/broadcasted.html
@@ -0,0 +1,90 @@
+{% extends 'tournaments/broadcast_base.html' %}
+
+{% block head_title %}Convocations{% endblock %}
+{% block first_title %}{{ tournament.name }}{% endblock %}
+{% block second_title %}Convocations{% endblock %}
+
+{% block content %}
+
+{% load static %}
+
+<div x-data="{
+        paginatedMatches: null,
+        paginatedGroupStages: null,
+        paginatedSummons: null,
+        active: 1,
+        retrieveData() {
+            fetch('/tournament/{{ tournament.id }}/broadcast/json/')
+                .then(res => res.json())
+                .then((data) => {
+                    this.paginatedMatches = this.paginate(data.matches, 8)
+                    this.paginatedGroupStages = this.paginate(data.group_stages, 4)
+                    this.paginatedSummons = this.paginateSummons(data.summons)
+                })
+        },
+        paginateSummons(array) {
+            let pageSize = 20
+            pages = this.paginate(array, pageSize)
+
+            const splitGroups = []
+            pages.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])
+                }
+            });
+            return 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.retrieveData()
+            setInterval(() => {
+                this.retrieveData()
+                this.active = this.active === this.pageCount() ? 1 : this.active+1
+            }, 15000)
+        },
+        pageCount() {
+            return this.paginatedMatches.length + this.paginatedGroupStages.length + this.paginatedSummons.length
+        }
+
+    }" x-init="loop()">
+
+    <div class="grid-x">
+
+        <template x-for="i in paginatedSummons.length">
+            <template x-for="column in paginatedSummons[i-1]">
+                <div class="cell medium-6 large-6 topblock my-block" x-show="active === i">
+                    {% include 'tournaments/broadcasted_summon.html' %}
+                </div>
+            </template>
+        </template>
+
+        <template x-for="i in paginatedMatches.length" >
+            <template x-for="match in paginatedMatches[i-1]" >
+                <div class="cell medium-6 large-3 my-block" x-show="active === i + paginatedSummons.length">
+                    {% include 'tournaments/broadcasted_match.html' %}
+                </div>
+            </template>
+        </template>
+
+        <template x-for="i in paginatedGroupStages.length">
+            <template x-for="group_stage in paginatedGroupStages[i-1]">
+                <div class="cell medium-6 large-3 my-block" x-show="active === i + paginatedSummons.length + paginatedMatches.length">
+                    {% include 'tournaments/broadcasted_group_stage.html' %}
+                </div>
+            </template>
+        </template>
+
+    </div>
+</div>
+
+{% endblock %}
diff --git a/tournaments/templates/tournaments/broadcasted_group_stage.html b/tournaments/templates/tournaments/broadcasted_group_stage.html
new file mode 100644
index 0000000..463a48a
--- /dev/null
+++ b/tournaments/templates/tournaments/broadcasted_group_stage.html
@@ -0,0 +1,48 @@
+<div class="dark_bubble">
+
+    <div class="flex-row">
+        <label class="left-label matchtitle winner"><span x-text="group_stage.title"></span></label>
+        <!-- <label class="right-label info"><span x-text="group_stage.date"></span></label> -->
+    </div>
+
+    <template x-for="i in group_stage.teams.length">
+
+            <div>
+                <div class="table-row-2-colums team-names-box padding-bottom-small">
+
+                    <div class="table-cell table-cell-large">
+                        <template x-for="name in group_stage.teams[i-1].names">
+
+                            <div class="semibold" x-data="{
+                                showName(name, team) {
+                                    let html = `<span class='`
+                                    if (team.is_winner) html += `winner`
+                                    html += `'>`
+                                    html += name
+                                    html += `</span>`
+                                    return html
+                                },
+                                }" x-html="showName(name, group_stage.teams[i-1])">
+                            </div>
+                        </template>
+
+                    </div>
+                    <div class="table-cell center">
+                        <div class="score ws"><span x-text="group_stage.teams[i-1].win_loss"></span></div>
+                        <div class="ws"><span x-text="group_stage.teams[i-1].diff"></span></div>
+                    </div>
+                </div>
+
+                <div x-show="i != group_stage.teams.length">
+                    <div class="dark-bottom-border"></div>
+                </div>
+
+            </div>
+    </template>
+
+    <div class="top-margin flex-row">
+        <label class="left-label minor-info"><span class="beige" x-text="group_stage.duration"></span></label>
+        <!-- <label class="right-label minor-info"><span x-text="group_stage.court"></span></label> -->
+    </div>
+
+</div>
diff --git a/tournaments/templates/tournaments/broadcasted_match.html b/tournaments/templates/tournaments/broadcasted_match.html
new file mode 100644
index 0000000..7a07e7e
--- /dev/null
+++ b/tournaments/templates/tournaments/broadcasted_match.html
@@ -0,0 +1,63 @@
+ <div class="bubble">
+
+     <div class="flex-row">
+         <label class="left-label matchtitle"><span x-text="match.title"></span></label>
+         <!-- <label class="right-label info"><span x-text="match.date"></span></label> -->
+     </div>
+
+     <template x-for="i in match.teams.length">
+
+         <div>
+             <div class="table-row-3-colums team-names-box padding-bottom-small">
+
+                 <div class="table-cell table-cell-large">
+                     <template x-for="name in match.teams[i-1].names">
+
+                         <div class="ws" x-data="{
+                             showName(name, team) {
+                                 let html = `<span class='`
+                                 if (team.is_winner) html += `winner`
+                                 html += `'>`
+                                 html += name
+                                 html += `</span>`
+                                 return html
+                             },
+                             }" x-html="showName(name, match.teams[i-1])">
+                         </div>
+
+                     </template>
+                 </div>
+                 <div class="table-cell alignright">
+                     <template x-for="score in match.teams[i-1].scores">
+
+                         <span class="score ws" x-data="{
+                             showScore(score, team) {
+                                 let html = `<span class='`
+                                 if (team.is_winner) html += `winner`
+                                 html += `'>`
+                                 html += score
+                                 html += `</span>`
+                                 return html
+                             },
+                             }" x-html="showScore(score, match.teams[i-1])">
+                         </span>
+
+                         <!-- <span class="score ws" x-text="score"></span> -->
+                     </template>
+                 </div>
+
+             </div>
+
+             <div x-show="i === 1">
+                 <div class="bottom-border"></div>
+             </div>
+
+         </div>
+     </template>
+
+     <div class="top-margin flex-row">
+         <label class="left-label minor-info bold"><span x-text="match.duration"></span></label>
+         <label class="right-label minor-info semibold"><span x-text="match.court"></span></label>
+     </div>
+
+ </div>
diff --git a/tournaments/templates/tournaments/broadcasted_matches.html b/tournaments/templates/tournaments/broadcasted_matches.html
index b6632c9..b6223d5 100644
--- a/tournaments/templates/tournaments/broadcasted_matches.html
+++ b/tournaments/templates/tournaments/broadcasted_matches.html
@@ -44,97 +44,97 @@
         <div class="wrapper">
             <main>
 
-                    <div class="grid-x">
-                        <div class="cell medium-6 large-6 topblock my-block">
-                            <div class="bubble">
-                                <img
-                                    src="{% static 'tournaments/images/PadelClub_logo_512.png' %}"
-                                    class="logo inline"
-                                />
-                                <div class="inline">
-                                    <h1 class="club">{{ tournament.name }}</h1>
-                                    <h1 class="event">Matchs</h1>
-                                    <!-- <span>Propulsé par Padel Club</span> -->
-                                </div>
+                <div class="grid-x">
+                    <div class="cell medium-6 large-6 topblock my-block">
+                        <div class="bubble">
+                            <img
+                                src="{% static 'tournaments/images/PadelClub_logo_512.png' %}"
+                                class="logo inline"
+                            />
+                            <div class="inline">
+                                <h1 class="club">{{ tournament.name }}</h1>
+                                <h1 class="event">Matchs</h1>
+                                <!-- <span>Propulsé par Padel Club</span> -->
                             </div>
                         </div>
                     </div>
+                </div>
 
-                    <div class="grid-x padding-bottom">
+                <div class="grid-x padding-bottom">
 
-                        <template x-for="i in paginatedMatches.length" >
-                            <template x-for="match in paginatedMatches[i-1]" >
+                    <template x-for="i in paginatedMatches.length" >
+                        <template x-for="match in paginatedMatches[i-1]" >
 
-                                <div class="cell medium-6 large-3 my-block" x-show="active === i">
-                                    <div class="bubble">
+                            <div class="cell medium-6 large-3 my-block" x-show="active === i">
+                                <div class="bubble">
 
-                                        <div class="flex-row">
-                                            <label class="left-label matchtitle"><span x-text="match.title"></span></label>
-                                            <!-- <label class="right-label info"><span x-text="match.date"></span></label> -->
-                                        </div>
+                                    <div class="flex-row">
+                                        <label class="left-label matchtitle"><span x-text="match.title"></span></label>
+                                        <!-- <label class="right-label info"><span x-text="match.date"></span></label> -->
+                                    </div>
 
-                                        <template x-for="i in match.teams.length">
-
-                                            <div>
-                                                <div class="table-row-3-colums team-names-box padding-bottom-small">
-
-                                                    <div class="table-cell table-cell-large">
-                                                        <template x-for="name in match.teams[i-1].names">
-
-                                                            <div class="ws" x-data="{
-                                                                showName(name, team) {
-                                                                    let html = `<span class='`
-                                                                    if (team.is_winner) html += `winner`
-                                                                    html += `'>`
-                                                                    html += name
-                                                                    html += `</span>`
-                                                                    return html
-                                                                },
-                                                                }" x-html="showName(name, match.teams[i-1])">
-                                                            </div>
-
-                                                        </template>
-                                                    </div>
-                                                    <div class="table-cell alignright">
-                                                        <template x-for="score in match.teams[i-1].scores">
-
-                                                            <span class="score ws" x-data="{
-                                                                showScore(score, team) {
-                                                                    let html = `<span class='`
-                                                                    if (team.is_winner) html += `winner`
-                                                                    html += `'>`
-                                                                    html += score
-                                                                    html += `</span>`
-                                                                    return html
-                                                                },
-                                                                }" x-html="showScore(score, match.teams[i-1])">
-                                                            </span>
-
-                                                            <!-- <span class="score ws" x-text="score"></span> -->
-                                                        </template>
-                                                    </div>
+                                    <template x-for="i in match.teams.length">
 
-                                                </div>
+                                        <div>
+                                            <div class="table-row-3-colums team-names-box padding-bottom-small">
+
+                                                <div class="table-cell table-cell-large">
+                                                    <template x-for="name in match.teams[i-1].names">
+
+                                                        <div class="ws" x-data="{
+                                                            showName(name, team) {
+                                                                let html = `<span class='`
+                                                                if (team.is_winner) html += `winner`
+                                                                html += `'>`
+                                                                html += name
+                                                                html += `</span>`
+                                                                return html
+                                                            },
+                                                            }" x-html="showName(name, match.teams[i-1])">
+                                                        </div>
 
-                                                <div x-show="i === 1">
-                                                    <div class="bottom-border"></div>
+                                                    </template>
                                                 </div>
+                                                <div class="table-cell alignright">
+                                                    <template x-for="score in match.teams[i-1].scores">
+
+                                                        <span class="score ws" x-data="{
+                                                            showScore(score, team) {
+                                                                let html = `<span class='`
+                                                                if (team.is_winner) html += `winner`
+                                                                html += `'>`
+                                                                html += score
+                                                                html += `</span>`
+                                                                return html
+                                                            },
+                                                            }" x-html="showScore(score, match.teams[i-1])">
+                                                        </span>
+
+                                                        <!-- <span class="score ws" x-text="score"></span> -->
+                                                    </template>
+                                                </div>
+
+                                            </div>
 
+                                            <div x-show="i === 1">
+                                                <div class="bottom-border"></div>
                                             </div>
-                                        </template>
 
-                                        <div class="top-margin flex-row">
-                                            <label class="left-label minor-info bold"><span x-text="match.duration"></span></label>
-                                            <label class="right-label minor-info semibold"><span x-text="match.court"></span></label>
                                         </div>
+                                    </template>
 
+                                    <div class="top-margin flex-row">
+                                        <label class="left-label minor-info bold"><span x-text="match.duration"></span></label>
+                                        <label class="right-label minor-info semibold"><span x-text="match.court"></span></label>
                                     </div>
+
                                 </div>
+                            </div>
 
-                            </template>
                         </template>
+                    </template>
 
-                    </div>
+                </div>
 
             </main>
         </div>
diff --git a/tournaments/templates/tournaments/broadcasted_summon.html b/tournaments/templates/tournaments/broadcasted_summon.html
new file mode 100644
index 0000000..103372f
--- /dev/null
+++ b/tournaments/templates/tournaments/broadcasted_summon.html
@@ -0,0 +1,15 @@
+<div class="bubble">
+    <template x-for="summon in column" >
+        <div class="table-row-4-colums bottom-border">
+            <div class="table-cell table-cell-large semibold">
+                <template x-for="i in summon.names.length">
+                    <div x-text="summon.names[i-1]"></div>
+                </template>
+            </div>
+
+            <div class="table-cell center"><span x-text="summon.weight"></span></div>
+            <div class="table-cell large center"><span x-text="summon.date"></span></div>
+            <div class="table-cell"><div class="mybox center"><span x-text="summon.stage"></span></div></div>
+        </div>
+    </template>
+</div>
diff --git a/tournaments/templates/tournaments/broadcasted_summons.html b/tournaments/templates/tournaments/broadcasted_summons.html
index 2035ae0..c3978fd 100644
--- a/tournaments/templates/tournaments/broadcasted_summons.html
+++ b/tournaments/templates/tournaments/broadcasted_summons.html
@@ -51,7 +51,6 @@
 
     }" x-init="loop()">
 
-
     <div class="grid-x">
         <template x-for="i in paginatedMatches.length" >
             <template x-for="column in paginatedMatches[i-1]" >
@@ -77,9 +76,4 @@
     </div>
 </div>
 
-
-
-
-
-
 {% endblock %}
diff --git a/tournaments/urls.py b/tournaments/urls.py
index a09c9e8..b33dd77 100644
--- a/tournaments/urls.py
+++ b/tournaments/urls.py
@@ -15,6 +15,7 @@ urlpatterns = [
             path('broadcast/matches/', views.tournament_matches, name='broadcasted-matches'),
             path('broadcast/', views.tournament_broadcast, name='broadcast'),
             path('matches/json/', views.tournament_matches_json, name='tournament-matches-json'),
+            path('broadcast/json/', views.broadcast_json, name='broadcast-json'),
             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'),
diff --git a/tournaments/views.py b/tournaments/views.py
index bc5ed3f..ce013cf 100644
--- a/tournaments/views.py
+++ b/tournaments/views.py
@@ -109,7 +109,7 @@ def tournament_summons_json(request, tournament_id):
 
 def tournament_broadcast(request, tournament_id):
     tournament = get_object_or_404(Tournament, pk=tournament_id)
-    return render(request, 'tournaments/broadcast.html', {
+    return render(request, 'tournaments/broadcasted.html', {
         'tournament': tournament,
     })
 
@@ -119,9 +119,25 @@ def tournament_matches(request, tournament_id):
         'tournament': tournament,
     })
 
+def broadcast_json(request, tournament_id):
+    tournament = get_object_or_404(Tournament, pk=tournament_id)
+
+    matches = [m.__dict__ for m in tournament.live_matches()]
+    group_stages = [gs.to_dict() for gs in tournament.live_group_stages()]
+    team_summons = [summon.to_dict() for summon in tournament.team_summons()]
+
+    broadcast = {
+        'matches': matches,
+        'group_stages': group_stages,
+        'summons': team_summons,
+    }
+
+    data = json.dumps(broadcast)
+    return HttpResponse(data, content_type='application/json')
+
 def tournament_matches_json(request, tournament_id):
     tournament = get_object_or_404(Tournament, pk=tournament_id)
-    live_matches = tournament.live_matches(broadcasted=True)
+    live_matches = tournament.live_matches()
     data = json.dumps(live_matches, default=vars)
     return HttpResponse(data, content_type='application/json')
 
@@ -150,6 +166,8 @@ def tournament_live_group_stage_json(request, tournament_id):
 def players(request):
     return render(request, 'tournaments/test.html')
 
+##### API #####
+
 @api_view(['GET'])
 def user_by_token(request):
     # return Response({"message": "Hello for today! See you tomorrow!"})