264 lines
14 KiB
HTML
264 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Comments Management - HKFC Men's C Team</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.comment-card {
|
|
margin-bottom: 1rem;
|
|
border-left: 3px solid #0d6efd;
|
|
}
|
|
.comment-text {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
.reset-section {
|
|
background-color: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.data-section {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.edit-form {
|
|
display: none;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>Match Comments Management</h1>
|
|
<p class="lead">Manage, edit, and delete match comments</p>
|
|
|
|
<div class="mb-3">
|
|
<a href="/admin" class="btn btn-outline-primary">Back to Admin Dashboard</a>
|
|
</div>
|
|
|
|
{% 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 %}
|
|
|
|
<!-- Bulk Delete Controls -->
|
|
<div class="reset-section">
|
|
<h3>Bulk Operations</h3>
|
|
<p class="text-muted">Delete comments for specific matches or all comments at once.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Delete Match Comments</h5>
|
|
<form method="POST" onsubmit="return confirm('Are you sure you want to delete all comments for this match?')">
|
|
<input type="hidden" name="action" value="delete_match_comments">
|
|
<div class="mb-3">
|
|
<select name="match_date" class="form-select" required>
|
|
<option value="">Select match date...</option>
|
|
{% for date in match_dates %}
|
|
<option value="{{ date }}">{{ date }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-warning">Delete Match Comments</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h5>Delete All Comments</h5>
|
|
<p class="text-muted">Warning: This will permanently delete all comments in the database.</p>
|
|
<form method="POST" onsubmit="return confirm('Are you sure you want to delete ALL comments? This action cannot be undone.')">
|
|
<input type="hidden" name="action" value="delete_all_comments">
|
|
<button type="submit" class="btn btn-danger">Delete All Comments</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column Management -->
|
|
{% if table_columns|length > 2 %}
|
|
<div class="reset-section">
|
|
<h3>Column Management</h3>
|
|
<p class="text-muted">Drop unwanted columns from the _motmcomments table.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Drop Column</h5>
|
|
<form method="POST" onsubmit="return confirm('Are you sure you want to drop this column? This action cannot be undone!')">
|
|
<input type="hidden" name="action" value="drop_column">
|
|
<div class="mb-3">
|
|
<select name="column_name" class="form-select" required>
|
|
<option value="">Select column to drop...</option>
|
|
{% for column in table_columns %}
|
|
{% if column not in ['matchDate', 'comment', 'rowid', 'id'] %}
|
|
<option value="{{ column }}">{{ column }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-danger">Drop Column</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h5>Available Columns</h5>
|
|
<p>Current columns in the table:</p>
|
|
<ul>
|
|
{% for column in table_columns %}
|
|
{% if column not in ['rowid', 'id'] %}
|
|
<li><code>{{ column }}</code></li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Comments Display -->
|
|
<div class="data-section">
|
|
<h3>All Comments ({{ comments|length }})</h3>
|
|
|
|
{% if comments %}
|
|
<div class="row">
|
|
{% for comment in comments %}
|
|
<div class="col-md-12 mb-3">
|
|
<div class="card comment-card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="flex-grow-1">
|
|
<h5 class="card-title">
|
|
<span class="badge bg-primary">{{ comment.matchDate }}</span>
|
|
<small class="text-muted">#{{ comment.comment_id }}</small>
|
|
</h5>
|
|
<div class="comment-display-{{ comment.comment_id }}">
|
|
<p class="card-text comment-text">{{ comment.comment }}</p>
|
|
</div>
|
|
<div class="edit-form comment-edit-{{ comment.comment_id }}">
|
|
<form method="POST" id="editForm{{ comment.comment_id }}">
|
|
<input type="hidden" name="action" value="edit_comment">
|
|
<input type="hidden" name="comment_id" value="{{ comment.comment_id }}">
|
|
<input type="hidden" name="match_date" value="{{ comment.matchDate }}">
|
|
<input type="hidden" name="original_comment" value="{{ comment.comment }}">
|
|
<div class="mb-2">
|
|
<textarea name="comment" class="form-control" rows="3" required>{{ comment.comment }}</textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-success btn-sm">Save</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" onclick="cancelEdit('{{ comment.comment_id }}')">Cancel</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="action-buttons">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleEdit('{{ comment.comment_id }}')" title="Edit comment">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
<form method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this comment?')">
|
|
<input type="hidden" name="action" value="delete_comment">
|
|
<input type="hidden" name="comment_id" value="{{ comment.comment_id }}">
|
|
<input type="hidden" name="match_date" value="{{ comment.matchDate }}">
|
|
<input type="hidden" name="original_comment" value="{{ comment.comment }}">
|
|
<button type="submit" class="btn btn-sm btn-outline-danger" title="Delete comment">
|
|
<i class="fas fa-trash"></i> Delete
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<h5>No comments found</h5>
|
|
<p>There are no comments in the database. Comments will appear here after users submit them during voting.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Statistics -->
|
|
{% if comments %}
|
|
<div class="data-section">
|
|
<h3>Statistics</h3>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<h2 class="text-primary">{{ comments|length }}</h2>
|
|
<p class="text-muted">Total Comments</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<h2 class="text-success">{{ match_dates|length }}</h2>
|
|
<p class="text-muted">Unique Match Dates</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<h2 class="text-info">{{ (comments|length / match_dates|length)|round(1) if match_dates|length > 0 else 0 }}</h2>
|
|
<p class="text-muted">Avg Comments per Match</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
|
|
<script>
|
|
function toggleEdit(commentId) {
|
|
// Escape special characters in commentId for CSS selector
|
|
const escapedId = CSS.escape(String(commentId));
|
|
const displayDiv = document.querySelector('.comment-display-' + escapedId);
|
|
const editDiv = document.querySelector('.comment-edit-' + escapedId);
|
|
|
|
if (displayDiv && editDiv) {
|
|
displayDiv.style.display = 'none';
|
|
editDiv.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function cancelEdit(commentId) {
|
|
// Escape special characters in commentId for CSS selector
|
|
const escapedId = CSS.escape(String(commentId));
|
|
const displayDiv = document.querySelector('.comment-display-' + escapedId);
|
|
const editDiv = document.querySelector('.comment-edit-' + escapedId);
|
|
|
|
if (displayDiv && editDiv) {
|
|
displayDiv.style.display = 'block';
|
|
editDiv.style.display = 'none';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|