Changement du refresh handler, soft reset d'ajouter sur beaucoup de formulaire de modification

2026-09-08 11:27:53 -04:00
parent e2e2b1b07e
commit 4a2e2f053f
42 changed files with 722 additions and 333 deletions
@@ -15,7 +15,7 @@
                </a>
                {% endif %}
                {% if can_edit %}
-                <form method="POST" action="{{ url_for('tryouts.update_status', tryout_id=tryout.id) }}" class="inline-form">
+                <form method="POST" data-ajax action="{{ url_for('tryouts.update_status', tryout_id=tryout.id) }}" class="inline-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <select name="status" data-submit-on-change class="form-select">
                        <option value="upcoming" {% if tryout.status == 'upcoming' %}selected{% endif %}>{{ _('Upcoming') }}</option>
@@ -108,7 +108,7 @@
    {% if current_user.role == 'player' and not is_registered and tryout.status in ['upcoming', 'in_progress'] %}
    <div class="card mb-4">
        <div class="card-body text-center">
-            <form method="POST" action="{{ url_for('tryouts.register_for_tryout', tryout_id=tryout.id) }}">
+            <form method="POST" data-ajax action="{{ url_for('tryouts.register_for_tryout', tryout_id=tryout.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-user-plus"></i> {{ _('Register for this Tryout') }}
@@ -124,7 +124,7 @@
            <h3><i class="fas fa-user-plus"></i> {{ _('Add Player to Tryout') }}</h3>
        </div>
        <div class="card-body">
-            <form method="POST" action="{{ url_for('tryouts.register_player', tryout_id=tryout.id) }}" class="form-inline">
+            <form method="POST" data-ajax action="{{ url_for('tryouts.register_player', tryout_id=tryout.id) }}" class="form-inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                <select name="player_id" class="form-select" required>
                    <option value="">{{ _('-- Select a player --') }}</option>
@@ -173,7 +173,7 @@
                                </td>
                                <td>
                                    {% if can_edit %}
-                                    <form method="POST" action="{{ url_for('tryouts.update_registration_status', tryout_id=tryout.id, player_id=p.id) }}" class="inline-form">
+                                    <form method="POST" data-ajax action="{{ url_for('tryouts.update_registration_status', tryout_id=tryout.id, player_id=p.id) }}" class="inline-form">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                        <select name="status" data-submit-on-change class="form-select form-select-sm">
                                            <option value="registered" {% if reg.status == 'registered' %}selected{% endif %}>{{ _('Registered') }}</option>
@@ -205,7 +205,7 @@
                                    </a>
                                    {% endif %}
                                    {% if not tryout.is_ended %}
-                                    <form method="POST" action="{{ url_for('tryouts.remove_player', tryout_id=tryout.id, player_id=p.id) }}" class="inline-form" data-confirm="{{ _('Remove %(name)s from this tryout? They will also be removed from every team and match within it.', name=p.username) }}">
+                                    <form method="POST" data-ajax action="{{ url_for('tryouts.remove_player', tryout_id=tryout.id, player_id=p.id) }}" class="inline-form" data-confirm="{{ _('Remove %(name)s from this tryout? They will also be removed from every team and match within it.', name=p.username) }}">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                        <button type="submit" class="btn btn-sm btn-danger" title="{{ _('Remove player from tryout') }}">
                                            <i class="fas fa-user-minus"></i> {{ _('Remove') }}
@@ -238,7 +238,7 @@
            <div class="card-body">
                {% if can_edit and not tryout.is_ended %}
                <div id="createTeamForm" class="hidden mb-3">
-                    <form method="POST" action="{{ url_for('tryouts.create_team', tryout_id=tryout.id) }}" class="form-inline">
+                    <form method="POST" data-ajax action="{{ url_for('tryouts.create_team', tryout_id=tryout.id) }}" class="form-inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                        <input type="text" name="team_name" placeholder="{{ _('Team name') }}" required class="form-input mr-2">
                        <button type="submit" class="btn btn-sm btn-success">{{ _('Create') }}</button>
@@ -284,7 +284,7 @@
                        </div>
                        <div class="modal-body">
                            <!-- Rename -->
-                            <form method="POST" action="{{ url_for('tryouts.edit_team', tryout_id=tryout.id, team_id=team.team.id) }}" class="form-inline mb-3">
+                            <form method="POST" data-ajax action="{{ url_for('tryouts.edit_team', tryout_id=tryout.id, team_id=team.team.id) }}" class="form-inline mb-3">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                <label for="renameInput{{ team.team.id }}" class="mr-2" style="white-space:nowrap;">{{ _('Team name') }}</label>
                                <input type="text" id="renameInput{{ team.team.id }}" name="team_name" value="{{ team.team.name }}" required class="form-input" style="flex:1;">
@@ -300,7 +300,7 @@
                                <div class="roster-row">
                                    <div class="avatar-sm">{{ member.player.username[:2] | upper }}</div>
                                    <span class="roster-player-name">{{ member.player.username }}</span>
-                                    <form method="POST" action="{{ url_for('tryouts.update_member_position', tryout_id=tryout.id, team_id=team.team.id, member_id=member.member_id) }}" class="inline-form">
+                                    <form method="POST" data-ajax action="{{ url_for('tryouts.update_member_position', tryout_id=tryout.id, team_id=team.team.id, member_id=member.member_id) }}" class="inline-form">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                        <select name="position" class="form-select roster-role-select" data-submit-on-change>
                                            <option value="">{{ _('No role') }}</option>
