changement de la gestion des équipes en ajouts de match (bugge)

templates/pages/create_match.html

@@ -41,7 +41,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 will be preselected.</p>
             
             <div id="merged-disponibility-selected" class="merged-disponibility-selected-display hidden">
                 <span>Selected time:</span>
@@ -114,48 +114,29 @@
                 <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>
+                <p class="text-muted small"><i class="fas fa-info-circle"></i> Click on players to assign them to Team 1 or Team 2. Players available in all selected time blocks are shown below.</p>
+                
+                <div class="pvp-layout">
+                    <div class="team-column">
+                        <h5 class="team-header">Team 1</h5>
+                        <div id="team1-selection" class="team-selection"></div>
                     </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"><i class="fas fa-info-circle"></i> Green indicators show player availability for the match date/time</p>
-                
-                <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 }}" onchange="handleTeamSelection(this, 1)">
-                                {{ 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="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 }}" onchange="handleTeamSelection(this, 2)">
-                                {{ player.full_name }}
-                                <span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
-                            </label>
-                            {% endfor %}
-                        </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 -->
@@ -165,17 +146,14 @@
                 
                 <p class="text-muted small"><i class="fas fa-info-circle"></i> Green indicators show player availability for the match date/time</p>
                 
-                <div class="form-group">
-                    <label>Players</label>
-                    <div class="checkbox-grid" id="scrim-players-list">
-                        {% for player in all_players %}
-                        <label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
-                            <input type="checkbox" name="player_ids" value="{{ player.id }}">
-                            {{ player.full_name }}
-                            <span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
-                        </label>
-                        {% endfor %}
-                    </div>
+                <div class="checkbox-grid" id="scrim-players-list">
+                    {% for player in all_players %}
+                    <label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
+                        <input type="checkbox" name="player_ids" value="{{ player.id }}">
+                        {{ player.full_name }}
+                        <span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
+                    </label>
+                    {% endfor %}
                 </div>
             </div>
             
@@ -193,7 +171,103 @@
 {% 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(--accent-color);
+    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;
+    cursor: pointer;
+    font-size: 14px;
+}
+.available-players-pool .player-item:hover {
+    background: var(--success-color);
+    color: white;
+}
+.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;
+}
+</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 %}
+];
+
 // Time slots from 12pm (12:00) to 12am (24:00)
 var TIME_SLOTS = [];
 for (var h = 12; h <= 24; h++) {
@@ -228,19 +302,18 @@ 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() {
-    // Only load disponibilities if user has permission
     {% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}
     fetchDisponibilities();
     {% endif %}
     
-    // Set up date change listener
     document.getElementById('date').addEventListener('change', function() {
         selectedDate = this.value;
         if (allDisponibilitiesInitialized()) {
@@ -248,11 +321,10 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
     
-    // Initialize date
     selectedDate = document.getElementById('date').value;
-    
-    // Initialize match type sections
     toggleMatchType();
+    // Show all players initially
+    updatePlayerPool();
 });
 
 function allDisponibilitiesInitialized() {
@@ -276,17 +348,15 @@ function renderMergedDisponibilityGrid() {
     var grid = document.getElementById('merged-disponibility-grid');
     if (!grid || !canViewDisponibilities) return;
     
-    // Calculate day of week from selected date
     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; // Convert to Mon=0 format
+    var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1;
     
     var html = '<div style="margin-bottom: 10px;"><strong>Click time slots consecutively to set match duration</strong></div>';
     
-    // Always show only the selected day (not all days)
     DAYS.forEach(function(day) {
-        if (day.value !== dayOfWeek) return; // Skip days that don't match
+        if (day.value !== dayOfWeek) return;
         
         var dayRow = '<div class="merged-disponibility-day-row">';
         dayRow += '<div class="merged-disponibility-day-label">' + day.name + '</div>';
@@ -305,7 +375,6 @@ function renderMergedDisponibilityGrid() {
                 cssClass += ' low-availability';
             }
             
-            // Check if this slot is in selectedSlots
             if (selectedSlots.includes(slot.time)) {
                 cssClass += ' selected';
             }
@@ -348,9 +417,6 @@ function getAvailabilityCount(dayOfWeek, timeStr) {
 }
 
 function getSlotsForPlayer(playerId, dayOfWeek) {
-    /**Get list of available time slots for a specific player on a given day.
-     * Returns array of time strings in 'HH:MM' format.
-     */
     var playerData = allDisponibilities[playerId];
     if (!playerData || !playerData.disponibilities) return [];
     
@@ -381,39 +447,32 @@ function toggleTimeSlot(dayOfWeek, timeStr, element) {
     var slotIndex = TIME_SLOTS.findIndex(function(s) { return s.time === timeStr; });
     
     if (selectedSlots.length === 0) {
-        // First click - start new selection
         selectedSlots = [timeStr];
     } else {
         var firstSelectedIndex = TIME_SLOTS.findIndex(function(s) { return s.time === selectedSlots[0]; });
         
         if (slotIndex === firstSelectedIndex) {
-            // Clicking the first selected slot again - keep it as single slot
             selectedSlots = [timeStr];
         } else if (slotIndex < firstSelectedIndex) {
-            // Clicking before the first slot - extend selection backward
             var newSlots = [];
             for (var i = slotIndex; i <= firstSelectedIndex; i++) {
                 newSlots.push(TIME_SLOTS[i].time);
             }
             selectedSlots = newSlots;
         } else if (slotIndex > firstSelectedIndex) {
-            // Clicking after the first slot - extend selection forward
             var newSlots = [];
             for (var i = firstSelectedIndex; i <= slotIndex; i++) {
                 newSlots.push(TIME_SLOTS[i].time);
             }
             selectedSlots = newSlots;
         } else {
-            // Already selected, toggle off
             selectedSlots = selectedSlots.filter(function(t) { return t !== timeStr; });
         }
     }
     
-    // Update form inputs
     var startTime = selectedSlots[0] || '';
     var endTime = selectedSlots[selectedSlots.length - 1] || '';
     
-    // Calculate end time as 30 min after last slot (end of that block)
     if (endTime) {
         var timeParts = endTime.split(':');
         var endHour = parseInt(timeParts[0]);
@@ -428,7 +487,6 @@ function toggleTimeSlot(dayOfWeek, timeStr, element) {
     document.getElementById('start_time').value = startTime;
     document.getElementById('end_time').value = endTime;
     
-    // Update selected display
     if (selectedSlots.length > 0) {
         document.getElementById('merged-disponibility-selected').classList.remove('hidden');
         document.getElementById('selected-time-badge').textContent = 
@@ -437,7 +495,6 @@ function toggleTimeSlot(dayOfWeek, timeStr, element) {
         document.getElementById('merged-disponibility-selected').classList.add('hidden');
     }
     
-    // Update grid highlighting
     document.querySelectorAll('.merged-disponibility-time-block').forEach(function(el) {
         el.classList.remove('selected');
     });
@@ -446,9 +503,11 @@ function toggleTimeSlot(dayOfWeek, timeStr, element) {
         if (selectedEl) selectedEl.classList.add('selected');
     });
     
-    // Fetch and auto-select available players for all selected slots
     if (selectedSlots.length > 0) {
-        fetchAvailablePlayersForSlots();
+        fetchAvailablePlayersForAllSlots();
+    } else {
+        availablePlayersForSlots = [];
+        updatePlayerPool();
     }
 }
 
@@ -474,41 +533,130 @@ function formatTimeDisplay(timeStr) {
     return displayHour + ':' + m + ' ' + ampm;
 }
 
-function fetchAvailablePlayersForSlots() {
-    if (!selectedDate || selectedSlots.length === 0) return;
+function fetchAvailablePlayersForAllSlots() {
+    if (!selectedDate || selectedSlots.length === 0) {
+        availablePlayersForSlots = [];
+        updatePlayerPool();
+        return;
+    }
     
-    // Get day of week
     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;
     
-    // Find players available at ANY of the selected slots
-    var availableIds = [];
+    // Find players available in ALL selected slots
+    availablePlayersForSlots = [];
     for (var playerId in allDisponibilities) {
+        if (!allRegisteredPlayers.includes(parseInt(playerId))) continue;
         var playerSlots = getSlotsForPlayer(parseInt(playerId), dayOfWeek);
-        var hasSlot = selectedSlots.some(function(slot) {
+        var isAvailableInAll = selectedSlots.every(function(slot) {
             return playerSlots.includes(slot);
         });
-        if (hasSlot) {
-            availableIds.push(parseInt(playerId));
+        if (isAvailableInAll) {
+            availablePlayersForSlots.push(parseInt(playerId));
         }
     }
     
-    // Auto-select available players
-    var matchType = document.getElementById('match_type').value;
+    // Preselect available players in Team 1
+    preselectAvailablePlayers();
+}
+
+function preselectAvailablePlayers() {
+    // Clear current assignments
+    document.querySelectorAll('#team1-selection [data-player-id], #team2-selection [data-player-id]').forEach(function(el) {
+        el.remove();
+    });
     
-    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));
-        });
+    // Add available players to Team 1
+    availablePlayersForSlots.forEach(function(pid) {
+        var playerName = playerDataById.player_data[pid];
+        if (!playerName) return;
+        
+        var html = '<div class="player-item" data-player-id="' + pid + '" onclick="returnToPool(' + pid + ', event)">';
+        html += playerName;
+        html += '<span class="remove-btn">↺</span>';
+        html += '</div>';
+        
+        document.getElementById('team1-selection').insertAdjacentHTML('beforeend', html);
+    });
+    
+    updateHiddenInputs();
+    updatePlayerPool();
+}
+
+function updatePlayerPool() {
+    var pool = document.getElementById('available-players-pool');
+    if (!pool) return;
+    
+    var team1Ids = getSelectedTeamIds(1);
+    var team2Ids = getSelectedTeamIds(2);
+    // Players in Team 2 but not Team 1 should still appear in pool
+    var assignedToTeam1 = team1Ids.filter(function(id) { return !team2Ids.includes(id); });
+    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;
     }
     
-    updateRandomizePreview();
+    var html = '';
+    playersToShow.forEach(function(pid) {
+        if (assignedIds.includes(pid)) return;
+        
+        var playerName = playerDataById.player_data[pid];
+        if (!playerName) return;
+        
+        html += '<div class="player-item" data-player-id="' + pid + '" onclick="assignToTeam(' + pid + ', 1)">';
+        html += playerName;
+        html += '<span class="remove-btn" onclick="returnToPool(' + pid + ', event)">↺</span>';
+        html += '</div>';
+    });
+    
+    pool.innerHTML = html || '<p class="text-muted small">No players available</p>';
+}
+
+function assignToTeam(playerId, teamSide) {
+    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 clearTimeSelection() {
@@ -519,61 +667,13 @@ function clearTimeSelection() {
     document.querySelectorAll('.merged-disponibility-time-block').forEach(function(el) {
         el.classList.remove('selected');
     });
-}
-
-function updateRandomizePreview() {
-    var checkedCount = document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="player_ids"]:checked').length;
-    var team1Size = parseInt(document.getElementById('team1-size').value) || 1;
-    var team2Size = checkedCount - team1Size;
-    
-    if (team2Size < 0) team2Size = 0;
-    
-    document.getElementById('team2-size-preview').textContent = team2Size;
-}
-
-function randomizeTeams() {
-    var allChecked = [];
-    
-    // Get all checked players
-    document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="team2_player_ids"]:checked').forEach(function(cb) {
-        allChecked.push(parseInt(cb.value));
+    availablePlayersForSlots = [];
+    // Clear Team 1 preselection
+    document.querySelectorAll('#team1-selection [data-player-id]').forEach(function(el) {
+        el.remove();
     });
-    
-    if (allChecked.length === 0) {
-        alert('Please select at least one player before randomizing teams.');
-        return;
-    }
-    
-    // Shuffle players
-    for (var i = allChecked.length - 1; i > 0; i--) {
-        var j = Math.floor(Math.random() * (i + 1));
-        var temp = allChecked[i];
-        allChecked[i] = allChecked[j];
-        allChecked[j] = temp;
-    }
-    
-    // Split based on team1-size input
-    var team1Size = parseInt(document.getElementById('team1-size').value) || 1;
-    var team1Players = allChecked.slice(0, team1Size);
-    var team2Players = allChecked.slice(team1Size);
-    
-    // Uncheck all first
-    document.querySelectorAll('input[name="team1_player_ids"], input[name="team2_player_ids"]').forEach(function(cb) {
-        cb.checked = false;
-    });
-    
-    // Check players in their respective teams
-    team1Players.forEach(function(pid) {
-        var cb = document.querySelector('input[name="team1_player_ids"][value="' + pid + '"]');
-        if (cb) cb.checked = true;
-    });
-    
-    team2Players.forEach(function(pid) {
-        var cb = document.querySelector('input[name="team2_player_ids"][value="' + pid + '"]');
-        if (cb) cb.checked = true;
-    });
-    
-    updateRandomizePreview();
+    updateHiddenInputs();
+    updatePlayerPool();
 }
 
 function toggleMatchType() {
@@ -582,74 +682,18 @@ function toggleMatchType() {
     var playerVsPlayerSection = document.getElementById('player-vs-player-section');
     var scrimSection = document.getElementById('player-scrim-section');
     
-    // Hide all sections first
     teamSection.classList.add('hidden');
     playerVsPlayerSection.classList.add('hidden');
     scrimSection.classList.add('hidden');
     
-    // Show relevant section
     if (matchType === 'team_vs_team') {
         teamSection.classList.remove('hidden');
     } else if (matchType === 'player_vs_player') {
         playerVsPlayerSection.classList.remove('hidden');
+        updatePlayerPool();
     } else if (matchType === 'player_scrim') {
         scrimSection.classList.remove('hidden');
     }
-    
-    // Update indicators when match type changes
-    updateDisponibilityIndicators();
-}
-
-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;
-        }
-    });
-    
-    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;
-    
-    // Find the first selected start slot
-    var slotIndex = TIME_SLOTS.findIndex(function(s) { return s.time === startTimeInput; });
-    
-    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 %}