gcp-hockey-results/motm_app/templates/motm_admin.html

230 lines
9.1 KiB
HTML

{% extends "base.html" %}
{% block title %}MOTM Management - HKFC Men's C Team MOTM System{% endblock %}
{% block content %}
<!-- Page Header -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-body text-center">
<h1 class="card-title">
<i class="fas fa-trophy text-warning me-2"></i>
MOTM Management
</h1>
<p class="lead text-muted">Manage Man of the Match and Dick of the Day settings</p>
<a href="/admin" class="btn btn-outline-primary">
<i class="fas fa-arrow-left me-2"></i>Back to Admin Dashboard
</a>
</div>
</div>
</div>
</div>
<!-- Match Configuration Card -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-primary text-white">
<h5 class="card-title mb-0">
<i class="fas fa-calendar-alt me-2"></i>Next Match Configuration
</h5>
</div>
<div class="card-body">
{{ form.csrf_token }}
<form method="post" action="/admin/motm">
<!-- Load Next Fixture Section -->
<div class="row mb-4">
<div class="col-12">
<div class="alert alert-info">
<div class="d-flex align-items-center justify-content-between flex-wrap">
<div class="d-flex align-items-center">
<button type="button" class="btn btn-info me-3" id="loadFixtureBtn" onclick="loadNextFixture()">
<i class="fas fa-download me-2"></i>Load Next HKFC C Fixture
</button>
<a href="https://hockey.org.hk/MenFixture.asp" target="_blank" class="btn btn-outline-info">
<i class="fas fa-external-link-alt me-2"></i>View HK Hockey Fixtures
</a>
</div>
<span id="fixtureStatus" class="ms-3"></span>
</div>
<div id="fixtureInfo" class="mt-3" style="display: none;"></div>
</div>
</div>
</div>
<!-- Match Details Form -->
<div class="row mb-4">
<div class="col-md-6 mb-3">
<label for="nextMatchDate" class="form-label">
<i class="fas fa-calendar me-2"></i>Match Date
</label>
{{ form.nextMatchDate(class_="form-control", **{"id": "nextMatchDate"}) }}
</div>
<div class="col-md-6 mb-3">
<label for="nextOppoTeam" class="form-label">
<i class="fas fa-users me-2"></i>Opposition Team
</label>
{{ form.nextOppoTeam(class_="form-control", **{"id": "nextOppoTeam"}) }}
</div>
</div>
<!-- Voting Deadline Section -->
<div class="row mb-4">
<div class="col-md-6 mb-3">
<label for="votingDeadline" class="form-label">
<i class="fas fa-clock me-2"></i>Voting Deadline
</label>
{{ form.votingDeadline(class_="form-control", **{"id": "votingDeadline", "type": "datetime-local"}) }}
<small class="form-text text-muted">Set when voting should close (leave empty for no deadline)</small>
</div>
</div>
<!-- Previous Winners Section -->
<div class="row mb-4">
<div class="col-md-6 mb-3">
<label for="currMotM" class="form-label">
<i class="fas fa-trophy me-2 text-warning"></i>Previous Man of the Match
</label>
{{ form.currMotM(class_="form-select") }}
<small class="form-text text-muted">
<i class="fas fa-magic me-1"></i>Auto-selected from previous vote. Choose "No Previous" to override.
</small>
</div>
<div class="col-md-6 mb-3">
<label for="currDotD" class="form-label">
<i class="fas fa-user-times me-2 text-danger"></i>Previous Dick of the Day
</label>
{{ form.currDotD(class_="form-select") }}
<small class="form-text text-muted">
<i class="fas fa-magic me-1"></i>Auto-selected from previous vote. Choose "No Previous" to override.
</small>
</div>
</div>
<!-- Warning Message -->
{% if not form.currMotM.choices or form.currMotM.choices|length == 0 %}
<div class="row mb-4">
<div class="col-12">
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle me-2"></i>
<strong>Note:</strong> No players available for previous MOTM/DotD. This is normal if you haven't set up a match squad yet. You can still save the match details.
</div>
</div>
</div>
{% endif %}
<!-- Action Buttons -->
<div class="row">
<div class="col-12">
<div class="d-flex gap-2 flex-wrap">
{{ form.saveButton(class_="btn btn-success") }}
{{ form.activateButton(class_="btn btn-primary") }}
<a class="btn btn-outline-secondary" href="/admin" role="button">
<i class="fas fa-times me-2"></i>Cancel
</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Opposition Logo Card -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-info text-white">
<h5 class="card-title mb-0">
<i class="fas fa-image me-2"></i>Opposition Team Logo
</h5>
</div>
<div class="card-body text-center">
<img src="{{ nextOppoLogo }}" height="120" id="nextOppoLogo" class="img-fluid rounded" alt="Opposition Team Logo"/>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_scripts %}
<script>
function loadNextFixture() {
// Show loading status
const statusElement = document.getElementById('fixtureStatus');
const infoElement = document.getElementById('fixtureInfo');
const loadBtn = document.getElementById('loadFixtureBtn');
statusElement.innerHTML = '<span class="text-info"><i class="fas fa-spinner fa-spin me-2"></i>Loading...</span>';
loadBtn.disabled = true;
// Fetch the next fixture from the API
fetch('/admin/api/next-fixture')
.then(response => response.json())
.then(data => {
if (data.success) {
// Update the form fields
document.getElementById('nextMatchDate').value = data.date;
document.getElementById('nextOppoTeam').value = data.opponent;
// Update the opponent logo if provided
if (data.opponent_logo_url) {
const logoElement = document.getElementById('nextOppoLogo');
if (logoElement) {
logoElement.src = data.opponent_logo_url;
}
}
// Show fixture information
let clubInfo = '';
if (data.opponent_club_info) {
const club = data.opponent_club_info;
const confidence = club.match_result ? club.match_result.confidence : 'unknown';
const matchType = club.match_result ? club.match_result.match_type : 'unknown';
clubInfo = '<br><small class="text-muted">';
clubInfo += 'Club: ' + club.club_name;
if (club.logo_url) {
clubInfo += ' | <a href="' + club.logo_url + '" target="_blank">Logo</a>';
}
clubInfo += ' | Match: ' + matchType + ' (' + confidence + ')';
clubInfo += '</small>';
}
infoElement.innerHTML = '<strong>Next Match:</strong> ' +
data.date_formatted + ' vs ' + data.opponent +
' (' + (data.is_home ? 'Home' : 'Away') + ' - ' + data.venue + ')' +
'<br><small>Division: ' + data.division + ' | Time: ' + data.time + '</small>' +
clubInfo;
infoElement.style.display = 'block';
statusElement.innerHTML = '<span class="text-success"><i class="fas fa-check me-2"></i>Fixture loaded!</span>';
// Clear status message after 3 seconds
setTimeout(function() {
statusElement.innerHTML = '';
}, 3000);
} else {
statusElement.innerHTML = '<span class="text-danger"><i class="fas fa-times me-2"></i>' + data.message + '</span>';
infoElement.style.display = 'none';
}
loadBtn.disabled = false;
})
.catch(error => {
console.error('Error:', error);
statusElement.innerHTML = '<span class="text-danger"><i class="fas fa-exclamation-triangle me-2"></i>Error loading fixture</span>';
infoElement.style.display = 'none';
loadBtn.disabled = false;
});
}
// Auto-load fixture on page load (optional)
document.addEventListener('DOMContentLoaded', function() {
// Uncomment the next line if you want to auto-load the fixture when the page loads
// loadNextFixture();
});
</script>
{% endblock %}