staxriver
/
padelclub_backend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

broadcast page with pagination and autorefresh!

Browse Source
clubs
Laurent 2 years ago
parent 858dac4a12
commit 46c5cbfe49
11 changed files with 251 additions and 60 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 23
      tournaments/models/match.py
  2. 7
      tournaments/models/tournament.py
  3. 18
      tournaments/static/tournaments/css/broadcast.css
  4. 15
      tournaments/static/tournaments/css/style.css
  5. 5
      tournaments/static/tournaments/js/alpine.min.js
  6. 1
      tournaments/templates/tournaments/base.html
  7. 152
      tournaments/templates/tournaments/broadcasted_matches.html
  8. 2
      tournaments/templates/tournaments/matches.html
  9. 48
      tournaments/templates/tournaments/test.html
  10. 3
      tournaments/urls.py
  11. 9
      tournaments/views.py

23
tournaments/models/match.py
Unescape View File

@ -19,13 +19,22 @@ class Match(models.Model):
def __str__(self): def __str__(self):
items = [f"Match {self.index}", self.formatted_start_date()] items = [self.name(), self.formatted_start_date()]
desc = " - ".join(items) desc = " - ".join(items)
player_names = " / ".join(self.player_names()) player_names = " / ".join(self.player_names())
if self.round: if self.round:
return f"{str(self.round)} > {desc} > {player_names}" return f"{desc} > {player_names}"
elif self.group_stage: elif self.group_stage:
return f"{str(self.group_stage)} > {desc} > {player_names}" return f"{desc} > {player_names}"
def name(self):
items = []
if self.round:
items.append(self.round.name())
elif self.group_stage:
items.append(self.group_stage.name())
items.append(f"{self.index}")
return " ".join(items)
def player_names(self): def player_names(self):
return map(lambda ts: ts.player_names(), self.team_scores.all()) return map(lambda ts: ts.player_names(), self.team_scores.all())
@ -67,7 +76,7 @@ class Match(models.Model):
# return (timezone.now() - self.start_date).total_seconds() # return (timezone.now() - self.start_date).total_seconds()
def live_match(self): def live_match(self):
title = f"Match {self.index}" title = self.name()
date = self.formatted_start_date() date = self.formatted_start_date()
duration = self.formatted_duration() duration = self.formatted_duration()
court = "" court = ""
@ -80,7 +89,7 @@ class Match(models.Model):
names = team_score.team_names() names = team_score.team_names()
scores = team_score.scores_array() scores = team_score.scores_array()
weight = team_score.team_registration.weight() weight = team_score.team_registration.weight()
is_winner = team_score.team_registration == self.winning_team_id is_winner = team_score.team_registration.id == self.winning_team_id
team = Team(image, names, scores, weight, is_winner) team = Team(image, names, scores, weight, is_winner)
livematch.add_team(team) livematch.add_team(team)
@ -105,5 +114,5 @@ class LiveMatch:
def add_team(self, team): def add_team(self, team):
self.teams.append(team) self.teams.append(team)
def toJSON(self): # def toJSON(self):
return json.dumps(self, default=lambda o: o.__dict__, sort_keys=True, indent=4) # return json.dumps(self, default=lambda o: o.__dict__, sort_keys=True, indent=4)

7
tournaments/models/tournament.py
Unescape View File

@ -72,15 +72,8 @@ class Tournament(models.Model):
# matches = [m for m in matches if m.broadcasted==True] # matches = [m for m in matches if m.broadcasted==True]
print(len(matches))
return map(lambda match: match.live_match(), matches) return map(lambda match: match.live_match(), matches)
# # Convert object attributes to a dictionary
# dict = self.__dict__
# # Convert dictionary to JSON
# return json.dumps(dict)
class TeamSummon: class TeamSummon:
def __init__(self, names, date, weight, stage, image): def __init__(self, names, date, weight, stage, image):
self.names = [] self.names = []

18
tournaments/static/tournaments/css/broadcast.css
Unescape View File

@ -0,0 +1,18 @@
html,
body {
background: linear-gradient(
20deg,
#1b223a 0 20%,
#e84038 20% 40%,
#f39200 40% 60%,
#ffd300 60% 80%,
#1b223a 80% 100%
);
}
.bubble {
padding: 20px;
background-color: white;
border-radius: 24px;
/* box-shadow: 10px 10px lightblue; */
}

15
tournaments/static/tournaments/css/style.css
Unescape View File

@ -15,14 +15,7 @@
html, html,
body { body {
background: linear-gradient( background: #fff7ed;
20deg,
#1b223a 0 20%,
#e84038 20% 40%,
#f39200 40% 60%,
#ffd300 60% 80%,
#1b223a 80% 100%
);
font-family: "Montserrat-Regular"; font-family: "Montserrat-Regular";
font-size: 16px; font-size: 16px;
@ -34,8 +27,6 @@ body {
height: 100%; height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: hidden;
} }
label { label {
@ -239,7 +230,7 @@ tr {
padding: 20px; padding: 20px;
background-color: white; background-color: white;
border-radius: 24px; border-radius: 24px;
/* box-shadow: 10px 10px lightblue; */ box-shadow: 0 0 10px 5px #fbead6;
} }
.test { .test {
@ -361,6 +352,8 @@ tr {
.flex-row { .flex-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 29px;
align-items: center;
/* vertical-align: middle; */ /* vertical-align: middle; */
} }

5
tournaments/static/tournaments/js/alpine.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
tournaments/templates/tournaments/base.html
Unescape View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
{% load static %} {% load static %}

152
tournaments/templates/tournaments/broadcasted_matches.html
Unescape View File

@ -0,0 +1,152 @@
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="{% static 'tournaments/css/foundation.min.css' %}" />
<link rel="stylesheet" href="{% static 'tournaments/css/style.css' %}" />
<link rel="stylesheet" href="{% static 'tournaments/css/broadcast.css' %}" />
<link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" />
<title>Padel</title>
<script src="{% static 'tournaments/js/alpine.min.js' %}"></script>
</head>
<body x-data="{
paginatedMatches: null,
active: 1,
retrieveMatches() {
fetch('/tournament/{{ tournament.id }}/matches-json/')
.then(res => res.json())
.then((data) => {
this.paginatedMatches = this.paginate(data, 8)
})
},
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.retrieveMatches()
setInterval(() => {
this.retrieveMatches()
this.active = this.active === this.paginatedMatches.length ? 1 : this.active+1
}, 3000)
}
}" x-init="loop()">
<div class="wrapper">
<main class="page-body">
<div class="container">
<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">4Padel Toulouse</h1>
<h1 class="event">Matchs</h1>
<!-- <span>Propulsé par Padel Club</span> -->
</div>
</div>
</div>
</div>
<div class="grid-x padding-bottom">
<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="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 padding-bottom-small">
<template x-if="match.teams[i-1].image">
<div class="table-cell">
<img src="{% static 'tournaments/images/pc_icon_round_200.png' %}" class="team_image" />
</div>
</template>
<div class="table-cell table-cell-large horizontal-padding">
<template x-for="name in match.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, 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"><span x-text="match.duration"></span></label>
<label class="right-label minor-info"><span x-text="match.court"></span></label>
</div>
</div>
</div>
</template>
</template>
</div>
</div>
</main>
</div>
</body>
</html>

2
tournaments/templates/tournaments/matches.html
Unescape View File

@ -6,11 +6,9 @@
{% block content %} {% block content %}
{% if matches %} {% if matches %}
<div class="grid-x"> <div class="grid-x">
{% if matches %}
{% for match in matches %} {% for match in matches %}
{% include 'tournaments/match_cell.html' %} {% include 'tournaments/match_cell.html' %}
{% endfor %} {% endfor %}
{% endif %}
</div> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

48
tournaments/templates/tournaments/test.html
Unescape View File

@ -15,21 +15,27 @@
</head> </head>
<body x-data="{ <body x-data="{
players: null, paginatedPlayers: null,
active: 1, active: 1,
screens: 2,
retrievePlayers() { retrievePlayers() {
fetch('/api/player-registrations/') fetch('/api/player-registrations/')
.then(res => res.json()) .then(res => res.json())
.then((data) => { .then((data) => {
this.players = data this.paginatedPlayers = this.paginate(data, 2)
}) })
}, },
paginate(array, pageSize) {
let paginatedArray = [];
for (let i = 0; i < array.length; i += pageSize) {
paginatedArray.push(array.slice(i, i + pageSize));
}
return paginatedArray;
},
loop() { loop() {
this.retrievePlayers() this.retrievePlayers()
setInterval(() => { setInterval(() => {
this.retrievePlayers() this.retrievePlayers()
this.active = this.active === this.screens ? 1 : this.active+1 this.active = this.active === this.paginatedPlayers.length ? 1 : this.active+1
}, 3000) }, 3000)
} }
@ -38,6 +44,7 @@
<div class="wrapper"> <div class="wrapper">
<main class="page-body"> <main class="page-body">
<div class="container"> <div class="container">
<div class="grid-x"> <div class="grid-x">
<div class="cell medium-6 large-6 topblock my-block"> <div class="cell medium-6 large-6 topblock my-block">
<div class="bubble"> <div class="bubble">
@ -54,30 +61,41 @@
</div> </div>
</div> </div>
<template x-if="players">
<div class="grid-x padding-bottom"> <div class="grid-x padding-bottom">
<div class="cell medium-6 large-6 topblock my-block"> <div class="cell medium-6 large-6 topblock my-block">
<template x-for="(player, index) in players" > <template x-for="i in paginatedPlayers.length" >
<div class="bubble" x-show="active === i">
<template x-for="player in paginatedPlayers[i-1]" >
<div>
<span x-text="player.first_name"></span> <span x-text="player.last_name"></span>
</div>
</template>
</div>
</template>
</div>
</div>
<!-- <template x-for="page in paginated-players" >
<div x-data="{ <div x-data="{
openBubble: function(index) { openBubble: function(index) {
let bubble = index % 2 ? true : false; let bubble = (index % 2 === 0) ? true : false;
let html = ``; let html = ``;
if(bubble) html+= `<div class='bubble'>`; if(bubble) html+= `<div class='bubble'>`;
return html; return html;
}, closeBubble: function(index) { }, closeBubble: function(index) {
let bubble = index % 2 ? true : false; let bubble = (index % 2 === 1) ? true : false;
let html = ``; let html = ``;
if(bubble) html += `</div>`; if(bubble) html += `</div>`;
return html; return html;
}, },
}"> }">
<div x-html="openBubble(index)"></div> <div x-html="openBubble(index-1)"></div>
<span x-text="player.first_name"></span> <span x-text="player.last_name"></span> <span x-text="players[index-1].first_name"></span> <span x-text="players[index-1].last_name"></span>
<div x-html="closeBubble(index)"></div> <div x-html="closeBubble(index-1)"></div>
</div> </div>
</template> </template> -->
<!-- <template x-for="(player, index) in players" > <!-- <template x-for="(player, index) in players" >
<div x-data="{ <div x-data="{
@ -205,10 +223,6 @@
</template> </template>
</div> --> </div> -->
</div>
</div>
</template>
</div> </div>
</main> </main>

3
tournaments/urls.py
Unescape View File

@ -6,6 +6,7 @@ urlpatterns = [
path("", views.index, name="index"), path("", views.index, name="index"),
path('tournament/<str:tournament_id>/', views.tournament, name='tournament'), path('tournament/<str:tournament_id>/', views.tournament, name='tournament'),
path('tournament/<str:tournament_id>/summons/', views.tournament_summons, name='tournament-summons'), path('tournament/<str:tournament_id>/summons/', views.tournament_summons, name='tournament-summons'),
path('tournament/<str:tournament_id>/json/', views.tournament_json, name='tournament-json'), path('tournament/<str:tournament_id>/broadcast/', views.tournament_matches, name='tournament-matches'),
path('tournament/<str:tournament_id>/matches-json/', views.tournament_matches_json, name='tournament-matches-json'),
path('players/', views.players, name='players'), path('players/', views.players, name='players'),
] ]

9
tournaments/views.py
Unescape View File

@ -48,12 +48,19 @@ def tournament_summons(request, tournament_id):
'team_summons': team_summons, 'team_summons': team_summons,
}) })
def tournament_json(request, tournament_id):
def tournament_matches_json(request, tournament_id):
tournament = get_object_or_404(Tournament, pk=tournament_id) tournament = get_object_or_404(Tournament, pk=tournament_id)
live_matches = list(tournament.live_matches()) live_matches = list(tournament.live_matches())
data = json.dumps(live_matches, default=vars) data = json.dumps(live_matches, default=vars)
return HttpResponse(data, content_type='application/json') return HttpResponse(data, content_type='application/json')
def tournament_matches(request, tournament_id):
tournament = get_object_or_404(Tournament, pk=tournament_id)
return render(request, 'tournaments/broadcasted_matches.html', {
'tournament': tournament,
})
def players(request): def players(request):
return render(request, 'tournaments/test.html') return render(request, 'tournaments/test.html')

Write Preview
Loading…
Cancel
Save