parent
7ac58ffd73
commit
3197938fa0
@ -0,0 +1,15 @@ |
|||||||
|
{% load static %} |
||||||
|
|
||||||
|
<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/style.css' %}" /> |
||||||
|
<link rel="stylesheet" href="{% static 'tournaments/css/broadcast.css' %}" /> |
||||||
|
|
||||||
|
<link |
||||||
|
rel="icon" |
||||||
|
type="image/png" |
||||||
|
href="{% static 'tournaments/images/favicon.png' %}" |
||||||
|
/> |
||||||
@ -1,90 +0,0 @@ |
|||||||
{% 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, |
|
||||||
paginatedGroupStages: null, |
|
||||||
paginatedSummons: null, |
|
||||||
active: 1, |
|
||||||
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) |
|
||||||
}) |
|
||||||
}, |
|
||||||
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 |
|
||||||
}, 15000) |
|
||||||
}, |
|
||||||
pageCount() { |
|
||||||
return this.paginatedMatches.length + this.paginatedGroupStages.length + this.paginatedSummons.length |
|
||||||
} |
|
||||||
|
|
||||||
}" x-init="loop()"> |
|
||||||
|
|
||||||
<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/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/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/broadcasted_group_stage.html' %} |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
{% endblock %} |
|
||||||
@ -0,0 +1,133 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
{% load static %} |
||||||
|
|
||||||
|
<head> |
||||||
|
{% include 'tournaments/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.name }}</h1> |
||||||
|
<h1 class="event"><span x-text="title"></span></h1> |
||||||
|
<!-- <span>Propulsé par Padel Club</span> --> |
||||||
|
</div> |
||||||
|
</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/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/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/broadcasted_group_stage.html' %} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</main> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue