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. 122
      tournaments/templates/tournaments/broadcast/broadcasted_planning.html

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

@ -4,6 +4,7 @@
<html>
<head>
<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/basics.css' %}" />
<link rel="stylesheet" href="{% static 'tournaments/css/style.css' %}" />
@ -12,17 +13,38 @@
.running {
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;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
font-size: 1.2em;
font-size: clamp(0.8rem, 1vw + 0.4rem, 1.2rem);
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
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 {
height: 4rem;
@ -36,46 +58,16 @@
font-size: 1em;
color: black;
}
.match-cell .bubble {
background-color: white; /* Light blue */
}
.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;
.courts-row,
.matches-row {
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%;
padding: 0px;
gap: 20px;
}
.grid-x {
display: flex;
flex-wrap: wrap;
}
.courts-row,
.matches-row {
display: flex;
width: 100%;
gap: 20px;
}
</style>
<link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" />
@ -83,7 +75,6 @@
<title>Programmation</title>
<script src="{% static 'tournaments/js/alpine.min.js' %}"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
@ -99,8 +90,7 @@
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
</head>
<body x-data="{
days: [],
@ -108,7 +98,7 @@
currentPageIndex: 0,
matchGroups: [],
courtCount: {{ tournament.court_count|default:1 }},
groupsPerPage: 8,
groupsPerPage: 6,
retrieveData() {
fetch('/tournament/{{ tournament.id }}/planning/json/')
@ -131,7 +121,6 @@
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;
const paginatedGroups = [];
@ -148,9 +137,7 @@
},
organizeMatchesByCourt(matches) {
// Create an array of court positions, each containing the match or null
const courtMatches = Array(this.courtCount).fill(null);
if (matches && matches.length > 0) {
matches.forEach(match => {
if (match && match.court) {
@ -161,7 +148,6 @@
}
});
}
return courtMatches;
},
@ -186,7 +172,17 @@
this.currentDayIndex = 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()">
@ -206,14 +202,14 @@
<div class="wrapper">
<main>
<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 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 class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 20px; width: 8rem;">
<h1 class="event">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="court-label" :style="{'width': calculateFractionWidth()}">
<div class="bubble">
<div class="score ws bold">Terrain <span x-text="courtNum"></span></div>
</div>
@ -222,24 +218,6 @@
</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>
<template x-for="(day, dayIndex) in days" :key="day">
@ -248,17 +226,15 @@
<div x-show="currentPageIndex === pageIndex">
<div class="grid-x">
<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;">
<!-- Group name container -->
<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="score ws bold" style="margin: 0; padding: 0;" x-text="group.name.slice(-5)"></h1>
<div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 20px; width: 8rem;">
<h1 class="event" x-text="group.name.slice(-5)"></h1>
</div>
<!-- Matches container -->
<div class="matches-row">
<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">
<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>

Write Preview
Loading…
Cancel
Save