🔎 DC++ manual search scaffold
This commit is contained in:
@@ -13,6 +13,7 @@ import {
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RootState, SearchInstance } from "threetwo-ui-typings";
|
||||
import ellipsize from "ellipsize";
|
||||
import { Form, Field } from "react-final-form";
|
||||
import { isEmpty, isNil, map } from "lodash";
|
||||
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
|
||||
interface IAcquisitionPanelProps {
|
||||
@@ -106,21 +107,52 @@ export const AcquisitionPanel = (
|
||||
<>
|
||||
<div className="comic-detail columns">
|
||||
{!isEmpty(ADCPPSocket) ? (
|
||||
<div className="column is-one-fifth">
|
||||
<button
|
||||
className={
|
||||
isAirDCPPSearchInProgress
|
||||
? "button is-loading is-warning"
|
||||
: "button"
|
||||
}
|
||||
onClick={() => getDCPPSearchResults(dcppQuery)}
|
||||
>
|
||||
<span className="icon is-small">
|
||||
<img src="/img/airdcpp_logo.svg" />
|
||||
</span>
|
||||
<span className="airdcpp-text">Search on AirDC++</span>
|
||||
</button>
|
||||
</div>
|
||||
<Form
|
||||
onSubmit={getDCPPSearchResults}
|
||||
initialValues={{
|
||||
issueName,
|
||||
}}
|
||||
render={({ handleSubmit, form, submitting, pristine, values }) => (
|
||||
<div className="column is-three-quarters">
|
||||
<div className="box search">
|
||||
<div className="columns">
|
||||
<Field name="issueName">
|
||||
{({ input, meta }) => {
|
||||
return (
|
||||
<div className="column is-two-thirds">
|
||||
<input
|
||||
{...input}
|
||||
className="input main-search-bar is-medium"
|
||||
placeholder="Type an issue/volume name"
|
||||
/>
|
||||
<span className="help is-clearfix is-light is-info">
|
||||
Use this to manually override the search.
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
|
||||
<div className="column">
|
||||
<button
|
||||
className={
|
||||
isAirDCPPSearchInProgress
|
||||
? "button is-loading is-warning"
|
||||
: "button"
|
||||
}
|
||||
onClick={() => getDCPPSearchResults(dcppQuery)}
|
||||
>
|
||||
<span className="icon is-small">
|
||||
<img src="/img/airdcpp_logo.svg" />
|
||||
</span>
|
||||
<span className="airdcpp-text">Search on AirDC++</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div className="column is-three-fifths">
|
||||
<article className="message is-info">
|
||||
@@ -131,131 +163,131 @@ export const AcquisitionPanel = (
|
||||
</article>
|
||||
</div>
|
||||
)}
|
||||
{/* AirDC++ search instance details */}
|
||||
{!isNil(searchInfo) && !isNil(searchInstance) && (
|
||||
<>
|
||||
<div className="column is-one-quarter is-size-7">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<dl>
|
||||
<dt>
|
||||
<div className="tags mb-1">
|
||||
{userSettings.directConnect.client.hubs.map(
|
||||
({ value }) => (
|
||||
<span className="tag is-warning" key={value}>
|
||||
{value}
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</dt>
|
||||
<dt>Query: {searchInfo.query.pattern}</dt>
|
||||
<dd>
|
||||
Extensions: {searchInfo.query.extensions.join(", ")}
|
||||
</dd>
|
||||
<dd>File type: {searchInfo.query.file_type}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column is-one-quarter is-size-7">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<div className="content">
|
||||
<dl>
|
||||
<dt>Search Instance: {searchInstance.id}</dt>
|
||||
<dt>Owned by {searchInstance.owner}</dt>
|
||||
<dd>Expires in: {searchInstance.expires_in}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* AirDC++ search instance details */}
|
||||
{!isNil(searchInfo) && !isNil(searchInstance) && (
|
||||
<div className="columns">
|
||||
<div className="column is-one-quarter is-size-7">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<dl>
|
||||
<dt>
|
||||
<div className="tags mb-1">
|
||||
{userSettings.directConnect.client.hubs.map(
|
||||
({ value }) => (
|
||||
<span className="tag is-warning" key={value}>
|
||||
{value}
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</dt>
|
||||
<dt>Query: {searchInfo.query.pattern}</dt>
|
||||
<dd>Extensions: {searchInfo.query.extensions.join(", ")}</dd>
|
||||
<dd>File type: {searchInfo.query.file_type}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="column is-one-quarter is-size-7">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<dl>
|
||||
<dt>Search Instance: {searchInstance.id}</dt>
|
||||
<dt>Owned by {searchInstance.owner}</dt>
|
||||
<dd>Expires in: {searchInstance.expires_in}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AirDC++ results */}
|
||||
<div className="columns">
|
||||
{!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Slots</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{map(airDCPPSearchResults, ({ result }, idx) => {
|
||||
return (
|
||||
<tr
|
||||
key={idx}
|
||||
className={!isNil(result.dupe) ? "dupe-search-result" : ""}
|
||||
>
|
||||
<td>
|
||||
<p className="mb-2">
|
||||
{result.type.id === "directory" ? (
|
||||
<i className="fas fa-folder"></i>
|
||||
) : null}{" "}
|
||||
{ellipsize(result.name, 70)}
|
||||
</p>
|
||||
<div className="column">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Slots</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{map(airDCPPSearchResults, ({ result }, idx) => {
|
||||
return (
|
||||
<tr
|
||||
key={idx}
|
||||
className={
|
||||
!isNil(result.dupe) ? "dupe-search-result" : ""
|
||||
}
|
||||
>
|
||||
<td>
|
||||
<p className="mb-2">
|
||||
{result.type.id === "directory" ? (
|
||||
<i className="fas fa-folder"></i>
|
||||
) : null}{" "}
|
||||
{ellipsize(result.name, 70)}
|
||||
</p>
|
||||
|
||||
<dl>
|
||||
<dd>
|
||||
<div className="tags">
|
||||
{!isNil(result.dupe) ? (
|
||||
<span className="tag is-warning">Dupe</span>
|
||||
) : null}
|
||||
<span className="tag is-light is-info">
|
||||
{result.users.user.nicks}
|
||||
</span>
|
||||
{result.users.user.flags.map((flag, idx) => (
|
||||
<span className="tag is-light" key={idx}>
|
||||
{flag}
|
||||
<dl>
|
||||
<dd>
|
||||
<div className="tags">
|
||||
{!isNil(result.dupe) ? (
|
||||
<span className="tag is-warning">Dupe</span>
|
||||
) : null}
|
||||
<span className="tag is-light is-info">
|
||||
{result.users.user.nicks}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-light is-info">
|
||||
{result.type.id === "directory"
|
||||
? "directory"
|
||||
: result.type.str}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-success">
|
||||
{result.slots.free} free
|
||||
{result.users.user.flags.map((flag, idx) => (
|
||||
<span className="tag is-light" key={idx}>
|
||||
{flag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-light is-info">
|
||||
{result.type.id === "directory"
|
||||
? "directory"
|
||||
: result.type.str}
|
||||
</span>
|
||||
<span className="tag is-light">
|
||||
{result.slots.total}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
onClick={() =>
|
||||
downloadDCPPResult(
|
||||
searchInstance.id,
|
||||
result.id,
|
||||
props.comicObjectid,
|
||||
)
|
||||
}
|
||||
>
|
||||
<i className="fas fa-file-download"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-success">
|
||||
{result.slots.free} free
|
||||
</span>
|
||||
<span className="tag is-light">
|
||||
{result.slots.total}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
onClick={() =>
|
||||
downloadDCPPResult(
|
||||
searchInstance.id,
|
||||
result.id,
|
||||
props.comicObjectid,
|
||||
)
|
||||
}
|
||||
>
|
||||
<i className="fas fa-file-download"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="column is-three-fifths">
|
||||
<article className="message is-info">
|
||||
|
||||
Reference in New Issue
Block a user