Dark mode refactor (#98)
* 🏗️ Acquisition Panel refactor WIP * 🔧 Formatted the search query box * 🔧 Implementing download method * 🏗️ Refactored the AirDC++ download panel * 🌜 Initial Dark Mode support * 🌜 Trying dark mode on the react-select * Update App.scss * 🏗️ Migrating Navbar to TailwindCSS * 🖼️ Added solar icons * 🔧 Added solar icons * 🔧 Added code for dark mode toggle * 🏗️ Wiring up the dark mode toggle * 🌜 Added Dark mode to the body * 🏗️ Building out the import page * 🪑 Cleaning up the table styles * 🏗️ Cleaned up past imports table * 🏗️ Refactored Import socket events * 🏗️ Refactored the card grid on dashboard * 🏗️ Building variants for Cards * 🏗️ Added a horizontal medium variant * 🏗️ Cleaning up forms and cards * 🔧 Styling form inputs * 🏗️ Form refactor * 🔠 Added a monospace font * 🪑 Refactoring the table * 🧹 Formatting in connection confirmation panels * 🏗️ Refactoring table for library * 🏗️ Added icons and details to metadata * 🏗️ Cleaned the table further * 🏗️ Fixed fonts, and comic detail page first draft * ❌ Removing yarn.lockfile
This commit was merged in pull request #98.
This commit is contained in:
GitHub
@@ -1,12 +1,12 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Navbar from "./shared/Navbar";
|
||||
import { Navbar2 } from "./shared/Navbar2";
|
||||
import "../assets/scss/App.scss";
|
||||
|
||||
export const App = (): ReactElement => {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<Navbar2 />
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
import React, { useCallback, ReactElement, useEffect, useState } from "react";
|
||||
import {
|
||||
downloadAirDCPPItem,
|
||||
getBundlesForComic,
|
||||
sleep,
|
||||
} from "../../actions/airdcpp.actions";
|
||||
import { getBundlesForComic, sleep } from "../../actions/airdcpp.actions";
|
||||
import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
|
||||
import { RootState, SearchInstance } from "threetwo-ui-typings";
|
||||
import ellipsize from "ellipsize";
|
||||
@@ -13,6 +9,7 @@ import { isEmpty, isNil, map } from "lodash";
|
||||
import { useStore } from "../../store";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
interface IAcquisitionPanelProps {
|
||||
query: any;
|
||||
@@ -28,14 +25,22 @@ export const AcquisitionPanel = (
|
||||
airDCPPSocketInstance,
|
||||
airDCPPClientConfiguration,
|
||||
airDCPPSessionInformation,
|
||||
airDCPPDownloadTick,
|
||||
} = useStore(
|
||||
useShallow((state) => ({
|
||||
airDCPPSocketInstance: state.airDCPPSocketInstance,
|
||||
airDCPPClientConfiguration: state.airDCPPClientConfiguration,
|
||||
airDCPPSessionInformation: state.airDCPPSessionInformation,
|
||||
airDCPPDownloadTick: state.airDCPPDownloadTick,
|
||||
})),
|
||||
);
|
||||
|
||||
interface SearchData {
|
||||
query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
|
||||
hub_urls: string[] | undefined | null;
|
||||
priority: PriorityEnum;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the hubs list from an AirDCPP Socket
|
||||
*/
|
||||
@@ -43,34 +48,15 @@ export const AcquisitionPanel = (
|
||||
queryKey: ["hubs"],
|
||||
queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
|
||||
});
|
||||
|
||||
const { comicObjectId } = props;
|
||||
const issueName = props.query.issue.name || "";
|
||||
// const { settings } = props;
|
||||
const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
|
||||
|
||||
// Selectors for picking state
|
||||
// const airDCPPSearchResults = useSelector((state: RootState) => {
|
||||
// return state.airdcpp.searchResults;
|
||||
// });
|
||||
// const isAirDCPPSearchInProgress = useSelector(
|
||||
// (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
|
||||
// );
|
||||
// const searchInfo = useSelector(
|
||||
// (state: RootState) => state.airdcpp.searchInfo,
|
||||
// );
|
||||
// const searchInstance: SearchInstance = useSelector(
|
||||
// (state: RootState) => state.airdcpp.searchInstance,
|
||||
// );
|
||||
|
||||
// const settings = useSelector((state: RootState) => state.settings.data);
|
||||
// const airDCPPConfiguration = useContext(AirDCPPSocketContext);
|
||||
interface SearchData {
|
||||
query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
|
||||
hub_urls: string[] | undefined | null;
|
||||
priority: PriorityEnum;
|
||||
}
|
||||
const [dcppQuery, setDcppQuery] = useState({});
|
||||
const [airDCPPSearchResults, setAirDCPPSearchResults] = useState([]);
|
||||
const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
|
||||
const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState({});
|
||||
const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState({});
|
||||
|
||||
// Construct a AirDC++ query based on metadata inferred, upon component mount
|
||||
// Pre-populate the search input with the search string, so that
|
||||
@@ -88,15 +74,18 @@ export const AcquisitionPanel = (
|
||||
setDcppQuery(dcppSearchQuery);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Method to perform a search via an AirDC++ websocket
|
||||
* @param {SearchData} data - a SearchData query
|
||||
* @param {any} ADCPPSocket - an intialized AirDC++ socket instance
|
||||
*/
|
||||
const search = async (data: SearchData, ADCPPSocket: any) => {
|
||||
try {
|
||||
if (!ADCPPSocket.isConnected()) {
|
||||
await ADCPPSocket();
|
||||
}
|
||||
const instance: SearchInstance = await ADCPPSocket.post("search");
|
||||
// dispatch({
|
||||
// type: AIRDCPP_SEARCH_IN_PROGRESS,
|
||||
// });
|
||||
setAirDCPPSearchStatus(true);
|
||||
|
||||
// We want to get notified about every new result in order to make the user experience better
|
||||
await ADCPPSocket.addListener(
|
||||
@@ -142,6 +131,9 @@ export const AcquisitionPanel = (
|
||||
const currentInstance = await ADCPPSocket.get(
|
||||
`search/${instance.id}`,
|
||||
);
|
||||
setAirDCPPSearchInstance(currentInstance);
|
||||
setAirDCPPSearchInfo(searchInfo);
|
||||
console.log("Asdas", airDCPPSearchInfo);
|
||||
if (currentInstance.result_count === 0) {
|
||||
// ...nothing was received, show an informative message to the user
|
||||
console.log("No more search results.");
|
||||
@@ -149,11 +141,8 @@ export const AcquisitionPanel = (
|
||||
|
||||
// The search can now be considered to be "complete"
|
||||
// If there's an "in progress" indicator in the UI, that could also be disabled here
|
||||
// dispatch({
|
||||
// type: AIRDCPP_HUB_SEARCHES_SENT,
|
||||
// searchInfo,
|
||||
// instance,
|
||||
// });
|
||||
setAirDCPPSearchInstance(instance);
|
||||
setAirDCPPSearchStatus(false);
|
||||
},
|
||||
instance.id,
|
||||
);
|
||||
@@ -164,6 +153,68 @@ export const AcquisitionPanel = (
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Method to download a bundle associated with a search result from AirDC++
|
||||
* @param {Number} searchInstanceId - description
|
||||
* @param {String} resultId - description
|
||||
* @param {String} comicObjectId - description
|
||||
* @param {String} name - description
|
||||
* @param {Number} size - description
|
||||
* @param {any} type - description
|
||||
* @param {any} ADCPPSocket - description
|
||||
* @returns {void} - description
|
||||
*/
|
||||
const download = async (
|
||||
searchInstanceId: Number,
|
||||
resultId: String,
|
||||
comicObjectId: String,
|
||||
name: String,
|
||||
size: Number,
|
||||
type: any,
|
||||
ADCPPSocket: any,
|
||||
): void => {
|
||||
try {
|
||||
if (!ADCPPSocket.isConnected()) {
|
||||
await ADCPPSocket.connect();
|
||||
}
|
||||
let bundleDBImportResult = {};
|
||||
const downloadResult = await ADCPPSocket.post(
|
||||
`search/${searchInstanceId}/results/${resultId}/download`,
|
||||
);
|
||||
|
||||
if (!isNil(downloadResult)) {
|
||||
bundleDBImportResult = await axios({
|
||||
method: "POST",
|
||||
url: `http://localhost:3000/api/library/applyAirDCPPDownloadMetadata`,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
data: {
|
||||
bundleId: downloadResult.bundle_info.id,
|
||||
comicObjectId,
|
||||
name,
|
||||
size,
|
||||
type,
|
||||
},
|
||||
});
|
||||
|
||||
// dispatch({
|
||||
// type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
|
||||
// downloadResult,
|
||||
// bundleDBImportResult,
|
||||
// });
|
||||
//
|
||||
// dispatch({
|
||||
// type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
|
||||
// comicBookDetail: bundleDBImportResult.data,
|
||||
// IMS_inProgress: false,
|
||||
// });
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const getDCPPSearchResults = async (searchQuery) => {
|
||||
const manualQuery = {
|
||||
query: {
|
||||
@@ -209,7 +260,6 @@ export const AcquisitionPanel = (
|
||||
},
|
||||
[],
|
||||
);
|
||||
console.log("yaman", airDCPPSearchResults);
|
||||
return (
|
||||
<>
|
||||
<div className="comic-detail columns">
|
||||
@@ -245,7 +295,7 @@ export const AcquisitionPanel = (
|
||||
<button
|
||||
type="submit"
|
||||
className={
|
||||
false
|
||||
airDCPPSearchStatus
|
||||
? "button is-loading is-warning"
|
||||
: "button is-success is-light"
|
||||
}
|
||||
@@ -273,6 +323,60 @@ export const AcquisitionPanel = (
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* AirDC++ search instance details */}
|
||||
{!isNil(airDCPPSearchInstance) &&
|
||||
!isEmpty(airDCPPSearchInfo) &&
|
||||
!isNil(hubs) && (
|
||||
<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">
|
||||
{hubs.map((value, idx) => (
|
||||
<span className="tag is-warning" key={idx}>
|
||||
{value.identity.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</dt>
|
||||
<dt>
|
||||
Query:
|
||||
<span className="has-text-weight-semibold">
|
||||
{airDCPPSearchInfo.query.pattern}
|
||||
</span>
|
||||
</dt>
|
||||
<dd>
|
||||
Extensions:
|
||||
<span className="has-text-weight-semibold">
|
||||
{airDCPPSearchInfo.query.extensions.join(", ")}
|
||||
</span>
|
||||
</dd>
|
||||
<dd>
|
||||
File type:
|
||||
<span className="has-text-weight-semibold">
|
||||
{airDCPPSearchInfo.query.file_type}
|
||||
</span>
|
||||
</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: {airDCPPSearchInstance.id}</dt>
|
||||
<dt>Owned by {airDCPPSearchInstance.owner}</dt>
|
||||
<dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AirDC++ results */}
|
||||
<div className="columns">
|
||||
{!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
|
||||
@@ -342,12 +446,14 @@ export const AcquisitionPanel = (
|
||||
<button
|
||||
className="button is-small is-light is-success"
|
||||
onClick={() =>
|
||||
downloadDCPPResult(
|
||||
searchInstance.id,
|
||||
download(
|
||||
airDCPPSearchInstance.id,
|
||||
result.id,
|
||||
comicObjectId,
|
||||
result.name,
|
||||
result.size,
|
||||
result.type,
|
||||
airDCPPSocketInstance,
|
||||
)
|
||||
}
|
||||
>
|
||||
|
||||
@@ -69,17 +69,29 @@ export const Menu = (props): ReactElement => {
|
||||
break;
|
||||
}
|
||||
};
|
||||
const customStyles = {
|
||||
option: (base, { data, isDisabled, isFocused, isSelected }) => {
|
||||
return {
|
||||
...base,
|
||||
backgroundColor: isFocused ? "gray" : "black",
|
||||
};
|
||||
},
|
||||
control: (base) => ({
|
||||
...base,
|
||||
backgroundColor: "black",
|
||||
border: "1px solid #CCC",
|
||||
}),
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
className="basic-single"
|
||||
classNamePrefix="select"
|
||||
components={{ Placeholder }}
|
||||
placeholder={
|
||||
<span>
|
||||
<i className="fa-solid fa-list"></i> Actions
|
||||
</span>
|
||||
}
|
||||
styles={customStyles}
|
||||
name="actions"
|
||||
isSearchable={false}
|
||||
options={filteredActionOptions}
|
||||
|
||||
@@ -47,6 +47,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
|
||||
inferredMetadata,
|
||||
sourcedMetadata: { comicvine, locg, comicInfo },
|
||||
acquisition,
|
||||
createdAt,
|
||||
updatedAt,
|
||||
},
|
||||
userSettings,
|
||||
} = data;
|
||||
@@ -246,67 +248,58 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
|
||||
// 2. from the CV-scraped version
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<section className="container mx-auto">
|
||||
<div className="section">
|
||||
{!isNil(data) && !isEmpty(data) && (
|
||||
<>
|
||||
<h1 className="title">{issueName}</h1>
|
||||
<div className="columns is-multiline">
|
||||
<div className="column is-narrow">
|
||||
<div>
|
||||
<div className="flex flex-row mt-5">
|
||||
<Card
|
||||
imageUrl={url}
|
||||
orientation={"vertical"}
|
||||
orientation={"cover-only"}
|
||||
hasDetails={false}
|
||||
cardContainerStyle={{ maxWidth: 275 }}
|
||||
/>
|
||||
{/* action dropdown */}
|
||||
<div className="mt-4 is-size-7">
|
||||
<Menu
|
||||
data={data.data}
|
||||
handlers={{ setSlidingPanelContentId, setVisible }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* raw file details */}
|
||||
<div className="column">
|
||||
|
||||
{/* raw file details */}
|
||||
{!isUndefined(rawFileDetails) &&
|
||||
!isEmpty(rawFileDetails.cover) && (
|
||||
<>
|
||||
<div className="grid">
|
||||
<RawFileDetails
|
||||
data={{
|
||||
rawFileDetails: rawFileDetails,
|
||||
inferredMetadata: inferredMetadata,
|
||||
created_at: createdAt,
|
||||
updated_at: updatedAt,
|
||||
}}
|
||||
/>
|
||||
{/* Read comic button */}
|
||||
<button
|
||||
className="button is-success is-light"
|
||||
onClick={() => openModal(rawFileDetails.filePath)}
|
||||
>
|
||||
<i className="fa-solid fa-book-open mr-2"></i>
|
||||
Read
|
||||
</button>
|
||||
|
||||
{/* <Modal
|
||||
style={{ content: { marginTop: "2rem" } }}
|
||||
isOpen={modalIsOpen}
|
||||
onAfterOpen={afterOpenModal}
|
||||
onRequestClose={closeModal}
|
||||
contentLabel="Example Modal"
|
||||
>
|
||||
<button onClick={closeModal}>close</button>
|
||||
{extractedComicBook && (
|
||||
<ComicViewer
|
||||
pages={extractedComicBook}
|
||||
direction="ltr"
|
||||
className={{
|
||||
closeButton: "border: 1px solid red;",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Modal> */}
|
||||
</>
|
||||
style={{ content: { marginTop: "2rem" } }}
|
||||
isOpen={modalIsOpen}
|
||||
onAfterOpen={afterOpenModal}
|
||||
onRequestClose={closeModal}
|
||||
contentLabel="Example Modal"
|
||||
>
|
||||
<button onClick={closeModal}>close</button>
|
||||
{extractedComicBook && (
|
||||
<ComicViewer
|
||||
pages={extractedComicBook}
|
||||
direction="ltr"
|
||||
className={{
|
||||
closeButton: "border: 1px solid red;",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Modal> */}
|
||||
</div>
|
||||
)}
|
||||
{/* action dropdown */}
|
||||
{/* <div className="mt-4 is-size-7">
|
||||
<Menu
|
||||
data={data.data}
|
||||
handlers={{ setSlidingPanelContentId, setVisible }}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,10 +3,10 @@ import React, { ReactElement } from "react";
|
||||
|
||||
export const DownloadProgressTick = (props): ReactElement => {
|
||||
return (
|
||||
<div >
|
||||
<h4 className="is-size-6">{props.data.name}</h4>
|
||||
<div>
|
||||
<h4 className="is-size-5">{props.data.name}</h4>
|
||||
<div>
|
||||
<span className="is-size-3 has-text-weight-semibold">
|
||||
<span className="is-size-4 has-text-weight-semibold">
|
||||
{prettyBytes(props.data.downloaded_bytes)} of{" "}
|
||||
{prettyBytes(props.data.size)}{" "}
|
||||
</span>
|
||||
@@ -20,13 +20,12 @@ export const DownloadProgressTick = (props): ReactElement => {
|
||||
%
|
||||
</progress>
|
||||
</div>
|
||||
<div className="is-size-5">
|
||||
{prettyBytes(props.data.speed)} per second.
|
||||
</div>
|
||||
<div className="is-size-5">
|
||||
<div className="is-size-6 mt-1 mb-2">
|
||||
<p>{prettyBytes(props.data.speed)} per second.</p>
|
||||
Time left:
|
||||
{Math.round(parseInt(props.data.seconds_left) / 60)}
|
||||
</div>
|
||||
|
||||
<div>{props.data.target}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,78 +2,137 @@ import React, { ReactElement } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import { isEmpty } from "lodash";
|
||||
import { format, parseISO } from "date-fns";
|
||||
|
||||
export const RawFileDetails = (props): ReactElement => {
|
||||
const { rawFileDetails, inferredMetadata } = props.data;
|
||||
const { rawFileDetails, inferredMetadata, created_at, updated_at } =
|
||||
props.data;
|
||||
const PaperClipIcon = () => <></>;
|
||||
return (
|
||||
<>
|
||||
<div className="comic-detail raw-file-details column is-three-fifths">
|
||||
<dl>
|
||||
<dt>Raw File Details</dt>
|
||||
<dd className="is-size-7">
|
||||
{rawFileDetails.containedIn +
|
||||
"/" +
|
||||
rawFileDetails.name +
|
||||
rawFileDetails.extension}
|
||||
</dd>
|
||||
<dd>
|
||||
<div className="field is-grouped mt-2">
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag">Size</span>
|
||||
<span className="tag is-info is-light">
|
||||
{prettyBytes(rawFileDetails.fileSize)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag">Extension</span>
|
||||
<div className="max-w-2xl ml-5">
|
||||
<div className="px-4 sm:px-6">
|
||||
<p className="text-gray-500">
|
||||
<span className="text-xl">{rawFileDetails.name}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<dl className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
|
||||
<div className="sm:col-span-1">
|
||||
<dt className="text-sm font-medium text-gray-500">
|
||||
Raw File Details
|
||||
</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">
|
||||
{rawFileDetails.containedIn +
|
||||
"/" +
|
||||
rawFileDetails.name +
|
||||
rawFileDetails.extension}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="sm:col-span-1">
|
||||
<dt className="text-sm font-medium text-gray-500">
|
||||
Inferred Issue Metadata
|
||||
</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">
|
||||
Series Name: {inferredMetadata.issue.name}
|
||||
{!isEmpty(inferredMetadata.issue.number) ? (
|
||||
<span className="tag is-primary is-light">
|
||||
{rawFileDetails.extension}
|
||||
{inferredMetadata.issue.number}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag">MIME type</span>
|
||||
<span className="tag is-primary is-light">
|
||||
) : null}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="sm:col-span-1">
|
||||
<dt className="text-sm font-medium text-gray-500">MIMEType</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">
|
||||
{/* File extension */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
|
||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||
{rawFileDetails.mimeType}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</dd>
|
||||
<dd className="text-sm text-gray-900"></dd>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="content comic-detail raw-file-details mt-3 column is-three-fifths">
|
||||
<dl>
|
||||
{/* inferred metadata */}
|
||||
<dt>Inferred Issue Metadata</dt>
|
||||
<dd>
|
||||
<div className="field is-grouped mt-2">
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag">Name</span>
|
||||
<span className="tag is-info is-light">
|
||||
{inferredMetadata.issue.name}
|
||||
<div className="sm:col-span-1">
|
||||
<dt className="text-sm font-medium text-gray-500">File Size</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">
|
||||
{/* size */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{!isEmpty(inferredMetadata.issue.number) ? (
|
||||
<div className="control">
|
||||
<div className="tags has-addons">
|
||||
<span className="tag">Number</span>
|
||||
<span className="tag is-primary is-light">
|
||||
{inferredMetadata.issue.number}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||
{prettyBytes(rawFileDetails.fileSize)}
|
||||
</span>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
<div className="sm:col-span-2">
|
||||
<dt className="text-sm font-medium text-gray-500">
|
||||
Import Details
|
||||
</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">
|
||||
{format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
|
||||
{format(parseISO(created_at), "h aaaa")}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<dt className="text-sm font-medium text-gray-500">Attachments</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">
|
||||
<ul
|
||||
role="list"
|
||||
className="divide-y divide-gray-200 rounded-md border border-gray-200"
|
||||
>
|
||||
<li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
|
||||
<div className="flex w-0 flex-1 items-center">
|
||||
<PaperClipIcon
|
||||
className="h-5 w-5 flex-shrink-0 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="ml-2 w-0 flex-1 truncate">
|
||||
resume_back_end_developer.pdf
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-4 flex-shrink-0">
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium text-indigo-600 hover:text-indigo-500"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
|
||||
<div className="flex w-0 flex-1 items-center">
|
||||
{/* Read comic button */}
|
||||
<button
|
||||
className="button is-success is-light"
|
||||
onClick={() => {}}
|
||||
>
|
||||
<i className="fa-solid fa-book-open mr-2"></i>
|
||||
Read
|
||||
</button>
|
||||
</div>
|
||||
<div className="ml-4 flex-shrink-0">
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium text-indigo-600 hover:text-indigo-500"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -102,5 +161,7 @@ RawFileDetails.propTypes = {
|
||||
subtitle: PropTypes.string,
|
||||
}),
|
||||
}),
|
||||
created_at: PropTypes.string,
|
||||
updated_at: PropTypes.string,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@@ -11,19 +11,20 @@ export const TabControls = (props): ReactElement => {
|
||||
setActive(filteredTabs[0].id);
|
||||
}, [acquisition]);
|
||||
|
||||
console.log(filteredTabs);
|
||||
return (
|
||||
<>
|
||||
<div className="tabs">
|
||||
<ul>
|
||||
{filteredTabs.map(({ id, name, icon }) => (
|
||||
<li
|
||||
key={id}
|
||||
className={id === active ? "is-active" : ""}
|
||||
onClick={() => setActive(id)}
|
||||
>
|
||||
{/* Downloads tab and count badge */}
|
||||
<a>
|
||||
<div className="hidden sm:block mt-7">
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="-mb-px flex gap-6" aria-label="Tabs">
|
||||
{filteredTabs.map(({ id, name, icon }) => (
|
||||
<a
|
||||
key={id}
|
||||
className="inline-flex shrink-0 items-center gap-2 border-b-2 border-transparent px-1 pb-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
||||
aria-current="page"
|
||||
onClick={() => setActive(id)}
|
||||
>
|
||||
{/* Downloads tab and count badge */}
|
||||
{/* <a>
|
||||
{id === 6 && !isNil(acquisition.directconnect) ? (
|
||||
<span className="download-icon-labels">
|
||||
<i className="fa-solid fa-download"></i>
|
||||
@@ -35,10 +36,12 @@ export const TabControls = (props): ReactElement => {
|
||||
<span className="icon is-small">{icon}</span>
|
||||
)}
|
||||
{name}
|
||||
</a> */}
|
||||
{name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{filteredTabs.map(({ id, content }) => {
|
||||
return active === id ? content : null;
|
||||
|
||||
@@ -11,10 +11,40 @@ import {
|
||||
getComicBooks,
|
||||
} from "../../actions/fileops.actions";
|
||||
import { getLibraryStatistics } from "../../actions/comicinfo.actions";
|
||||
import { isEmpty, isNil } from "lodash";
|
||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||
import Header from "../shared/Header";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { Card } from "../shared/Carda";
|
||||
import {
|
||||
LIBRARY_SERVICE_BASE_URI,
|
||||
LIBRARY_SERVICE_HOST,
|
||||
} from "../../constants/endpoints";
|
||||
import {
|
||||
determineCoverFile,
|
||||
determineExternalMetadata,
|
||||
} from "../../shared/utils/metadata.utils";
|
||||
|
||||
export const Dashboard = (): ReactElement => {
|
||||
const { data: recentComics } = useQuery({
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
|
||||
method: "POST",
|
||||
data: {
|
||||
paginationOptions: {
|
||||
page: 0,
|
||||
limit: 5,
|
||||
sort: { updatedAt: "-1" },
|
||||
},
|
||||
predicate: { "acquisition.source.wanted": false },
|
||||
comicStatus: "recent",
|
||||
},
|
||||
}),
|
||||
queryKey: ["recentComics"],
|
||||
});
|
||||
|
||||
console.log("hari om", recentComics);
|
||||
// useEffect(() => {
|
||||
// dispatch(fetchVolumeGroups());
|
||||
// dispatch(
|
||||
@@ -56,9 +86,102 @@ export const Dashboard = (): ReactElement => {
|
||||
// (state: RootState) => state.comicInfo.libraryStatistics,
|
||||
// );
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="section">
|
||||
<h1 className="title">Dashboard</h1>
|
||||
<div className="container mx-auto max-w-full">
|
||||
<section>
|
||||
<h1>Dashboard</h1>
|
||||
<div className="grid grid-cols-5 gap-6">
|
||||
{recentComics?.data.docs.map(
|
||||
(
|
||||
{
|
||||
_id,
|
||||
rawFileDetails,
|
||||
sourcedMetadata: { comicvine, comicInfo, locg },
|
||||
inferredMetadata,
|
||||
acquisition: {
|
||||
source: { name },
|
||||
},
|
||||
},
|
||||
idx,
|
||||
) => {
|
||||
const { issueName, url } = determineCoverFile({
|
||||
rawFileDetails,
|
||||
comicvine,
|
||||
comicInfo,
|
||||
locg,
|
||||
});
|
||||
const { issue, coverURL, icon } = determineExternalMetadata(
|
||||
name,
|
||||
{
|
||||
comicvine,
|
||||
comicInfo,
|
||||
locg,
|
||||
},
|
||||
);
|
||||
const isComicVineMetadataAvailable =
|
||||
!isUndefined(comicvine) &&
|
||||
!isUndefined(comicvine.volumeInformation);
|
||||
|
||||
return (
|
||||
<Card
|
||||
orientation="vertical-2"
|
||||
key={idx}
|
||||
imageUrl={`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`}
|
||||
title={inferredMetadata.issue.name}
|
||||
hasDetails
|
||||
>
|
||||
<div>
|
||||
<dt className="sr-only">Address</dt>
|
||||
<dd className="text-sm my-1 flex flex-row gap-1">
|
||||
{/* Issue number */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--hashtag-outline]"></i>
|
||||
</span>
|
||||
<span className="text-md text-slate-900">
|
||||
{inferredMetadata.issue.number}
|
||||
</span>
|
||||
</span>
|
||||
{/* File extension */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--file-bold-duotone] w-4 h-4"></i>
|
||||
</span>
|
||||
|
||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||
{rawFileDetails.extension}
|
||||
</span>
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row items-center gap-1 my-2">
|
||||
<div className="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
|
||||
{/* ComicInfo.xml presence */}
|
||||
{!isNil(comicInfo) && !isEmpty(comicInfo) && (
|
||||
<i className="h-7 w-7 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300"></i>
|
||||
)}
|
||||
{/* ComicVine metadata presence */}
|
||||
{isComicVineMetadataAvailable && (
|
||||
<span className="w-7 h-7">
|
||||
<img
|
||||
src="/src/client/assets/img/cvlogo.svg"
|
||||
alt={"ComicVine metadata detected."}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Raw file presence */}
|
||||
{isNil(rawFileDetails) && (
|
||||
<span className="h-6 w-5 sm:shrink-0 sm:items-center sm:gap-2">
|
||||
<i className="icon-[solar--file-corrupted-outline] h-5 w-5" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
import React, {
|
||||
ReactElement,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import React, { ReactElement, useEffect, useState } from "react";
|
||||
import { getTransfers } from "../../actions/airdcpp.actions";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
|
||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||
import { determineCoverFile } from "../../shared/utils/metadata.utils";
|
||||
import MetadataPanel from "../shared/MetadataPanel";
|
||||
@@ -17,18 +9,18 @@ interface IDownloadsProps {
|
||||
}
|
||||
|
||||
export const Downloads = (props: IDownloadsProps): ReactElement => {
|
||||
const airDCPPConfiguration = useContext(AirDCPPSocketContext);
|
||||
// const airDCPPConfiguration = useContext(AirDCPPSocketContext);
|
||||
const {
|
||||
airDCPPState: { settings, socket },
|
||||
} = airDCPPConfiguration;
|
||||
const dispatch = useDispatch();
|
||||
// const dispatch = useDispatch();
|
||||
|
||||
const airDCPPTransfers = useSelector(
|
||||
(state: RootState) => state.airdcpp.transfers,
|
||||
);
|
||||
const issueBundles = useSelector(
|
||||
(state: RootState) => state.airdcpp.issue_bundles,
|
||||
);
|
||||
// const airDCPPTransfers = useSelector(
|
||||
// (state: RootState) => state.airdcpp.transfers,
|
||||
// );
|
||||
// const issueBundles = useSelector(
|
||||
// (state: RootState) => state.airdcpp.issue_bundles,
|
||||
// );
|
||||
const [bundles, setBundles] = useState([]);
|
||||
// Make the call to get all transfers from AirDC++
|
||||
useEffect(() => {
|
||||
|
||||
@@ -53,25 +53,6 @@ export const Import = (props: IProps): ReactElement => {
|
||||
}),
|
||||
});
|
||||
|
||||
// 1a. Act on each comic issue successfully imported/failed, as indicated
|
||||
// by the LS_COVER_EXTRACTED/LS_COVER_EXTRACTION_FAILED events
|
||||
socketIOInstance.on("LS_COVER_EXTRACTED", (data) => {
|
||||
const { completedJobCount, importResult } = data;
|
||||
importJobQueue.setJobCount("successful", completedJobCount);
|
||||
importJobQueue.setMostRecentImport(importResult.rawFileDetails.name);
|
||||
});
|
||||
socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
|
||||
const { failedJobCount } = data;
|
||||
importJobQueue.setJobCount("failed", failedJobCount);
|
||||
});
|
||||
|
||||
// 1b. Clear the localStorage sessionId upon receiving the
|
||||
// LS_IMPORT_QUEUE_DRAINED event
|
||||
socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {
|
||||
localStorage.removeItem("sessionId");
|
||||
importJobQueue.setStatus("drained");
|
||||
queryClient.invalidateQueries({ queryKey: ["allImportJobResults"] });
|
||||
});
|
||||
const toggleQueue = (queueAction: string, queueStatus: string) => {
|
||||
socketIOInstance.emit(
|
||||
"call",
|
||||
@@ -94,29 +75,35 @@ export const Import = (props: IProps): ReactElement => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return (
|
||||
<div className="control">
|
||||
<div>
|
||||
<button
|
||||
className="button is-warning is-light"
|
||||
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
onClick={() => {
|
||||
toggleQueue("pause", "paused");
|
||||
importJobQueue.setStatus("paused");
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-pause mr-2"></i> Pause
|
||||
<span className="text-md">Pause</span>
|
||||
<span className="w-5 h-5">
|
||||
<i className="h-5 w-5 icon-[solar--pause-bold]"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
case "paused":
|
||||
return (
|
||||
<div className="control">
|
||||
<div>
|
||||
<button
|
||||
className="button is-success is-light"
|
||||
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
onClick={() => {
|
||||
toggleQueue("resume", "running");
|
||||
importJobQueue.setStatus("running");
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-play mr-2"></i> Resume
|
||||
<span className="text-md">Resume</span>
|
||||
<span className="w-5 h-5">
|
||||
<i className="h-5 w-5 icon-[solar--play-bold]"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
@@ -129,145 +116,180 @@ export const Import = (props: IProps): ReactElement => {
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="section is-small">
|
||||
<h1 className="title">Import Comics</h1>
|
||||
<article className="message is-dark">
|
||||
<div className="message-body">
|
||||
<p className="mb-2">
|
||||
<span className="tag is-medium is-info is-light">
|
||||
Import Comics
|
||||
</span>
|
||||
will add comics identified from the mapped folder into ThreeTwo's
|
||||
database.
|
||||
</p>
|
||||
<p>
|
||||
Metadata from ComicInfo.xml, if present, will also be extracted.
|
||||
</p>
|
||||
<p>
|
||||
This process could take a while, if you have a lot of comics, or
|
||||
are importing over a network connection.
|
||||
</p>
|
||||
<div>
|
||||
<section>
|
||||
<header className="bg-slate-200 dark:bg-slate-500">
|
||||
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
|
||||
<div className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
|
||||
Import
|
||||
</h1>
|
||||
|
||||
<p className="mt-1.5 text-sm text-gray-500 dark:text-white">
|
||||
Import comics into the ThreeTwo library.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<p className="buttons">
|
||||
<button
|
||||
className={
|
||||
importJobQueue.status === "drained" ||
|
||||
importJobQueue.status === undefined
|
||||
? "button is-medium"
|
||||
: "button is-loading is-medium"
|
||||
}
|
||||
onClick={() => {
|
||||
initiateImport();
|
||||
importJobQueue.setStatus("running");
|
||||
}}
|
||||
</header>
|
||||
|
||||
<div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
|
||||
<article
|
||||
role="alert"
|
||||
className="rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
|
||||
>
|
||||
<span className="icon">
|
||||
<i className="fas fa-file-import"></i>
|
||||
</span>
|
||||
<span>Start Import</span>
|
||||
</button>
|
||||
</p>
|
||||
<div>
|
||||
<p>
|
||||
Importing will add comics identified from the mapped folder into
|
||||
ThreeTwo's database.
|
||||
</p>
|
||||
<p>
|
||||
Metadata from ComicInfo.xml, if present, will also be extracted.
|
||||
</p>
|
||||
<p>
|
||||
This process could take a while, if you have a lot of comics, or
|
||||
are importing over a network connection.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{importJobQueue.status !== "drained" &&
|
||||
!isUndefined(importJobQueue.status) && (
|
||||
<div className="my-4">
|
||||
{importJobQueue.status === "drained" ||
|
||||
(importJobQueue.status === undefined && (
|
||||
<button
|
||||
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
onClick={() => {
|
||||
initiateImport();
|
||||
importJobQueue.setStatus("running");
|
||||
}}
|
||||
>
|
||||
<span className="text-md">Start Import</span>
|
||||
<span className="w-6 h-6">
|
||||
<i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Activity */}
|
||||
{(importJobQueue.status === "running" ||
|
||||
importJobQueue.status === "paused") && (
|
||||
<>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Completed Jobs</th>
|
||||
<th>Failed Jobs</th>
|
||||
<th>Queue Controls</th>
|
||||
<th>Queue Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
{importJobQueue.successfulJobCount > 0 && (
|
||||
<div className="box has-background-success-light has-text-centered">
|
||||
<span className="is-size-2 has-text-weight-bold">
|
||||
{importJobQueue.successfulJobCount}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</th>
|
||||
<td>
|
||||
{importJobQueue.failedJobCount > 0 && (
|
||||
<div className="box has-background-danger has-text-centered">
|
||||
<span className="is-size-2 has-text-weight-bold">
|
||||
{importJobQueue.failedJobCount}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td>{renderQueueControls(importJobQueue.status)}</td>
|
||||
<td>
|
||||
{importJobQueue.status !== undefined ? (
|
||||
<span className="tag is-warning">
|
||||
{importJobQueue.status}
|
||||
</span>
|
||||
) : null}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
Imported{" "}
|
||||
<span className="has-text-weight-bold">
|
||||
{importJobQueue.mostRecentImport}
|
||||
<span className="flex items-center my-5 max-w-screen-lg">
|
||||
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
|
||||
Import Activity
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
||||
</span>
|
||||
<div className="mt-5 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center">
|
||||
<dl className="grid grid-cols-2 gap-4 sm:grid-cols-2">
|
||||
{/* Successful import counts */}
|
||||
<div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
|
||||
<dd className="text-3xl text-green-600 md:text-5xl">
|
||||
{importJobQueue.successfulJobCount}
|
||||
</dd>
|
||||
<dt className="text-lg font-medium text-gray-500">
|
||||
imported
|
||||
</dt>
|
||||
</div>
|
||||
{/* Failed job counts */}
|
||||
<div className="flex flex-col rounded-lg bg-red-100 dark:bg-red-200 px-4 py-6 text-center">
|
||||
<dd className="text-3xl text-red-600 md:text-5xl">
|
||||
{importJobQueue.failedJobCount}
|
||||
</dd>
|
||||
<dt className="text-lg font-medium text-gray-500">
|
||||
failed
|
||||
</dt>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col dark:text-slate-200 text-slate-400">
|
||||
<dd>{renderQueueControls(importJobQueue.status)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<span className="mt-2 dark:text-slate-200 text-slate-400">
|
||||
Imported: <span>{importJobQueue.mostRecentImport}</span>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Past imports */}
|
||||
{!isLoading && !isEmpty(data?.data) && (
|
||||
<>
|
||||
<h3 className="subtitle is-4 mt-5">Past Imports</h3>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time Started</th>
|
||||
<th>Session Id</th>
|
||||
<th>Imported</th>
|
||||
<th>Failed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{/* Past imports */}
|
||||
{!isLoading && !isEmpty(data?.data) && (
|
||||
<div className="max-w-screen-lg">
|
||||
<span className="flex items-center mt-6">
|
||||
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
|
||||
Past Imports
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
||||
</span>
|
||||
|
||||
<tbody>
|
||||
{data?.data.map((jobResult, id) => {
|
||||
return (
|
||||
<tr key={id}>
|
||||
<td>
|
||||
{format(
|
||||
new Date(jobResult.earliestTimestamp),
|
||||
"EEEE, hh:mma, do LLLL Y",
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-warning">
|
||||
{jobResult.sessionId}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-success">
|
||||
{jobResult.completedJobs}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="tag is-danger">
|
||||
{jobResult.failedJobs}
|
||||
</span>
|
||||
</td>
|
||||
<div className="overflow-x-auto mt-4 rounded-lg border border-gray-200">
|
||||
<table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
|
||||
<thead className="ltr:text-left rtl:text-right">
|
||||
<tr>
|
||||
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
|
||||
Time Started
|
||||
</th>
|
||||
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
|
||||
Session Id
|
||||
</th>
|
||||
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
|
||||
Imported
|
||||
</th>
|
||||
<th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
|
||||
Failed
|
||||
</th>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</thead>
|
||||
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{data?.data.map((jobResult, id) => {
|
||||
return (
|
||||
<tr key={id}>
|
||||
<td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
|
||||
{format(
|
||||
new Date(jobResult.earliestTimestamp),
|
||||
"EEEE, hh:mma, do LLLL Y",
|
||||
)}
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
|
||||
<span className="tag is-warning">
|
||||
{jobResult.sessionId}
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-300">
|
||||
<span className="inline-flex items-center justify-center rounded-full bg-emerald-100 px-2 py-0.5 text-emerald-700">
|
||||
<span className="h-5 w-6">
|
||||
<i className="icon-[solar--check-circle-line-duotone] h-5 w-5"></i>
|
||||
</span>
|
||||
<p className="whitespace-nowrap text-sm">
|
||||
{jobResult.completedJobs}
|
||||
</p>
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-4 py-2 text-gray-700 dark:text-slate-300">
|
||||
<span className="inline-flex items-center justify-center rounded-full bg-red-100 px-2 py-0.5 text-red-700">
|
||||
<span className="h-5 w-6">
|
||||
<i className="icon-[solar--close-circle-line-duotone] h-5 w-5"></i>
|
||||
</span>
|
||||
|
||||
<p className="whitespace-nowrap text-sm">
|
||||
{jobResult.failedJobs}
|
||||
</p>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,6 +7,7 @@ import T2Table from "../shared/T2Table";
|
||||
import ellipsize from "ellipsize";
|
||||
import { useQuery, keepPreviousData } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { format, fromUnixTime, parseISO } from "date-fns";
|
||||
|
||||
/**
|
||||
* Component that tabulates the contents of the user's ThreeTwo Library.
|
||||
@@ -53,45 +54,42 @@ export const Library = (): ReactElement => {
|
||||
|
||||
const ComicInfoXML = (value) => {
|
||||
return value.data ? (
|
||||
<div className="comicvine-metadata mt-3">
|
||||
<dl>
|
||||
<span className="tags has-addons is-size-7">
|
||||
<span className="tag">Series</span>
|
||||
<span className="tag is-warning is-light">
|
||||
{ellipsize(value.data.series[0], 25)}
|
||||
<dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
|
||||
{/* Series Name */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
{ellipsize(value.data.series[0], 45)}
|
||||
</span>
|
||||
</span>
|
||||
<div className="flex flex-row mt-2 gap-2">
|
||||
{/* Pages */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--notebook-minimalistic-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
Pages: {value.data.pagecount[0]}
|
||||
</span>
|
||||
</span>
|
||||
</dl>
|
||||
<dl>
|
||||
<div className="field is-grouped is-grouped-multiline">
|
||||
<div className="control">
|
||||
<span className="tags has-addons is-size-7 mt-2">
|
||||
<span className="tag">Pages</span>
|
||||
<span className="tag is-info is-light has-text-weight-bold">
|
||||
{value.data.pagecount[0]}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="control">
|
||||
<span className="tags has-addons is-size-7 mt-2">
|
||||
<span className="tag">Issue</span>
|
||||
{!isNil(value.data.number) && (
|
||||
<span className="tag has-text-weight-bold is-success is-light">
|
||||
{parseInt(value.data.number[0], 10)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
{/* Issue number */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
|
||||
</span>
|
||||
<span className="text-slate-900 dark:text-slate-900">
|
||||
{!isNil(value.data.number) && (
|
||||
<span>{parseInt(value.data.number[0], 10)}</span>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</dl>
|
||||
) : null;
|
||||
};
|
||||
|
||||
const WantedStatus = ({ value }) => {
|
||||
return !value ? <span className="tag is-info is-light">Wanted</span> : null;
|
||||
};
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
@@ -110,14 +108,10 @@ export const Library = (): ReactElement => {
|
||||
{
|
||||
header: "ComicInfo.xml",
|
||||
accessorKey: "_source.sourcedMetadata.comicInfo",
|
||||
align: "center",
|
||||
minWidth: 250,
|
||||
cell: (info) =>
|
||||
!isEmpty(info.getValue()) ? (
|
||||
<ComicInfoXML data={info.getValue()} />
|
||||
) : (
|
||||
<span className="tag mt-5">No ComicInfo.xml</span>
|
||||
),
|
||||
) : null,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -125,28 +119,41 @@ export const Library = (): ReactElement => {
|
||||
header: "Additional Metadata",
|
||||
columns: [
|
||||
{
|
||||
header: "Publisher",
|
||||
accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
|
||||
header: "Date of Import",
|
||||
accessorKey: "_source.createdAt",
|
||||
cell: (info) => {
|
||||
return (
|
||||
!isNil(info.getValue()) && (
|
||||
<h6 className="is-size-7 has-text-weight-bold">
|
||||
{info.getValue().publisher.name}
|
||||
</h6>
|
||||
)
|
||||
);
|
||||
return !isNil(info.getValue()) ? (
|
||||
<div className="text-xs w-max ml-3 my-3 text-slate-600">
|
||||
<p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
|
||||
{format(parseISO(info.getValue()), "h aaaa")}
|
||||
</div>
|
||||
) : null;
|
||||
},
|
||||
},
|
||||
{
|
||||
header: "Something",
|
||||
accessorKey: "_source.acquisition.source.wanted",
|
||||
cell: (info) => {
|
||||
!isUndefined(info.getValue()) ? (
|
||||
<WantedStatus value={info.getValue().toString()} />
|
||||
) : (
|
||||
"Nothing"
|
||||
);
|
||||
},
|
||||
header: "Downloads",
|
||||
accessorKey: "_source.acquisition",
|
||||
cell: (info) => (
|
||||
<div className="flex flex-col gap-2 ml-3 my-3">
|
||||
<span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
DC++: {info.getValue().directconnect.downloads.length}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
Torrent: {info.getValue().torrent.downloads.length}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -189,11 +196,23 @@ export const Library = (): ReactElement => {
|
||||
// value: PropTypes.bool.isRequired,
|
||||
// };
|
||||
return (
|
||||
<section className="container">
|
||||
<div className="section">
|
||||
<div className="header-area">
|
||||
<h1 className="title">Library</h1>
|
||||
</div>
|
||||
<div>
|
||||
<section>
|
||||
<header className="bg-slate-200 dark:bg-slate-500">
|
||||
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
|
||||
<div className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
|
||||
Library
|
||||
</h1>
|
||||
|
||||
<p className="mt-1.5 text-sm text-gray-500 dark:text-white">
|
||||
Browse your comic book collection.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{!isUndefined(searchResults?.hits) ? (
|
||||
<div>
|
||||
<div className="library">
|
||||
@@ -210,29 +229,36 @@ export const Library = (): ReactElement => {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="columns">
|
||||
<div className="column is-two-thirds">
|
||||
<article className="message is-link">
|
||||
<div className="message-body">
|
||||
<>
|
||||
<article
|
||||
role="alert"
|
||||
className="rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
No comics were found in the library, Elasticsearch reports no
|
||||
indices. Try importing a few comics into the library and come
|
||||
back.
|
||||
</div>
|
||||
</article>
|
||||
{!isUndefined(searchResults?.data?.meta?.body) ? (
|
||||
<pre>
|
||||
{JSON.stringify(
|
||||
searchResults.data.meta.body.error.root_cause,
|
||||
null,
|
||||
4,
|
||||
)}
|
||||
</pre>
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<div className="block max-w-md p-6 bg-white border border-gray-200 my-3 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
|
||||
<pre className="text-sm font-hasklig text-slate-700 dark:text-slate-700">
|
||||
{!isUndefined(searchResults?.data?.meta?.body) ? (
|
||||
<p>
|
||||
{JSON.stringify(
|
||||
searchResults.data.meta.body.error.root_cause,
|
||||
null,
|
||||
4,
|
||||
)}
|
||||
</p>
|
||||
) : null}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -25,36 +25,42 @@ export const SearchBar = (): ReactElement => {
|
||||
// );
|
||||
}, []);
|
||||
return (
|
||||
<div className="box">
|
||||
<Form
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={{}}
|
||||
render={({ handleSubmit, form, submitting, pristine, values }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="field is-grouped">
|
||||
<div className="control search is-expanded">
|
||||
<Field name="search">
|
||||
{({ input, meta }) => {
|
||||
return (
|
||||
<input
|
||||
{...input}
|
||||
className="input main-search-bar is-medium"
|
||||
placeholder="Type an issue/volume name"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
</div>
|
||||
<div className="control">
|
||||
<button className="button is-medium" type="submit">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Form
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={{}}
|
||||
render={({ handleSubmit, form, submitting, pristine, values }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Field name="search">
|
||||
{({ input, meta }) => {
|
||||
return (
|
||||
<div className="flex flex-row w-full">
|
||||
<div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
|
||||
<div className="w-10 text-gray-400">
|
||||
<i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
{...input}
|
||||
className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
|
||||
type="text"
|
||||
id="search"
|
||||
placeholder="Type an issue/volume name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="sm:mt-0 rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
type="submit"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Field>
|
||||
</form>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -35,19 +35,16 @@ export const AirDCPPHubsForm = (): ReactElement => {
|
||||
* Get the hubs list from an AirDCPP Socket
|
||||
*/
|
||||
const { data: hubs } = useQuery({
|
||||
queryKey: [],
|
||||
queryKey: ["hubs"],
|
||||
queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
|
||||
enabled: !!settings,
|
||||
});
|
||||
let hubList = {};
|
||||
if (!isEmpty(hubs)) {
|
||||
console.log("hs", hubs);
|
||||
if (!isNil(hubs)) {
|
||||
hubList = hubs.map(({ hub_url, identity }) => ({
|
||||
value: hub_url,
|
||||
label: identity.name,
|
||||
}));
|
||||
}
|
||||
console.log(hubList);
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: async (values) =>
|
||||
await axios({
|
||||
|
||||
@@ -3,29 +3,36 @@ import React, { ReactElement } from "react";
|
||||
export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
|
||||
const { settings } = settingsObject;
|
||||
return (
|
||||
<div className="mt-4 is-clearfix">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<span className="tag is-pulled-right is-primary">Connected</span>
|
||||
<div className="content is-size-7">
|
||||
<dl>
|
||||
<dt>{settings._id}</dt>
|
||||
<dt>Client version: {settings.system_info.client_version}</dt>
|
||||
<dt>Hostname: {settings.system_info.hostname}</dt>
|
||||
<dt>Platform: {settings.system_info.platform}</dt>
|
||||
<div>
|
||||
<span className="flex items-center mt-10 mb-4">
|
||||
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
|
||||
AirDC++ Client Information
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
||||
</span>
|
||||
<div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
|
||||
<span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
|
||||
<span className="h-5 w-6">
|
||||
<i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
|
||||
</span>
|
||||
<p className="whitespace-nowrap text-sm">Connected</p>
|
||||
</span>
|
||||
<p className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
|
||||
<dl>
|
||||
<dt>{settings._id}</dt>
|
||||
<dt>Client version: {settings.system_info.client_version}</dt>
|
||||
<dt>Hostname: {settings.system_info.hostname}</dt>
|
||||
<dt>Platform: {settings.system_info.platform}</dt>
|
||||
|
||||
<dt>Username: {settings.user.username}</dt>
|
||||
<dt>Username: {settings.user.username}</dt>
|
||||
|
||||
<dt>Active Sessions: {settings.user.active_sessions}</dt>
|
||||
<dt>
|
||||
Permissions:{" "}
|
||||
<pre>
|
||||
{JSON.stringify(settings.user.permissions, undefined, 2)}
|
||||
</pre>
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<dt>Active Sessions: {settings.user.active_sessions}</dt>
|
||||
<dt>
|
||||
Permissions:{" "}
|
||||
{JSON.stringify(settings.user.permissions, undefined, 2)}
|
||||
</dt>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -71,7 +71,6 @@ export const AirDCPPSettingsForm = (): ReactElement => {
|
||||
const initFormData = !isUndefined(airDCPPClientConfiguration)
|
||||
? airDCPPClientConfiguration
|
||||
: {};
|
||||
console.log(airDCPPClientConfiguration);
|
||||
return (
|
||||
<>
|
||||
<ConnectionForm
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { useQuery, useMutation, QueryClient } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export const QbittorrentConnectionForm = (): ReactElement => {
|
||||
const queryClient = new QueryClient();
|
||||
// fetch settings
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["settings"],
|
||||
@@ -13,7 +14,8 @@ export const QbittorrentConnectionForm = (): ReactElement => {
|
||||
method: "GET",
|
||||
}),
|
||||
});
|
||||
const hostDetails = data?.data.bittorrent.client.host;
|
||||
console.log(data);
|
||||
const hostDetails = data?.data?.bittorrent?.client?.host;
|
||||
// connect to qbittorrent client
|
||||
const { data: connectionDetails } = useQuery({
|
||||
queryKey: [],
|
||||
@@ -35,7 +37,6 @@ export const QbittorrentConnectionForm = (): ReactElement => {
|
||||
}),
|
||||
enabled: !!connectionDetails,
|
||||
});
|
||||
console.log(qbittorrentClientInfo?.data);
|
||||
// Update action using a mutation
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: async (values) =>
|
||||
@@ -44,6 +45,11 @@ export const QbittorrentConnectionForm = (): ReactElement => {
|
||||
method: "POST",
|
||||
data: { settingsPayload: values, settingsKey: "bittorrent" },
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["settings", "qbittorrentClientInfo"],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (isError)
|
||||
@@ -61,9 +67,24 @@ export const QbittorrentConnectionForm = (): ReactElement => {
|
||||
submitHandler={mutate}
|
||||
/>
|
||||
|
||||
<pre className="mt-5">
|
||||
{JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
|
||||
</pre>
|
||||
<span className="flex items-center mt-10 mb-4">
|
||||
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
|
||||
qBittorrent Client Information
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
||||
</span>
|
||||
|
||||
<div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
|
||||
<span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
|
||||
<span className="h-5 w-6">
|
||||
<i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
|
||||
</span>
|
||||
<p className="whitespace-nowrap text-sm">Connected</p>
|
||||
</span>
|
||||
<pre className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
|
||||
{JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
|
||||
</pre>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -50,24 +50,45 @@ export const Settings = (props: ISettingsProps): ReactElement => {
|
||||
},
|
||||
];
|
||||
return (
|
||||
<section className="container">
|
||||
<div className="columns">
|
||||
<div className="section column is-one-quarter">
|
||||
<h1 className="title">Settings</h1>
|
||||
<aside className="menu">
|
||||
<div>
|
||||
<section>
|
||||
<header className="bg-slate-200 dark:bg-slate-500">
|
||||
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
|
||||
<div className="sm:flex sm:items-center sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
|
||||
Settings
|
||||
</h1>
|
||||
|
||||
<p className="mt-1.5 text-sm text-gray-500 dark:text-white">
|
||||
Import comics into the ThreeTwo library.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex flex-cols max-w-screen-xl mx-auto">
|
||||
<aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
|
||||
{map(settingsObject, (settingObject, idx) => {
|
||||
return (
|
||||
<div key={idx}>
|
||||
<p className="menu-label">{settingObject.category}</p>
|
||||
<div
|
||||
className="w-64 py-2 text-slate-700 dark:text-slate-400"
|
||||
key={idx}
|
||||
>
|
||||
<h3 className="text-l pb-2">
|
||||
{settingObject.category.toUpperCase()}
|
||||
</h3>
|
||||
{/* First level children */}
|
||||
{!isUndefined(settingObject.children) ? (
|
||||
<ul className="menu-list" key={settingObject.id}>
|
||||
<ul key={settingObject.id}>
|
||||
{map(settingObject.children, (item, idx) => {
|
||||
return (
|
||||
<li key={idx}>
|
||||
<li key={idx} className="mb-2">
|
||||
<a
|
||||
className={
|
||||
item.id.toString() === active ? "is-active" : ""
|
||||
item.id.toString() === active
|
||||
? "is-active flex items-center"
|
||||
: "flex items-center"
|
||||
}
|
||||
onClick={() => setActive(item.id.toString())}
|
||||
>
|
||||
@@ -75,14 +96,14 @@ export const Settings = (props: ISettingsProps): ReactElement => {
|
||||
</a>
|
||||
{/* Second level children */}
|
||||
{!isUndefined(item.children) ? (
|
||||
<ul>
|
||||
<ul className="pl-4 mt-2">
|
||||
{map(item.children, (item, idx) => (
|
||||
<li key={item.id}>
|
||||
<li key={item.id} className="mb-2">
|
||||
<a
|
||||
className={
|
||||
item.id.toString() === active
|
||||
? "is-active"
|
||||
: ""
|
||||
? "is-active flex items-center"
|
||||
: "flex items-center"
|
||||
}
|
||||
onClick={() =>
|
||||
setActive(item.id.toString())
|
||||
@@ -103,18 +124,18 @@ export const Settings = (props: ISettingsProps): ReactElement => {
|
||||
);
|
||||
})}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{/* content for settings */}
|
||||
<div className="section column is-half mt-6">
|
||||
<div className="content">
|
||||
{map(settingsContent, ({ id, content }) =>
|
||||
active === id ? content : null,
|
||||
)}
|
||||
{/* content for settings */}
|
||||
<div className="max-w-screen-xl">
|
||||
<div className="content">
|
||||
{map(settingsContent, ({ id, content }) =>
|
||||
active === id ? content : null,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ import { isEmpty, isNil } from "lodash";
|
||||
|
||||
interface ICardProps {
|
||||
orientation: string;
|
||||
imageUrl: string;
|
||||
hasDetails: boolean;
|
||||
imageUrl?: string;
|
||||
hasDetails?: boolean;
|
||||
title?: PropTypes.ReactElementLike | null;
|
||||
children?: PropTypes.ReactNodeLike;
|
||||
borderColorClass?: string;
|
||||
@@ -80,6 +80,85 @@ const renderCard = (props: ICardProps): ReactElement => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "vertical-2":
|
||||
return (
|
||||
<div className="block rounded-md w-fit h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
|
||||
<img
|
||||
alt="Home"
|
||||
src={props.imageUrl}
|
||||
className="rounded-t-md object-cover"
|
||||
/>
|
||||
|
||||
<div className="mt-2 px-2">
|
||||
<dl>
|
||||
<div>
|
||||
<dd className="text-md text-slate-500 dark:text-black">
|
||||
{props.title}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
{props.hasDetails && <>{props.children}</>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "horizontal-small":
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row justify-start align-top gap-3 bg-slate-200 h-fit rounded-md shadow-md shadow-white-400">
|
||||
{/* thumbnail */}
|
||||
<div className="rounded-md overflow-hidden">
|
||||
<img src={props.imageUrl} className="object-cover h-20 w-20" />
|
||||
</div>
|
||||
{/* details */}
|
||||
<div className="w-fit h-fit pl-1 pr-2 py-1">
|
||||
<p className="text-sm">{props.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "horizontal-medium":
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row items-center align-top gap-3 bg-slate-200 h-fit p-2 rounded-md shadow-md shadow-white-400">
|
||||
{/* thumbnail */}
|
||||
<div className="rounded-md overflow-hidden">
|
||||
<img src={props.imageUrl} />
|
||||
</div>
|
||||
{/* details */}
|
||||
<div className="pl-1 pr-2 py-1">
|
||||
<p className="text-sm">{props.title}</p>
|
||||
{props.hasDetails && <>{props.children}</>}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "cover-only":
|
||||
return (
|
||||
<>
|
||||
{/* thumbnail */}
|
||||
<div className="rounded-lg shadow-lg overflow-hidden w-fit h-fit">
|
||||
<img src={props.imageUrl} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
case "card-with-info-panel":
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row">
|
||||
{/* thumbnail */}
|
||||
<div className="rounded-md overflow-hidden w-fit h-fit">
|
||||
<img src={props.imageUrl} />
|
||||
</div>
|
||||
{/* myata-dyata */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
default:
|
||||
return <></>;
|
||||
}
|
||||
|
||||
@@ -14,91 +14,141 @@ export const ConnectionForm = ({
|
||||
onSubmit={submitHandler}
|
||||
initialValues={initialData}
|
||||
render={({ handleSubmit }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<h2>{formHeading}</h2>
|
||||
<label className="label">Hostname</label>
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<span className="select">
|
||||
<Field name="protocol" component="select">
|
||||
<option>Protocol</option>
|
||||
<option value="http">http://</option>
|
||||
<option value="https">https://</option>
|
||||
</Field>
|
||||
</span>
|
||||
</p>
|
||||
<div className="control is-expanded">
|
||||
<Field name="hostname" validate={hostNameValidator}>
|
||||
{({ input, meta }) => (
|
||||
<form onSubmit={handleSubmit} className="mt-10">
|
||||
<h2 className="text-xl">{formHeading}</h2>
|
||||
<article
|
||||
role="alert"
|
||||
className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
|
||||
>
|
||||
<div>
|
||||
<p>Configure your AirDC++ client connection here.</p>
|
||||
<p>
|
||||
Note that you need an instance of AirDC++ already running to
|
||||
use this form to connect to it.
|
||||
</p>
|
||||
<p>
|
||||
See{" "}
|
||||
<a
|
||||
className="underline"
|
||||
href="http://airdcpp.net/docs/installation/installation.html"
|
||||
>
|
||||
here
|
||||
</a>{" "}
|
||||
for AirDC++ installation instructions for various platforms.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<span className="flex items-center mt-6">
|
||||
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
|
||||
Configure Connection
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
||||
</span>
|
||||
|
||||
<div className="flex flex-row mt-4">
|
||||
<div className="relative">
|
||||
{/* protocol */}
|
||||
<label className="block py-1">Protocol</label>
|
||||
<Field
|
||||
name="protocol"
|
||||
component="select"
|
||||
className="appearance-none dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
>
|
||||
<option>Protocol</option>
|
||||
<option value="http">http://</option>
|
||||
<option value="https">https://</option>
|
||||
</Field>
|
||||
<div className="absolute h-7 w-7 right-0 px-1 top-11 pointer-events-none">
|
||||
<i className="icon-[solar--alt-arrow-down-bold]" />
|
||||
</div>
|
||||
</div>
|
||||
{/* hostname */}
|
||||
<Field name="hostname" validate={hostNameValidator}>
|
||||
{({ input, meta }) => (
|
||||
<div className="flex flex-col">
|
||||
<label className="block px-2 py-1">Hostname</label>
|
||||
<input
|
||||
{...input}
|
||||
type="text"
|
||||
placeholder="Hostname"
|
||||
className="ml-2 dark:bg-slate-400 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
/>
|
||||
<div>
|
||||
<input
|
||||
{...input}
|
||||
type="text"
|
||||
placeholder="hostname"
|
||||
className="input"
|
||||
/>
|
||||
{meta.error && meta.touched && (
|
||||
<span className="is-size-7 has-text-danger">
|
||||
<span className="text-sm text-red-400 px-2">
|
||||
{meta.error}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
<p className="control">
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
{/* port */}
|
||||
<div className="flex flex-col">
|
||||
<label className="block px-2 py-1">Port</label>
|
||||
<Field
|
||||
name="port"
|
||||
component="input"
|
||||
className="input"
|
||||
placeholder="port"
|
||||
className="ml-2 dark:bg-slate-400 bg-slate-100 px-2 block h-10 rounded-md sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Port"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Credentials</label>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<p className="control is-expanded has-icons-left">
|
||||
<Field
|
||||
name="username"
|
||||
component="input"
|
||||
className="input"
|
||||
placeholder="Username"
|
||||
/>
|
||||
<span className="icon is-small is-left">
|
||||
<i className="fa-solid fa-user-ninja"></i>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div className="flex flex-row mt-5">
|
||||
<div>
|
||||
<label className="block py-1">Username</label>
|
||||
<div className="relative">
|
||||
<Field
|
||||
name="username"
|
||||
component="input"
|
||||
className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 mr-5 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Username"
|
||||
/>
|
||||
<span className="absolute h-6 w-6 left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none">
|
||||
<i className="icon-[solar--user-bold-duotone] h-6 w-6 dark:text-slate-200" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="field">
|
||||
<p className="control is-expanded has-icons-left has-icons-right">
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label className="block py-1">Password</label>
|
||||
<div className="relative">
|
||||
<Field
|
||||
name="password"
|
||||
component="input"
|
||||
type="password"
|
||||
className="input"
|
||||
className="h-10 dark:bg-slate-500 bg-slate-200 rounded-md text-gray-700 dark:text-slate-200 py-1 px-10 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<span className="icon is-small is-left">
|
||||
<i className="fa-solid fa-lock"></i>
|
||||
<span className="absolute left-2 top-2 inset-y-0 flex items-center px-0 pointer-events-none h-6 w-6">
|
||||
<i className="icon-[solar--lock-password-bold-duotone] h-6 w-6 dark:text-slate-200" />
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field is-grouped">
|
||||
<p className="control">
|
||||
<button type="submit" className="button is-primary">
|
||||
<div className="flex flex-row gap-2">
|
||||
<button
|
||||
className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
type="submit"
|
||||
>
|
||||
<span className="text-md">
|
||||
{!isEmpty(initialData) ? "Update" : "Save"}
|
||||
</button>
|
||||
</p>
|
||||
</span>
|
||||
<span className="w-6 h-6">
|
||||
<i className="h-6 w-6 icon-[solar--diskette-bold-duotone]"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<p className="control">
|
||||
<button type="submit" className="button is-danger">
|
||||
{!isEmpty(initialData) && "Delete"}
|
||||
</button>
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-red-400 dark:border-red-200 bg-red-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||
>
|
||||
{!isEmpty(initialData) && "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
@@ -31,61 +31,53 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
||||
{
|
||||
name: "rawFileDetails",
|
||||
content: () => (
|
||||
<dl>
|
||||
<dl className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg">
|
||||
<dt>
|
||||
<h6
|
||||
className="name has-text-weight-medium mb-1"
|
||||
style={props.titleStyle}
|
||||
>
|
||||
{issueName}
|
||||
</h6>
|
||||
<p className="text-lg">{issueName}</p>
|
||||
</dt>
|
||||
<dd className="is-size-7">
|
||||
Is a part of{" "}
|
||||
<span className="has-text-weight-semibold">
|
||||
<dd className="text-sm">
|
||||
is a part of{" "}
|
||||
<span className="underline">
|
||||
{inferredMetadata.issue.name}
|
||||
<i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
|
||||
</span>
|
||||
</dd>
|
||||
|
||||
<dd className="is-size-7 mt-2">
|
||||
<div className="field is-grouped is-grouped-multiline">
|
||||
<div className="control">
|
||||
<span className="tags">
|
||||
<span
|
||||
className="tag is-success is-light has-text-weight-semibold"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{rawFileDetails.extension}
|
||||
</span>
|
||||
<span
|
||||
className="tag is-success is-light has-text-weight-semibold"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{rawFileDetails.mimeType}
|
||||
</span>
|
||||
<span
|
||||
className="tag is-success is-light"
|
||||
style={props.tagsStyle}
|
||||
>
|
||||
{prettyBytes(rawFileDetails.fileSize)}
|
||||
</span>
|
||||
{/* Issue number */}
|
||||
{inferredMetadata.issue.number && (
|
||||
<dd className="my-2">
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="control">
|
||||
{inferredMetadata.issue.number && (
|
||||
<div className="tags has-addons">
|
||||
<span className="tag is-light" style={props.tagsStyle}>
|
||||
Issue #
|
||||
</span>
|
||||
<span className="tag is-warning" style={props.tagsStyle}>
|
||||
{inferredMetadata.issue.number}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
{inferredMetadata.issue.number}
|
||||
</span>
|
||||
</span>
|
||||
</dd>
|
||||
)}
|
||||
<dd className="flex flex-row gap-2 w-max">
|
||||
{/* File extension */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||
{rawFileDetails.mimeType}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* size */}
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
|
||||
</span>
|
||||
|
||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||
{prettyBytes(rawFileDetails.fileSize)}
|
||||
</span>
|
||||
</span>
|
||||
</dd>
|
||||
</dl>
|
||||
),
|
||||
@@ -208,25 +200,14 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="column" style={props.containerStyle}>
|
||||
<div className="comic-detail issue-metadata">
|
||||
<dl>
|
||||
<dd>
|
||||
<div className="columns mt-2">
|
||||
<div className="column is-3">
|
||||
<Card
|
||||
imageUrl={url}
|
||||
orientation={"vertical"}
|
||||
hasDetails={false}
|
||||
imageStyle={props.imageStyle}
|
||||
// cardContainerStyle={{ maxWidth: 200 }}
|
||||
/>
|
||||
</div>
|
||||
<div className="column">{metadataPanel.content()}</div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div className="flex gap-5 my-3">
|
||||
<Card
|
||||
imageUrl={url}
|
||||
orientation={"cover-only"}
|
||||
hasDetails={false}
|
||||
imageStyle={props.imageStyle}
|
||||
/>
|
||||
<div>{metadataPanel.content()}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
121
src/client/components/shared/Navbar2.tsx
Normal file
121
src/client/components/shared/Navbar2.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React, { ReactElement, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useDarkMode } from "../../hooks/useDarkMode";
|
||||
|
||||
export const Navbar2 = (): ReactElement => {
|
||||
const [colorTheme, setTheme] = useDarkMode();
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
|
||||
const toggleDarkMode = (checked) => {
|
||||
setTheme(colorTheme);
|
||||
setDarkMode(!darkMode);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-white dark:bg-gray-900 gap-8 px-5 py-5 h-18 border-b-2 border-gray-300 dark:border-slate-200">
|
||||
{/* Logo */}
|
||||
<div className="mx-auto flex">
|
||||
<img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
|
||||
|
||||
{/* Main Navigation */}
|
||||
<div className="flex flex-1 items-center justify-end md:justify-between">
|
||||
<nav
|
||||
aria-label="ThreeTwo Main Navigation"
|
||||
className="hidden md:block"
|
||||
>
|
||||
<ul className="flex items-center gap-6 text-md">
|
||||
<li>
|
||||
<Link
|
||||
to="/dashboard"
|
||||
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/import"
|
||||
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
|
||||
>
|
||||
Import
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link
|
||||
to="/library"
|
||||
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
|
||||
>
|
||||
Library
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
|
||||
href="/"
|
||||
>
|
||||
Volumes
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
className="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
|
||||
href="/"
|
||||
>
|
||||
Downloads
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{/* Right-most Nav */}
|
||||
<div className="flex items-center gap-4">
|
||||
<ul className="flex items-center gap-6 text-md">
|
||||
{/* Settings Icon and text */}
|
||||
<li>
|
||||
<Link
|
||||
to="/settings"
|
||||
className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
|
||||
>
|
||||
<span className="w-5 h-5">
|
||||
<i className="icon-[solar--settings-outline] h-5 w-5"></i>
|
||||
</span>
|
||||
<span>Settings</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
{/* Light/Dark Mode toggle */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-gray-600 dark:text-white">Light</span>
|
||||
<label
|
||||
htmlFor="toggle"
|
||||
className="relative inline-flex items-center"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="toggle"
|
||||
className="sr-only"
|
||||
checked={darkMode}
|
||||
onChange={toggleDarkMode}
|
||||
/>
|
||||
<span className="bg-gray-300 w-10 h-6 rounded-full"></span>
|
||||
<span
|
||||
className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${
|
||||
darkMode ? "translate-x-4" : ""
|
||||
}`}
|
||||
></span>
|
||||
</label>
|
||||
<span className="text-gray-600 dark:text-white">Dark</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
@@ -70,67 +70,46 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="columns table-controls">
|
||||
<div className="container max-w-fit mx-14">
|
||||
<div>
|
||||
{/* Search bar */}
|
||||
<div className="column is-half">
|
||||
<div className="flex flex-row gap-2 justify-between mt-5">
|
||||
<SearchBar />
|
||||
</div>
|
||||
{/* pagination controls */}
|
||||
<nav className="pagination columns">
|
||||
<div className="mr-4 has-text-weight-semibold has-text-left">
|
||||
<p className="is-size-5">
|
||||
Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
|
||||
</p>
|
||||
|
||||
{/* pagination controls */}
|
||||
<div>
|
||||
Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
|
||||
<p>{totalPages} comics in all</p>
|
||||
</div>
|
||||
<div className="field has-addons">
|
||||
<div className="control">
|
||||
{/* Prev/Next buttons */}
|
||||
<div className="inline-flex flex-row mt-4 mb-4">
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => goToPreviousPage()}
|
||||
disabled={pageIndex === 1}
|
||||
className="dark:bg-slate-500 bg-slate-400 rounded-l border-slate-600 border-r pt-2 px-2"
|
||||
>
|
||||
<i className="fas fa-chevron-left"></i>
|
||||
<i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="control">
|
||||
<button
|
||||
className="button"
|
||||
className="dark:bg-slate-500 bg-slate-400 rounded-r pt-2 px-2"
|
||||
onClick={() => goToNextPage()}
|
||||
disabled={pageIndex > Math.floor(totalPages / pageSize)}
|
||||
>
|
||||
<i className="fas fa-chevron-right"></i>
|
||||
<i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="field has-addons ml-5">
|
||||
<p className="control">
|
||||
<button className="button">
|
||||
<span className="icon is-small">
|
||||
<i className="fa-solid fa-list"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<p className="control">
|
||||
<button className="button">
|
||||
<Link to="/library-grid">
|
||||
<span className="icon is-small">
|
||||
<i className="fa-solid fa-image"></i>
|
||||
</span>
|
||||
</Link>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<table className="table is-hoverable">
|
||||
<thead>
|
||||
<table className="table-auto overflow-auto">
|
||||
<thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">
|
||||
{table.getHeaderGroups().map((headerGroup, idx) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header, idx) => (
|
||||
<th key={header.id} colSpan={header.colSpan}>
|
||||
<th
|
||||
key={header.id}
|
||||
colSpan={header.colSpan}
|
||||
className="px-3 py-3"
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
@@ -147,17 +126,22 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
{table.getRowModel().rows.map((row, idx) => {
|
||||
return (
|
||||
<tr key={row.id} onClick={() => rowClickHandler(row)}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
{row.getVisibleCells().map((cell) => {
|
||||
return (
|
||||
<td key={cell.id} className="align-top">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user