Skip to content

Adding a pagination #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Somsubhra merged 1 commit into from
Nov 14, 2020
Merged

Adding a pagination #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ code {

#stats-result {
margin-top: 50px;
margin-bottom: 40px;
}

.alert.output {
Expand Down Expand Up @@ -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;
}
19 changes: 19 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
39 changes: 31 additions & 8 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "";
Expand All @@ -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;
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand Down