From 9d9853dec3b51bae57ee2663e508f671ef26e10e Mon Sep 17 00:00:00 2001
From: GDColon <therealgdcolon@gmail.com>
Date: Mon, 9 Aug 2021 00:38:05 -0400
Subject: [PATCH] GDPS list is getting big so here's pagination

---
 html/gdps.html   | 68 +++++++++++++++++++++++++++++++++++-------------
 html/search.html |  4 +--
 2 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/html/gdps.html b/html/gdps.html
index 0fbc4ae..7c66af0 100644
--- a/html/gdps.html
+++ b/html/gdps.html
@@ -30,9 +30,7 @@
 		</div>
 	</div>
 
-	<div id="searchBox" class="supercenter dragscroll"; style="width: 127vh">
-		<div style="height: 4.5%"></div>
-	</div>
+	<div id="searchBox" class="supercenter dragscroll"; style="width: 127vh"></div>
 	
 	<div class="epicbox supercenter gs" style="width: 126vh; height: 80%; pointer-events: none"></div>
 
@@ -48,6 +46,14 @@
 		<img class="spin noSelect" src="../assets/loading.png" height="105%">
 	</div>
 
+	<div style="position: absolute; left: 7%; top: 45%; height: 10%;">
+		<img class="gdButton" id="pageDown" src="../assets/arrow-left.png" style="display: none"; height="90%">
+	</div>
+
+	<div style="position: absolute; right: 7%; top: 45%; height: 10%;">
+		<img class="gdButton" id="pageUp" src="../assets/arrow-right.png" style="display: none"; height="90%">
+	</div>
+
 	<div style="position:absolute; top: 3%; right: 2%; text-align: right; width: 20%;">
 		<img id="plusButton" class="inline gdButton" src="../assets/plus.png" width="25%" onclick="$('#infoDiv').show()">
 	</div>
@@ -60,29 +66,55 @@
 <script type="text/javascript" src="../dragscroll.js"></script>
 <script>
 
+let pageSize = 20
+let page = 1
 let localhost = window.location.hostname == "localhost"
 let host = window.location.host.split(".").slice(-2).join(".")
+
 Fetch('../api/gdps').then(servers => {
 
-	servers.forEach(x => {
+	let currentServer = servers.find(x => x.id == gdps)
+	servers = [currentServer].concat(servers.filter(x => x.id != gdps)).filter(x => x)
+	let pageCount = Math.floor((servers.length-1)/pageSize) + 1
+
+	function listServers() {
+
+		if (page >= pageCount) $('#pageUp').hide()
+		else $('#pageUp').show()
+		if (page <= 1) $('#pageDown').hide()
+		else $('#pageDown').show()
+
+		let serverPage = servers.slice((page-1)*pageSize, (page-1)*pageSize + pageSize)
+		$('#searchBox').html('<div style="height: 4.5%"></div>').scrollTop(0)
+
+		serverPage.forEach(x => {
+			$('#searchBox').append(`<div class="searchresult" style="height: 19%; padding-top: 1.2%">
+					<h1 class="lessspaced blue" style="color: ${(gdps || "") == x.id ? "#00DDFF" : "white"}">${x.name}</h1>
+					<h2 class="lessSpaced smaller inline gdButton"><a href="${x.authorLink}" target="_blank">By ${x.author}</a></h2>
 		
-	if (!x.id) x.id = null
-	$('#searchBox').append(`<div class="searchresult" style="height: 19%; padding-top: 1.2%">
-			<h1 class="lessspaced blue" style="color: ${gdps == x.id ? "#00DDFF" : "white"}">${x.name}</h1>
-			<h2 class="lessSpaced smaller inline gdButton"><a href="${x.authorLink}" target="_blank">By ${x.author}</a></h2>
+					<div class="center" style="position:absolute; height: 10%; width: 12.5%; left: 3%; transform:translateY(-160%)">
+						<a href="${x.link}" target="_blank"><img class="gdButton spaced gdpslogo" src="../assets/gdps/${x.id || "gd"}_icon.png" height="130%"></a>
+					</div>
+					
+					<div class="center" style="position:absolute; right: 7%; transform:translateY(-150%); height: 10%">
+						<a href="http://${x.id || ""}${x.id && localhost ? ".x" : ""}${x.id ? "." : ""}${host}"><img style="margin-bottom: 4.5%" class="valign gdButton" src="../assets/view.png" height="105%"></a>
+					</div>
+				</div>`)
+		})
+		$('#searchBox').append('<div style="height: 4.5%"></div>')
+	}
 
-			<div class="center" style="position:absolute; height: 10%; width: 12.5%; left: 3%; transform:translateY(-160%)">
-				<a href="${x.link}" target="_blank"><img class="gdButton spaced gdpslogo" src="../assets/gdps/${x.id || "gd"}_icon.png" height="130%"></a>
-			</div>
-			
-			<div class="center" style="position:absolute; right: 7%; transform:translateY(-150%); height: 10%">
-				<a href="http://${x.id || ""}${x.id && localhost ? ".x" : ""}${x.id ? "." : ""}${host}"><img style="margin-bottom: 4.5%" class="valign gdButton" src="../assets/view.png" height="105%"></a>
-			</div>
-		</div>`)
-	})
+	listServers()
 
-	$('#searchBox').append('<div style="height: 4%"></div>')
+	$('#pageUp').click(function() {page++; listServers()})
+	$('#pageDown').click(function() {page--; listServers()})
 	$('#loading').hide();
+
+	$(document).keydown(function(k) {
+		if (k.which == 37 && $('#pageDown').is(":visible")) $('#pageDown').trigger('click')   // left
+		if (k.which == 39 && $('#pageUp').is(":visible")) $('#pageUp').trigger('click')       // right
+	});
+
 })
 
 </script>
\ No newline at end of file
diff --git a/html/search.html b/html/search.html
index 4d23b7b..cc7844f 100644
--- a/html/search.html
+++ b/html/search.html
@@ -92,11 +92,11 @@
 	</div>
 
 	<div style="position: absolute; left: 7%; top: 45%; height: 10%;">
-		<img class="gdButton" id="pageDown" src="../assets/arrow-left.png" height="90%">
+		<img class="gdButton" id="pageDown" style="display: none"; src="../assets/arrow-left.png" height="90%">
 	</div>
 
 	<div style="position: absolute; right: 7%; top: 45%; height: 10%;">
-		<img class="gdButton" id="pageUp" src="../assets/arrow-right.png" height="90%">
+		<img class="gdButton" id="pageUp" style="display: none"; src="../assets/arrow-right.png" height="90%">
 	</div>
 
 	<div class="supercenter" id="loading" style="height: 10%; top: 47%; display: none;">