ajout des disponibilités de joueurs et ajouts d'un tableau qui montre les dispo des joueurs lors de la création d'un match

templates/pages/edit_match.html

@@ -9,7 +9,7 @@
         <h3><i class="fas fa-futbol"></i> Edit Match</h3>
     </div>
     <div class="card-body">
-        <form method="POST" action="{{ url_for('matches.edit_match', match_id=match.id) }}" class="form">
+        <form method="POST" action="{{ url_for('matches.edit_match', match_id=match.id) }}" class="form" id="editMatchForm">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
             
             <div class="form-group">
@@ -32,6 +32,34 @@
                 </div>
             </div>
             
+            <!-- Merged Availability Grid -->
+            {% 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>
+            
+            <div id="merged-disponibility-selected" class="merged-disponibility-selected-display hidden">
+                <span>Selected time:</span>
+                <span class="selected-time-badge" id="selected-time-badge"></span>
+                <button type="button" class="btn btn-sm btn-outline" onclick="clearTimeSelection()">Change</button>
+            </div>
+            
+            <div id="merged-disponibility-grid" class="merged-disponibility-grid">
+                <p class="text-muted">Loading...</p>
+            </div>
+            
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="start_time">Start Time <span class="text-muted">(Required)</span></label>
+                    <input type="time" name="start_time" id="start_time" class="form-input" value="{{ match.start_time.strftime('%H:%M') if match.start_time else '' }}" required>
+                </div>
+                <div class="form-group">
+                    <label for="end_time">End Time <span class="text-muted">(Set by clicking consecutive slots)</span></label>
+                    <input type="time" name="end_time" id="end_time" class="form-input" value="{{ match.end_time.strftime('%H:%M') if match.end_time else '' }}" required>
+                </div>
+            </div>
+            {% else %}
+            <!-- Fallback time inputs for users without disponibility access -->
             <div class="form-row">
                 <div class="form-group">
                     <label for="start_time">Start Time</label>
@@ -42,6 +70,7 @@
                     <input type="time" name="end_time" id="end_time" class="form-input" value="{{ match.end_time.strftime('%H:%M') if match.end_time else '' }}">
                 </div>
             </div>
+            {% endif %}
             
             <div class="form-group">
                 <label for="location">Location</label>
@@ -53,7 +82,7 @@
                 <textarea name="description" id="description" class="form-textarea" placeholder="Optional notes about this match">{{ match.description or '' }}</textarea>
             </div>
             
-<!-- Team vs Team Selection -->
+            <!-- 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>
@@ -86,7 +115,7 @@
                     <h5>{{ match.team1.name }} Players</h5>
                     <ul class="team-members-list">
                         {% for member in match.team1.members %}
-                        <li>{{ member.player.full_name }}{% if member.position %} <span class="position-tag">{{ member.position }}</span>{% endif %}</li>
+                        <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 %}
@@ -98,7 +127,7 @@
                     <h5>{{ match.team2.name }} Players</h5>
                     <ul class="team-members-list">
                         {% for member in match.team2.members %}
-                        <li>{{ member.player.full_name }}{% if member.position %} <span class="position-tag">{{ member.position }}</span>{% endif %}</li>
+                        <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 %}
@@ -112,25 +141,45 @@
             <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>
