rob
/
torrents.csv
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Enhanc search result

This commit is contained in:
jo 2018-11-30 20:52:29 +01:00
parent 2ce8a48c77
commit 3eeb85f3d1
2 changed files with 43 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/ui/src/components/navbar.tsx
View File

@ -29,7 +29,7 @@ export class Navbar extends Component<any, State> {
navbar() {
return (
<nav class="navbar navbar-dark navbar-purple py-1">
<nav class="navbar navbar-dark navbar-purple py-1 mb-3">
<a class="navbar-brand mx-1" href="#">
<i class="fas fa-fw fa-database mr-1"></i>
Torrents.csv

65
server/ui/src/components/search.tsx
View File

@ -68,6 +68,7 @@ export class Search extends Component<any, State> {
fetchData(searchParams: SearchParams): Promise<Results> {
let q = encodeURI(searchParams.q);
// Ability to have more rows per page ?
return fetch(`${endpoint}/service/search?q=${q}&page=${searchParams.page}`)
.then(data => data.text())
.then(csv => convertCsvToJson(csv));
@ -75,10 +76,7 @@ export class Search extends Component<any, State> {
render() {
return (
<div>
<div className={this.state.results.torrents[0] ? "container-fluid" : "container"}>
<div class="row mt-2">
<div class="col-12">
<div className="container-fluid">
{
this.state.searching ?
this.spinner()
@ -86,40 +84,49 @@ export class Search extends Component<any, State> {
this.state.results.torrents[0] ? this.table() : this.noResults()
}
</div>
</div>
</div>
);
}
spinner() {
return (
<div class="text-center m-5 p-5">
<i class="fas fa-spinner fa-spin fa-5x"></i>
</div>
);
}
noResults() {
return (
<div class="text-center m-5 p-5">
<h1>No Results</h1>
</div>
)
}
table() {
return (
<div>
<table class="table table-fixed table-hover table-sm table-striped">
<table class="table table-fixed table-sm table-hover border">
<thead>
<tr>
<th class="search-name-col">Name</th>
<th class="text-right">Size</th>
<th class="text-right">Seeds</th>
<th class="text-right d-none d-md-table-cell">Leeches</th>
<th class="text-right d-none d-md-table-cell">Created</th>
<th class="align-middle search-name-col">Name</th>
<th class="align-middle text-right">Size</th>
<th class="align-middle text-right">Seeds</th>
<th class="align-middle text-right d-none d-md-table-cell">Leeches</th>
<th class="align-middle text-right d-none d-md-table-cell">Created</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.results.torrents.map(torrent => (
<tr>
<td class="search-name-cell">{torrent.name}</td>
<td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
<td class="text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
<td class="text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>
<td class="text-right text-muted d-none d-md-table-cell" data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`} data-balloon-pos="down">
<tr class="clickable-row">
<td class="align-middle search-name-cell"><pre class="mx-1 my-0 text-truncate">{torrent.name}</pre></td>
<td class="align-middle text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
<td class="align-middle text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
<td class="align-middle text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>
<td class="align-middle text-right text-muted d-none d-md-table-cell"
data-balloon={`Scraped ${moment(torrent.scraped_date * 1000).fromNow()}`}
data-balloon-pos="down">
{moment(torrent.created_unix * 1000).fromNow()}
</td>
<td class="text-right">
@ -139,26 +146,18 @@ export class Search extends Component<any, State> {
);
}
spinner() {
return (
<div class="text-center">
<i class="fas fa-spinner fa-spin fa-5x"></i>
</div>
);
}
paginator() {
return (
<nav>
<ul class="pagination">
<ul class="pagination justify-content-center">
<li className={(this.state.searchParams.page == 1) ? "page-item disabled" : "page-item"}>
<button class="page-link"
onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}
>
Previous</button>
<button class="page-link rounded-0"
onClick={linkEvent({ i: this, nextPage: false }, this.switchPage)}>
Previous
</button>
</li>
<li class="page-item">
<button class="page-link"
<button class="page-link rounded-0"
onClick={linkEvent({ i: this, nextPage: true }, this.switchPage)}>
Next
</button>
@ -169,10 +168,8 @@ export class Search extends Component<any, State> {
}
switchPage(a: { i: Search, nextPage: boolean }, event) {
let newSearch = a.i.state.searchParams;
newSearch.page += (a.nextPage) ? 1 : -1;
a.i.props.history.push(`/search/${newSearch.q}/${newSearch.page}`);
}
}