DarkflameServer/dDashboardServer/templates/bug_reports.jinja2

{% extends "base.jinja2" %}

{% block title %}Bug Reports - DarkflameServer{% endblock %}

{% block css %}{% endblock %}

{% block content %}
	<div class="bug-reports-container">
		<div class="container-fluid">
			<div class="card">
				<div class="card-header">
					<h2>Bug Reports <span class="bug_report-count">0</span></h2>
					<p class="text-muted">View and manage bug reports from players</p>
				</div>
				<div class="card-body">
				<table id="bugReportsTable" class="table table-dark table-striped table-hover">
					<thead>
						<tr>
							<th>ID</th>
							<th>Player</th>
							<th>Client Version</th>
							<th>Submitted</th>
							<th>Report Preview</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						<!-- Data populated by DataTables -->
					</tbody>
				</table>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	<script src="/js/realtime.js"></script>
	<script>
		$(document).ready(function() {
			// Initialize DataTable with server-side processing
			const table = $('#bugReportsTable').DataTable({
				processing: true,
				serverSide: true,
				pageLength: 25,
				lengthMenu: [10, 25, 50, 100],
				ajax: {
					url: '/api/tables/bug_reports',
					type: 'POST',
					contentType: 'application/json',
					data: function(d) {
						return JSON.stringify(d);
					}
				},
				columns: [
					{ data: 'id' },
					{ data: 'other_player_id' },
					{ data: 'client_version' },
					{
						data: 'submitted',
						render: function(data) {
							return data ? new Date(data).toLocaleString() : '-';
						}
					},
					{
						data: 'body',
						render: function(data) {
							return '<span class="report-preview" title="' + (data || '') + '">' + (data || '-') + '</span>';
						}
					},
					{
						data: 'id',
						render: function(data) {
							return '<div class="account-actions">' +
								'<button class="btn btn-sm btn-info" onclick="viewReport(' + data + ')" title="View">👁️</button>' +
								'<button class="btn btn-sm btn-danger" onclick="deleteReport(' + data + ')" title="Delete">🗑️</button>' +
								'</div>';
						},
						orderable: false,
						searchable: false
					}
				],
				order: [[0, 'desc']],
				stateSave: false
			});

			// Register table for real-time updates
			realtimeManager.RegisterTable('bug_report', table);

			// Update bug report count on table draw
			table.on('draw.dt', function() {
				const info = table.page.info();
				const countEl = document.querySelector('.bug_report-count');
				if (countEl && info) {
					countEl.textContent = info.recordsTotal;
				}
			});

			// Initialize real-time listener when WebSocket is ready
			const waitForWS = setInterval(() => {
				if (typeof realtimeManager !== 'undefined' && wsConnectionReady) {
					clearInterval(waitForWS);
				}
			}, 100);
		});

		function viewReport(id) {
			alert('View report: ' + id);
			// TODO: Implement report view modal
		}

		function deleteReport(id) {
			if (confirm('Are you sure you want to delete this report?')) {
				alert('Delete report: ' + id);
				// TODO: Implement report deletion
			}
		}
	</script>
{% endblock %}