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