Merge branch 'main' of https://gitea.staxriver.com/staxriver/padelclub_backend into main
commit
3a9a7566f4
@ -0,0 +1,224 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
{% load static %} |
||||||
|
{% load qr_code %} |
||||||
|
|
||||||
|
<head> |
||||||
|
{% include 'tournaments/broadcast/base_head.html' %} |
||||||
|
|
||||||
|
<script src="{% static 'tournaments/js/alpine.min.js' %}" defer></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="{ |
||||||
|
tournamentIds: {{ tournament_ids|safe }}, |
||||||
|
activeTournamentIndex: 0, |
||||||
|
paginatedMatches: null, |
||||||
|
paginatedGroupStages: null, |
||||||
|
paginatedSummons: null, |
||||||
|
paginatedRankings: null, |
||||||
|
active: 1, |
||||||
|
prefixTitle: '', |
||||||
|
eventTitle: '', |
||||||
|
title: '', |
||||||
|
retrieveDataForActiveTournament() { |
||||||
|
const activeTournamentId = this.tournamentIds[this.activeTournamentIndex]; |
||||||
|
|
||||||
|
fetch(`/tournament/${activeTournamentId}/broadcast/json/`) |
||||||
|
.then(res => res.json()) |
||||||
|
.then((data) => { |
||||||
|
console.log('Fetched Data:', data); // Add this to debug the fetch result |
||||||
|
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(); |
||||||
|
this.eventTitle = data.event_title |
||||||
|
this.title = data.tournament_title |
||||||
|
|
||||||
|
if (this.active > this.pageCount()) { |
||||||
|
this.active = 1; |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.error('Error fetching data:', error); // Handle fetch errors |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
paginateSummons(array) { |
||||||
|
let pageSize = 16; |
||||||
|
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; |
||||||
|
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() { |
||||||
|
console.log('Loop function is called'); |
||||||
|
this.retrieveDataForActiveTournament(); |
||||||
|
if (this.pageCount() === 0 && this.tournamentIds.length > 0) { |
||||||
|
console.warn(`Tournament ${this.tournamentIds[this.activeTournamentIndex]} has no pages, skipping to next.`); |
||||||
|
this.skipToNextTournament(); |
||||||
|
} |
||||||
|
|
||||||
|
setInterval(() => { |
||||||
|
// After fetching the data, check if the current tournament has no pages |
||||||
|
if (this.pageCount() === 0 && this.tournamentIds.length > 0) { |
||||||
|
console.warn(`Tournament ${this.tournamentIds[this.activeTournamentIndex]} has no pages, skipping to next.`); |
||||||
|
this.skipToNextTournament(); |
||||||
|
} else if (this.active === this.pageCount()) { |
||||||
|
this.active = 1; |
||||||
|
// Move to the next tournament |
||||||
|
this.skipToNextTournament(); |
||||||
|
} else { |
||||||
|
this.active += 1; |
||||||
|
} |
||||||
|
|
||||||
|
this.setPrefixTitle(); |
||||||
|
}, 15000); |
||||||
|
}, |
||||||
|
|
||||||
|
skipToNextTournament() { |
||||||
|
this.activeTournamentIndex = (this.activeTournamentIndex + 1) % this.tournamentIds.length; |
||||||
|
this.retrieveDataForActiveTournament(); // Fetch data for the new tournament |
||||||
|
}, |
||||||
|
|
||||||
|
pageCount() { |
||||||
|
// Safely handle null or undefined values |
||||||
|
const totalCount = (this.paginatedMatches?.length || 0) + |
||||||
|
(this.paginatedGroupStages?.length || 0) + |
||||||
|
(this.paginatedSummons?.length || 0) + |
||||||
|
(this.paginatedRankings?.length || 0); |
||||||
|
return totalCount; |
||||||
|
}, |
||||||
|
|
||||||
|
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"> |
||||||
|
<img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo"> |
||||||
|
<div class="left-margin"> |
||||||
|
<h1 class="club" x-text="eventTitle"></h1> |
||||||
|
<h1 class="event"> |
||||||
|
<span x-text="prefixTitle"></span> |
||||||
|
<span x-text="title"></span> |
||||||
|
</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 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> |
||||||
|
|
||||||
|
<template x-for="i in paginatedRankings.length"> |
||||||
|
<template x-for="column in paginatedRankings[i-1]"> |
||||||
|
<div class="cell medium-6 large-6 topblock my-block" x-show="active === i + paginatedSummons.length + paginatedMatches.length + paginatedGroupStages.length"> |
||||||
|
{% include 'tournaments/broadcast/broadcasted_ranking.html' %} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
|
||||||
|
</main> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue