Ajout de fonctionnalités:
Ajout de notes personnels et de notes d'équipe avec historique. Ajout de prise de rendez-vous avec un coach selon ses disponibilités
This commit is contained in:
+429
-186
@@ -7,6 +7,7 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-futbol"></i> Edit Match</h3>
|
||||
<p class="text-muted small">Match Type: <strong>{{ match.match_type.replace('_', ' ').title() }}</strong></p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ url_for('matches.edit_match', match_id=match.id) }}" class="form" id="editMatchForm">
|
||||
@@ -36,7 +37,7 @@
|
||||
{% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}
|
||||
<hr class="section-divider">
|
||||
<h4 class="section-title"><i class="fas fa-clock"></i> Select Match Time</h4>
|
||||
<p class="text-muted small">Click time slots consecutively to set match duration. Available players will be auto-selected below.</p>
|
||||
<p class="text-muted small">Click time slots consecutively to set match duration. Players available in all selected time blocks are shown below.</p>
|
||||
|
||||
<div id="merged-disponibility-selected" class="merged-disponibility-selected-display hidden">
|
||||
<span>Selected time:</span>
|
||||
@@ -83,120 +84,111 @@
|
||||
</div>
|
||||
|
||||
<!-- Team vs Team Selection -->
|
||||
{% if match.match_type == 'team_vs_team' %}
|
||||
<hr class="section-divider">
|
||||
<h4 class="section-title"><i class="fas fa-users"></i> Teams</h4>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="team1_id">Team 1</label>
|
||||
<select name="team1_id" id="team1_id" class="form-select">
|
||||
<option value="">-- Select Team 1 --</option>
|
||||
{% for team in teams %}
|
||||
<option value="{{ team.id }}" {% if match.team1_id == team.id %}selected{% endif %}>{{ team.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div id="team-vs-team-section" {% if match.match_type != 'team_vs_team' %}class="hidden"{% endif %}>
|
||||
<hr class="section-divider">
|
||||
<h4 class="section-title"><i class="fas fa-users"></i> Teams</h4>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="team1_id">Team 1</label>
|
||||
<select name="team1_id" id="team1_id" class="form-select">
|
||||
<option value="">-- Select Team 1 --</option>
|
||||
{% for team in teams %}
|
||||
<option value="{{ team.id }}" {% if match.team1_id == team.id %}selected{% endif %}>{{ team.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="team2_id">Team 2</label>
|
||||
<select name="team2_id" id="team2_id" class="form-select">
|
||||
<option value="">-- Select Team 2 --</option>
|
||||
{% for team in teams %}
|
||||
<option value="{{ team.id }}" {% if match.team2_id == team.id %}selected{% endif %}>{{ team.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="team2_id">Team 2</label>
|
||||
<select name="team2_id" id="team2_id" class="form-select">
|
||||
<option value="">-- Select Team 2 --</option>
|
||||
{% for team in teams %}
|
||||
<option value="{{ team.id }}" {% if match.team2_id == team.id %}selected{% endif %}>{{ team.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<!-- Show team rosters -->
|
||||
<div class="team-rosters mt-3">
|
||||
{% if match.team1 %}
|
||||
<div class="team-roster">
|
||||
<h5>{{ match.team1.name }}</h5>
|
||||
<ul class="team-members-list">
|
||||
{% for member in match.team1.members %}
|
||||
<li>{{ member.player.full_name if member.player else 'Unknown Player' }}{% if member.position %} <span class="position-tag">{{ member.position }}</span>{% endif %}</li>
|
||||
{% else %}
|
||||
<li class="text-muted">No players assigned</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if match.team2 %}
|
||||
<div class="team-roster">
|
||||
<h5>{{ match.team2.name }}</h5>
|
||||
<ul class="team-members-list">
|
||||
{% for member in match.team2.members %}
|
||||
<li>{{ member.player.full_name if member.player else 'Unknown Player' }}{% if member.position %} <span class="position-tag">{{ member.position }}</span>{% endif %}</li>
|
||||
{% else %}
|
||||
<li class="text-muted">No players assigned</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Show team rosters -->
|
||||
<div class="team-rosters mt-3">
|
||||
{% if match.team1 %}
|
||||
<div class="team-roster">
|
||||
<h5>{{ match.team1.name }}</h5>
|
||||
<ul class="team-members-list">
|
||||
{% for member in match.team1.members %}
|
||||
<li>{{ member.player.full_name if member.player else 'Unknown Player' }}{% if member.position %} <span class="position-tag">{{ member.position }}</span>{% endif %}</li>
|
||||
{% else %}
|
||||
<li class="text-muted">No players assigned</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if match.team2 %}
|
||||
<div class="team-roster">
|
||||
<h5>{{ match.team2.name }}</h5>
|
||||
<ul class="team-members-list">
|
||||
{% for member in match.team2.members %}
|
||||
<li>{{ member.player.full_name if member.player else 'Unknown Player' }}{% if member.position %} <span class="position-tag">{{ member.position }}</span>{% endif %}</li>
|
||||
{% else %}
|
||||
<li class="text-muted">No players assigned</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Player vs Player Selection -->
|
||||
{% elif match.match_type == 'player_vs_player' %}
|
||||
<hr class="section-divider">
|
||||
<h4 class="section-title"><i class="fas fa-user-friends"></i> Select Players</h4>
|
||||
|
||||
<!-- Randomize Teams Section -->
|
||||
<div class="randomize-section">
|
||||
<div class="randomize-controls">
|
||||
<label><i class="fas fa-random"></i> Randomize Teams:</label>
|
||||
<input type="number" id="team1-size" class="randomize-input" min="1" value="1" onchange="updateRandomizePreview()">
|
||||
<span>vs</span>
|
||||
<span id="team2-size-preview" class="randomize-preview">0</span>
|
||||
<button type="button" class="btn btn-sm randomize-btn" onclick="randomizeTeams()">
|
||||
<i class="fas fa-random"></i> Randomize
|
||||
</button>
|
||||
<div id="player-vs-player-section" {% if match.match_type != 'player_vs_player' %}class="hidden"{% endif %}>
|
||||
<hr class="section-divider">
|
||||
<h4 class="section-title"><i class="fas fa-user-friends"></i> Select Players</h4>
|
||||
|
||||
<!-- Randomize Teams Section -->
|
||||
<div class="randomize-section">
|
||||
<div class="randomize-controls">
|
||||
<label><i class="fas fa-random"></i> Randomize Teams:</label>
|
||||
<input type="number" id="team1-size" class="randomize-input" min="1" value="1" onchange="updateRandomizePreview()">
|
||||
<span>vs</span>
|
||||
<span id="team2-size-preview" class="randomize-preview">0</span>
|
||||
<button type="button" class="btn btn-sm randomize-btn" onclick="randomizeTeams()">
|
||||
<i class="fas fa-random"></i> Randomize
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-muted small" id="randomize-hint">Select players then click Randomize to split them into teams.</p>
|
||||
</div>
|
||||
<p class="text-muted small" id="randomize-hint">Select players then click Randomize to split them into teams.</p>
|
||||
</div>
|
||||
|
||||
{% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}
|
||||
<p class="text-muted small"><i class="fas fa-info-circle"></i> Green indicators show player availability for the match date/time</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Team 1 Players</label>
|
||||
<div class="checkbox-grid" id="team1-players-list">
|
||||
{% for player in all_players %}
|
||||
<label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
|
||||
<input type="checkbox" name="team1_player_ids" value="{{ player.id }}" {% if player.id in team1_player_ids %}checked{% endif %} onchange="handleTeamSelection(this, 1)">
|
||||
{{ player.full_name }}
|
||||
<span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
|
||||
<div class="pvp-layout">
|
||||
<div class="team-column">
|
||||
<h5 class="team-header">Team 1</h5>
|
||||
<div id="team1-selection" class="team-selection"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Team 2 Players</label>
|
||||
<div class="checkbox-grid" id="team2-players-list">
|
||||
{% for player in all_players %}
|
||||
<label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
|
||||
<input type="checkbox" name="team2_player_ids" value="{{ player.id }}" {% if player.id in team2_player_ids %}checked{% endif %} onchange="handleTeamSelection(this, 2)">
|
||||
{{ player.full_name }}
|
||||
<span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
|
||||
<div class="player-pool">
|
||||
<div class="player-pool-header">Available Players</div>
|
||||
<div id="available-players-pool" class="available-players-pool">
|
||||
<p class="text-muted small">All registered players are shown. Click time slots to filter available players.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-column">
|
||||
<h5 class="team-header">Team 2</h5>
|
||||
<div id="team2-selection" class="team-selection"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="team1_player_ids" id="team1-player-ids-input">
|
||||
<input type="hidden" name="team2_player_ids" id="team2-player-ids-input">
|
||||
</div>
|
||||
|
||||
<!-- Player Scrim Selection -->
|
||||
{% else %}
|
||||
<hr class="section-divider">
|
||||
<h4 class="section-title"><i class="fas fa-users"></i> Select Players</h4>
|
||||
|
||||
{% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}
|
||||
<p class="text-muted small"><i class="fas fa-info-circle"></i> Green indicators show player availability for the match date/time</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-group">
|
||||
<label>Players</label>
|
||||
<div id="player-scrim-section" {% if match.match_type != 'player_scrim' %}class="hidden"{% endif %}>
|
||||
<hr class="section-divider">
|
||||
<h4 class="section-title"><i class="fas fa-users"></i> Select Players</h4>
|
||||
|
||||
{% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}
|
||||
<p class="text-muted small"><i class="fas fa-info-circle"></i> Green indicators show player availability for the match date/time</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="checkbox-grid" id="scrim-players-list">
|
||||
{% for player in all_players %}
|
||||
<label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
|
||||
@@ -207,7 +199,6 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
@@ -223,7 +214,169 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<style>
|
||||
.pvp-layout {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.team-column {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
.team-header {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.team-selection {
|
||||
min-height: 200px;
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
.team-selection .player-item {
|
||||
padding: 8px 12px;
|
||||
margin: 5px 0;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.team-selection .player-item:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
.player-pool {
|
||||
flex: 2;
|
||||
min-width: 200px;
|
||||
}
|
||||
.player-pool-header {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.available-players-pool {
|
||||
min-height: 200px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.available-players-pool .player-item {
|
||||
padding: 8px 12px;
|
||||
margin: 5px 0;
|
||||
background: var(--success-light);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.available-players-pool .player-item:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.available-players-pool .player-item.available {
|
||||
background: var(--success-light);
|
||||
border-color: var(--success);
|
||||
}
|
||||
.available-players-pool .player-item.unavailable {
|
||||
background: var(--gray-100);
|
||||
border-color: var(--gray-300);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.player-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.player-item .remove-btn {
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
.player-item .remove-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.player-actions {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.player-actions .btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.player-name {
|
||||
flex: 1;
|
||||
}
|
||||
.team-selection .player-actions {
|
||||
display: none;
|
||||
}
|
||||
.team-selection .player-item:hover .remove-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.randomize-section {
|
||||
margin: 15px 0;
|
||||
padding: 10px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.randomize-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.randomize-controls label {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
.randomize-input {
|
||||
width: 60px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.randomize-preview {
|
||||
font-weight: bold;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.randomize-btn {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
.randomize-btn:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Player data as simple JS object (id -> full_name)
|
||||
var playerDataById = {
|
||||
player_data: {
|
||||
{%- for p in all_players %}
|
||||
{{ p.id }}: "{{ p.full_name | escape }}",
|
||||
{%- endfor %}
|
||||
}
|
||||
};
|
||||
|
||||
// All registered player IDs
|
||||
var allRegisteredPlayers = [
|
||||
{%- for p in all_players %}
|
||||
{{ p.id }},
|
||||
{%- endfor %}
|
||||
];
|
||||
|
||||
// Current team assignments from server
|
||||
var initialTeam1Ids = {{ team1_player_ids|tojson }};
|
||||
var initialTeam2Ids = {{ team2_player_ids|tojson }};
|
||||
|
||||
// Time slots from 12pm (12:00) to 12am (24:00)
|
||||
var TIME_SLOTS = [];
|
||||
for (var h = 12; h <= 24; h++) {
|
||||
@@ -258,10 +411,11 @@ var DAYS = [
|
||||
];
|
||||
|
||||
var selectedDate = '';
|
||||
var selectedSlots = []; // Array of selected time slots: ['17:00', '17:30', '18:00']
|
||||
var selectedSlots = [];
|
||||
var allDisponibilities = {};
|
||||
var canViewDisponibilities = {% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}true{% else %}false{% endif %};
|
||||
var totalPlayers = {{ all_players|length }};
|
||||
var availablePlayersForSlots = []; // Players available in ALL selected slots
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@@ -273,6 +427,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
selectedDate = this.value;
|
||||
if (allDisponibilitiesInitialized()) {
|
||||
renderMergedDisponibilityGrid();
|
||||
updatePlayerPool();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -302,8 +457,34 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
}
|
||||
|
||||
renderMergedDisponibilityGrid();
|
||||
updateDisponibilityIndicators();
|
||||
// Initialize team assignments for player_vs_player matches
|
||||
// Populate Team 1
|
||||
initialTeam1Ids.forEach(function(pid) {
|
||||
var teamDiv = document.getElementById('team1-selection');
|
||||
var playerName = playerDataById.player_data[pid];
|
||||
if (playerName) {
|
||||
var html = '<div class="player-item" data-player-id="' + pid + '" onclick="returnToPool(' + pid + ', event)">';
|
||||
html += playerName;
|
||||
html += '<span class="remove-btn">↺</span>';
|
||||
html += '</div>';
|
||||
teamDiv.insertAdjacentHTML('beforeend', html);
|
||||
}
|
||||
});
|
||||
|
||||
// Populate Team 2
|
||||
initialTeam2Ids.forEach(function(pid) {
|
||||
var teamDiv = document.getElementById('team2-selection');
|
||||
var playerName = playerDataById.player_data[pid];
|
||||
if (playerName) {
|
||||
var html = '<div class="player-item" data-player-id="' + pid + '" onclick="returnToPool(' + pid + ', event)">';
|
||||
html += playerName;
|
||||
html += '<span class="remove-btn">↺</span>';
|
||||
html += '</div>';
|
||||
teamDiv.insertAdjacentHTML('beforeend', html);
|
||||
}
|
||||
});
|
||||
|
||||
updateHiddenInputs();
|
||||
updateRandomizePreview();
|
||||
});
|
||||
|
||||
@@ -318,6 +499,7 @@ function fetchDisponibilities() {
|
||||
.then(function(data) {
|
||||
allDisponibilities = data;
|
||||
renderMergedDisponibilityGrid();
|
||||
updatePlayerPool();
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error('Error fetching disponibilities:', error);
|
||||
@@ -518,8 +700,10 @@ function fetchAvailablePlayersForSlots() {
|
||||
var jsDay = dateObj.getDay();
|
||||
var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1;
|
||||
|
||||
// Find players available in ANY selected slot
|
||||
var availableIds = [];
|
||||
for (var playerId in allDisponibilities) {
|
||||
if (!allRegisteredPlayers.includes(parseInt(playerId))) continue;
|
||||
var playerSlots = getSlotsForPlayer(parseInt(playerId), dayOfWeek);
|
||||
var hasSlot = selectedSlots.some(function(slot) {
|
||||
return playerSlots.includes(slot);
|
||||
@@ -529,18 +713,8 @@ function fetchAvailablePlayersForSlots() {
|
||||
}
|
||||
}
|
||||
|
||||
var matchType = '{{ match.match_type }}';
|
||||
|
||||
if (matchType === 'player_vs_player') {
|
||||
document.querySelectorAll('input[name="team1_player_ids"], input[name="team2_player_ids"]').forEach(function(cb) {
|
||||
cb.checked = availableIds.includes(parseInt(cb.value));
|
||||
});
|
||||
} else if (matchType === 'player_scrim') {
|
||||
document.querySelectorAll('input[name="player_ids"]').forEach(function(cb) {
|
||||
cb.checked = availableIds.includes(parseInt(cb.value));
|
||||
});
|
||||
}
|
||||
|
||||
// Update player pool for PvP section
|
||||
updatePlayerPool();
|
||||
updateRandomizePreview();
|
||||
}
|
||||
|
||||
@@ -552,12 +726,111 @@ function clearTimeSelection() {
|
||||
document.querySelectorAll('.merged-disponibility-time-block').forEach(function(el) {
|
||||
el.classList.remove('selected');
|
||||
});
|
||||
availablePlayersForSlots = [];
|
||||
updatePlayerPool();
|
||||
}
|
||||
|
||||
function updatePlayerPool() {
|
||||
var pool = document.getElementById('available-players-pool');
|
||||
if (!pool) return;
|
||||
|
||||
var team1Ids = getSelectedTeamIds(1);
|
||||
var team2Ids = getSelectedTeamIds(2);
|
||||
var assignedIds = [...team1Ids, ...team2Ids];
|
||||
|
||||
// When time slots are selected, show only players available in all slots who aren't assigned yet
|
||||
// When no time slots selected, show all registered players
|
||||
var playersToShow = selectedSlots.length > 0 ? availablePlayersForSlots : allRegisteredPlayers;
|
||||
|
||||
if (playersToShow.length === 0) {
|
||||
pool.innerHTML = '<p class="text-muted small">No players available</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var dateParts = selectedDate.split('-');
|
||||
var dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
|
||||
var jsDay = dateObj.getDay();
|
||||
var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1;
|
||||
|
||||
var html = '';
|
||||
playersToShow.forEach(function(pid) {
|
||||
if (assignedIds.includes(pid)) return;
|
||||
|
||||
var playerName = playerDataById.player_data[pid];
|
||||
if (!playerName) return;
|
||||
|
||||
// Check if player is available during selected time slots
|
||||
var isAvailable = true;
|
||||
if (selectedSlots.length > 0 && allDisponibilities[pid]) {
|
||||
var playerSlots = getSlotsForPlayer(pid, dayOfWeek);
|
||||
isAvailable = selectedSlots.every(function(slot) {
|
||||
return playerSlots.includes(slot);
|
||||
});
|
||||
}
|
||||
|
||||
var availabilityClass = isAvailable ? 'available' : 'unavailable';
|
||||
|
||||
html += '<div class="player-item ' + availabilityClass + '" data-player-id="' + pid + '">';
|
||||
html += '<span class="player-name">' + playerName + '</span>';
|
||||
html += '<div class="player-actions">';
|
||||
html += '<button type="button" class="btn btn-sm btn-primary" onclick="assignToTeam(' + pid + ', 1)">T1</button>';
|
||||
html += '<button type="button" class="btn btn-sm btn-secondary" onclick="assignToTeam(' + pid + ', 2)">T2</button>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
pool.innerHTML = html || '<p class="text-muted small">No players available</p>';
|
||||
updateRandomizePreview();
|
||||
}
|
||||
|
||||
function assignToTeam(playerId, teamSide) {
|
||||
// First, remove player from any team they're already in
|
||||
document.querySelectorAll('[data-player-id="' + playerId + '"]').forEach(function(el) {
|
||||
el.remove();
|
||||
});
|
||||
|
||||
var teamDiv = document.getElementById('team' + teamSide + '-selection');
|
||||
var playerName = playerDataById.player_data[playerId];
|
||||
if (!playerName) return;
|
||||
|
||||
var html = '<div class="player-item" data-player-id="' + playerId + '" onclick="returnToPool(' + playerId + ', event)">';
|
||||
html += playerName;
|
||||
html += '<span class="remove-btn">↺</span>';
|
||||
html += '</div>';
|
||||
|
||||
teamDiv.insertAdjacentHTML('beforeend', html);
|
||||
updateHiddenInputs();
|
||||
updatePlayerPool();
|
||||
}
|
||||
|
||||
function returnToPool(playerId, event) {
|
||||
if (event) event.stopPropagation();
|
||||
document.querySelectorAll('[data-player-id="' + playerId + '"]').forEach(function(el) {
|
||||
el.remove();
|
||||
});
|
||||
updateHiddenInputs();
|
||||
updatePlayerPool();
|
||||
}
|
||||
|
||||
function getSelectedTeamIds(teamSide) {
|
||||
var ids = [];
|
||||
document.querySelectorAll('#team' + teamSide + '-selection [data-player-id]').forEach(function(el) {
|
||||
ids.push(parseInt(el.getAttribute('data-player-id')));
|
||||
});
|
||||
return ids;
|
||||
}
|
||||
|
||||
function updateHiddenInputs() {
|
||||
var team1Ids = getSelectedTeamIds(1);
|
||||
var team2Ids = getSelectedTeamIds(2);
|
||||
document.getElementById('team1-player-ids-input').value = team1Ids.join(',');
|
||||
document.getElementById('team2-player-ids-input').value = team2Ids.join(',');
|
||||
}
|
||||
|
||||
function updateRandomizePreview() {
|
||||
var checkedCount = document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="team2_player_ids"]:checked').length;
|
||||
var assignedCount = document.querySelectorAll('#team1-selection [data-player-id], #team2-selection [data-player-id]').length;
|
||||
var team1Size = parseInt(document.getElementById('team1-size').value) || 1;
|
||||
var team2Size = checkedCount - team1Size;
|
||||
var team2Size = assignedCount - team1Size;
|
||||
|
||||
if (team2Size < 0) team2Size = 0;
|
||||
|
||||
@@ -565,92 +838,62 @@ function updateRandomizePreview() {
|
||||
}
|
||||
|
||||
function randomizeTeams() {
|
||||
var allChecked = [];
|
||||
var allAssigned = [];
|
||||
|
||||
document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="team2_player_ids"]:checked').forEach(function(cb) {
|
||||
allChecked.push(parseInt(cb.value));
|
||||
// Get all players currently in either team
|
||||
document.querySelectorAll('#team1-selection [data-player-id], #team2-selection [data-player-id]').forEach(function(el) {
|
||||
allAssigned.push(parseInt(el.getAttribute('data-player-id')));
|
||||
});
|
||||
|
||||
if (allChecked.length === 0) {
|
||||
alert('Please select at least one player before randomizing teams.');
|
||||
if (allAssigned.length === 0) {
|
||||
alert('Please assign at least one player before randomizing teams.');
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = allChecked.length - 1; i > 0; i--) {
|
||||
// Shuffle the array using Fisher-Yates
|
||||
for (var i = allAssigned.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = allChecked[i];
|
||||
allChecked[i] = allChecked[j];
|
||||
allChecked[j] = temp;
|
||||
var temp = allAssigned[i];
|
||||
allAssigned[i] = allAssigned[j];
|
||||
allAssigned[j] = temp;
|
||||
}
|
||||
|
||||
var team1Size = parseInt(document.getElementById('team1-size').value) || 1;
|
||||
var team1Players = allChecked.slice(0, team1Size);
|
||||
var team2Players = allChecked.slice(team1Size);
|
||||
var team1Players = allAssigned.slice(0, team1Size);
|
||||
var team2Players = allAssigned.slice(team1Size);
|
||||
|
||||
document.querySelectorAll('input[name="team1_player_ids"], input[name="team2_player_ids"]').forEach(function(cb) {
|
||||
cb.checked = false;
|
||||
// Clear both teams
|
||||
document.querySelectorAll('#team1-selection [data-player-id], #team2-selection [data-player-id]').forEach(function(el) {
|
||||
el.remove();
|
||||
});
|
||||
|
||||
// Assign shuffled players to teams
|
||||
team1Players.forEach(function(pid) {
|
||||
var cb = document.querySelector('input[name="team1_player_ids"][value="' + pid + '"]');
|
||||
if (cb) cb.checked = true;
|
||||
var teamDiv = document.getElementById('team1-selection');
|
||||
var playerName = playerDataById.player_data[pid];
|
||||
if (playerName) {
|
||||
var html = '<div class="player-item" data-player-id="' + pid + '" onclick="returnToPool(' + pid + ', event)">';
|
||||
html += playerName;
|
||||
html += '<span class="remove-btn">↺</span>';
|
||||
html += '</div>';
|
||||
teamDiv.insertAdjacentHTML('beforeend', html);
|
||||
}
|
||||
});
|
||||
|
||||
team2Players.forEach(function(pid) {
|
||||
var cb = document.querySelector('input[name="team2_player_ids"][value="' + pid + '"]');
|
||||
if (cb) cb.checked = true;
|
||||
});
|
||||
|
||||
updateRandomizePreview();
|
||||
}
|
||||
|
||||
function handleTeamSelection(checkbox, teamSide) {
|
||||
var otherSide = teamSide === 1 ? 2 : 1;
|
||||
var otherCheckboxes = document.querySelectorAll('input[name="team' + otherSide + '_player_ids"]');
|
||||
var playerId = checkbox.value;
|
||||
|
||||
otherCheckboxes.forEach(function(other) {
|
||||
if (other.value === playerId) {
|
||||
other.checked = false;
|
||||
var teamDiv = document.getElementById('team2-selection');
|
||||
var playerName = playerDataById.player_data[pid];
|
||||
if (playerName) {
|
||||
var html = '<div class="player-item" data-player-id="' + pid + '" onclick="returnToPool(' + pid + ', event)">';
|
||||
html += playerName;
|
||||
html += '<span class="remove-btn">↺</span>';
|
||||
html += '</div>';
|
||||
teamDiv.insertAdjacentHTML('beforeend', html);
|
||||
}
|
||||
});
|
||||
|
||||
updateHiddenInputs();
|
||||
updateRandomizePreview();
|
||||
}
|
||||
|
||||
function updateDisponibilityIndicators() {
|
||||
if (!canViewDisponibilities) return;
|
||||
|
||||
var dateInput = document.getElementById('date').value;
|
||||
var startTimeInput = document.getElementById('start_time').value;
|
||||
|
||||
if (!dateInput || !startTimeInput) return;
|
||||
|
||||
var dateParts = dateInput.split('-');
|
||||
var dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
|
||||
var jsDay = dateObj.getDay();
|
||||
var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1;
|
||||
|
||||
document.querySelectorAll('.disponibility-indicator').forEach(function(indicator) {
|
||||
var playerId = indicator.getAttribute('data-player-id');
|
||||
var playerData = allDisponibilities[playerId];
|
||||
|
||||
if (playerData && playerData.disponibilities) {
|
||||
var playerSlots = getSlotsForPlayer(parseInt(playerId), dayOfWeek);
|
||||
var isAvailable = selectedSlots.some(function(slot) {
|
||||
return playerSlots.includes(slot);
|
||||
});
|
||||
|
||||
indicator.style.display = 'inline-block';
|
||||
indicator.style.width = '12px';
|
||||
indicator.style.height = '12px';
|
||||
indicator.style.borderRadius = '50%';
|
||||
indicator.style.marginLeft = '8px';
|
||||
indicator.style.backgroundColor = isAvailable ? '#10b981' : '#9ca3af';
|
||||
} else {
|
||||
indicator.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user