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.
 
 
 
 
padelclub_backend/tournaments/templates/tournaments/broadcast/broadcasted_prog.html

112 lines
4.2 KiB

<!DOCTYPE html>
{% load static %}
{% load qr_code %}
<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/basics.css' %}" />
<link rel="stylesheet" href="{% static 'tournaments/css/style.css' %}" />
<link rel="stylesheet" href="{% static 'tournaments/css/broadcast.css' %}" />
<link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" />
<title>Matchs</title>
<script src="{% static 'tournaments/js/alpine.min.js' %}" defer></script>
<!-- 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 x-data="{
paginatedMatches: null,
active: 1,
retrieveMatches() {
fetch('/tournament/{{ tournament.id }}/prog/json/')
.then(res => res.json())
.then((data) => {
this.paginatedMatches = this.paginate(data, 8)
})
},
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.retrieveMatches()
setInterval(() => {
this.retrieveMatches()
this.active = this.active === this.paginatedMatches.length ? 1 : this.active+1
}, 15000)
}
}" 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">Programmation {{ tournament.broadcast_display_name }}</h1>
</div>
</div>
<div class="right-content">{% qr_from_text qr_code_url options=qr_code_options %}</div>
</div>
</header>
<div class="wrapper">
<main>
<div class="grid-x padding-bottom">
<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">
<template x-if="!match.empty">
{% include 'tournaments/broadcast/broadcasted_match.html' %}
</template>
</div>
</template>
</template>
</div>
</main>
</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>