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. 52
      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):
items = [f"Match {self.index}", self.formatted_start_date()]
items = [self.name(), self.formatted_start_date()]
desc = " - ".join(items)
player_names = " / ".join(self.player_names())
if self.round:
return f"{str(self.round)} > {desc} > {player_names}"
return f"{desc} > {player_names}"
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):
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()
def live_match(self):
title = f"Match {self.index}"
title = self.name()
date = self.formatted_start_date()
duration = self.formatted_duration()
court = ""
@ -80,7 +89,7 @@ class Match(models.Model):
names = team_score.team_names()
scores = team_score.scores_array()
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)
livematch.add_team(team)
@ -105,5 +114,5 @@ class LiveMatch:
def add_team(self, team):
self.teams.append(team)
def toJSON(self):
return json.dumps(self, default=lambda o: o.__dict__, sort_keys=True, indent=4)
# def toJSON(self):
# 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]
print(len(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:
def __init__(self, names, date, weight, stage, image):
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,
body {
background: linear-gradient(
20deg,
#1b223a 0 20%,
#e84038 20% 40%,
#f39200 40% 60%,
#ffd300 60% 80%,
#1b223a 80% 100%
);
background: #fff7ed;
font-family: "Montserrat-Regular";
font-size: 16px;
@ -34,8 +27,6 @@ body {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
label {
@ -239,7 +230,7 @@ tr {
padding: 20px;
background-color: white;
border-radius: 24px;
/* box-shadow: 10px 10px lightblue; */
box-shadow: 0 0 10px 5px #fbead6;
}
.test {
@ -361,6 +352,8 @@ tr {
.flex-row {
display: flex;
justify-content: space-between;
height: 29px;
align-items: center;
/* 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>
{% 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 %}
{% if matches %}
<div class="grid-x">
{% if matches %}
{% for match in matches %}
{% include 'tournaments/match_cell.html' %}
{% endfor %}
{% endif %}
</div>
{% endif %}
{% endblock %}

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

@ -15,21 +15,27 @@
</head>
<body x-data="{
players: null,
paginatedPlayers: null,
active: 1,
screens: 2,
retrievePlayers() {
fetch('/api/player-registrations/')
.then(res => res.json())
.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() {
this.retrievePlayers()
setInterval(() => {
this.retrievePlayers()
this.active = this.active === this.screens ? 1 : this.active+1
this.active = this.active === this.paginatedPlayers.length ? 1 : this.active+1
}, 3000)
}
@ -38,6 +44,7 @@
<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">
@ -54,30 +61,41 @@
</div>
</div>
<template x-if="players">
<div class="grid-x padding-bottom">
<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="{
openBubble: function(index){
let bubble = index % 2 ? true : false;
openBubble: function(index) {
let bubble = (index % 2 === 0) ? true : false;
let html = ``;
if(bubble) html+= `<div class='bubble'>`;
return html;
}, closeBubble: function(index){
let bubble = index % 2 ? true : false;
}, closeBubble: function(index) {
let bubble = (index % 2 === 1) ? true : false;
let html = ``;
if(bubble) html += `</div>`;
return html;
},
}">
<div x-html="openBubble(index)"></div>
<span x-text="player.first_name"></span> <span x-text="player.last_name"></span>
<div x-html="closeBubble(index)"></div>
<div x-html="openBubble(index-1)"></div>
<span x-text="players[index-1].first_name"></span> <span x-text="players[index-1].last_name"></span>
<div x-html="closeBubble(index-1)"></div>
</div>
</template>
</template> -->
<!-- <template x-for="(player, index) in players" >
<div x-data="{
@ -205,10 +223,6 @@
</template>
</div> -->
</div>
</div>
</template>
</div>
</main>

3
tournaments/urls.py
Unescape View File

@ -6,6 +6,7 @@ urlpatterns = [
path("", views.index, name="index"),
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>/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'),
]

9
tournaments/views.py
Unescape View File

@ -48,12 +48,19 @@ def tournament_summons(request, tournament_id):
'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)
live_matches = list(tournament.live_matches())
data = json.dumps(live_matches, default=vars)
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):
return render(request, 'tournaments/test.html')

Write Preview
Loading…
Cancel
Save