staxriver
/
padelclub_backend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add planning event

Browse Source
sync_v2
Raz 6 months ago
parent 268258425a
commit ed8cea7ff8
1 changed files with 151 additions and 104 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 255
      tournaments/templates/tournaments/broadcast/broadcasted_planning.html

255
tournaments/templates/tournaments/broadcast/broadcasted_planning.html
Unescape View File

@ -13,6 +13,11 @@
.running { .running {
background-color: #90ee90 !important; background-color: #90ee90 !important;
} }
.timeslot {
font-family: "Anybody-ExtraBold";
font-size: clamp(0.4rem, 1.5vw - 0.2rem, 3rem); /* Adjust these values as needed */
color: #1b223a;
}
.match-cell { .match-cell {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
@ -20,12 +25,13 @@
flex-shrink: 0; flex-shrink: 0;
} }
.match-cell .bubble { .match-cell .bubble {
height: 8rem; height: 14vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
font-size: clamp(0.8rem, 1vw + 0.4rem, 1.2rem); /* Dynamic font size based on viewport width */
font-size: clamp(0.4rem, 1.2vw - 0.2rem, 5rem); /* Adjust these values as needed */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: black; color: black;
@ -47,7 +53,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
.court-label .bubble { .court-label .bubble {
height: 4rem; height: 4vh;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -55,19 +61,44 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1em; /* Slightly smaller dynamic font size for court labels */
font-size: clamp(0.7rem, 0.8vw + 0.1rem, 3rem); /* Adjust these values as needed */
color: black; color: black;
} }
.courts-row, .courts-row,
.matches-row { .matches-row {
display: flex; display: flex;
width: 100%; width: 100%;
gap: 20px; gap: 10px;
} }
.grid-x { .grid-x {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.matchtitle {
font-size: inherit; /* Inherit the dynamic font size from .bubble */
font-weight: bold;
margin-bottom: 0.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.minor-info {
font-size: inherit; /* Inherit the dynamic font size from .bubble */
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.score {
font-size: inherit; /* Inherit the dynamic font size from .bubble */
}
.bold {
font-weight: bold;
}
.ws {
white-space: nowrap;
}
</style> </style>
<link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" /> <link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" />
@ -76,126 +107,126 @@
<script src="{% static 'tournaments/js/alpine.min.js' %}"></script> <script src="{% static 'tournaments/js/alpine.min.js' %}"></script>
<script> <script>
var _paq = window._paq = window._paq || []; var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */ /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]); _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
_paq.push(["setDoNotTrack", true]); _paq.push(["setDoNotTrack", true]);
_paq.push(['trackPageView']); _paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']); _paq.push(['enableLinkTracking']);
(function() { (function() {
var u="//matomo.padelclub.app/"; var u="//matomo.padelclub.app/";
_paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']); _paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; 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); g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})(); })();
</script> </script>
</head> </head>
<body x-data="{ <body x-data="{
days: [], days: [],
currentDayIndex: 0, currentDayIndex: 0,
currentPageIndex: 0, currentPageIndex: 0,
matchGroups: [], matchGroups: [],
courtCount: {{ tournament.court_count|default:1 }}, courtCount: {{ tournament.court_count|default:1 }},
groupsPerPage: 6, groupsPerPage: 6,
retrieveData() { retrieveData() {
fetch('/tournament/{{ tournament.id }}/planning/json/') fetch('/tournament/{{ tournament.id }}/planning/json/')
.then(res => res.json()) .then(res => res.json())
.then((data) => { .then((data) => {
this.days = data.days || []; this.days = data.days || [];
this.matchGroups = data.match_groups || []; this.matchGroups = data.match_groups || [];
this.currentPageIndex = 0; this.currentPageIndex = 0;
if (this.days.length > 0 && this.currentDayIndex >= this.days.length) {
this.currentDayIndex = 0;
}
});
},
getMatchGroupsForDay(day) { if (this.days.length > 0 && this.currentDayIndex >= this.days.length) {
const formattedDay = day; this.currentDayIndex = 0;
const filteredGroups = this.matchGroups.filter(group => { }
if (!group.matches || group.matches.length === 0) return false;
return group.name && formattedDay && group.name.includes(formattedDay);
}); });
},
let groupsPerPageThreshold = this.courtCount >= 5 ? Math.ceil(this.groupsPerPage / 2) : this.groupsPerPage; getMatchGroupsForDay(day) {
const formattedDay = day;
const filteredGroups = this.matchGroups.filter(group => {
if (!group.matches || group.matches.length === 0) return false;
return group.name && formattedDay && group.name.includes(formattedDay);
});
const paginatedGroups = []; let groupsPerPageThreshold = this.courtCount >= 5 ? Math.ceil(this.groupsPerPage / 2) : this.groupsPerPage;
for (let i = 0; i < Math.ceil(filteredGroups.length / groupsPerPageThreshold); i++) {
paginatedGroups.push(filteredGroups.slice(i * groupsPerPageThreshold, (i + 1) * groupsPerPageThreshold)); const paginatedGroups = [];
} for (let i = 0; i < Math.ceil(filteredGroups.length / groupsPerPageThreshold); i++) {
return paginatedGroups; paginatedGroups.push(filteredGroups.slice(i * groupsPerPageThreshold, (i + 1) * groupsPerPageThreshold));
}, }
return paginatedGroups;
},
getCourtNumber(courtName) { getCourtNumber(courtName) {
if (!courtName) return 999; if (!courtName) return 999;
const match = courtName.match(/(\d+)/); const match = courtName.match(/(\d+)/);
return match ? parseInt(match[1]) : 999; return match ? parseInt(match[1]) : 999;
}, },
organizeMatchesByCourt(matches) { organizeMatchesByCourt(matches) {
const courtMatches = Array(this.courtCount).fill(null); const courtMatches = Array(this.courtCount).fill(null);
if (matches && matches.length > 0) { if (matches && matches.length > 0) {
matches.forEach(match => { matches.forEach(match => {
if (match && match.court) { if (match && match.court) {
const courtNum = this.getCourtNumber(match.court); const courtNum = this.getCourtNumber(match.court);
if (courtNum > 0 && courtNum <= this.courtCount) { if (courtNum > 0 && courtNum <= this.courtCount) {
courtMatches[courtNum - 1] = match; courtMatches[courtNum - 1] = match;
}
} }
}); }
} });
return courtMatches; }
}, return courtMatches;
},
loop() { loop() {
this.retrieveData(); this.retrieveData();
setInterval(() => { setInterval(() => {
if (this.days.length > 0) { if (this.days.length > 0) {
const currentDay = this.days[this.currentDayIndex]; const currentDay = this.days[this.currentDayIndex];
const pagesForDay = this.getMatchGroupsForDay(currentDay); const pagesForDay = this.getMatchGroupsForDay(currentDay);
if (pagesForDay && pagesForDay.length > 1) { if (pagesForDay && pagesForDay.length > 1) {
const _currentPageIndex = this.currentPageIndex; const _currentPageIndex = this.currentPageIndex;
this.currentPageIndex = (this.currentPageIndex + 1) % pagesForDay.length; this.currentPageIndex = (this.currentPageIndex + 1) % pagesForDay.length;
if (_currentPageIndex >= 1 && this.currentPageIndex === 0) { if (_currentPageIndex >= 1 && this.currentPageIndex === 0) {
this.currentDayIndex = (this.currentDayIndex + 1) % this.days.length;
}
} else {
this.currentPageIndex = 0;
this.currentDayIndex = (this.currentDayIndex + 1) % this.days.length; this.currentDayIndex = (this.currentDayIndex + 1) % this.days.length;
} }
} else { } else {
this.currentDayIndex = 0;
this.currentPageIndex = 0; this.currentPageIndex = 0;
this.currentDayIndex = (this.currentDayIndex + 1) % this.days.length;
} }
}, 2000);
},
calculateFractionWidth() {
if (this.courtCount >= 5) {
const reductionFactor = 0.9; // Adjust this value (e.g., 0.8 for more reduction)
return `calc((100% / ${this.courtCount}) * ${reductionFactor})`;
} else { } else {
const reductionFactor = 0.8; // Adjust this value (e.g., 0.8 for more reduction) this.currentDayIndex = 0;
return `calc((100% / (${this.courtCount} * 2)) * ${reductionFactor})`; this.currentPageIndex = 0;
} }
}, 2000);
},
calculateFractionWidth() {
if (this.courtCount >= 5) {
const reductionFactor = 0.95; // Adjust this value
return `calc((100% / ${this.courtCount}) * ${reductionFactor})`;
} else {
const reductionFactor = 0.90; // Adjust this value
return `calc((100% / (${this.courtCount})) * ${reductionFactor})`;
} }
}" x-init="loop()"> }
}" x-init="loop()">
<header> <header>
<div id="header"> <div id="header">
<div class="left-content bubble-header"> <div class="left-content bubble-header" style="max-height: 20vh;">
<img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo"> <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
<div class="left-margin"> <div class="left-margin">
<h1 class="club">{{ tournament.broadcast_event_display_name }}</h1> <h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
<h1 class="event" x-text="days[currentDayIndex]"></h1> <h1 class="event" x-text="days[currentDayIndex]"></h1>
</div> </div>
</div> </div>
<div class="right-content">{% qr_from_text qr_code_url options=qr_code_options %}</div> <div class="right-content" style="max-height: 20vh;">{% qr_from_text qr_code_url options=qr_code_options %}</div>
</div> </div>
</header> </header>
@ -203,9 +234,25 @@
<main> <main>
<div class="grid-x"> <div class="grid-x">
<div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}"> <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
<div style="display: flex; margin-bottom: 20px;"> <div style="display: flex; margin-bottom: 10px;">
<div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 20px; width: 8rem;"> <div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
<h1 class="event">00:00</h1> <h1 class="timeslot">00:00</h1>
</div>
<div class="courts-row">
<template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
<div class="court-label" :style="{'width': calculateFractionWidth()}">
<div class="bubble">
<div class="score ws bold">Terrain <span x-text="courtNum"></span></div>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}" x-show="courtCount < 5">
<div style="display: flex; margin-bottom: 10px;">
<div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
<h1 class="timeslot">00:00</h1>
</div> </div>
<div class="courts-row"> <div class="courts-row">
<template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum"> <template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
@ -227,9 +274,9 @@
<div class="grid-x"> <div class="grid-x">
<template x-for="(group, groupIndex) in groupPage" :key="groupIndex"> <template x-for="(group, groupIndex) in groupPage" :key="groupIndex">
<div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}"> <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
<div style="display: flex; margin-bottom: 20px;"> <div style="display: flex; margin-bottom: 10px;">
<div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 20px; width: 8rem;"> <div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
<h1 class="event" x-text="group.name.slice(-5)"></h1> <h1 class="timeslot" x-text="group.name.slice(-5)"></h1>
</div> </div>
<div class="matches-row"> <div class="matches-row">
@ -237,7 +284,7 @@
<div class="match-cell" :style="{'width': calculateFractionWidth()}"> <div class="match-cell" :style="{'width': calculateFractionWidth()}">
<template x-if="match"> <template x-if="match">
<div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1}" style="text-align: center;"> <div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1}" style="text-align: center;">
<div class="matchtitle" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div> <div class="bold" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div>
<template x-if="match.tournament_title"> <template x-if="match.tournament_title">
<div class="minor-info semibold" x-text="match.tournament_title"></div> <div class="minor-info semibold" x-text="match.tournament_title"></div>
</template> </template>
@ -263,11 +310,11 @@
<footer class="footer-broadcast"> <footer class="footer-broadcast">
{% if tournament.event.images.exists %} {% if tournament.event.images.exists %}
<div class="bubble-footer"> <div class="bubble-footer" style="max-height: 16vh;">
<div class="bubble-sponsor"> <div class="bubble-sponsor">
{% for image in tournament.event.images.all %} {% for image in tournament.event.images.all %}
<img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}" <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
class="sponsor-logo-broadcast"> class="sponsor-logo-broadcast">
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save