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"; "use strict";
const query = (new URL(location)).searchParams.get("query") let query = (new URL(location)).searchParams.get("query")
, epoch = Math.floor(Date.now() / 1000) , epoch = Math.floor(Date.now() / 1000)
; ;
let orderBy, ascending; // use `setOrderBy()` to modify orderBy let orderBy, ascending; // use `setOrderBy()` to modify orderBy
@ -26,12 +26,42 @@ window.onload = function () {
setOrderBy("DISCOVERED_ON"); setOrderBy("DISCOVERED_ON");
} }
const feedAnchor = document.getElementById("feed-anchor");
const sortDropdown = document.getElementById("sort-dropdown");
if (query) { if (query) {
const feedAnchor = document.getElementById("feed-anchor");
feedAnchor.setAttribute("href", "/feed?query=" + encodeURIComponent(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]; const button = document.getElementsByTagName("button")[0];
button.textContent = "Loading More Results..."; button.textContent = "Loading More Results...";
button.setAttribute("disabled", ""); // disable the button whilst loading... button.setAttribute("disabled", ""); // disable the button whilst loading...
if (queryParam == null) {
queryParam = query
}
const ul = document.querySelector("main ul"); const ul = document.querySelector("main ul");
const template = document.getElementById("item-template").innerHTML; const template = document.getElementById("item-template").innerHTML;
const reqURL = "/api/v0.1/torrents?" + encodeQueryData({ const reqURL = "/api/v0.1/torrents?" + encodeQueryData({
query: query, query: queryParam,
epoch: epoch, epoch: epoch,
lastID: lastID, lastID: lastID,
lastOrderedValue: lastOrderedValue, 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; max-width: 600px;
width: 100%; width: 100%;
margin-left: 0.5em;
margin-right: 0.5em;
} }
header > div, select, input {
header form input {
width: 100%;
}
header > div {
margin-right: 0.5em; 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> <h3><a href="/torrents/{{infoHash}}">{{name}}</a></h3>
<a href="magnet:?xt=urn:btih:{{infoHash}}&dn={{name}}"> <a href="magnet:?xt=urn:btih:{{infoHash}}&dn={{name}}">
<img src="static/assets/magnet.gif" alt="Magnet link" <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> </div>
{{size}}, {{discoveredOn}} {{size}}, {{discoveredOn}}
</li> </li>
@ -28,13 +28,18 @@
<body> <body>
<header> <header>
<div><a href="/"><b>magnetico<sup>w</sup></b></a>&#8203;<sub>(pre-alpha)</sub></div> <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 --> <input id="query" type="search" name="query" placeholder="Search the BitTorrent DHT">
<form action="/torrents" method="get" autocomplete="off" role="search"> <select id="sort-dropdown">
<input type="search" name="query" placeholder="Search the BitTorrent DHT"> <option value="size_asc">By size (ascending)</option>
</form> <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> <div>
<a href="/feed" id="feed-anchor"><img src="static/assets/feed.png" <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> </div>
</header> </header>
<main> <main>