Basic pagination

public/assets/js/admin/dashboard.js

@@ -1,21 +1,20 @@
 var reasonFlags = {};
-fetch('/api/v1/info')
-	.then(response => response.json())
-	.then(data => {
-		reasonFlags = data.reasonFlags;
-		console.log('Reason Flags:', reasonFlags);
-	fetch('/admin/api/bans')
-		.then(response => response.json())
-		.then(data => {
+let currentPage = 1;
+let itemsPerPage = 5;
+let data;
+
+function renderTable(data, reasonFlags) {
 	const tableBody = document.querySelector('#bansTableBody');
-			data.forEach(ban => {
+	tableBody.innerHTML = '';
+	const start = (currentPage - 1) * itemsPerPage;
+	const end = start + itemsPerPage;
+	const pageData = data.slice(start, end);
+
+	pageData.forEach(ban => {
 		const row = document.createElement('tr');
 		const banTimestamp = new Date(ban.banTimestamp).toLocaleString();
 		const expiresTimestamp = ban.expiresTimestamp ? new Date(ban.expiresTimestamp).toLocaleString() : 'Never';
 		const reasonsFlagNames = getSetFlags(ban.reasonsFlag, reasonFlags).join(', ');
-				console.log(ban.reasonsFlag)
-				console.log(reasonFlags)
-				console.log(getSetFlags(ban.reasonsFlag, reasonFlags))
 		row.innerHTML = `
 			<td>${ban.id}</td>
 			<td>${ban.robloxId || 'N/A'}</td>
@@ -36,6 +35,79 @@ fetch('/api/v1/info')
 		`;
 		tableBody.appendChild(row);
 	});
+}
+const itemsToShowDropdown = document.querySelector('#itemsToShowDropdown');
+const itemsOptions = [5, 10, 20, 30, 40, 50, 100, 200, 500, 1000];
+
+itemsOptions.forEach(option => {
+	const optionElement = document.createElement('option');
+	optionElement.value = option;
+	optionElement.textContent = option;
+	itemsToShowDropdown.appendChild(optionElement);
+});
+
+itemsToShowDropdown.addEventListener('change', (e) => {
+	const selectedValue = e.target.value;
+	itemsPerPage = parseInt(selectedValue, 10) || 5;
+	currentPage = 1;
+	renderTable(data, reasonFlags);
+	setupPagination(data);
+	console.log('Items per page:', itemsPerPage);
+});
+
+function setupPagination(data) {
+	const pagination = document.querySelector('#pagination');
+	pagination.innerHTML = '';
+	const totalPages = Math.ceil(data.length / itemsPerPage);
+
+	const ul = document.createElement('ul');
+	ul.classList.add('pagination');
+
+	const createPageItem = (page, text = page) => {
+		const li = document.createElement('li');
+		li.classList.add('page-item');
+		if (page === currentPage) {
+			li.classList.add('active');
+		}
+
+		const a = document.createElement('a');
+		a.classList.add('page-link');
+		a.textContent = text;
+		a.href = '#';
+		a.addEventListener('click', (e) => {
+			e.preventDefault();
+			currentPage = page;
+			renderTable(data, reasonFlags);
+			setupPagination(data);
+		});
+
+		li.appendChild(a);
+		return li;
+	};
+
+	ul.appendChild(createPageItem(1, 'First'));
+	ul.appendChild(createPageItem(Math.max(1, currentPage - 1), 'Prev'));
+
+	for (let i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
+		ul.appendChild(createPageItem(i));
+	}
+
+	ul.appendChild(createPageItem(Math.min(totalPages, currentPage + 1), 'Next'));
+	ul.appendChild(createPageItem(totalPages, 'Last'));
+
+	pagination.appendChild(ul);
+}
+
+fetch('/api/v1/info')
+	.then(response => response.json())
+	.then(data => {
+		reasonFlags = data.reasonFlags;
+		console.log('Reason Flags:', reasonFlags);
+		fetch('/admin/api/bans')
+			.then(response => response.json())
+			.then(data => {
+				renderTable(data, reasonFlags);
+				setupPagination(data);
 			})
 			.catch(error => console.error('Error fetching ban data:', error));
 	})

routes/admin.js

@@ -177,8 +177,8 @@ router.post('/import', authenticate, upload.single('fileInput'), async (req, res
 		for (const line of lines) {
 			// This is a text file, split by "x/"", get [0], then split by / and get the last element, that will be an ID. All other values are static.
 			const robloxId = line.split('x/')[0].split('/').pop();
-			let reasonLong = line.split('/profile ')[1];
-			if (reasonLong.length > 255) {
+			let reasonLong = line.split('/profile ')[1] || "Undefined";
+			if (reasonLong?.length > 255) {
 				reasonLong = reasonLong.substring(0, 2048);
 			}
 			const reasonShort = "Listed by MFD";

views/admin/dashboard.ejs

@@ -39,6 +39,13 @@
 	</nav>
 	<div class="container mt-5">
 		<h2 class="mb-4 d-inline">Bans</h2>
+		<div id="pagination" class="mb-4"></div>
+		<div class="mb-3">
+			<label for="itemsToShowDropdown" class="form-label">Items to show:</label>
+			<select id="itemsToShowDropdown" class="form-select" style="width: auto; display: inline-block;">
+				<!-- Options will be populated by the script -->
+			</select>
+		</div>
 	</div>
 	<table class="table table-dark table-striped">
 		<thead>