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