You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
5.5 KiB
138 lines
5.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
{% load static %}
|
|
{% load qr_code %}
|
|
|
|
<head>
|
|
{% include 'tournaments/broadcast/base_head.html' %}
|
|
|
|
<script src="{% static 'tournaments/js/alpine.min.js' %}"></script>
|
|
|
|
<title>Broadcast</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div x-data="{
|
|
paginatedMatches: null,
|
|
paginatedGroupStages: null,
|
|
paginatedSummons: null,
|
|
active: 1,
|
|
title: '',
|
|
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)
|
|
this.setTitle()
|
|
})
|
|
},
|
|
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
|
|
this.setTitle()
|
|
}, 15000)
|
|
},
|
|
pageCount() {
|
|
return this.paginatedMatches.length + this.paginatedGroupStages.length + this.paginatedSummons.length
|
|
},
|
|
setTitle() {
|
|
if (this.active < 1 + this.paginatedSummons.length) {
|
|
this.title = 'Convocations'
|
|
} else if (this.active < 1 + this.paginatedSummons.length + this.paginatedMatches.length) {
|
|
this.title = 'Matchs'
|
|
} else {
|
|
this.title = 'Poules'
|
|
}
|
|
}
|
|
|
|
}" x-init="loop()">
|
|
|
|
<div class="wrapper">
|
|
<header>
|
|
<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.display_name }}</h1>
|
|
<h1 class="event"><span x-text="title"></span></h1>
|
|
<!-- <span>Propulsé par Padel Club</span> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell medium-6 large-6 topblock my-block">
|
|
<div class="right">
|
|
{% qr_from_text qr_code_url options=qr_code_options %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<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/broadcast/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/broadcast/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/broadcast/broadcasted_group_stage.html' %}
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|