+            
+            {% 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">
+                    <div class="checkbox-grid" id="team1-players-list">
                         {% for player in all_players %}
-                        <label class="checkbox-label">
+                        <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>
                 </div>
                 <div class="form-group">
                     <label>Team 2 Players</label>
-                    <div class="checkbox-grid">
+                    <div class="checkbox-grid" id="team2-players-list">
                         {% for player in all_players %}
-                        <label class="checkbox-label">
+                        <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>
@@ -142,13 +191,18 @@
             <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 class="checkbox-grid">
+                <div class="checkbox-grid" id="scrim-players-list">
                     {% for player in all_players %}
-                    <label class="checkbox-label">
+                    <label class="checkbox-label player-checkbox" data-player-id="{{ player.id }}">
                         <input type="checkbox" name="player_ids" value="{{ player.id }}" {% if player.id in current_player_ids %}checked{% endif %}>
                         {{ player.full_name }}
+                        <span class="disponibility-indicator" data-player-id="{{ player.id }}"></span>
                     </label>
                     {% endfor %}
                 </div>
@@ -170,18 +224,433 @@
 
 {% block scripts %}
 <script>
+// Time slots from 5pm (17:00) to 12am (24:00)
+var TIME_SLOTS = [];
+for (var h = 17; h <= 24; h++) {
+    for (var m = 0; m < 60; m += 30) {
+        if (h === 24 && m > 0) continue;
+        var displayHour;
+        var displayAmpm;
+        if (h === 24) {
+            displayHour = 12;
+            displayAmpm = 'AM';
+        } else if (h > 12) {
+            displayHour = h - 12;
+            displayAmpm = 'PM';
+        } else {
+            displayHour = h;
+            displayAmpm = 'PM';
+        }
+        var timeStr = (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
+        var displayTime = displayHour + ':' + (m < 10 ? '0' : '') + m + ' ' + displayAmpm;
+        TIME_SLOTS.push({ time: timeStr, display: displayTime });
+    }
+}
+
+var DAYS = [
+    { value: 0, name: 'Monday' },
+    { value: 1, name: 'Tuesday' },
+    { value: 2, name: 'Wednesday' },
+    { value: 3, name: 'Thursday' },
+    { value: 4, name: 'Friday' },
+    { value: 5, name: 'Saturday' },
+    { value: 6, name: 'Sunday' }
+];
+
+var selectedDate = '';
+var selectedSlots = []; // Array of selected time slots: ['17:00', '17:30', '18:00']
+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 }};
+
+// Initialize
+document.addEventListener('DOMContentLoaded', function() {
+    {% if current_user.can_manage_teams() or current_user.can_schedule_matches() %}
+    fetchDisponibilities();
+    {% endif %}
+    
+    document.getElementById('date').addEventListener('change', function() {
+        selectedDate = this.value;
+        if (allDisponibilitiesInitialized()) {
+            renderMergedDisponibilityGrid();
+        }
+    });
+    
+    selectedDate = document.getElementById('date').value;
+    selectedStartTime = document.getElementById('start_time').value;
+    selectedEndTime = document.getElementById('end_time').value;
+    
+    // Initialize selected slots from current match time
+    if (selectedStartTime) {
+        var startIndex = TIME_SLOTS.findIndex(function(s) { return s.time === selectedStartTime; });
+        var endIndex = TIME_SLOTS.findIndex(function(s) { return s.time === selectedEndTime; });
+        
+        if (startIndex !== -1) {
+            // Calculate which slots are covered (each slot is 30 min, end time is 30 min after last slot)
+            if (endIndex === -1 || endIndex <= startIndex) {
+                selectedSlots = [selectedStartTime];
+            } else {
+                selectedSlots = [];
+                for (var i = startIndex; i <= endIndex; i++) {
+                    selectedSlots.push(TIME_SLOTS[i].time);
+                }
+            }
+            
+            document.getElementById('merged-disponibility-selected').classList.remove('hidden');
+            document.getElementById('selected-time-badge').textContent = 
+                formatTimeDisplay(selectedStartTime) + ' - ' + formatTimeDisplay(selectedEndTime);
+        }
+    }
+    
+    renderMergedDisponibilityGrid();
+    updateDisponibilityIndicators();
+    updateRandomizePreview();
+});
+
+function allDisponibilitiesInitialized() {
+    return Object.keys(allDisponibilities).length > 0;
+}
+
+function fetchDisponibilities() {
+    if (!canViewDisponibilities) return;
+    fetch('{{ url_for("users.get_disponibilities") }}')
+        .then(function(response) { return response.json(); })
+        .then(function(data) {
+            allDisponibilities = data;
+            renderMergedDisponibilityGrid();
+        })
+        .catch(function(error) {
+            console.error('Error fetching disponibilities:', error);
+        });
+}
+
+function renderMergedDisponibilityGrid() {
+    var grid = document.getElementById('merged-disponibility-grid');
+    if (!grid || !canViewDisponibilities) 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 = '<div style="margin-bottom: 10px;"><strong>Click time slots consecutively to set match duration</strong></div>';
+    
+    DAYS.forEach(function(day) {
+        if (day.value !== dayOfWeek) return;
+        
+        var dayRow = '<div class="merged-disponibility-day-row">';
+        dayRow += '<div class="merged-disponibility-day-label">' + day.name + '</div>';
+        dayRow += '<div class="merged-disponibility-time-blocks">';
+        
+        TIME_SLOTS.forEach(function(slot) {
+            var count = getAvailabilityCount(day.value, slot.time);
+            var percentage = totalPlayers > 0 ? count / totalPlayers : 0;
+            var cssClass = 'merged-disponibility-time-block';
+            
+            if (percentage >= 0.75) {
+                cssClass += ' high-availability';
+            } else if (percentage >= 0.5) {
+                cssClass += ' medium-availability';
+            } else {
+                cssClass += ' low-availability';
+            }
+            
+            if (selectedSlots.includes(slot.time)) {
+                cssClass += ' selected';
+            }
+            
+            dayRow += '<div class="' + cssClass + '" data-day="' + day.value + '" data-time="' + slot.time + '" ' +
+                       'onclick="toggleTimeSlot(' + day.value + ', \'' + slot.time + '\', this)">' +
+                       slot.display +
+                       '<span class="merged-disponibility-count">' + count + '</span>' +
+                       '</div>';
+        });
+        
+        dayRow += '</div></div>';
+        html += dayRow;
+    });
+    
+    grid.innerHTML = html;
+}
+
+function getAvailabilityCount(dayOfWeek, timeStr) {
+    var count = 0;
+    var timeParts = timeStr.split(':');
+    var minutes = parseInt(timeParts[0]) * 60 + parseInt(timeParts[1]);
+    
+    for (var playerId in allDisponibilities) {
+        var playerData = allDisponibilities[playerId];
+        if (playerData && playerData.disponibilities) {
+            var isAvailable = playerData.disponibilities.some(function(d) {
+                if (d.day_of_week !== dayOfWeek) return false;
+                var startParts = d.start_time.split(':');
+                var endParts = d.end_time.split(':');
+                var dispMinutes = parseInt(startParts[0]) * 60 + parseInt(startParts[1]);
+                var endMinutes = parseInt(endParts[0]) * 60 + parseInt(endParts[1]);
+                
+                return minutes >= dispMinutes && minutes < endMinutes;
+            });
+            if (isAvailable) count++;
+        }
+    }
+    return count;
+}
+
+function getSlotsForPlayer(playerId, dayOfWeek) {
+    var playerData = allDisponibilities[playerId];
+    if (!playerData || !playerData.disponibilities) return [];
+    
+    var availableSlots = [];
+    TIME_SLOTS.forEach(function(slot) {
+        var timeParts = slot.time.split(':');
+        var minutes = parseInt(timeParts[0]) * 60 + parseInt(timeParts[1]);
+        
+        var isAvailable = playerData.disponibilities.some(function(d) {
+            if (d.day_of_week !== dayOfWeek) return false;
+            var startParts = d.start_time.split(':');
+            var endParts = d.end_time.split(':');
+            var dispMinutes = parseInt(startParts[0]) * 60 + parseInt(startParts[1]);
+            var endMinutes = parseInt(endParts[0]) * 60 + parseInt(endParts[1]);
+            
+            return minutes >= dispMinutes && minutes < endMinutes;
+        });
+        
+        if (isAvailable) {
+            availableSlots.push(slot.time);
+        }
+    });
+    
+    return availableSlots;
+}
+
+function toggleTimeSlot(dayOfWeek, timeStr, element) {
+    var slotIndex = TIME_SLOTS.findIndex(function(s) { return s.time === timeStr; });
+    
+    if (selectedSlots.length === 0) {
+        selectedSlots = [timeStr];
+    } else {
+        var firstSelectedIndex = TIME_SLOTS.findIndex(function(s) { return s.time === selectedSlots[0]; });
+        
+        if (slotIndex === firstSelectedIndex) {
+            selectedSlots = [timeStr];
+        } else if (slotIndex < firstSelectedIndex) {
+            var newSlots = [];
+            for (var i = slotIndex; i <= firstSelectedIndex; i++) {
+                newSlots.push(TIME_SLOTS[i].time);
+            }
+            selectedSlots = newSlots;
+        } else if (slotIndex > firstSelectedIndex) {
+            var newSlots = [];
+            for (var i = firstSelectedIndex; i <= slotIndex; i++) {
+                newSlots.push(TIME_SLOTS[i].time);
+            }
+            selectedSlots = newSlots;
+        } else {
+            selectedSlots = selectedSlots.filter(function(t) { return t !== timeStr; });
+        }
+    }
+    
+    var startTime = selectedSlots[0] || '';
+    var endTime = selectedSlots[selectedSlots.length - 1] || '';
+    
+    if (endTime) {
+        var timeParts = endTime.split(':');
+        var endHour = parseInt(timeParts[0]);
+        var endMin = parseInt(timeParts[1]) + 30;
+        if (endMin >= 60) {
+            endMin = 0;
+            endHour++;
+        }
+        endTime = (endHour < 10 ? '0' : '') + endHour + ':' + (endMin < 10 ? '0' : '') + endMin;
+    }
+    
+    document.getElementById('start_time').value = startTime;
+    document.getElementById('end_time').value = endTime;
+    
+    if (selectedSlots.length > 0) {
+        document.getElementById('merged-disponibility-selected').classList.remove('hidden');
+        document.getElementById('selected-time-badge').textContent = 
+            formatTimeDisplay(selectedSlots[0]) + ' - ' + formatTimeDisplay(endTime);
+    } else {
+        document.getElementById('merged-disponibility-selected').classList.add('hidden');
+    }
+    
+    document.querySelectorAll('.merged-disponibility-time-block').forEach(function(el) {
+        el.classList.remove('selected');
+    });
+    selectedSlots.forEach(function(slot) {
+        var selectedEl = document.querySelector('.merged-disponibility-time-block[data-time="' + slot + '"]');
+        if (selectedEl) selectedEl.classList.add('selected');
+    });
+    
+    if (selectedSlots.length > 0) {
+        fetchAvailablePlayersForSlots();
+    }
+}
+
+function formatTimeDisplay(timeStr) {
+    var parts = timeStr.split(':');
+    var h = parseInt(parts[0]);
+    var m = parts[1];
+    var displayHour;
+    var ampm;
+    if (h === 0) {
+        displayHour = 12;
+        ampm = 'AM';
+    } else if (h < 12) {
+        displayHour = h;
+        ampm = 'AM';
+    } else if (h === 12) {
+        displayHour = 12;
+        ampm = 'PM';
+    } else {
+        displayHour = h - 12;
+        ampm = 'PM';
+    }
+    return displayHour + ':' + m + ' ' + ampm;
+}
+
+function fetchAvailablePlayersForSlots() {
+    if (!selectedDate || selectedSlots.length === 0) 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 availableIds = [];
+    for (var playerId in allDisponibilities) {
+        var playerSlots = getSlotsForPlayer(parseInt(playerId), dayOfWeek);
+        var hasSlot = selectedSlots.some(function(slot) {
+            return playerSlots.includes(slot);
+        });
+        if (hasSlot) {
+            availableIds.push(parseInt(playerId));
+        }
+    }
+    
+    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));
+        });
+    }
+    
+    updateRandomizePreview();
+}
+
+function clearTimeSelection() {
+    selectedSlots = [];
+    document.getElementById('start_time').value = '';
+    document.getElementById('end_time').value = '';
+    document.getElementById('merged-disponibility-selected').classList.add('hidden');
+    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 = [];
+    
+    document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="team2_player_ids"]:checked').forEach(function(cb) {
+        allChecked.push(parseInt(cb.value));
+    });
+    
+    if (allChecked.length === 0) {
+        alert('Please select at least one player before randomizing teams.');
+        return;
+    }
+    
+    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;
+    }
+    
+    var team1Size = parseInt(document.getElementById('team1-size').value) || 1;
+    var team1Players = allChecked.slice(0, team1Size);
+    var team2Players = allChecked.slice(team1Size);
+    
+    document.querySelectorAll('input[name="team1_player_ids"], input[name="team2_player_ids"]').forEach(function(cb) {
+        cb.checked = false;
+    });
+    
+    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();
+}
+
 function handleTeamSelection(checkbox, teamSide) {
-    // When selecting from one team, deselect from the other team
     var otherSide = teamSide === 1 ? 2 : 1;
     var otherCheckboxes = document.querySelectorAll('input[name="team' + otherSide + '_player_ids"]');
     var playerId = checkbox.value;
     
-    // Find the corresponding checkbox in the other team and uncheck it
     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;
+    
+    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 %}
+{% endblock %}