WIP working state

dDashboardServer/templates/characters.jinja2

@@ -0,0 +1,90 @@
+{% extends "base.jinja2" %}
+
+{% block title %}Characters - DarkflameServer{% endblock %}
+
+{% block css %}{% endblock %}
+
+{% block content %}
+	<div class="characters-container">
+		<div class="table-card">
+			<div class="table-header">
+				<h2 class="mb-0">Characters</h2>
+				<p class="text-muted">View and manage player characters</p>
+			</div>
+			<div class="table-body">
+				<table id="charactersTable" class="table table-dark table-striped table-hover">
+					<thead>
+						<tr>
+							<th>ID</th>
+							<th>Name</th>
+							<th>Account</th>
+							<th>Last Login</th>
+							<th>Actions</th>
+						</tr>
+					</thead>
+					<tbody>
+						<!-- Data populated by DataTables -->
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		$(document).ready(function() {
+			// Initialize DataTable with server-side processing
+			$('#charactersTable').DataTable({
+				processing: true,
+				serverSide: true,
+				pageLength: 25,
+				lengthMenu: [10, 25, 50, 100],
+				ajax: {
+					url: '/api/tables/characters',
+					type: 'POST',
+					contentType: 'application/json',
+					data: function(d) {
+						return JSON.stringify(d);
+					}
+				},
+				columns: [
+					{ data: 'id' },
+					{ data: 'name' },
+					{ data: 'account_name' },
+					{
+						data: 'last_login',
+						render: function(data) {
+							if (data === 0) return 'Never';
+							const date = new Date(data * 1000);
+							return date.toLocaleString();
+						}
+					},
+					{
+						data: 'id',
+						render: function(data) {
+							return '<div class="account-actions">' +
+								'<button class="btn btn-sm btn-info" onclick="viewCharacter(' + data + ')" title="View">👁️</button>' +
+								'<button class="btn btn-sm btn-warning" onclick="editCharacter(' + data + ')" title="Edit">✏️</button>' +
+								'</div>';
+						},
+						orderable: false,
+						searchable: false
+					}
+				],
+				order: [[0, 'asc']],
+				stateSave: false
+			});
+		});
+
+		function viewCharacter(id) {
+			alert('View character: ' + id);
+			// TODO: Implement character view modal
+		}
+
+		function editCharacter(id) {
+			alert('Edit character: ' + id);
+			// TODO: Implement character edit modal
+		}
+	</script>
+{% endblock %}