175 lines
10 KiB
HTML
175 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Select Clubs to Import - HKFC Men's C Team</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-10">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Select Clubs to Import</h3>
|
|
<p class="mb-0 text-muted">Choose which clubs you want to import from the Hong Kong Hockey Association</p>
|
|
</div>
|
|
<div class="card-body">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="alert alert-info">
|
|
<h5>Club Selection</h5>
|
|
<p>Select the clubs you want to import. You can choose all clubs or select specific ones based on your needs.</p>
|
|
<p><strong>Note:</strong> Only new clubs will be imported. Existing clubs will be skipped to prevent duplicates.</p>
|
|
</div>
|
|
|
|
{% if clubs %}
|
|
<form method="POST" id="clubSelectionForm">
|
|
{{ form.hidden_tag() }}
|
|
|
|
<div class="mb-3">
|
|
<div class="d-flex gap-2 mb-3">
|
|
<button type="submit" name="select_all" class="btn btn-outline-primary btn-sm" formnovalidate>
|
|
Select All
|
|
</button>
|
|
<button type="submit" name="select_none" class="btn btn-outline-secondary btn-sm" formnovalidate>
|
|
Select None
|
|
</button>
|
|
<span class="text-muted align-self-center">
|
|
<span id="selectedCount">0</span> of {{ clubs|length }} clubs selected
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
{% for club in clubs %}
|
|
<div class="col-md-6 col-lg-4 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="form-check">
|
|
<input class="form-check-input club-checkbox"
|
|
type="checkbox"
|
|
name="selected_clubs"
|
|
value="{{ club.name }}"
|
|
id="club_{{ loop.index }}"
|
|
{% if club.name in selected_clubs %}checked{% endif %}>
|
|
<label class="form-check-label w-100" for="club_{{ loop.index }}">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="mb-1">{{ club.name }}</h6>
|
|
{% if club.abbreviation %}
|
|
<small class="text-muted">{{ club.abbreviation }}</small>
|
|
{% endif %}
|
|
</div>
|
|
<div class="text-end">
|
|
{% if club.teams %}
|
|
<small class="badge bg-info">{{ club.teams|length }} teams</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if club.convenor %}
|
|
<div class="mt-2">
|
|
<small class="text-muted">
|
|
<i class="bi bi-person"></i> {{ club.convenor }}
|
|
</small>
|
|
</div>
|
|
{% endif %}
|
|
{% if club.email %}
|
|
<div>
|
|
<small class="text-muted">
|
|
<i class="bi bi-envelope"></i> {{ club.email }}
|
|
</small>
|
|
</div>
|
|
{% endif %}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
|
|
<button type="submit" name="cancel" class="btn btn-secondary me-md-2" formnovalidate>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" name="import_selected" class="btn btn-primary" id="importButton" disabled>
|
|
Import Selected Clubs
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{% else %}
|
|
<div class="alert alert-warning">
|
|
<h5>No clubs found</h5>
|
|
<p>Unable to fetch clubs from the Hong Kong Hockey Association website. This might be due to:</p>
|
|
<ul>
|
|
<li>Network connectivity issues</li>
|
|
<li>Website structure changes</li>
|
|
<li>Server maintenance</li>
|
|
</ul>
|
|
<p>Please try again later or contact the administrator.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<a href="/admin/import" class="btn btn-outline-secondary">Back to Data Import</a>
|
|
<a href="/admin" class="btn btn-outline-secondary">Back to Admin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Update selected count and enable/disable import button
|
|
function updateSelection() {
|
|
const checkboxes = document.querySelectorAll('.club-checkbox');
|
|
const selectedCount = document.querySelectorAll('.club-checkbox:checked').length;
|
|
const importButton = document.getElementById('importButton');
|
|
const countSpan = document.getElementById('selectedCount');
|
|
|
|
countSpan.textContent = selectedCount;
|
|
importButton.disabled = selectedCount === 0;
|
|
}
|
|
|
|
// Add event listeners to checkboxes
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const checkboxes = document.querySelectorAll('.club-checkbox');
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.addEventListener('change', updateSelection);
|
|
});
|
|
updateSelection(); // Initial update
|
|
});
|
|
|
|
// Handle select all/none buttons
|
|
document.getElementById('clubSelectionForm').addEventListener('submit', function(e) {
|
|
if (e.submitter.name === 'select_all') {
|
|
e.preventDefault();
|
|
document.querySelectorAll('.club-checkbox').forEach(checkbox => {
|
|
checkbox.checked = true;
|
|
});
|
|
updateSelection();
|
|
} else if (e.submitter.name === 'select_none') {
|
|
e.preventDefault();
|
|
document.querySelectorAll('.club-checkbox').forEach(checkbox => {
|
|
checkbox.checked = false;
|
|
});
|
|
updateSelection();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|