ske087
318f783de3
- Add orientation parameter support to create_group and edit_group functions - Fix manage_group.html template URL endpoint from 'update_group_content_order' to 'update_group_content_order_route' - Add orientation field and filtering to edit_group.html template with JavaScript functionality - Update group_player_management.py to handle orientation validation in create and edit operations - Fix docker-compose.yml to include build directive and correct volume paths - Update entrypoint.sh to handle fresh deployments without migrations - Ensure orientation consistency across group and player management These changes resolve: - Internal Server Error on manage_group page - Missing orientation parameter in group creation/editing - Template URL endpoint mismatches - Docker deployment issues with fresh installations
118 lines
5.3 KiB
HTML
118 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Edit Group</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
body.dark-mode {
|
|
background-color: #121212;
|
|
color: #ffffff;
|
|
}
|
|
.card.dark-mode {
|
|
background-color: #1e1e1e;
|
|
color: #ffffff;
|
|
}
|
|
.dark-mode label, .dark-mode th, .dark-mode td {
|
|
color: #ffffff;
|
|
}
|
|
@media (max-width: 768px) {
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
.btn {
|
|
font-size: 0.9rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
|
|
<div class="container py-5">
|
|
<h1 class="text-center mb-4">Edit Group</h1>
|
|
<form method="POST">
|
|
<div class="row">
|
|
<div class="col-md-6 col-12">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Group Name</label>
|
|
<input type="text" class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="name" name="name" value="{{ group.name }}" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-12">
|
|
<div class="mb-3">
|
|
<label for="players" class="form-label">Select Players</label>
|
|
<select multiple class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="players" name="players">
|
|
{% for player in players %}
|
|
<option value="{{ player.id }}" {% if player in group.players %}selected{% endif %}>{{ player.username }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-12">
|
|
<div class="mb-3">
|
|
<label for="orientation" class="form-label">Group Orientation</label>
|
|
<select class="form-control {{ 'dark-mode' if theme == 'dark' else '' }}" id="orientation" name="orientation" required>
|
|
<option value="Landscape" {% if group.orientation == 'Landscape' %}selected{% endif %}>Landscape</option>
|
|
<option value="Portret" {% if group.orientation == 'Portret' %}selected{% endif %}>Portret</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add this above the player selection -->
|
|
<div class="alert alert-warning" role="alert">
|
|
<strong>Warning:</strong> Adding new players to this group will delete their individual playlists.
|
|
Removing players from the group will allow them to have their own playlists again.
|
|
</div>
|
|
<div id="orientation-warning" class="alert alert-danger d-none" role="alert">
|
|
No players with the selected orientation are available.
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Get all players and their orientations from the backend
|
|
const players = [
|
|
{% for player in players %}
|
|
{id: {{ player.id }}, username: "{{ player.username }}", orientation: "{{ player.orientation }}", inGroup: {% if player in group.players %}true{% else %}false{% endif %}},
|
|
{% endfor %}
|
|
];
|
|
|
|
const orientationSelect = document.getElementById('orientation');
|
|
const playersSelect = document.getElementById('players');
|
|
const orientationWarning = document.getElementById('orientation-warning');
|
|
|
|
function filterPlayers() {
|
|
const selectedOrientation = orientationSelect.value;
|
|
const currentSelection = Array.from(playersSelect.selectedOptions).map(option => option.value);
|
|
playersSelect.innerHTML = '';
|
|
let compatibleCount = 0;
|
|
|
|
players.forEach(player => {
|
|
if (player.orientation === selectedOrientation) {
|
|
const option = document.createElement('option');
|
|
option.value = player.id;
|
|
option.textContent = player.username;
|
|
// Re-select if it was previously selected
|
|
if (currentSelection.includes(player.id.toString()) || player.inGroup) {
|
|
option.selected = true;
|
|
}
|
|
playersSelect.appendChild(option);
|
|
compatibleCount++;
|
|
}
|
|
});
|
|
|
|
orientationWarning.classList.toggle('d-none', compatibleCount > 0);
|
|
}
|
|
|
|
orientationSelect.addEventListener('change', filterPlayers);
|
|
|
|
// Initial filter on page load
|
|
filterPlayers();
|
|
</script>
|
|
</body>
|
|
</html> |