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.
85 lines
2.9 KiB
85 lines
2.9 KiB
{% extends 'tournaments/broadcast_base.html' %}
|
|
|
|
{% block head_title %}Convocations{% endblock %}
|
|
{% block first_title %}{{ tournament.name }}{% endblock %}
|
|
{% block second_title %}Convocations{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
{% load static %}
|
|
|
|
|
|
<div x-data="{
|
|
paginatedMatches: null,
|
|
active: 1,
|
|
retrieveMatches() {
|
|
fetch('/tournament/{{ tournament.id }}/summons/json/')
|
|
.then(res => res.json())
|
|
.then((data) => {
|
|
|
|
let pageSize = 20
|
|
this.paginatedMatches = this.paginate(data, pageSize)
|
|
|
|
const splitGroups = [];
|
|
this.paginatedMatches.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]);
|
|
}
|
|
});
|
|
this.paginatedMatches = 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.retrieveMatches()
|
|
setInterval(() => {
|
|
this.retrieveMatches()
|
|
this.active = this.active === this.paginatedMatches.length ? 1 : this.active+1
|
|
}, 15000)
|
|
}
|
|
|
|
}" x-init="loop()">
|
|
|
|
|
|
<div class="grid-x">
|
|
<template x-for="i in paginatedMatches.length" >
|
|
<template x-for="column in paginatedMatches[i-1]" >
|
|
<div class="cell medium-6 large-6 topblock my-block" x-show="active === i">
|
|
<div class="bubble">
|
|
<template x-for="summon in column" >
|
|
<div class="table-row-4-colums bottom-border">
|
|
<div class="table-cell table-cell-large semibold">
|
|
<template x-for="i in summon.names.length">
|
|
<div x-text="summon.names[i-1]"></div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="table-cell center"><span x-text="summon.weight"></span></div>
|
|
<div class="table-cell large center"><span x-text="summon.date"></span></div>
|
|
<div class="table-cell"><div class="mybox center"><span x-text="summon.stage"></span></div></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock %}
|
|
|