Skip to content

Commit

Permalink
Finished pagination and search and some other fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@carolinaisslaying
carolinaisslaying committed Jun 24, 2020
1 parent 504b133 commit 83fe6f3
Show file tree
Hide file tree
Showing 11 changed files with 412 additions and 293 deletions.
2 changes: 1 addition & 1 deletion assets/Views/partials/cards/userCard.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div style="overflow: hidden;" class="media-content">
<div class="content">
<p>
<span class="is-size-4 title has-text-blurple is-mobile">
<span class="is-size-4 title has-text-default is-mobile">
<span><%= user.fullUsername %></span>
</span>
<br />
Expand Down
115 changes: 73 additions & 42 deletions assets/Views/templates/bots/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,6 @@
</script>
<%- include("../../partials/nav.ejs") %>
<%
var buttons = "";
for (let n = 1; n < pages; n++) {
if (n === page) {
buttons += `<li><a href="/bots?page=${n}" class="pagination-link is-current" aria-label="Goto page ${n}">${n}</a></li>`;
} else {
buttons += `<li><a href="/bots?page=${n}" class="pagination-link "aria-label="Goto page ${n}">${n}</a></li>`;
}
}
let defaultColour = "#b114ff";
let foreground = "#ffffff";
Expand All @@ -40,6 +31,7 @@
%>
<style type="text/css">.button.is-default.is-outlined{background-color:transparent;border-color:<%= defaultColour %>;color:<%= defaultColour %>}.button.is-default.is-outlined:hover,.button.is-default.is-outlined.is-hovered,.button.is-default.is-outlined:focus,.button.is-default.is-outlined.is-focused{background-color:<%= defaultColour %>;border-color:<%= defaultColour %>;color:<%= foreground %>}.button.is-default.is-outlined.is-loading::after{border-color:transparent transparent <%= defaultColour %> <%= defaultColour %>!important}.button.is-default.is-outlined.is-loading:hover::after,.button.is-default.is-outlined.is-loading.is-hovered::after,.button.is-default.is-outlined.is-loading:focus::after,.button.is-default.is-outlined.is-loading.is-focused::after{border-color:transparent transparent <%= foreground %> <%= foreground %>!important}.button.is-default.is-outlined[disabled],fieldset[disabled] .button.is-default.is-outlined{background-color:transparent;border-color:<%= defaultColour %>;box-shadow:none;color:<%= defaultColour %>}.button.is-default.is-inverted.is-outlined{background-color:transparent;border-color:<%= foreground %>;color:<%= foreground %>}.button.is-default.is-inverted.is-outlined:hover,.button.is-default.is-inverted.is-outlined.is-hovered,.button.is-default.is-inverted.is-outlined:focus,.button.is-default.is-inverted.is-outlined.is-focused{background-color:<%= foreground %>;color:<%= defaultColour %>}.button.is-default.is-inverted.is-outlined.is-loading:hover::after,.button.is-default.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-default.is-inverted.is-outlined.is-loading:focus::after,.button.is-default.is-inverted.is-outlined.is-loading.is-focused::after{border-color:transparent transparent <%= defaultColour %> <%= defaultColour %>!important}.button.is-default.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-default.is-inverted.is-outlined{background-color:transparent;border-color:<%= foreground %>;box-shadow:none;color:<%= foreground %>}</style>
<style type="text/css">.pagination-link.is-current{background-color:<%= defaultColour %>;border-color:transparent;color:<%= foreground %>}.pagination-link:hover,.pagination-next:hover,.pagination-previous:hover{background-color:<%= defaultColour %>;border-color:transparent;color:<%= foreground %>}</style>
<style type="text/css">.pagination-link[disabled],.pagination-next[disabled],.pagination-previous[disabled]{background-color:#000000;border-color:#0e0e0e;box-shadow:none;color:#7a7a7a;opacity:0.5}.pagination-link[disabled]:hover,.pagination-next[disabled]:hover,.pagination-previous[disabled]:hover{background-color:#000000;border-color:#0e0e0e;box-shadow:none;color:#7a7a7a;opacity:0.5}</style>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
Expand All @@ -58,46 +50,85 @@
<div class="container is-fluid">
<div class="section is-fluid">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<% if (page > 1) { %>
<a href="${linkPrefix}/bots?page=<%= page - 1 %>" class="pagination-previous button is-primary">
<span class="icon">
<i aria-hidden="true" class="fas fa-arrow-left"></i>
</span>
<span><%= __("common.pagination.previous") %></span>
</a>
<% } else { %>
<a class="pagination-previous button is-primary" disabled>
<span class="icon">
<i aria-hidden="true" class="fas fa-arrow-left"></i>
</span>
<span><%= __("common.pagination.previous") %></span>
</a>
<% } %>
<% if (page < pages) { %>
<a href="${linkPrefix}/bots?page=<%= page + 1 %>" class="pagination-next button is-primary">
<span><%= __("common.pagination.next") %></span>
<span class="icon">
<i aria-hidden="true" class="fas fa-arrow-right"></i>
</span>
</a>
<% } else { %>
<a class="pagination-next button is-primary" disabled>
<span><%= __("common.pagination.next") %></span>
<span class="icon">
<i aria-hidden="true" class="fas fa-arrow-right"></i>
</span>
</a>
<% } %>
<a class="pagination-previous" <% if (Number(req.query.page) <= 1) { %>disabled<% } else { %>href="/bots?page=<%= Number(req.query.page) - 1 %>"<% } %>>Previous</a>
<a class="pagination-next" <% if (Number(req.query.page) >= pages) { %>disabled<% } else { %>href="/bots?page=<%= Number(req.query.page) + 1 %>"<% } %>>Next</a>
<ul class="pagination-list">
<%- buttons %>
<% if (Number(req.query.page) <= 3) { %>
<li>
<% if (Number(req.query.page) === 1) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "1") %>" aria-current="page">1</a>
<% } else { %>
<a class="pagination-link" href="/bots?page=1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
<% } %>
</li>
<% if (2 <= pages) { %>
<% if (Number(req.query.page) === 2) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "2") %>" aria-current="page">2</a>
<% } else { %>
<a class="pagination-link" href="/bots?page=2" aria-label="<%= __("common.pagination.gotoPage", "2") %>">2</a>
<% } %>
<% } %>
<% if (3 <= pages) { %>
<li>
<% if (Number(req.query.page) === 3) { %>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "3") %>" aria-current="page">3</a>
<% } else { %>
<a class="pagination-link" href="/bots?page=3" aria-label="<%= __("common.pagination.gotoPage", "3") %>">3</a>
<% } %>
</li>
<% } %>
<% if (pages > 3) { %>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" href="/bots?page=<%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages %>"><%= pages %></a>
</li>
<% } %>
<% } else { %>
<li>
<a class="pagination-link" href="/bots?page=1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
</li>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<% if (Number(req.query.page) === pages) { %>
<li>
<a class="pagination-link" href="/bots?page=<%= Number(req.query.page) - 2 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 2 %>"><%= Number(req.query.page) - 2 %></a>
</li>
<% } %>
<li>
<a class="pagination-link" href="/bots?page=<%= Number(req.query.page) - 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 1 %>"><%= Number(req.query.page) - 1 %></a>
</li>
<li>
<a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", req.query.page %>" aria-current="page"><%= req.query.page %></a>
</li>
<% if (Number(req.query.page) !== pages) { %>
<li>
<a class="pagination-link" href="/bots?page=<%= Number(req.query.page) + 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) + 1 %>"><%= Number(req.query.page) + 1 %></a>
</li>
<% } %>
<% if (Number(req.query.page <= (pages - 2))) { %>
<li>
<span class="pagination-ellipsis">&hellip;</span>
</li>
<li>
<a class="pagination-link" href="/bots?page=<%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages %>"><%= pages %></a>
</li>
<% } %>
<% } %>
</ul>
</nav>
<br />
<div class="columns is-multiline is-centered">
<% if (botsData.length === 0) { %>
<% if (bots.length === 0) { %>
<h2 class="is-size-3"><%= __("common.error.fetchFail.bots") %></h2>
<% } else { %>
<%- botChunk.map(chunk => `${chunk.map(bot => include("../../partials/cards/botCard.ejs", { bot, queue: false, search: false, archived: false, verificationApp: false, profile: false })).join("")}`).join("") %>
<% if (botsPgArr.length === 0) { %>
<h2 class="is-size-3"><%= __("common.error.fetchFail.bots") %></h2>
<% } else { %>
<%- botsPgArr.map(bot => include("../../partials/cards/botCard.ejs", { bot, queue: false, search: false, archived: false, verificationApp: false, profile: false })).join("") %>
<% } %>
<% } %>
</div>

Expand Down
141 changes: 64 additions & 77 deletions assets/Views/templates/search.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,88 +81,75 @@
</section>
<div class="container is-fluid">
<div class="section is-fluid" id="display">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<% if (page > 1) { %>
<a href="/staff/apps/staff?page=<%= page - 1 %>" class="pagination-previous button is-primary"><i class="fas fa-arrow-left"></i>&nbsp; Previous</a>
<% } else { %>
<a class="pagination-previous button is-primary" disabled><i class="fas fa-arrow-left"></i>&nbsp; Previous</a>
<% } %>
<% if (page < pages) { %>
<a href="/staff/apps/staff?page=<%= page + 1 %>" class="pagination-next button is-primary">Next &nbsp;<i class="fas fa-arrow-right"></i></a>
<% } else { %>
<a class="pagination-next button is-primary" disabled>Next &nbsp;<i class="fas fa-arrow-right"></i></a>
<% } %>
</nav>
<button class="button is-transparent is-large is-fullwidth is-loading" style="display: none;" id="loader"><%= __("common.loading") %></button>
<div>
<h2 class="is-size-3" id="initialMsg" style="display: block;"><%= __("page.search.initial") %></h2>
<button class="button is-transparent is-large is-fullwidth is-loading" style="display: none;" id="loader"><%= __("common.loading") %></button>
<div class="columns is-multiline is-centered" id="renderingDiv"></div>
</div>
</div>
</div>
<script>
(function () {
async function search(query, only) {
return new Promise(resolve => {
const req = new XMLHttpRequest();
req.open("POST", "/search");
req.setRequestHeader("Content-Type", "application/json");
if (!page) let page = 1;
req.send(JSON.stringify({ query, only, page }));
req.onreadystatechange = () => {
if (req.readyState === 4) {
const nav = document.querySelector("nav.pagination.is-centered");
const pageList = document.querySelector("ul.pagination-list");
if (pageList.children.length > 0) {
while (pageList.firstElementChild && !pageList.firstElementChild.remove());
}
nav.removeAttribute("style");
const results = [];
const { data } = JSON.parse(req.responseText);
console.log(data)
for (let i = 0; i < 18; i++) {
const cur = { bots: [], servers: [], users: [], templates: [] };
for (const html of data.pages[i]) {
if (html.includes("is-user-card")) cur.users.push(html);
if (html.includes("is-bot-card")) cur.bots.push(html);
if (html.includes("is-server-card")) cur.servers.push(html);
if (html.includes("is-template-card")) cur.templates.push(html);
}
const liTag = document.createElement("li");
const aTag = document.createElement("a");
aTag.setAttribute("class", "pagination-link"+((i+1)==page?" is-current":""));
aTag.innerHTML = (i+1).toString();
aTag.setAttribute("aria-label", (i+1).toString());
liTag.appendChild(aTag);
liTag.addEventListener("click", doPagination);
pageList.appendChild(liTag);
}
doPagination(pageList.children[0]);
}
};
const input = document.getElementById("searchInput");
input.addEventListener("keyup", async (event) => {
if (event.keyCode === 13) {
await doSearch();
} else return;
});
async function doSearch() {
const initialMsg = document.getElementById("initialMsg");
const loader = document.getElementById("loader");
document.getElementById("renderingDiv").innerHTML = "";
loader.style.display = "block";
initialMsg.style.display = "none";
const input = document.querySelector("input.input.is-rounded.is-dark#searchInput");
if (input.value.match(/gay(\s+)?(men\s+)?.*/i)) window.location.href = "/users/302604426781261824";
const c = document.querySelector("input[type='checkbox']#users");
const a = document.querySelector("input[type='checkbox']#bots");
const b = document.querySelector("input[type='checkbox']#servers");
const d = document.querySelector("input[type='checkbox']#templates");
const only = !((a && a.checked) && (b && b.checked) && (c && c.checked)) && [
c && c.checked && "users",
a && a.checked && "bots",
b && b.checked && "servers",
d && d.checked && "templates",
].filter(a=>!!a);
async function fetchPOST(url = '', data = {}) {
const response = await fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, *cors, same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json"
},
redirect: "follow", // manual, *follow, error
referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data)
});
return response.json();
}
function toggleSearching() {
searching = !searching;
const elem = document.querySelector("button.button.is-transparent.is-large.is-fullwidth.is-loading#loader");
elem && elem.classList[searching ? "add" : "remove"]("is-loading");
}
const div = document.querySelector("div.section#display");
const input = document.querySelector("input.input.is-rounded.is-dark#searchInput");
if (input instanceof HTMLInputElement) {
input.onkeypress = async ({ keyCode, which, shift }) => {
if ((which || keyCode) === 13 && !shift && !input.value.match(/\s+/)) {
if (input.value.match(/gay(\s+)?(men\s+)?.*/i)) window.location.href = "/users/302604426781261824";
const c = document.querySelector("input[type='checkbox']#users");
const a = document.querySelector("input[type='checkbox']#bots");
const b = document.querySelector("input[type='checkbox']#servers");
const d = document.querySelector("input[type='checkbox']#templates");
const only = !((a && a.checked) && (b && b.checked) && (c && c.checked)) && [
c && c.checked && "users",
a && a.checked && "bots",
b && b.checked && "servers",
d && d.checked && "templates",
].filter(a=>!!a);
await search(input.value, only || ["bots", "servers", "templates"]);
}
fetchPOST("<%= linkPrefix %>/search", {
query: input.value,
only: only || ["bots", "servers", "templates"]
})
.then(data => {
let content = "";
for (const card of data.data.pages[0]) {
content = content + card;
}
}
})();
loader.style.display = "none";
document.getElementById("renderingDiv").innerHTML = content;
});
}
</script>
<%- include("../partials/footer.ejs") %>
Loading

0 comments on commit 83fe6f3

Please sign in to comment.