diff --git a/index.html b/index.html index 01b0c6b..a937b92 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Three Two! - +
diff --git a/src/client/components/Import/Import.tsx b/src/client/components/Import/Import.tsx index 0bb8c73..6cc4d25 100644 --- a/src/client/components/Import/Import.tsx +++ b/src/client/components/Import/Import.tsx @@ -129,145 +129,171 @@ export const Import = (props: IProps): ReactElement => { } }; return ( -
-
-

Import Comics

-
-
-

- - Import Comics - - will add comics identified from the mapped folder into ThreeTwo's - database. -

-

- Metadata from ComicInfo.xml, if present, will also be extracted. -

-

- This process could take a while, if you have a lot of comics, or - are importing over a network connection. -

-
-
-

- -

+
+
+
+
+
+
+

+ Import +

- {importJobQueue.status !== "drained" && - !isUndefined(importJobQueue.status) && ( +

+ Import comics into the ThreeTwo library. +

+
+ +
+ +
+
+
+
+ +
+
+
+

+ + Import Comics + + will add comics identified from the mapped folder into + ThreeTwo's database. +

+

+ Metadata from ComicInfo.xml, if present, will also be extracted. +

+

+ This process could take a while, if you have a lot of comics, or + are importing over a network connection. +

+
+
+

+ +

+ + {importJobQueue.status !== "drained" && + !isUndefined(importJobQueue.status) && ( + <> + + + + + + + + + + + + + + + + + + + +
Completed JobsFailed JobsQueue ControlsQueue Status
+ {importJobQueue.successfulJobCount > 0 && ( +
+ + {importJobQueue.successfulJobCount} + +
+ )} + 		+ {importJobQueue.failedJobCount > 0 && ( +
+ + {importJobQueue.failedJobCount} + +
+ )} + 		{renderQueueControls(importJobQueue.status)} + {importJobQueue.status !== undefined ? ( + + {importJobQueue.status} + + ) : null} +
+ Imported{" "} + + {importJobQueue.mostRecentImport} + + + )} + + {/* Past imports */} + {!isLoading && !isEmpty(data?.data) && ( <> - +

Past Imports

+
- - - - + + + + - - + + + - - - - + + + + ); + })}
Completed JobsFailed JobsQueue ControlsQueue StatusTime StartedSession IdImportedFailed
- {importJobQueue.successfulJobCount > 0 && ( -
- - {importJobQueue.successfulJobCount} + {data?.data.map((jobResult, id) => { + return ( +
+ {format( + new Date(jobResult.earliestTimestamp), + "EEEE, hh:mma, do LLLL Y", + )} + + + {jobResult.sessionId} - - )} - - - {importJobQueue.failedJobCount > 0 && ( -
- - {importJobQueue.failedJobCount} +
+ + {jobResult.completedJobs} - - )} - {renderQueueControls(importJobQueue.status)} - {importJobQueue.status !== undefined ? ( - - {importJobQueue.status} - - ) : null} -
+ + {jobResult.failedJobs} + +
- Imported{" "} - - {importJobQueue.mostRecentImport} - )} - - {/* Past imports */} - {!isLoading && !isEmpty(data?.data) && ( - <> -

Past Imports

- - - - - - - - - - - - {data?.data.map((jobResult, id) => { - return ( - - - - - - - ); - })} - -
Time StartedSession IdImportedFailed
- {format( - new Date(jobResult.earliestTimestamp), - "EEEE, hh:mma, do LLLL Y", - )} - - - {jobResult.sessionId} - - - - {jobResult.completedJobs} - - - - {jobResult.failedJobs} - -
- - )} +
); diff --git a/src/client/components/shared/Navbar2.tsx b/src/client/components/shared/Navbar2.tsx index d43dc5c..df9b33e 100644 --- a/src/client/components/shared/Navbar2.tsx +++ b/src/client/components/shared/Navbar2.tsx @@ -1,10 +1,11 @@ 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); - console.log("as", darkMode); + const toggleDarkMode = (checked) => { setTheme(colorTheme); setDarkMode(!darkMode); @@ -12,7 +13,7 @@ export const Navbar2 = (): ReactElement => { }; return ( -
+
{/* Logo */}
ThreeTwo! @@ -34,21 +35,21 @@ export const Navbar2 = (): ReactElement => {
  • - Import - +
  • - Library - +