@@ -309,7 +309,7 @@
                                            {% endfor %}
                                        </select>
                                    </form>
-                                    <form method="POST" action="{{ url_for('tryouts.remove_from_team', tryout_id=tryout.id, team_id=team.team.id, player_id=member.player_id) }}" class="inline-form" data-confirm="{{ _('Remove %(player)s from this team?', player=member.player.username) }}">
+                                    <form method="POST" data-ajax action="{{ url_for('tryouts.remove_from_team', tryout_id=tryout.id, team_id=team.team.id, player_id=member.player_id) }}" class="inline-form" data-confirm="{{ _('Remove %(player)s from this team?', player=member.player.username) }}">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                        <button type="submit" class="btn btn-sm btn-danger roster-remove-btn" title="{{ _('Remove from team') }}">
                                            <i class="fas fa-user-minus"></i>
@@ -324,7 +324,7 @@
                            {% if registered_players %}
                            <hr class="section-divider">
                            <h5 class="mb-2"><i class="fas fa-user-plus"></i> {{ _('Add Player') }}</h5>
-                            <form method="POST" action="{{ url_for('tryouts.add_to_team', tryout_id=tryout.id, team_id=team.team.id) }}" class="form-inline">
+                            <form method="POST" data-ajax action="{{ url_for('tryouts.add_to_team', tryout_id=tryout.id, team_id=team.team.id) }}" class="form-inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                <select name="player_id" class="form-select" required style="flex:1;">
                                    <option value="">{{ _('Select player...') }}</option>
@@ -350,7 +350,7 @@

                            <hr class="section-divider" style="border-color: var(--danger);">
                            <div class="text-center">
-                                <form method="POST" action="{{ url_for('tryouts.delete_team', tryout_id=tryout.id, team_id=team.team.id) }}" class="inline-form" data-confirm="{{ _('Delete this team? Players already in the team will be removed and matches referencing it will be unlinked.') }}">
+                                <form method="POST" data-ajax action="{{ url_for('tryouts.delete_team', tryout_id=tryout.id, team_id=team.team.id) }}" class="inline-form" data-confirm="{{ _('Delete this team? Players already in the team will be removed and matches referencing it will be unlinked.') }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                    <button type="submit" class="btn btn-danger">{{ _('Delete Team') }}</button>
                                </form>
@@ -529,7 +529,7 @@
                                <a href="{{ url_for('matches.edit_match', match_id=m.id) }}" class="btn btn-sm btn-outline">
                                    <i class="fas fa-edit"></i> {{ _('Edit') }}
                                </a>
-                                <form method="POST" action="{{ url_for('matches.delete_match', match_id=m.id) }}" class="inline-form" data-confirm="{{ _('Delete this match?') }}">
+                                <form method="POST" data-ajax action="{{ url_for('matches.delete_match', match_id=m.id) }}" class="inline-form" data-confirm="{{ _('Delete this match?') }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                    <button type="submit" class="btn btn-sm btn-danger" title="{{ _('Delete Match') }}">
                                        <i class="fas fa-trash"></i> {{ _('Delete') }}
@@ -717,35 +717,46 @@ function toggleTryoutPresence(matchId, participantId, btn) {
            btn.classList.add('presence-pending-btn');
            btn.innerHTML = btn.innerHTML.replace('✅', '⏳');
        }
-        location.reload();
+        window.TT.refreshPage(window.location.pathname);
    })
    .catch(function(err) {
        console.error('Error toggling tryout presence:', err);
    });
 }

-// Mini calendar for matches
-document.addEventListener('DOMContentLoaded', function() {
+// Mini calendar for matches. Re-initialised on fragment:updated so the
+// calendar survives AJAX edits that swap the page content in place.
+var miniCalendar = null;
+
+function initMiniCalendar() {
    var miniCalendarEl = document.getElementById('mini-calendar');
-    if (miniCalendarEl) {
-        var miniCalendar = new FullCalendar.Calendar(miniCalendarEl, {
-            initialView: 'dayGridMonth',
-            headerToolbar: {
-                left: 'prev,next',
-                center: 'title',
-                right: 'dayGridMonth,timeGridWeek'
-            },
-            events: '/matches/api/events/{{ tryout.id }}',
-            height: '300px',
-            eventClick: function(info) {
-                if (info.event.extendedProps.match_id) {
-                    window.location.href = '/matches/' + info.event.extendedProps.match_id + '/edit';
-                }
-            }
-        });
-        miniCalendar.render();
+    if (!miniCalendarEl) {
+        return;
    }
-});
+    if (miniCalendar) {
+        miniCalendar.destroy();
+        miniCalendar = null;
+    }
+    miniCalendar = new FullCalendar.Calendar(miniCalendarEl, {
+        initialView: 'dayGridMonth',
+        headerToolbar: {
+            left: 'prev,next',
+            center: 'title',
+            right: 'dayGridMonth,timeGridWeek'
+        },
+        events: '/matches/api/events/{{ tryout.id }}',
+        height: '300px',
+        eventClick: function(info) {
+            if (info.event.extendedProps.match_id) {
+                window.location.href = '/matches/' + info.event.extendedProps.match_id + '/edit';
+            }
+        }
+    });
+    miniCalendar.render();
+}
+
+document.addEventListener('DOMContentLoaded', initMiniCalendar);
+document.addEventListener('fragment:updated', initMiniCalendar);

 // Behaviours declared in the markup, dispatched by the delegated listener
 // in main.js. Inline onclick attributes cannot be authorised by a CSP nonce.