From 039ac3a0c2068c615112b4b5887f3dfe48f94b9c Mon Sep 17 00:00:00 2001
From: admkc <koc.adem.809@gmail.com>
Date: Thu, 12 Nov 2020 23:01:49 +0300
Subject: [PATCH] pagination added

---
 css/main.css | 20 +++++++++++++++++++-
 index.html   | 19 +++++++++++++++++++
 js/main.js   | 39 +++++++++++++++++++++++++++++++--------
 3 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/css/main.css b/css/main.css
index ae84ca6..87a9b9d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -23,7 +23,6 @@ code {
 
 #stats-result {
     margin-top: 50px;
-    margin-bottom: 40px;
 }
 
 .alert.output {
@@ -148,3 +147,22 @@ body {
     margin-top: 20px;
 }
 
+#pagination {
+	display: flex;
+	justify-content: center;
+}
+
+#per-page {
+    padding: 5px;
+	display: flex;
+	align-items: center;
+}
+
+#per-page > * {
+    display: flex;
+}
+
+#per-page select {
+    width: 60px;
+    margin-left: 5px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 9aafdf2..3df19eb 100644
--- a/index.html
+++ b/index.html
@@ -75,6 +75,25 @@ <h1><span class="username"></span>/<span class="repository"></span></h1>
         </div>
         <div class="row" id="stats-result">
         </div>
+        <div class="row">
+            <nav id="pagination">
+                <ul class="pager">
+                    <li><a id="get-prev-results-button" href="#">Newer</a></li>
+                    <li><a id="get-next-results-button" href="#">Older</a></li>
+                </ul>
+                <div id="per-page">
+                    <label class="">Per page</label>
+                    <select class="form-control">
+                        <option>5</option>
+                        <option>10</option>
+                        <option>15</option>
+                        <option>20</option>
+                        <option>25</option>
+                        <option>30</option>
+                    </select>
+                </div>
+            </nav>
+        </div>
         <div id="loader-gif">
             <img src="img/gif-load.gif">
         </div>
diff --git a/js/main.js b/js/main.js
index f3be8e6..2fab2b8 100644
--- a/js/main.js
+++ b/js/main.js
@@ -77,7 +77,7 @@ function showStats(data) {
 
     if(data.length == 0) {
         err = true;
-        errMessage = "There are no releases for this project";
+        errMessage = getQueryVariable("page") > 1 ? "No more releases" : "There are no releases for this project";
     }
 
     var html = "";
@@ -87,7 +87,7 @@ function showStats(data) {
     } else {
         html += "<div class='col-md-6 col-md-offset-3 output'>";
 
-        var isLatestRelease = true;
+        var isLatestRelease = getQueryVariable("page") == 1 ? true : false;
         var totalDownloadCount = 0;
         $.each(data, function(index, item) {
             var releaseTag = item.tag_name;
@@ -180,14 +180,23 @@ function showStats(data) {
 }
 
 // Callback function for getting release stats
-function getStats() {
+function getStats(page, perPage) {
     var user = $("#username").val();
     var repository = $("#repository").val();
 
-    var url = apiRoot + "repos/" + user + "/" + repository + "/releases";
+    var url = apiRoot + "repos/" + user + "/" + repository + "/releases" +
+        "?page=" + page + "&per_page=" + perPage;
     $.getJSON(url, showStats).fail(showStats);
 }
 
+// Redirection function
+function redirect(page, perPage) {
+    window.location = "?username=" + $("#username").val() +
+        "&repository=" + $("#repository").val() +
+        "&page=" + page + "&per_page=" + perPage +
+        ((getQueryVariable("search") == "0") ? "&search=0" : "");
+}
+
 // The main function
 $(function() {
     $("#loader-gif").hide();
@@ -198,26 +207,40 @@ $(function() {
     $("#username").change(getUserRepos);
 
     $("#get-stats-button").click(function() {
-        window.location = "?username=" + $("#username").val() +
-            "&repository=" + $("#repository").val() +
-            ((getQueryVariable("search") == "0") ? "&search=0" : "");
+        redirect(page, perPage);
+    });
+
+    $("#get-prev-results-button").click(function() {
+        redirect(page > 1 ? --page : 1, perPage);
+    });
+
+    $("#get-next-results-button").click(function() {
+        redirect(++page, perPage);
+    });
+
+    $("#per-page select").on('change', function() {
+        if(username == "" && repository == "") return;
+        redirect(page, this.value);
     });
 
     var username = getQueryVariable("username");
     var repository = getQueryVariable("repository");
     var showSearch = getQueryVariable("search");
+    var page = getQueryVariable("page") || 1;
+    var perPage = getQueryVariable("per_page") || 5;
 
     if(username != "" && repository != "") {
         $("#username").val(username);
         $("#title .username").text(username);
         $("#repository").val(repository);
         $("#title .repository").text(repository);
+        $("#per-page select").val(perPage);
         validateInput();
         getUserRepos();
         $(".output").hide();
         $("#description").hide();
         $("#loader-gif").show();
-        getStats();
+        getStats(page, perPage);
 
         if(showSearch == "0") {
             $("#search").hide();