rnhmjoj/magnetico
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Implemented dynamic query ( without reloading page ) and basic sort ( only by size, date, no_files - descending )

Browse Source
This commit is contained in:
Michał Gątkowski 2022-08-06 19:29:31 +02:00
parent 9f9b189c3d
commit 3e1d2bd16e
3 changed files with 52 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
cmd/magneticow/data/static/scripts/torrents.js
View File

@ -1,6 +1,6 @@
"use strict";
const query = (new URL(location)).searchParams.get("query")
let query = (new URL(location)).searchParams.get("query")
, epoch = Math.floor(Date.now() / 1000)
;
let orderBy, ascending; // use `setOrderBy()` to modify orderBy
@ -26,12 +26,42 @@ window.onload = function () {
setOrderBy("DISCOVERED_ON");
}
if (query) {
const feedAnchor = document.getElementById("feed-anchor");
const sortDropdown = document.getElementById("sort-dropdown");
if (query) {
feedAnchor.setAttribute("href", "/feed?query=" + encodeURIComponent(query));
} else {
sortDropdown.selectedIndex = 3
}
load();
const queryInput = document.getElementById("query");
queryInput.onchange = sortDropdown.onchange = function () {
const ul = document.querySelector("main ul");
query = queryInput.value
switch (sortDropdown.selectedIndex) {
case 1:
setOrderBy("TOTAL_SIZE")
break;
case 3:
setOrderBy("DISCOVERED_ON")
break;
case 5:
setOrderBy("N_FILES")
break;
}
if (query !== '') {
setOrderBy("RELEVANCE");
}
ul.innerHTML = ""
lastID = null
lastOrderedValue = null
load(queryInput.value);
};
load(query);
};
@ -62,15 +92,19 @@ function orderedValue(torrent) {
}
function load() {
function load(queryParam) {
const button = document.getElementsByTagName("button")[0];
button.textContent = "Loading More Results...";
button.setAttribute("disabled", ""); // disable the button whilst loading...
if (queryParam == null) {
queryParam = query
}
const ul = document.querySelector("main ul");
const template = document.getElementById("item-template").innerHTML;
const reqURL = "/api/v0.1/torrents?" + encodeQueryData({
query: query,
query: queryParam,
epoch: epoch,
lastID: lastID,
lastOrderedValue: lastOrderedValue,

13
cmd/magneticow/data/static/styles/torrents.css
View File

@ -22,21 +22,12 @@ header div a {
}
header form {
#query {
max-width: 600px;
width: 100%;
margin-left: 0.5em;
margin-right: 0.5em;
}
header form input {
width: 100%;
}
header > div {
header > div, select, input {
margin-right: 0.5em;
}

17
cmd/magneticow/data/templates/torrents.html
View File

@ -19,7 +19,7 @@
<h3><a href="/torrents/{{infoHash}}">{{name}}</a></h3>
<a href="magnet:?xt=urn:btih:{{infoHash}}&dn={{name}}">
<img src="static/assets/magnet.gif" alt="Magnet link"
title="Download this torrent using magnet" /> <small>{{infoHash}}</small></a>
title="Download this torrent using magnet"/> <small>{{infoHash}}</small></a>
</div>
{{size}}, {{discoveredOn}}
</li>
@ -28,13 +28,18 @@
<body>
<header>
<div><a href="/"><b>magnetico<sup>w</sup></b></a>&#8203;<sub>(pre-alpha)</sub></div>
<!-- TODO: why make a GET request again? handle it client-side -->
<form action="/torrents" method="get" autocomplete="off" role="search">
<input type="search" name="query" placeholder="Search the BitTorrent DHT">
</form>
<input id="query" type="search" name="query" placeholder="Search the BitTorrent DHT">
<select id="sort-dropdown">
<option value="size_asc">By size (ascending)</option>
<option value="size_desc">By size (descending)</option>
<option value="size_asc">By date (ascending)</option>
<option value="size_desc">By date (descending)</option>
<option value="size_asc">By number of files (ascending)</option>
<option value="size_desc">By number of files (descending)</option>
</select>
<div>
<a href="/feed" id="feed-anchor"><img src="static/assets/feed.png"
alt="feed icon" title="subscribe" /> subscribe</a>
alt="feed icon" title="subscribe"/> subscribe</a>
</div>
</header>
<main>