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

2026-07-14 18:46:45 -04:00
parent 4e7ecf0ab9
commit b19d5db8db
17 changed files with 1706 additions and 218 deletions
@@ -65,6 +65,26 @@
                <label for="password">New Password</label>
                <input type="password" id="password" name="password" placeholder="Enter new password">
            </div>
+            
+            {% if user.role == 'player' %}
+            <hr class="section-divider">
+            <h4 class="section-title"><i class="fas fa-clock"></i> My Disponibilities</h4>
+            <p class="text-muted small">Select your available time blocks for matches (5pm to 12am). Green = selected, Gray = available to select.</p>
+            
+            <div id="disponibilities-grid">
+                <p class="text-muted">Loading...</p>
+            </div>
+            
+            <div class="form-actions">
+                <button type="button" class="btn btn-primary" onclick="saveDisponibilities()">
+                    <i class="fas fa-save"></i> Save Disponibilities
+                </button>
+                <button type="button" class="btn btn-secondary" onclick="clearDisponibilities()">
+                    <i class="fas fa-trash"></i> Clear All
+                </button>
+            </div>
+            {% endif %}
+            
            <div class="form-actions">
                <a href="{{ url_for('users.profile') }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">Save Changes</button>
@@ -72,4 +92,218 @@
        </form>
    </div>
 </div>
+
+<style>
+.disponibility-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+.disponibility-day-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+.disponibility-day-label {
+    width: 100px;
+    font-weight: bold;
+}
+.disponibility-time-blocks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+.disponibility-time-block {
+    width: 80px;
+    height: 32px;
+    border-radius: 4px;
+    border: 1px solid #d1d5db;
+    background: #f3f4f6;
+    text-align: center;
+    line-height: 32px;
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s;
+}
+.disponibility-time-block:hover {
+    background: #e5e7eb;
+}
+.disponibility-time-block.selected {
+    background: #10b981;
+    color: white;
+    border-color: #059669;
+}
+</style>
+
+<script>
+{% if user.role == 'player' %}
+// Generate 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' }
+];
+
+// Store selected slots: {day: [time, time, ...]}
+var selectedSlots = {};
+
+function renderDisponibilityGrid() {
+    var grid = document.getElementById('disponibilities-grid');
+    grid.innerHTML = '<div style="margin-bottom: 10px;"><strong>Click time blocks to select your available hours</strong></div>';
+    
+    var container = document.createElement('div');
+    container.className = 'disponibility-grid';
+    
+    DAYS.forEach(function(day) {
+        var dayRow = document.createElement('div');
+        dayRow.className = 'disponibility-day-row';
+        
+        var dayLabel = document.createElement('div');
+        dayLabel.className = 'disponibility-day-label';
+        dayLabel.textContent = day.name;
+        dayRow.appendChild(dayLabel);
+        
+        var timeBlocks = document.createElement('div');
+        timeBlocks.className = 'disponibility-time-blocks';
+        
+        TIME_SLOTS.forEach(function(slot) {
+            var block = document.createElement('div');
+            block.className = 'disponibility-time-block';
+            block.dataset.day = day.value;
+            block.dataset.time = slot.time;
+            block.textContent = slot.display;
+            block.onclick = function() {
+                toggleSlot(day.value, slot.time, block);
+            };
+            timeBlocks.appendChild(block);
+        });
+        
+        dayRow.appendChild(timeBlocks);
+        container.appendChild(dayRow);
+    });
+    
+    grid.appendChild(container);
+    loadMyDisponibilities();
+}
+
+function toggleSlot(day, time, element) {
+    if (!selectedSlots[day]) selectedSlots[day] = [];
+    
+    var index = selectedSlots[day].indexOf(time);
+    if (index > -1) {
+        selectedSlots[day].splice(index, 1);
+        element.classList.remove('selected');
+    } else {
+        selectedSlots[day].push(time);
+        element.classList.add('selected');
+    }
+}
+
+function loadMyDisponibilities() {
+    fetch('{{ url_for("users.get_my_disponibilities") }}')
+        .then(function(response) { return response.json(); })
+        .then(function(data) {
+            selectedSlots = {};
+            
+            for (var day in data) {
+                var slots = data[day];
+                slots.forEach(function(slot) {
+                    selectedSlots[day] = selectedSlots[day] || [];
+                    selectedSlots[day].push(slot.start_time);
+                });
+            }
+            
+            document.querySelectorAll('.disponibility-time-block').forEach(function(block) {
+                var day = block.dataset.day;
+                var time = block.dataset.time;
+                if (selectedSlots[day] && selectedSlots[day].indexOf(time) > -1) {
+                    block.classList.add('selected');
+                } else {
+                    block.classList.remove('selected');
+                }
+            });
+        })
+        .catch(function(error) {
+            console.error('Error loading disponibilities:', error);
+        });
+}
+
+function saveDisponibilities() {
+    var slots = [];
+    for (var day in selectedSlots) {
+        selectedSlots[day].forEach(function(time) {
+            slots.push({ day_of_week: parseInt(day), start_time: time });
+        });
+    }
+    
+    fetch('{{ url_for("users.add_disponibilities_bulk") }}', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ slots: slots })
+    })
+    .then(function(response) { return response.json(); })
+    .then(function(data) {
+        if (data.success) {
+            var msg = document.createElement('div');
+            msg.className = 'alert alert-success';
+            msg.style.marginTop = '10px';
+            msg.innerHTML = '<i class="fas fa-check"></i> Disponibilities saved successfully!';
+            document.getElementById('disponibilities-grid').appendChild(msg);
+            setTimeout(function() { msg.remove(); }, 3000);
+        }
+    })
+    .catch(function(error) {
+        console.error('Error saving disponibilities:', error);
+    });
+}
+
+function clearDisponibilities() {
+    if (!confirm('Are you sure you want to clear all your disponibilities?')) return;
+    
+    fetch('{{ url_for("users.clear_disponibilities") }}', {
+        method: 'POST'
+    })
+    .then(function(response) { return response.json(); })
+    .then(function(data) {
+        if (data.success) {
+            selectedSlots = {};
+            document.querySelectorAll('.disponibility-time-block').forEach(function(block) {
+                block.classList.remove('selected');
+            });
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', renderDisponibilityGrid);
+{% endif %}
+</script>
 {% endblock %}