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 7640b9bb23
commit 5d71da4875
1 changed files with 49 additions and 73 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. 120
      tournaments/templates/tournaments/broadcast/broadcasted_planning.html

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

@ -4,6 +4,7 @@
<html> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="{% static 'tournaments/css/foundation.min.css' %}" /> <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/basics.css' %}" />
<link rel="stylesheet" href="{% static 'tournaments/css/style.css' %}" /> <link rel="stylesheet" href="{% static 'tournaments/css/style.css' %}" />
@ -12,17 +13,38 @@
.running { .running {
background-color: #90ee90 !important; background-color: #90ee90 !important;
} }
.bubble-footer.score, .match-cell .bubble { .match-cell {
box-sizing: border-box;
padding: 0;
flex-grow: 0;
flex-shrink: 0;
}
.match-cell .bubble {
height: 8rem; height: 8rem;
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: 1.2em; font-size: clamp(0.8rem, 1vw + 0.4rem, 1.2rem);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%;
color: black; color: black;
background-color: white;
margin: 0;
width: 100%;
}
.match-cell .bubble.even {
background-color: white;
}
.match-cell .bubble.empty {
background-color: rgba(173, 216, 230, 0.3);
color: white;
}
.court-label {
box-sizing: border-box;
padding: 0;
flex-grow: 0;
flex-shrink: 0;
} }
.court-label .bubble { .court-label .bubble {
height: 4rem; height: 4rem;
@ -36,46 +58,16 @@
font-size: 1em; font-size: 1em;
color: black; color: black;
} }
.match-cell .bubble { .courts-row,
background-color: white; /* Light blue */ .matches-row {
}
.match-cell .bubble.even {
background-color: white; /* Light mint */
}
.match-cell .bubble.empty {
background-color: rgba(173, 216, 230, 0.3); /* Light blue */
color: white;
}
.match-cell, .court-label {
width: 165px;
display: flex; display: flex;
}
/* Adjust width when court count is 5 or more */
.court-label .bubble,
.match-cell .bubble {
width: 100%;
margin: 0;
}
.court-label .bubble,
.cell.large-6 {
width: 50%;
padding: 0px;
}
.court-label .bubble,
.cell.large-12 {
width: 100%; width: 100%;
padding: 0px; gap: 20px;
} }
.grid-x { .grid-x {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.courts-row,
.matches-row {
display: flex;
width: 100%;
gap: 20px;
}
</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' %}" />
@ -83,7 +75,6 @@
<title>Programmation</title> <title>Programmation</title>
<script src="{% static 'tournaments/js/alpine.min.js' %}"></script> <script src="{% static 'tournaments/js/alpine.min.js' %}"></script>
<!-- Matomo -->
<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" */
@ -99,7 +90,6 @@
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>
<!-- End Matomo Code -->
</head> </head>
<body x-data="{ <body x-data="{
@ -108,7 +98,7 @@
currentPageIndex: 0, currentPageIndex: 0,
matchGroups: [], matchGroups: [],
courtCount: {{ tournament.court_count|default:1 }}, courtCount: {{ tournament.court_count|default:1 }},
groupsPerPage: 8, groupsPerPage: 6,
retrieveData() { retrieveData() {
fetch('/tournament/{{ tournament.id }}/planning/json/') fetch('/tournament/{{ tournament.id }}/planning/json/')
@ -131,7 +121,6 @@
return group.name && formattedDay && group.name.includes(formattedDay); return group.name && formattedDay && group.name.includes(formattedDay);
}); });
// If court count is 5 or more, show fewer groups per page
let groupsPerPageThreshold = this.courtCount >= 5 ? Math.ceil(this.groupsPerPage / 2) : this.groupsPerPage; let groupsPerPageThreshold = this.courtCount >= 5 ? Math.ceil(this.groupsPerPage / 2) : this.groupsPerPage;
const paginatedGroups = []; const paginatedGroups = [];
@ -148,9 +137,7 @@
}, },
organizeMatchesByCourt(matches) { organizeMatchesByCourt(matches) {
// Create an array of court positions, each containing the match or null
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) {
@ -161,7 +148,6 @@
} }
}); });
} }
return courtMatches; return courtMatches;
}, },
@ -186,7 +172,17 @@
this.currentDayIndex = 0; this.currentDayIndex = 0;
this.currentPageIndex = 0; this.currentPageIndex = 0;
} }
}, 15000); }, 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 {
const reductionFactor = 0.8; // Adjust this value (e.g., 0.8 for more reduction)
return `calc((100% / (${this.courtCount} * 2)) * ${reductionFactor})`;
}
} }
}" x-init="loop()"> }" x-init="loop()">
@ -206,14 +202,14 @@
<div class="wrapper"> <div class="wrapper">
<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 large-12">
<div style="display: flex; margin-bottom: 20px;"> <div style="display: flex; margin-bottom: 20px;">
<div class="bubble-footer score ws bold" style="visibility: hidden; display: flex; align-items: center; justify-content: center; margin: 0; width: 7em; margin-right: 15px; height: 40px;"> <div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 20px; width: 8rem;">
<h1 class="score ws bold" style="margin: 0; padding: 0;">00:00</h1> <h1 class="event">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">
<div class="court-label"> <div class="court-label" :style="{'width': calculateFractionWidth()}">
<div class="bubble"> <div class="bubble">
<div class="score ws bold">Terrain <span x-text="courtNum"></span></div> <div class="score ws bold">Terrain <span x-text="courtNum"></span></div>
</div> </div>
@ -222,24 +218,6 @@
</div> </div>
</div> </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: 20px;">
<div class="bubble-footer score ws bold" style="visibility: hidden; display: flex; align-items: center; justify-content: center; margin: 0; width: 7em; margin-right: 15px; height: 40px;">
<h1 class="score ws bold" style="margin: 0; padding: 0;">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">
<div class="bubble">
<div class="score ws bold">Terrain <span x-text="courtNum"></span></div>
</div>
</div>
</template>
</div>
</div>
</div>
</div> </div>
<template x-for="(day, dayIndex) in days" :key="day"> <template x-for="(day, dayIndex) in days" :key="day">
@ -248,17 +226,15 @@
<div x-show="currentPageIndex === pageIndex"> <div x-show="currentPageIndex === pageIndex">
<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 large-12">
<div style="display: flex; margin-bottom: 20px;"> <div style="display: flex; margin-bottom: 20px;">
<!-- Group name container --> <div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 20px; width: 8rem;">
<div class="bubble-footer score ws bold" style="display: flex; align-items: center; justify-content: center; margin: 0; width: 7em; margin-right: 15px;"> <h1 class="event" x-text="group.name.slice(-5)"></h1>
<h1 class="score ws bold" style="margin: 0; padding: 0;" x-text="group.name.slice(-5)"></h1>
</div> </div>
<!-- Matches container -->
<div class="matches-row"> <div class="matches-row">
<template x-for="(match, courtIndex) in organizeMatchesByCourt(group.matches)" :key="courtIndex"> <template x-for="(match, courtIndex) in organizeMatchesByCourt(group.matches)" :key="courtIndex">
<div class="match-cell"> <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="matchtitle" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div>

Write Preview
Loading…
Cancel
Save