parent
5b953494cf
commit
8f692793a8
@ -0,0 +1,184 @@ |
||||
{% 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="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" /> |
||||
|
||||
<title>Padel</title> |
||||
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> |
||||
|
||||
</head> |
||||
|
||||
<body x-data="{ |
||||
players: null, |
||||
active: 1, |
||||
screens: 2, |
||||
retrievePlayers() { |
||||
fetch('/api/player-registrations/') |
||||
.then(res => res.json()) |
||||
.then((data) => { |
||||
this.players = data |
||||
}) |
||||
}, |
||||
loop() { |
||||
this.retrievePlayers() |
||||
setInterval(() => { |
||||
this.retrievePlayers() |
||||
this.active = this.active === this.screens ? 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">Planning</h1> |
||||
<!-- <span>Propulsé par Padel Club</span> --> |
||||
</div> |
||||
</div> |
||||
</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" > |
||||
<div x-data="{ |
||||
addOpeningTagIfNecessary(index) { |
||||
Return index % 2 ? ‘<div class='bubble'>’ : ‘’; |
||||
}, |
||||
addClosingTagIfNecessary(index) { |
||||
Return index % 2 ? ‘</div>’ : ‘’; |
||||
} |
||||
}"> |
||||
|
||||
<div x-html=“addOpeningTagIfNecessary(index)”></div> |
||||
<span x-text="player.first_name"></span> <span x-text="player.last_name"></span> |
||||
<div x-html=“addClosingTagIfNecessary(index)”></div> |
||||
</div> |
||||
</template> --> |
||||
|
||||
<template x-for="(player, index) in players" > |
||||
<div x-data="{ |
||||
doHTML: function(index) { |
||||
let bubble = (index % 2 === 0) ? true : false; |
||||
let html = ``; |
||||
if(bubble) html+= `<div class='bubble'>`; |
||||
html = `<span x-text='player.first_name'></span> <span x-text='player.last_name'></span>`; |
||||
if(bubble) html+= `</div>`; |
||||
return html; |
||||
}, |
||||
}" x-html="doHTML(index)"> |
||||
</div> |
||||
</template> |
||||
|
||||
<!-- <template x-for="(player, index) in players" > |
||||
<div x-data="{ |
||||
doHTML: function(index) { |
||||
let bubble = index % 2 ? true : false; |
||||
let html = ''; |
||||
if(bubble) html+= '<div class='bubble'>'; |
||||
html += '<span x-text='player.first_name'></span> <span x-text='player.last_name'></span>'; |
||||
if(bubble) html += '</div>'; |
||||
return html; |
||||
}, |
||||
}" x-html="doHTML(index)"> |
||||
</div> |
||||
</template> --> |
||||
|
||||
|
||||
|
||||
<!-- <div class="bubble" x-show="active === 1"> |
||||
<label class="title">Équipes</label> |
||||
<template x-for="team in tournament.teamregistration_set" > |
||||
<div class="table-container bottom-border vertical-padding"> |
||||
<img src="{% static 'tournaments/images/pc_icon_round_200.png' %}" class="team_image horizontal-margin"> |
||||
<div class="w50 tight table-cell hpadding10"> |
||||
<template x-for="player in team.playerregistration_set"> |
||||
<div> |
||||
<div x-text="player.first_name"></div> <div x-text="player.last_name"></div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
<div class="table-cell horizontal-padding"> |
||||
<span x-text="team.court"></span> |
||||
</div> |
||||
<div class="table-cell horizontal-padding large"> |
||||
<span x-text="team.call_date"></span> |
||||
</div> |
||||
<div class="table-cell"><div class="mybox">Poule A</div></div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
|
||||
<div class="bubble" x-show="active === 2"> |
||||
<label class="title">Matchs</label> |
||||
<template x-for="round in tournament.round_set"> |
||||
<template x-for="match in round.match_set"> |
||||
|
||||
<div> |
||||
|
||||
<div class="flex-row"> |
||||
<label class="left-label matchtitle">{{ match.id }}</label> |
||||
<label class="right-label info">{{ match.start_date }}</label> |
||||
</div> |
||||
|
||||
<div> |
||||
|
||||
{% for team in match.team_states %} |
||||
<div class="test bottom-border padding-bottom-small"> |
||||
<div class="left-label"> |
||||
{% for name in team.names %} |
||||
<div class="winner"> |
||||
{{ name }} |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
<div class=""> |
||||
{% for score in team.scores %} |
||||
<span class="score ws {% if team.is_winner %}winner{% endif %}">{{ score }}</span> |
||||
{% endfor %} |
||||
</div> |
||||
</div> |
||||
{% endfor %} |
||||
|
||||
</div> |
||||
|
||||
<div class="top-margin flex-row"> |
||||
<label class="left-label minor-info">{{ match.duration }}</label> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</template> |
||||
</template> |
||||
</div> --> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
</div> |
||||
</main> |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue