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.
216 lines
9.0 KiB
216 lines
9.0 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>
|
|
|
|
<!-- Matomo -->
|
|
<script>
|
|
var _paq = window._paq = window._paq || [];
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
|
|
_paq.push(["setDoNotTrack", true]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//matomo.padelclub.app/";
|
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
_paq.push(['setSiteId', '1']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div x-data="{
|
|
paginatedMatches: null,
|
|
paginatedGroupStages: null,
|
|
paginatedSummons: null,
|
|
paginatedRankings: null,
|
|
active: 1,
|
|
hide_weight: {{ tournament.hide_weight|lower }},
|
|
has_sponsors: {{ tournament.has_sponsors|lower }},
|
|
prefixTitle: '',
|
|
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.paginatedRankings = this.paginateRankings(data.rankings)
|
|
this.setPrefixTitle()
|
|
|
|
// Adjust active if it exceeds the new page count
|
|
if (this.active > this.pageCount()) {
|
|
this.active = 1; // Reset to the first page
|
|
}
|
|
})
|
|
},
|
|
paginateSummons(array) {
|
|
let pageSize = 16
|
|
if (window.innerHeight <= 720) {
|
|
pageSize = 12;
|
|
if (this.has_sponsors) {
|
|
pageSize = 10
|
|
}
|
|
} else if (window.innerHeight <= 1080) {
|
|
if (this.has_sponsors) {
|
|
pageSize = 12
|
|
}
|
|
}
|
|
|
|
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
|
|
},
|
|
paginateRankings(array) {
|
|
let pageSize = 16
|
|
if (window.innerHeight <= 720) {
|
|
pageSize = 12;
|
|
if (this.has_sponsors) {
|
|
pageSize = 10
|
|
}
|
|
} else if (window.innerHeight <= 1080) {
|
|
if (this.has_sponsors) {
|
|
pageSize = 12
|
|
}
|
|
}
|
|
|
|
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.setPrefixTitle()
|
|
}, 15000)
|
|
},
|
|
pageCount() {
|
|
return this.paginatedMatches.length + this.paginatedGroupStages.length + this.paginatedSummons.length + this.paginatedRankings.length
|
|
},
|
|
setPrefixTitle() {
|
|
if (this.active < 1 + this.paginatedSummons.length) {
|
|
this.prefixTitle = 'Convocations'
|
|
} else if (this.active < 1 + this.paginatedSummons.length + this.paginatedMatches.length) {
|
|
this.prefixTitle = 'Matchs'
|
|
} else if (this.active < 1 + this.paginatedSummons.length + this.paginatedMatches.length + this.paginatedGroupStages.length) {
|
|
this.prefixTitle = 'Poules'
|
|
} else {
|
|
this.prefixTitle = 'Classement'
|
|
}
|
|
}
|
|
|
|
}" x-init="loop()">
|
|
<header>
|
|
<div id="header">
|
|
<div class="left-content bubble-header">
|
|
<img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
|
|
<div class="left-margin">
|
|
<h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
|
|
<h1 class="event"><span x-text="prefixTitle"></span> {{ tournament.broadcast_display_name }}</h1>
|
|
</div >
|
|
</div>
|
|
{% if qr_code_options %}
|
|
<div class="right-content">{% qr_from_text qr_code_url options=qr_code_options %}</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<div class="wrapper">
|
|
<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 padding10" 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 padding10" 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 padding10" x-show="active === i + paginatedSummons.length + paginatedMatches.length">
|
|
{% include 'tournaments/broadcast/broadcasted_group_stage.html' %}
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<template x-for="i in paginatedRankings.length">
|
|
<template x-for="column in paginatedRankings[i-1]">
|
|
<div class="cell medium-6 large-6 topblock padding10" x-show="active === i + paginatedSummons.length + paginatedMatches.length + paginatedGroupStages.length">
|
|
{% include 'tournaments/broadcast/broadcasted_ranking.html' %}
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
<footer class="footer-broadcast">
|
|
{% if tournament.event.images.exists %}
|
|
<div class="bubble-footer">
|
|
<div class="bubble-sponsor">
|
|
{% for image in tournament.event.images.all %}
|
|
<img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
|
|
class="sponsor-logo-broadcast">
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</footer>
|
|
</html>
|
|
|