mirror of
https://github.com/C9Glax/tranga-website.git
synced 2025-09-10 03:48:21 +02:00
Cleanup
This commit is contained in:
817
tranga-website/package-lock.json
generated
817
tranga-website/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -28,6 +28,7 @@
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^15.15.0",
|
||||
"swagger-typescript-api": "^13.2.7",
|
||||
"typescript": "~5.7.2",
|
||||
"typescript-eslint": "^8.24.1",
|
||||
"vite": "^6.2.0"
|
||||
|
||||
@@ -1,107 +1,51 @@
|
||||
import Sheet from '@mui/joy/Sheet';
|
||||
import './App.css'
|
||||
import Settings from "./Settings.tsx";
|
||||
import Settings from "./Components/Settings/Settings.tsx";
|
||||
import Header from "./Header.tsx";
|
||||
import {Badge, Button} from "@mui/joy";
|
||||
import {useEffect, useState} from "react";
|
||||
import {ApiUriContext} from "./api/fetchApi.tsx";
|
||||
import Search from './Components/Search.tsx';
|
||||
import MangaList from "./Components/MangaList.tsx";
|
||||
import {MangaConnectorContext} from "./api/Contexts/MangaConnectorContext.tsx";
|
||||
import IMangaConnector from "./api/types/IMangaConnector.ts";
|
||||
import {GetAllConnectors} from "./api/MangaConnector.tsx";
|
||||
import JobsDrawer from "./Components/Jobs.tsx";
|
||||
import {MangaContext} from "./api/Contexts/MangaContext.tsx";
|
||||
import IManga from "./api/types/IManga.ts";
|
||||
import {GetMangaById} from "./api/Manga.tsx";
|
||||
import IChapter from "./api/types/IChapter.ts";
|
||||
import {GetChapterFromId} from "./api/Chapter.tsx";
|
||||
import {ChapterContext} from "./api/Contexts/ChapterContext.tsx";
|
||||
import {createContext, useEffect, useState} from "react";
|
||||
import {V2} from "./apiClient/V2.ts";
|
||||
import {GetManga, MangaContext } from './apiClient/MangaContext.tsx';
|
||||
import { ApiContext } from './apiClient/ApiContext.tsx';
|
||||
import MangaList from "./Components/Mangas/MangaList.tsx";
|
||||
import {MangaConnector} from "./apiClient/data-contracts.ts";
|
||||
|
||||
export const MangaConnectorContext = createContext<MangaConnector[]>([]);
|
||||
|
||||
export default function App () {
|
||||
|
||||
const [showSettings, setShowSettings] = useState<boolean>(false);
|
||||
const [showSearch, setShowSearch] = useState<boolean>(false);
|
||||
const [showJobs, setShowJobs] = useState<boolean>(false);
|
||||
const [apiConnected, setApiConnected] = useState<boolean>(false);
|
||||
|
||||
const apiUriStr = localStorage.getItem("apiUri") ?? window.location.href.substring(0, window.location.href.lastIndexOf("/")) + "/api";
|
||||
|
||||
const [apiUri, setApiUri] = useState<string>(apiUriStr);
|
||||
const [mangas, setMangas] = useState<IManga[]>([]);
|
||||
const [chapters, setChapters] = useState<IChapter[]>([]);
|
||||
const [Api, setApi] = useState<V2>(new V2());
|
||||
|
||||
const [mangaConnectors, setMangaConnectors] = useState<MangaConnector[]>([]);
|
||||
useEffect(() => {
|
||||
Api.mangaConnectorList().then(response => {
|
||||
if (response.ok)
|
||||
setMangaConnectors(response.data);
|
||||
})
|
||||
}, [Api]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("apiUri", apiUri);
|
||||
setApi(new V2({
|
||||
baseUrl: apiUri
|
||||
}));
|
||||
}, [apiUri]);
|
||||
|
||||
const [mangaPromises, setMangaPromises] = useState(new Map<string, Promise<IManga | undefined>>());
|
||||
const GetManga = (mangaId: string) : Promise<IManga | undefined> => {
|
||||
const promise = mangaPromises.get(mangaId);
|
||||
if(promise) return promise;
|
||||
const p = new Promise<IManga | undefined>((resolve, reject) => {
|
||||
let ret = mangas?.find(m => m.mangaId == mangaId);
|
||||
if (ret) resolve(ret);
|
||||
|
||||
console.log(`Fetching manga ${mangaId}`);
|
||||
GetMangaById(apiUri, mangaId).then(manga => {
|
||||
if(manga && mangas?.find(m => m.mangaId == mangaId) === undefined)
|
||||
setMangas([...mangas, manga]);
|
||||
resolve(manga);
|
||||
}).catch(reject);
|
||||
});
|
||||
setMangaPromises(mangaPromises.set(mangaId, p));
|
||||
return p;
|
||||
}
|
||||
|
||||
const [chapterPromises, setChapterPromises] = useState(new Map<string, Promise<IChapter | undefined>>());
|
||||
const GetChapter = (chapterId: string) : Promise<IChapter | undefined> => {
|
||||
const promise = chapterPromises.get(chapterId);
|
||||
if(promise) return promise;
|
||||
const p = new Promise<IChapter | undefined>((resolve, reject) => {
|
||||
let ret = chapters?.find(c => c.chapterId == chapterId);
|
||||
if (ret) resolve(ret);
|
||||
|
||||
console.log(`Fetching chapter ${chapterId}`);
|
||||
GetChapterFromId(apiUri, chapterId).then(chapter => {
|
||||
if(chapter && chapters?.find(c => c.chapterId == chapterId) === undefined)
|
||||
setChapters([...chapters, chapter]);
|
||||
resolve(chapter);
|
||||
}).catch(reject);
|
||||
});
|
||||
setChapterPromises(chapterPromises.set(chapterId, p));
|
||||
return p;
|
||||
}
|
||||
|
||||
const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if(!apiConnected) return;
|
||||
GetAllConnectors(apiUri).then(setMangaConnectors);
|
||||
}, [apiConnected]);
|
||||
|
||||
return (
|
||||
<ApiUriContext.Provider value={apiUri}>
|
||||
<MangaConnectorContext.Provider value={mangaConnectors}>
|
||||
<MangaContext.Provider value={{mangas, GetManga}}>
|
||||
<ChapterContext.Provider value={{chapters, GetChapter}}>
|
||||
<Sheet className={"app"}>
|
||||
<Header>
|
||||
<Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
|
||||
<Button onClick={() => setShowSettings(true)}>Settings</Button>
|
||||
</Badge>
|
||||
<Button onClick={() => setShowJobs(true)}>Jobs</Button>
|
||||
</Header>
|
||||
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
|
||||
<Search open={showSearch} setOpen={setShowSearch} />
|
||||
<JobsDrawer open={showJobs} connected={apiConnected} setOpen={setShowJobs} />
|
||||
<Sheet className={"app-content"}>
|
||||
<MangaList connected={apiConnected} setShowSearch={setShowSearch} />
|
||||
</Sheet>
|
||||
<ApiContext.Provider value={Api}>
|
||||
<MangaConnectorContext.Provider value={mangaConnectors}>
|
||||
<MangaContext.Provider value={{GetManga: GetManga}}>
|
||||
<Sheet className={"app"}>
|
||||
<Header>
|
||||
<Settings setApiUri={setApiUri} />
|
||||
</Header>
|
||||
<Sheet className={"app-content"}>
|
||||
<MangaList />
|
||||
</Sheet>
|
||||
</ChapterContext.Provider>
|
||||
</Sheet>
|
||||
</MangaContext.Provider>
|
||||
</MangaConnectorContext.Provider>
|
||||
</ApiUriContext.Provider>
|
||||
</ApiContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import React, {ReactElement, useContext, useState} from "react";
|
||||
import IChapter from "../api/types/IChapter.ts";
|
||||
import {Box, Chip, Link, Stack, Tooltip, Typography} from "@mui/joy";
|
||||
import {MangaFromId} from "./Manga.tsx";
|
||||
import {ChapterContext} from "../api/Contexts/ChapterContext.tsx";
|
||||
import Drawer from "@mui/joy/Drawer";
|
||||
import ModalClose from "@mui/joy/ModalClose";
|
||||
import {Archive} from "@mui/icons-material";
|
||||
|
||||
export function ChapterPopupFromId({chapterId, open, setOpen, children}: { chapterId: string | null, open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }) {
|
||||
return (
|
||||
<Drawer anchor={"bottom"} open={open} onClose={() => setOpen(false)}>
|
||||
<ModalClose />
|
||||
{
|
||||
chapterId !== null ?
|
||||
<ChapterFromId chapterId={chapterId}>{children}</ChapterFromId>
|
||||
: null
|
||||
}
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
export function ChapterFromId({chapterId, children} : { chapterId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
|
||||
const chapterContext = useContext(ChapterContext);
|
||||
|
||||
const [chapter, setChapter] = useState<IChapter | undefined>(undefined);
|
||||
chapterContext.GetChapter(chapterId).then(setChapter);
|
||||
|
||||
return (
|
||||
chapter === undefined ?
|
||||
null
|
||||
:
|
||||
<Chapter chapter={chapter}>{children}</Chapter>
|
||||
);
|
||||
}
|
||||
|
||||
export function Chapter({chapter, children} : { chapter: IChapter, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
|
||||
return (
|
||||
<Stack direction={"row"} spacing={5} sx={{paddingTop: "10px"}}>
|
||||
<MangaFromId mangaId={chapter.parentMangaId} />
|
||||
<Box>
|
||||
<Link target={"_blank"} level={"title-lg"} href={chapter.url}>{chapter.title}</Link>
|
||||
<Typography>Volume <Chip>{chapter.volumeNumber}</Chip></Typography>
|
||||
<Typography>Chapter <Chip>{chapter.chapterNumber}</Chip></Typography>
|
||||
<Tooltip title={chapter.fullArchiveFilePath} placement={"bottom-start"}><Archive /></Tooltip>
|
||||
</Box>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
import {
|
||||
Button,
|
||||
DialogContent, DialogTitle,
|
||||
Drawer,
|
||||
Input,
|
||||
Option,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Typography
|
||||
} from "@mui/joy";
|
||||
import {GetJobsInState, GetJobsOfTypeAndWithState, GetJobsWithType, StartJob} from "../api/Job.tsx";
|
||||
import * as React from "react";
|
||||
import {useCallback, useContext, useEffect, useState} from "react";
|
||||
import {ApiUriContext} from "../api/fetchApi.tsx";
|
||||
import IJob, {JobState, JobStateToString, JobType, JobTypeToString} from "../api/types/Jobs/IJob.ts";
|
||||
import ModalClose from "@mui/joy/ModalClose";
|
||||
import {MangaPopupFromId} from "./MangaPopup.tsx";
|
||||
import IJobWithMangaId from "../api/types/Jobs/IJobWithMangaId.ts";
|
||||
import {ChapterPopupFromId} from "./Chapter.tsx";
|
||||
import IJobWithChapterId from "../api/types/Jobs/IJobWithChapterId.tsx";
|
||||
|
||||
export default function JobsDrawer({open, connected, setOpen} : {open: boolean, connected: boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>}) {
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
|
||||
const [allJobs, setAllJobs] = useState<IJob[]>([]);
|
||||
|
||||
const [filterState, setFilterState] = useState<string|null>(null);
|
||||
const [filterType, setFilterType] = useState<string|null>(null);
|
||||
|
||||
const pageSize = 10;
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
const updateDisplayJobs = useCallback(() => {
|
||||
if(!connected)
|
||||
return;
|
||||
if (filterState === null && filterType === null)
|
||||
setAllJobs([]);
|
||||
else if (filterState === null && filterType != null)
|
||||
GetJobsWithType(apiUri, filterType as unknown as JobType).then(setAllJobs);
|
||||
else if (filterState != null && filterType === null)
|
||||
GetJobsInState(apiUri, filterState as unknown as JobState).then(setAllJobs);
|
||||
else if (filterState != null && filterType != null)
|
||||
GetJobsOfTypeAndWithState(apiUri, filterType as unknown as JobType, filterState as unknown as JobState).then(setAllJobs);
|
||||
}, [connected, filterType, filterState]);
|
||||
|
||||
const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
|
||||
useEffect(() => {
|
||||
clearTimeout(timerRef.current);
|
||||
updateDisplayJobs();
|
||||
timerRef.current = setInterval(updateDisplayJobs, 2000);
|
||||
}, [filterState, filterType]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !connected)
|
||||
clearTimeout(timerRef.current);
|
||||
}, [open, connected]);
|
||||
|
||||
const handleChangeState = (
|
||||
_: React.SyntheticEvent | null,
|
||||
newValue: string | null,
|
||||
) => {
|
||||
setFilterState(newValue);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const handleChangeType = (
|
||||
_: React.SyntheticEvent | null,
|
||||
newValue: string | null,
|
||||
) => {
|
||||
setFilterType(newValue);
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const [mangaPopupOpen, setMangaPopupOpen] = React.useState(false);
|
||||
const [selectedMangaId, setSelectedMangaId] = useState<string | null>(null);
|
||||
const OpenMangaPopupDrawer = (mangaId: string) => {
|
||||
setSelectedMangaId(mangaId);
|
||||
setMangaPopupOpen(true);
|
||||
}
|
||||
|
||||
const [chapterPopupOpen, setChapterPopupOpen] = React.useState(false);
|
||||
const [selectedChapterId, setSelectedChapterId] = React.useState<string | null>(null);
|
||||
const OpenChapterPopupDrawer = (chapterId: string) => {
|
||||
setSelectedChapterId(chapterId);
|
||||
setChapterPopupOpen(true);
|
||||
}
|
||||
|
||||
const ReRunJob = useCallback((jobId: string) => {
|
||||
StartJob(apiUri, jobId, false);
|
||||
}, [apiUri]);
|
||||
|
||||
return (
|
||||
<Drawer size={"lg"} anchor={"left"} open={open} onClose={() => setOpen(false)}>
|
||||
<ModalClose />
|
||||
<DialogTitle><Typography level={"h2"}>Jobs</Typography></DialogTitle>
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Select placeholder={"State"} value={filterState} onChange={handleChangeState} startDecorator={
|
||||
<Typography>State</Typography>
|
||||
}>
|
||||
<Option value={null}>None</Option>
|
||||
{Object.keys(JobState).map((state) => <Option value={state}>{JobStateToString(state)}</Option>)}
|
||||
</Select>
|
||||
<Select placeholder={"Type"} value={filterType} onChange={handleChangeType} startDecorator={
|
||||
<Typography>Type</Typography>
|
||||
}>
|
||||
<Option value={null}>None</Option>
|
||||
{Object.keys(JobType).map((type) => <Option value={type}>{JobTypeToString(type)}</Option>)}
|
||||
</Select>
|
||||
<Input type={"number"}
|
||||
value={page}
|
||||
onChange={(e) => setPage(parseInt(e.target.value))}
|
||||
slotProps={{input: { min: 1, max: Math.ceil(allJobs.length / pageSize)}}}
|
||||
startDecorator={<Typography>Page</Typography>}
|
||||
endDecorator={<Typography>/{Math.ceil(allJobs.length / pageSize)}</Typography>}/>
|
||||
</Stack>
|
||||
<DialogContent>
|
||||
<Table borderAxis={"bothBetween"} stickyHeader sx={{tableLayout: "auto", width: "100%"}}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>State</th>
|
||||
<th>Last Execution</th>
|
||||
<th>Next Execution</th>
|
||||
<th></th>
|
||||
<th>Extra</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allJobs.slice((page-1)*pageSize, page*pageSize).map((job) => (
|
||||
<tr key={job.jobId}>
|
||||
<td>{JobTypeToString(job.jobType)}</td>
|
||||
<td>{JobStateToString(job.state)}</td>
|
||||
<td>{new Date(job.lastExecution).toLocaleString()}</td>
|
||||
<td>{new Date(job.nextExecution).toLocaleString()}</td>
|
||||
<td style={{whiteSpace: "nowrap"}}><Button onClick={() => ReRunJob(job.jobId)}>Re-Run</Button></td>
|
||||
<td>{ExtraContent(job, OpenMangaPopupDrawer, OpenChapterPopupDrawer)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</DialogContent>
|
||||
<MangaPopupFromId mangaId={selectedMangaId} open={mangaPopupOpen} setOpen={setMangaPopupOpen} />
|
||||
<ChapterPopupFromId chapterId={selectedChapterId} open={chapterPopupOpen} setOpen={setChapterPopupOpen} />
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
function ExtraContent(job: IJob, OpenMangaPopupDrawer: (mangaId: string) => void, OpenChapterPopupDrawer: (IJobWithChapterId: string) => void){
|
||||
switch(job.jobType){
|
||||
case JobType.DownloadAvailableChaptersJob:
|
||||
case JobType.DownloadMangaCoverJob:
|
||||
case JobType.RetrieveChaptersJob:
|
||||
case JobType.UpdateChaptersDownloadedJob:
|
||||
case JobType.UpdateCoverJob:
|
||||
case JobType.MoveMangaLibraryJob:
|
||||
return <Button onClick={() => OpenMangaPopupDrawer((job as IJobWithMangaId).mangaId)}>Open Manga</Button>
|
||||
case JobType.DownloadSingleChapterJob:
|
||||
return <Button onClick={() => OpenChapterPopupDrawer((job as IJobWithChapterId).chapterId)}>Show Chapter</Button>
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
import {Badge, Box, Card, CardContent, CardCover, Skeleton, Tooltip, Typography,} from "@mui/joy";
|
||||
import IManga from "../api/types/IManga.ts";
|
||||
import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
|
||||
import {GetMangaCoverImageUrl} from "../api/Manga.tsx";
|
||||
import {ApiUriContext, getData} from "../api/fetchApi.tsx";
|
||||
import {MangaReleaseStatus, ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
|
||||
import {SxProps} from "@mui/joy/styles/types";
|
||||
import MangaPopup from "./MangaPopup.tsx";
|
||||
import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
|
||||
import {MangaContext} from "../api/Contexts/MangaContext.tsx";
|
||||
|
||||
export const CardWidth = 190;
|
||||
export const CardHeight = 300;
|
||||
|
||||
const coverSx : SxProps = {
|
||||
height: CardHeight + "px",
|
||||
width: CardWidth + "px",
|
||||
position: "relative",
|
||||
}
|
||||
|
||||
const coverCss : CSSProperties = {
|
||||
maxHeight: "calc("+CardHeight+"px + 2rem)",
|
||||
maxWidth: "calc("+CardWidth+"px + 2rem)",
|
||||
objectFit: "cover",
|
||||
width: "calc("+CardHeight+"px + 2rem)",
|
||||
height: "calc("+CardHeight+"px + 2rem)",
|
||||
}
|
||||
|
||||
export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
|
||||
const mangaContext = useContext(MangaContext);
|
||||
|
||||
const [manga, setManga] = useState<IManga | undefined>(undefined);
|
||||
mangaContext.GetManga(mangaId).then(setManga);
|
||||
|
||||
return (
|
||||
manga === undefined ?
|
||||
<Badge sx={{margin:"8px !important"}} badgeContent={<Skeleton><Tooltip title={"Loading"}><img width={"24pt"} height={"24pt"} src={"/blahaj.png"} /></Tooltip></Skeleton>} color={ReleaseStatusToPalette(MangaReleaseStatus.Completed)} size={"lg"}>
|
||||
<Card sx={{height:"fit-content",width:"fit-content"}}>
|
||||
<CardCover>
|
||||
<img loading={"lazy"} style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
|
||||
</CardCover>
|
||||
<CardCover sx={{
|
||||
background:
|
||||
'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
|
||||
}}/>
|
||||
<CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
|
||||
<Box sx={coverSx}>
|
||||
<Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
|
||||
<Skeleton loading={true} animation={"wave"}>
|
||||
{mangaId.split("").splice(0,mangaId.length/2).join(" ")}
|
||||
</Skeleton>
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Badge>
|
||||
:
|
||||
<Manga manga={manga} children={children} />
|
||||
);
|
||||
}
|
||||
|
||||
export function Manga({manga: manga, children} : { manga: IManga, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
|
||||
const CoverRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
const mangaConnector = useContext(MangaConnectorContext).find(all => all.name == manga.mangaConnectorName);
|
||||
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
LoadMangaCover();
|
||||
}, [manga, apiUri]);
|
||||
|
||||
const LoadMangaCover = useCallback(() => {
|
||||
if(CoverRef.current == null)
|
||||
return;
|
||||
const coverUrl = GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current);
|
||||
if(CoverRef.current.src == coverUrl)
|
||||
return;
|
||||
|
||||
//Check if we can fetch the image exists (by fetching it), only then update
|
||||
getData(coverUrl).then(() => {
|
||||
if(CoverRef.current) CoverRef.current.src = coverUrl;
|
||||
});
|
||||
}, [manga, apiUri]);
|
||||
|
||||
const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
|
||||
|
||||
const maxLength = 50;
|
||||
const mangaName = manga.name.length > maxLength ? manga.name.substring(0, maxLength-3) + "..." : manga.name;
|
||||
|
||||
return (
|
||||
<Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <Tooltip color={ReleaseStatusToPalette(manga.releaseStatus)} title={manga.releaseStatus}><img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /></Tooltip> : manga.mangaConnectorName} color={ReleaseStatusToPalette(manga.releaseStatus)} size={"lg"}>
|
||||
<Card sx={{height:"fit-content",width:"fit-content"}} onClick={(e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if(interactiveElements.find(x => x == target.localName) == undefined)
|
||||
setExpanded(!expanded)}
|
||||
}>
|
||||
<CardCover>
|
||||
<img loading={"lazy"} style={coverCss} src={GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current)} alt="Manga Cover"
|
||||
ref={CoverRef}
|
||||
onError={LoadMangaCover}/>
|
||||
</CardCover>
|
||||
<CardCover sx={{
|
||||
background:
|
||||
'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
|
||||
}}/>
|
||||
<CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
|
||||
<Box sx={coverSx}>
|
||||
<Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
|
||||
{mangaName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
<MangaPopup manga={manga} open={expanded} setOpen={setExpanded}>{children}</MangaPopup>
|
||||
</Card>
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import {Badge, Box, Button, Card, CardContent, CardCover, Stack, Tooltip, Typography} from "@mui/joy";
|
||||
import {Dispatch, SetStateAction, useCallback, useContext, useEffect, useState} from "react";
|
||||
import {ApiUriContext} from "../api/fetchApi.tsx";
|
||||
import {DeleteJob, GetJobsWithType, StartJob} from "../api/Job.tsx";
|
||||
import {JobType} from "../api/types/Jobs/IJob.ts";
|
||||
import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
|
||||
import {CardHeight, CardWidth, MangaFromId} from "./Manga.tsx";
|
||||
import {PlayArrow, Remove} from "@mui/icons-material";
|
||||
import * as React from "react";
|
||||
|
||||
export default function MangaList({connected, setShowSearch}: {connected: boolean, setShowSearch: Dispatch<SetStateAction<boolean>>} ) {
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
|
||||
const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
|
||||
|
||||
const getJobList = useCallback(() => {
|
||||
if(!connected)
|
||||
return;
|
||||
GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[]));
|
||||
},[apiUri,connected]);
|
||||
|
||||
const deleteJob = useCallback((jobId: string) => {
|
||||
DeleteJob(apiUri, jobId).finally(() => getJobList());
|
||||
},[apiUri]);
|
||||
|
||||
const startJob = useCallback((jobId: string) => {
|
||||
StartJob(apiUri, jobId, true).finally(() => getJobList());
|
||||
},[apiUri]);
|
||||
|
||||
useEffect(() => {
|
||||
updateTimer();
|
||||
}, [connected, apiUri]);
|
||||
|
||||
const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
|
||||
const updateTimer = useCallback(() => {
|
||||
if(!connected){
|
||||
clearTimeout(timerRef.current);
|
||||
return;
|
||||
}else{
|
||||
if(timerRef.current === undefined) {
|
||||
console.log("Added timer!");
|
||||
getJobList();
|
||||
timerRef.current = setInterval(getJobList, 2000);
|
||||
}
|
||||
}
|
||||
}, [getJobList, connected, timerRef]);
|
||||
|
||||
return(
|
||||
<Stack direction="row" spacing={1} flexWrap={"wrap"} sx={{overflowX: 'hidden', overflowY: 'auto' /* Badge overflow */}} paddingTop={"6px" /* Badge overflow */}>
|
||||
<Badge invisible sx={{margin: "8px !important"}}>
|
||||
<Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
|
||||
<CardCover sx={{margin:"var(--Card-padding)"}}>
|
||||
<img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + "px"}} />
|
||||
</CardCover>
|
||||
<CardCover sx={{
|
||||
background: 'rgba(234, 119, 246, 0.14)',
|
||||
backdropFilter: 'blur(6.9px)',
|
||||
webkitBackdropFilter: 'blur(6.9px)',
|
||||
}}/>
|
||||
<CardContent>
|
||||
<Box style={{height: CardHeight + "px", width: CardWidth + "px"}} >
|
||||
<Typography level={"h1"}>Search</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Badge>
|
||||
{jobList?.map((job) => (
|
||||
<MangaFromId key={job.mangaId} mangaId={job.mangaId}>
|
||||
<Tooltip title={"Last run: " + new Date(job.lastExecution).toLocaleString()}>
|
||||
<Button color={"success"} endDecorator={<PlayArrow />} onClick={() => startJob(job.jobId)}>Start</Button>
|
||||
</Tooltip>
|
||||
<Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>
|
||||
</MangaFromId>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
import IManga from "../api/types/IManga.ts";
|
||||
import {Badge, Box, Chip, CircularProgress, Drawer, Input, Link, Skeleton, Stack, Typography} from "@mui/joy";
|
||||
import React, {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
|
||||
import {
|
||||
GetLatestChapterAvailable,
|
||||
GetLatestChapterDownloaded,
|
||||
GetMangaCoverImageUrl,
|
||||
SetIgnoreThreshold
|
||||
} from "../api/Manga.tsx";
|
||||
import {ApiUriContext, getData} from "../api/fetchApi.tsx";
|
||||
import MarkdownPreview from "@uiw/react-markdown-preview";
|
||||
import {CardHeight} from "./Manga.tsx";
|
||||
import IChapter from "../api/types/IChapter.ts";
|
||||
import {MangaReleaseStatus, ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
|
||||
import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
|
||||
import {MangaContext} from "../api/Contexts/MangaContext.tsx";
|
||||
import ModalClose from "@mui/joy/ModalClose";
|
||||
|
||||
|
||||
export function MangaPopupFromId({mangaId, open, setOpen, children} : {mangaId: string | null, open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
|
||||
const mangaContext = useContext(MangaContext);
|
||||
|
||||
const [manga, setManga] = useState<IManga | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || mangaId === null)
|
||||
return;
|
||||
mangaContext.GetManga(mangaId).then(setManga);
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
manga === undefined ?
|
||||
<Drawer anchor="bottom" size="lg" open={open} onClose={() => setOpen(false)}>
|
||||
<ModalClose />
|
||||
<Stack direction="column" spacing={2} margin={"10px"}>
|
||||
{ /* Cover and Description */ }
|
||||
<Stack direction="row" spacing={2} margin={"10px"}>
|
||||
<Badge sx={{margin:"8px !important"}} color={ReleaseStatusToPalette(MangaReleaseStatus.Unreleased)} size={"lg"}>
|
||||
<img src="/blahaj.png" alt="Manga Cover"/>
|
||||
</Badge>
|
||||
<Box>
|
||||
<Skeleton loading={true} animation={"wave"}>
|
||||
{mangaId?.split("").splice(0,mangaId.length/2).join(" ")}
|
||||
</Skeleton>
|
||||
<Stack direction={"row"} flexWrap={"wrap"} useFlexGap={true} spacing={0.3} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
|
||||
{mangaId?.split("").filter(x => Number.isNaN(x)).map(_ =>
|
||||
<Skeleton loading={true} animation={"wave"}>
|
||||
<Chip>Wow</Chip>
|
||||
</Skeleton>
|
||||
)}
|
||||
</Stack>
|
||||
<MarkdownPreview style={{backgroundColor: "transparent", color: "var(--joy-palette-neutral-50)", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{ /* Actions */ }
|
||||
<Stack direction="row" spacing={2}>
|
||||
{children}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Drawer>
|
||||
:
|
||||
<MangaPopup manga={manga} open={open} setOpen={setOpen}>{children}</MangaPopup>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MangaPopup({manga, open, setOpen, children} : {manga: IManga | null, open: boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
|
||||
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
|
||||
const CoverRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
const LoadMangaCover = useCallback(() => {
|
||||
if(CoverRef.current == null || manga == null)
|
||||
return;
|
||||
if (!open)
|
||||
return;
|
||||
const coverUrl = GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current);
|
||||
if(CoverRef.current.src == coverUrl)
|
||||
return;
|
||||
|
||||
//Check if we can fetch the image exists (by fetching it), only then update
|
||||
getData(coverUrl).then(() => {
|
||||
if(CoverRef.current) CoverRef.current.src = coverUrl;
|
||||
});
|
||||
}, [manga, apiUri, open])
|
||||
|
||||
useEffect(() => {
|
||||
if(!open)
|
||||
return;
|
||||
LoadMaxChapter();
|
||||
LoadDownloadedChapter();
|
||||
LoadMangaCover();
|
||||
}, [open]);
|
||||
|
||||
const [mangaMaxChapter, setMangaMaxChapter] = useState<IChapter>();
|
||||
const [maxChapterLoading, setMaxChapterLoading] = useState<boolean>(true);
|
||||
const LoadMaxChapter = useCallback(() => {
|
||||
if(manga == null)
|
||||
return;
|
||||
setMaxChapterLoading(true);
|
||||
GetLatestChapterAvailable(apiUri, manga.mangaId)
|
||||
.then(setMangaMaxChapter)
|
||||
.finally(() => setMaxChapterLoading(false));
|
||||
}, [manga, apiUri]);
|
||||
|
||||
const [mangaDownloadedChapter, setMangaDownloadedChapter] = useState<IChapter>();
|
||||
const [downloadedChapterLoading, setDownloadedChapterLoading] = useState<boolean>(true);
|
||||
const LoadDownloadedChapter = useCallback(() => {
|
||||
if(manga == null)
|
||||
return;
|
||||
setDownloadedChapterLoading(true);
|
||||
GetLatestChapterDownloaded(apiUri, manga.mangaId)
|
||||
.then(setMangaDownloadedChapter)
|
||||
.finally(() => setDownloadedChapterLoading(false));
|
||||
}, [manga, apiUri]);
|
||||
|
||||
const [updatingThreshold, setUpdatingThreshold] = useState<boolean>(false);
|
||||
const updateIgnoreThreshold = useCallback((value: number) => {
|
||||
if(manga == null)
|
||||
return;
|
||||
setUpdatingThreshold(true);
|
||||
SetIgnoreThreshold(apiUri, manga.mangaId, value).finally(() => setUpdatingThreshold(false));
|
||||
},[manga, apiUri])
|
||||
|
||||
const mangaConnector = useContext(MangaConnectorContext).find(all => all.name == manga?.mangaConnectorName);
|
||||
|
||||
return (
|
||||
<Drawer anchor="bottom" size="lg" open={open} onClose={() => setOpen(false)}>
|
||||
<ModalClose />
|
||||
<Stack direction="column" spacing={2} margin={"10px"}>
|
||||
{ /* Cover and Description */ }
|
||||
<Stack direction="row" spacing={2} margin={"10px"}>
|
||||
<Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /> : manga?.mangaConnectorName} color={ReleaseStatusToPalette(manga?.releaseStatus??MangaReleaseStatus.Unreleased)} size={"lg"}>
|
||||
<img src="/blahaj.png" alt="Manga Cover"
|
||||
ref={CoverRef}
|
||||
onLoad={LoadMangaCover}/>
|
||||
</Badge>
|
||||
<Box>
|
||||
<Link target={"_blank"} href={manga?.websiteUrl} level={"h2"}>
|
||||
{manga?.name}
|
||||
</Link>
|
||||
<Stack direction={"row"} flexWrap={"wrap"} useFlexGap={true} spacing={0.3} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
|
||||
{manga?.authors?.map(author => <Chip key={author.authorId} variant={"outlined"} size={"md"} color={"success"}>{author.authorName}</Chip>)}
|
||||
{manga?.mangaTags?.map(tag => <Chip key={tag.tag} variant={"soft"} size={"md"} color={"primary"}>{tag.tag}</Chip>)}
|
||||
{manga?.links?.map(link =>
|
||||
<Chip key={link.linkId} variant={"soft"} size={"md"} color={"warning"}>
|
||||
<Link target={"_blank"} sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
|
||||
</Chip>
|
||||
)}
|
||||
</Stack>
|
||||
<MarkdownPreview source={manga?.description} style={{backgroundColor: "transparent", color: "var(--joy-palette-neutral-50)", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{ /* Actions */ }
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Input
|
||||
type={"number"}
|
||||
placeholder={downloadedChapterLoading ? "" : mangaDownloadedChapter?.chapterNumber??"0.0"}
|
||||
startDecorator={
|
||||
<>
|
||||
{
|
||||
updatingThreshold ?
|
||||
<CircularProgress color={"primary"} size={"sm"} />
|
||||
: <Typography>Ch.</Typography>
|
||||
}
|
||||
</>
|
||||
}
|
||||
endDecorator={
|
||||
<Typography>
|
||||
<Skeleton loading={maxChapterLoading}>
|
||||
/{mangaMaxChapter?.chapterNumber??"-"}
|
||||
</Skeleton>
|
||||
</Typography>
|
||||
}
|
||||
sx={{width:"min-content"}}
|
||||
size={"md"}
|
||||
onChange={(e) => updateIgnoreThreshold(e.currentTarget.valueAsNumber)}
|
||||
/>
|
||||
{children}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
21
tranga-website/src/Components/Mangas/MangaCard.css
Normal file
21
tranga-website/src/Components/Mangas/MangaCard.css
Normal file
@@ -0,0 +1,21 @@
|
||||
.manga-card {
|
||||
width: 220px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.manga-cover-blur {
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2) 75%);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(9px);
|
||||
-webkit-backdrop-filter: blur(9px);
|
||||
}
|
||||
|
||||
.manga-card-badge-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.manga-modal {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
102
tranga-website/src/Components/Mangas/MangaCard.tsx
Normal file
102
tranga-website/src/Components/Mangas/MangaCard.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
CardCover,
|
||||
Chip,
|
||||
Link,
|
||||
Modal,
|
||||
ModalDialog,
|
||||
Stack, Tooltip,
|
||||
Typography
|
||||
} from "@mui/joy";
|
||||
import {Manga} from "../../apiClient/data-contracts.ts";
|
||||
import {Dispatch, SetStateAction, useContext, useState} from "react";
|
||||
import {MangaContext} from "../../apiClient/MangaContext.tsx";
|
||||
import "./MangaCard.css";
|
||||
import MangaConnectorBadge from "./MangaConnectorBadge.tsx";
|
||||
import ModalClose from "@mui/joy/ModalClose";
|
||||
import {ApiContext} from "../../apiClient/ApiContext.tsx";
|
||||
import MarkdownPreview from '@uiw/react-markdown-preview';
|
||||
|
||||
export function MangaCardFromId({mangaId} : {mangaId: string}) {
|
||||
const Mangas = useContext(MangaContext);
|
||||
const [manga, setManga] = useState<Manga | undefined>(undefined);
|
||||
|
||||
Mangas.GetManga(mangaId).then(setManga);
|
||||
|
||||
return <MangaCard manga={manga} />
|
||||
}
|
||||
|
||||
export function MangaCard({manga} : {manga: Manga | undefined}) {
|
||||
if (manga === undefined)
|
||||
return PlaceHolderCard();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<MangaConnectorBadge manga={manga}>
|
||||
<Card className={"manga-card"} onClick={() => setOpen(true)}>
|
||||
<CardCover className={"manga-cover"}>
|
||||
<MangaCover manga={manga} />
|
||||
</CardCover>
|
||||
<CardCover className={"manga-cover-blur"} />
|
||||
<CardContent className={"manga-content"}>
|
||||
<Typography level={"title-lg"}>{manga?.name}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<MangaModal manga={manga} open={open} setOpen={setOpen} />
|
||||
</MangaConnectorBadge>
|
||||
);
|
||||
}
|
||||
|
||||
function MangaModal({manga, open, setOpen}: {manga: Manga | undefined, open: boolean, setOpen: Dispatch<SetStateAction<boolean>>}) {
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={() => setOpen(false)} className={"manga-modal"}>
|
||||
<ModalDialog style={{width:'100%'}}>
|
||||
<ModalClose />
|
||||
<Tooltip title={<Stack spacing={1}>{manga?.altTitles?.map(title => <Chip>{title.title}</Chip>)}</Stack>}>
|
||||
<Typography level={"h4"} width={"fit-content"}>{manga?.name}</Typography>
|
||||
</Tooltip>
|
||||
<Stack direction={"row"} spacing={2}>
|
||||
<Box className={"manga-card"}>
|
||||
<MangaCover manga={manga} />
|
||||
</Box>
|
||||
<Stack direction={"column"} sx={{width: "calc(100% - 230px)"}}>
|
||||
<Stack direction={"row"} flexWrap={"wrap"} useFlexGap spacing={0.5}>
|
||||
{manga?.mangaTags?.map((tag) => <Chip key={tag.tag}>{tag.tag}</Chip>)}
|
||||
{manga?.links?.map((link) => <Chip key={link.key}><Link href={link.linkUrl}>{link.linkProvider}</Link></Chip>)}
|
||||
</Stack>
|
||||
<Box>
|
||||
<MarkdownPreview source={manga?.description}/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</ModalDialog>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function PlaceHolderCard(){
|
||||
return (
|
||||
<Badge>
|
||||
<Card className={"manga-card"}>
|
||||
<CardCover className={"manga-cover"}>
|
||||
<img src={"/blahaj.png"} />
|
||||
</CardCover>
|
||||
<CardCover className={"manga-cover-blur"} />
|
||||
</Card>
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
function MangaCover({manga}: {manga: Manga | undefined}) {
|
||||
const api = useContext(ApiContext);
|
||||
const uri = manga ? `${api.baseUrl}/v2/Manga/${manga?.key}/Cover` : "blahaj.png";
|
||||
|
||||
return (
|
||||
<img src={uri} style={{width: "100%", height: "100%", objectFit: "cover", borderRadius: "var(--CardCover-radius)"}} />
|
||||
);
|
||||
}
|
||||
21
tranga-website/src/Components/Mangas/MangaConnectorBadge.tsx
Normal file
21
tranga-website/src/Components/Mangas/MangaConnectorBadge.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { Badge } from "@mui/joy";
|
||||
import {Manga, MangaConnector} from "../../apiClient/data-contracts.ts";
|
||||
import {ReactElement, useContext, useEffect, useState} from "react";
|
||||
import {MangaConnectorContext} from "../../App.tsx";
|
||||
import "./MangaCard.css"
|
||||
|
||||
export default function MangaConnectorBadge ({manga, children} : {manga: Manga, children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) {
|
||||
const context = useContext(MangaConnectorContext);
|
||||
const [connectors, setConnectors] = useState<MangaConnector[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (context)
|
||||
setConnectors(context.filter(con => Object.keys(manga.idsOnMangaConnectors??[]).find(name => con.name == name)));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Badge badgeContent={connectors?.map(connector => <img key={connector.name} src={connector.iconUrl} className={"manga-card-badge-icon"} />)}>
|
||||
{children}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
3
tranga-website/src/Components/Mangas/MangaList.css
Normal file
3
tranga-website/src/Components/Mangas/MangaList.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.manga-list {
|
||||
margin: 15px;
|
||||
}
|
||||
24
tranga-website/src/Components/Mangas/MangaList.tsx
Normal file
24
tranga-website/src/Components/Mangas/MangaList.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import {useContext, useState} from "react";
|
||||
import {ApiContext} from "../../apiClient/ApiContext.tsx";
|
||||
import {MangaCardFromId} from "./MangaCard.tsx";
|
||||
import {Stack} from "@mui/joy";
|
||||
import "./MangaList.css";
|
||||
|
||||
export default function MangaList (){
|
||||
const Api = useContext(ApiContext);
|
||||
|
||||
const [mangaIds, setMangaIds] = useState<string[]>();
|
||||
|
||||
Api.mangaList().then((response) => {
|
||||
if (!response.ok)
|
||||
return;
|
||||
setMangaIds(response.data);
|
||||
});
|
||||
|
||||
return (
|
||||
<Stack className={"manga-list"} direction={"row"} useFlexGap={true} spacing={2} flexWrap={"wrap"}>
|
||||
{mangaIds?.map(id => <MangaCardFromId key={id} mangaId={id} />)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
}
|
||||
@@ -1,202 +0,0 @@
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Drawer,
|
||||
Input,
|
||||
ListItemDecorator,
|
||||
Option,
|
||||
Select, SelectOption,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Step,
|
||||
StepIndicator,
|
||||
Stepper,
|
||||
Typography
|
||||
} from "@mui/joy";
|
||||
import ModalClose from "@mui/joy/ModalClose";
|
||||
import IMangaConnector from "../api/types/IMangaConnector";
|
||||
import {useCallback, useContext, useEffect, useState} from "react";
|
||||
import {ApiUriContext} from "../api/fetchApi.tsx";
|
||||
import {GetAllConnectors} from "../api/MangaConnector.tsx";
|
||||
import IManga from "../api/types/IManga.ts";
|
||||
import {SearchNameOnConnector, SearchUrl} from "../api/Search.tsx";
|
||||
import {Manga} from "./Manga.tsx";
|
||||
import Add from "@mui/icons-material/Add";
|
||||
import React from "react";
|
||||
import {CreateDownloadAvailableChaptersJob} from "../api/Job.tsx";
|
||||
import ILocalLibrary from "../api/types/ILocalLibrary.ts";
|
||||
import {GetLibraries} from "../api/LocalLibrary.tsx";
|
||||
import { LibraryBooks } from "@mui/icons-material";
|
||||
|
||||
export default function Search({open, setOpen}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>}){
|
||||
|
||||
const [step, setStep] = useState<number>(2);
|
||||
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>();
|
||||
const [mangaConnectorsLoading, setMangaConnectorsLoading] = useState<boolean>(true);
|
||||
const [selectedMangaConnector, setSelectedMangaConnector] = useState<IMangaConnector>();
|
||||
|
||||
const loadMangaConnectors = useCallback(() => {
|
||||
setMangaConnectorsLoading(true);
|
||||
GetAllConnectors(apiUri).then(setMangaConnectors).finally(() => setMangaConnectorsLoading(false));
|
||||
}, [apiUri]);
|
||||
|
||||
const [results, setResults] = useState<IManga[]|undefined>([]);
|
||||
const [resultsLoading, setResultsLoading] = useState<boolean>(false);
|
||||
|
||||
const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{
|
||||
if(mangaConnector === undefined && !IsValidUrl(value))
|
||||
return;
|
||||
setResults(undefined);
|
||||
setResultsLoading(true);
|
||||
setStep(3);
|
||||
if (IsValidUrl(value)){
|
||||
SearchUrl(apiUri, value).then((r) => setResults([r])).finally(() => setResultsLoading(false));
|
||||
}else if (mangaConnector != undefined){
|
||||
SearchNameOnConnector(apiUri, mangaConnector.name, value).then(setResults).finally(() => setResultsLoading(false));
|
||||
}
|
||||
},[apiUri])
|
||||
|
||||
function IsValidUrl(str : string) : boolean {
|
||||
const pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
|
||||
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
|
||||
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
|
||||
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
|
||||
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
|
||||
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
|
||||
return !!pattern.test(str);
|
||||
}
|
||||
|
||||
const [localLibraries, setLocalLibraries] = useState<ILocalLibrary[]>();
|
||||
const [localLibrariesLoading, setLocalLibrariesLoading] = useState<boolean>(true);
|
||||
const [selectedLibraryId, setSelectedLibraryId] = useState<string>();
|
||||
|
||||
const loadLocalLibraries = useCallback(() => {
|
||||
setLocalLibrariesLoading(true);
|
||||
GetLibraries(apiUri).then(setLocalLibraries).finally(() => setLocalLibrariesLoading(false));
|
||||
}, [apiUri]);
|
||||
|
||||
useEffect(() => {
|
||||
loadMangaConnectors();
|
||||
loadLocalLibraries();
|
||||
},[apiUri]);
|
||||
|
||||
useEffect(() => {
|
||||
loadMangaConnectors();
|
||||
loadLocalLibraries();
|
||||
}, []);
|
||||
|
||||
function renderValue(option: SelectOption<string> | null) {
|
||||
if (!option) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ListItemDecorator>
|
||||
<Avatar size="sm" src={mangaConnectors?.find((o) => o.name === option.value)?.iconUrl} />
|
||||
</ListItemDecorator>
|
||||
{option.label}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
return (
|
||||
<Drawer size={"lg"} anchor={"right"} open={open} onClose={() => {
|
||||
if(step > 2)
|
||||
setStep(2);
|
||||
setResults([]);
|
||||
setOpen(false);
|
||||
}}>
|
||||
<ModalClose />
|
||||
<Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}>
|
||||
<Step indicator={
|
||||
<StepIndicator variant={step==1?"solid":"outlined"} color={(mangaConnectors?.length??0) < 1 ? "danger" : "primary"}>
|
||||
1
|
||||
</StepIndicator>}>
|
||||
<Skeleton loading={mangaConnectorsLoading}>
|
||||
<Select
|
||||
color={(mangaConnectors?.length??0) < 1 ? "danger" : "neutral"}
|
||||
disabled={mangaConnectorsLoading || resultsLoading || mangaConnectors?.length == null || mangaConnectors.length < 1}
|
||||
placeholder={"Select Connector"}
|
||||
slotProps={{
|
||||
listbox: {
|
||||
sx: {
|
||||
'--ListItemDecorator-size': '44px',
|
||||
},
|
||||
},
|
||||
}}
|
||||
sx={{ '--ListItemDecorator-size': '44px', minWidth: 240 }}
|
||||
renderValue={renderValue}
|
||||
onChange={(_e, newValue) => {
|
||||
setSelectedMangaConnector(mangaConnectors?.find((o) => o.name === newValue));
|
||||
setStep(2);
|
||||
setResults(undefined);
|
||||
}}
|
||||
endDecorator={<Chip size={"sm"} color={mangaConnectors?.length??0 < 1 ? "danger" : "primary"}>{mangaConnectors?.length}</Chip>}>
|
||||
{mangaConnectors?.map((connector: IMangaConnector) => ConnectorOption(connector))}
|
||||
</Select>
|
||||
</Skeleton>
|
||||
</Step>
|
||||
<Step indicator={
|
||||
<StepIndicator variant={step==2?"solid":"outlined"} color="primary">
|
||||
2
|
||||
</StepIndicator>}>
|
||||
<Input disabled={resultsLoading} placeholder={"Name or Url " + (selectedMangaConnector ? selectedMangaConnector.baseUris[0] : "")} onKeyDown={(e) => {
|
||||
setStep(2);
|
||||
setResults(undefined);
|
||||
if(e.key === "Enter") {
|
||||
StartSearch(selectedMangaConnector, e.currentTarget.value);
|
||||
}
|
||||
}}/>
|
||||
</Step>
|
||||
<Step indicator={
|
||||
<StepIndicator variant={step==3?"solid":"outlined"} color="primary">
|
||||
3
|
||||
</StepIndicator>}>
|
||||
<Typography endDecorator={<Chip size={"sm"} color={"primary"}>{results?.length??"-"}</Chip>}>Results</Typography>
|
||||
<Skeleton loading={resultsLoading}>
|
||||
<Stack direction={"row"} spacing={1} flexWrap={"wrap"}>
|
||||
{results?.map((result) =>
|
||||
<Manga key={result.mangaId} manga={result}>
|
||||
<Select
|
||||
placeholder={"Select Library"}
|
||||
defaultValue={""}
|
||||
startDecorator={<LibraryBooks />}
|
||||
value={selectedLibraryId}
|
||||
onChange={(_e, newValue) => setSelectedLibraryId(newValue!)}>
|
||||
{localLibrariesLoading ?
|
||||
<Option value={""} disabled>Loading <CircularProgress color={"primary"} size={"sm"} /></Option>
|
||||
:
|
||||
(localLibraries??[]).map(library => {
|
||||
return (
|
||||
<Option value={library.localLibraryId}>{library.libraryName} ({library.basePath})</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
<Button disabled={localLibrariesLoading || selectedLibraryId === undefined} onClick={() => {
|
||||
CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {localLibraryId: selectedLibraryId!,recurrenceTimeMs: 1000 * 60 * 60 * 3, language: "en"})
|
||||
}} endDecorator={<Add />}>Watch</Button>
|
||||
</Manga>)}
|
||||
</Stack>
|
||||
</Skeleton>
|
||||
</Step>
|
||||
</Stepper>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
function ConnectorOption(connector: IMangaConnector){
|
||||
return (
|
||||
<Option key={connector.name} value={connector.name} sx={{position: "relative"}}>
|
||||
<ListItemDecorator>
|
||||
<Avatar size="sm" src={connector.iconUrl} />
|
||||
</ListItemDecorator>
|
||||
{connector.name}
|
||||
</Option>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
import IBackendSettings from "../../api/types/IBackendSettings.ts";
|
||||
import {useCallback, useContext, useEffect, useState} from "react";
|
||||
import {ApiUriContext} from "../../api/fetchApi.tsx";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
ColorPaletteProp,
|
||||
Switch,
|
||||
Typography
|
||||
} from "@mui/joy";
|
||||
import * as React from "react";
|
||||
import {GetAprilFoolsToggle, UpdateAprilFoolsToggle} from "../../api/BackendSettings.tsx";
|
||||
|
||||
export default function ImageProcessing({backendSettings}: {backendSettings?: IBackendSettings}) {
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [color, setColor] = useState<ColorPaletteProp>("neutral");
|
||||
const [value, setValue] = useState<boolean>(backendSettings?.aprilFoolsMode??false);
|
||||
|
||||
const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
const valueChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
|
||||
setColor("warning");
|
||||
clearTimeout(timerRef.current);
|
||||
timerRef.current = setTimeout(() => {
|
||||
UpdateAprilFoolsMode(e.target.checked);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setValue(backendSettings?.aprilFoolsMode??false);
|
||||
}, [backendSettings]);
|
||||
|
||||
const UpdateAprilFoolsMode = useCallback((val: boolean) => {
|
||||
UpdateAprilFoolsToggle(apiUri, val)
|
||||
.then(() => GetAprilFoolsToggle(apiUri))
|
||||
.then((val) => setValue(val))
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [apiUri]);
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary>April Fools Mode</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography endDecorator={
|
||||
<Switch disabled={backendSettings === undefined || loading}
|
||||
onChange={valueChanged}
|
||||
color={color}
|
||||
checked={value} />
|
||||
}>
|
||||
Toggle
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import IBackendSettings from "../../api/types/IBackendSettings";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary, Chip,
|
||||
CircularProgress,
|
||||
ColorPaletteProp,
|
||||
Divider,
|
||||
Input,
|
||||
Stack, Tooltip, Typography
|
||||
} from "@mui/joy";
|
||||
import {KeyboardEventHandler, useCallback, useContext, useState} from "react";
|
||||
import {ApiUriContext} from "../../api/fetchApi.tsx";
|
||||
import {UpdateChapterNamingScheme} from "../../api/BackendSettings.tsx";
|
||||
|
||||
export default function ChapterNamingScheme({backendSettings}: {backendSettings?: IBackendSettings}) {
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [value, setValue] = useState<string>("");
|
||||
const [color, setColor] = useState<ColorPaletteProp>("neutral");
|
||||
|
||||
const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
|
||||
if(e.key === "Enter") {
|
||||
setLoading(true);
|
||||
UpdateChapterNamingScheme(apiUri, value)
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
}, [apiUri])
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary>Chapter Naming Scheme</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Input disabled={backendSettings === undefined || loading}
|
||||
placeholder={"Chapter Naming Scheme"}
|
||||
defaultValue={backendSettings?.chapterNamingScheme}
|
||||
onKeyDown={keyDown}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
color={color}
|
||||
endDecorator={(loading ? <CircularProgress color={"primary"} size={"sm"} /> : null)}
|
||||
/>
|
||||
<Typography level={"title-sm"}>Placeholders:</Typography>
|
||||
<Stack direction="row" spacing={1} divider={<Divider />}>
|
||||
<Tooltip arrow placement="bottom" size="md" variant="outlined"
|
||||
title={"Manga Title"} >
|
||||
<Chip color={"primary"}>%M</Chip>
|
||||
</Tooltip>
|
||||
<Tooltip arrow placement="bottom" size="md" variant="outlined"
|
||||
title={"Volume Number"} >
|
||||
<Chip color={"primary"}>%V</Chip>
|
||||
</Tooltip>
|
||||
<Tooltip arrow placement="bottom" size="md" variant="outlined"
|
||||
title={"Chapter Number"} >
|
||||
<Chip color={"primary"}>%C</Chip>
|
||||
</Tooltip>
|
||||
<Tooltip arrow placement="bottom" size="md" variant="outlined"
|
||||
title={"Chapter Title"} >
|
||||
<Chip color={"primary"}>%T</Chip>
|
||||
</Tooltip>
|
||||
<Tooltip arrow placement="bottom" size="md" variant="outlined"
|
||||
title={"Year"} >
|
||||
<Chip color={"primary"}>%Y</Chip>
|
||||
</Tooltip>
|
||||
<Tooltip arrow placement="bottom" size="md" variant="outlined"
|
||||
title={"First Author"} >
|
||||
<Chip color={"primary"}>%A</Chip>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import IBackendSettings from "../../api/types/IBackendSettings";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Button,
|
||||
ColorPaletteProp,
|
||||
Input, Stack
|
||||
} from "@mui/joy";
|
||||
import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
|
||||
import {ApiUriContext} from "../../api/fetchApi.tsx";
|
||||
import {
|
||||
ResetFlareSolverrUrl,
|
||||
SetFlareSolverrUrl, TestFlareSolverrUrl,
|
||||
} from "../../api/BackendSettings.tsx";
|
||||
|
||||
export default function FlareSolverr({backendSettings}: {backendSettings?: IBackendSettings}) {
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [value, setValue] = useState<string>(backendSettings?.flareSolverrUrl??"");
|
||||
const [color, setColor] = useState<ColorPaletteProp>("neutral");
|
||||
|
||||
const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
|
||||
if(value === undefined) return;
|
||||
if(e.key === "Enter") {
|
||||
setLoading(true);
|
||||
SetFlareSolverrUrl(apiUri, value)
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
}, [apiUri, value])
|
||||
|
||||
const Reset = useCallback(() => {
|
||||
setLoading(true);
|
||||
ResetFlareSolverrUrl(apiUri)
|
||||
.then(() => Test())
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [apiUri]);
|
||||
|
||||
const Test = useCallback(() => {
|
||||
setLoading(true);
|
||||
TestFlareSolverrUrl(apiUri)
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [apiUri]);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(backendSettings?.flareSolverrUrl??"");
|
||||
}, [backendSettings]);
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary>FlareSolverr</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Input disabled={backendSettings === undefined || loading}
|
||||
placeholder={"FlareSolverr URL"}
|
||||
value={value}
|
||||
onKeyDown={keyDown}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
color={color}
|
||||
endDecorator={<Stack direction={"row"} spacing={1}>
|
||||
<Button onClick={Reset} loading={loading}>Reset</Button>
|
||||
<Button onClick={Test} loading={loading}>Test</Button>
|
||||
</Stack>}
|
||||
/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
import IBackendSettings from "../../api/types/IBackendSettings.ts";
|
||||
import {ChangeEvent, useCallback, useContext, useEffect, useRef, useState} from "react";
|
||||
import {ApiUriContext} from "../../api/fetchApi.tsx";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary, ColorPaletteProp, Input, Stack, Switch, Typography,
|
||||
} from "@mui/joy";
|
||||
import {
|
||||
GetBWImageToggle,
|
||||
GetImageCompressionValue,
|
||||
UpdateBWImageToggle,
|
||||
UpdateImageCompressionValue
|
||||
} from "../../api/BackendSettings.tsx";
|
||||
|
||||
export default function ImageProcessing ({backendSettings}: { backendSettings?: IBackendSettings }) {
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
|
||||
useEffect(() => {
|
||||
setBwImages(backendSettings?.bwImages??false);
|
||||
setCompression(backendSettings?.compression??100);
|
||||
}, [backendSettings]);
|
||||
|
||||
const [bwImages, setBwImages] = useState<boolean>(backendSettings?.bwImages??false);
|
||||
const [bwImagesLoading, setBwImagesLoading] = useState(false);
|
||||
const [bwImagesColor, setBwImagesColor] = useState<ColorPaletteProp>("neutral");
|
||||
const bwTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
const bwValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
|
||||
setBwImages(e.target.checked);
|
||||
setBwImagesColor("warning");
|
||||
clearTimeout(bwTimerRef.current);
|
||||
bwTimerRef.current = setTimeout(() => {
|
||||
UpdateBwImages(e.target.checked);
|
||||
}, 1000);
|
||||
}
|
||||
const UpdateBwImages = useCallback((val : boolean) => {
|
||||
setBwImagesLoading(true);
|
||||
UpdateBWImageToggle(apiUri, val)
|
||||
.then(() => GetBWImageToggle(apiUri))
|
||||
.then(setBwImages)
|
||||
.then(() => setBwImagesColor("success"))
|
||||
.catch(() => setBwImagesColor("danger"))
|
||||
.finally(() => setBwImagesLoading(false));
|
||||
},[apiUri]);
|
||||
|
||||
const [compression, setCompression] = useState<number>(backendSettings?.compression??100);
|
||||
const [compressionLoading, setCompressionLoading] = useState(false);
|
||||
const [compressionColor, setCompressionColor] = useState<ColorPaletteProp>("neutral");
|
||||
const compressionTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
const compressionCheckedChanged = (e : ChangeEvent<HTMLInputElement>) => {
|
||||
setCompressionColor("warning");
|
||||
if(!e.target.checked)
|
||||
setCompression(100);
|
||||
else
|
||||
setCompression(50);
|
||||
clearTimeout(compressionTimerRef.current);
|
||||
bwTimerRef.current = setTimeout(() => {
|
||||
UpdateImageCompression(e.target.checked ? 50 : 100);
|
||||
}, 1000);
|
||||
}
|
||||
const compressionValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
|
||||
setCompressionColor("warning");
|
||||
setCompression(parseInt(e.target.value));
|
||||
clearTimeout(compressionTimerRef.current);
|
||||
bwTimerRef.current = setTimeout(() => {
|
||||
UpdateImageCompression(parseInt(e.target.value));
|
||||
}, 1000);
|
||||
}
|
||||
const UpdateImageCompression = useCallback((val : number) => {
|
||||
setCompressionLoading(true);
|
||||
UpdateImageCompressionValue(apiUri, val)
|
||||
.then(() => GetImageCompressionValue(apiUri))
|
||||
.then(setCompression)
|
||||
.then(() => setCompressionColor("success"))
|
||||
.catch(() => setCompressionColor("danger"))
|
||||
.finally(() => setCompressionLoading(false));
|
||||
},[apiUri]);
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary>Image Processing</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Stack>
|
||||
<Typography endDecorator={
|
||||
<Switch disabled={backendSettings === undefined || bwImagesLoading}
|
||||
onChange={bwValueChanged}
|
||||
color={bwImagesColor}
|
||||
checked={bwImages} />
|
||||
}>B/W Images</Typography>
|
||||
<Typography endDecorator={
|
||||
<Input type={"number"} value={compression} onChange={compressionValueChanged} startDecorator={
|
||||
<Switch disabled={backendSettings === undefined || compressionLoading}
|
||||
onChange={compressionCheckedChanged}
|
||||
color={compressionColor}
|
||||
checked={compression < 100} />
|
||||
} />
|
||||
}>Compression</Typography>
|
||||
</Stack>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import IBackendSettings from "../../api/types/IBackendSettings.ts";
|
||||
import {useCallback, useContext, useState} from "react";
|
||||
import {ApiUriContext} from "../../api/fetchApi.tsx";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Button,
|
||||
ColorPaletteProp,
|
||||
Input,
|
||||
Stack,
|
||||
Typography
|
||||
} from "@mui/joy";
|
||||
import {RequestLimitType} from "../../api/types/EnumRequestLimitType.ts";
|
||||
import {ResetRequestLimit, ResetRequestLimits, UpdateRequestLimit} from "../../api/BackendSettings.tsx";
|
||||
import {Restore} from "@mui/icons-material";
|
||||
|
||||
export default function RequestLimits({backendSettings}: {backendSettings?: IBackendSettings}) {
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
|
||||
const [color, setColor] = useState<ColorPaletteProp>("neutral");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const Update = useCallback((target: HTMLInputElement, limit: RequestLimitType) => {
|
||||
setLoading(true);
|
||||
UpdateRequestLimit(apiUri, limit, Number.parseInt(target.value))
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
},[apiUri])
|
||||
|
||||
const Reset = useCallback((limit: RequestLimitType) => {
|
||||
setLoading(true);
|
||||
ResetRequestLimit(apiUri, limit)
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [apiUri]);
|
||||
|
||||
const ResetAll = useCallback(() => {
|
||||
setLoading(true);
|
||||
ResetRequestLimits(apiUri)
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [apiUri]);
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary>Request Limits</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Stack spacing={1} direction="column">
|
||||
<Button loading={backendSettings === undefined} onClick={ResetAll} size={"sm"} variant={"outlined"} endDecorator={<Restore />} color={"warning"}>Reset all</Button>
|
||||
<Item type={RequestLimitType.Default} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
|
||||
<Item type={RequestLimitType.MangaInfo} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
|
||||
<Item type={RequestLimitType.MangaImage} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
|
||||
<Item type={RequestLimitType.MangaDexFeed} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
|
||||
<Item type={RequestLimitType.MangaDexImage} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
|
||||
</Stack>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
|
||||
function Item({type, color, loading, backendSettings, Reset, Update}:
|
||||
{type: RequestLimitType, color: ColorPaletteProp, loading: boolean, backendSettings: IBackendSettings | undefined, Reset: (x: RequestLimitType) => void, Update: (a: HTMLInputElement, x: RequestLimitType) => void}) {
|
||||
return (
|
||||
<Input slotProps={{input: {min: 0, max: 360}}}
|
||||
color={color}
|
||||
startDecorator={<Typography sx={{width:"140px"}}>{type}</Typography>}
|
||||
endDecorator={<Button onClick={() => Reset(type)}>Reset</Button>}
|
||||
disabled={loading} type={"number"}
|
||||
defaultValue={backendSettings?.requestLimits[type]}
|
||||
placeholder={"Default"}
|
||||
required
|
||||
onKeyDown={(e) => {
|
||||
if(e.key == "Enter")
|
||||
Update(e.target as HTMLInputElement, type);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
74
tranga-website/src/Components/Settings/Settings.tsx
Normal file
74
tranga-website/src/Components/Settings/Settings.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import Drawer from '@mui/joy/Drawer';
|
||||
import ModalClose from '@mui/joy/ModalClose';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionGroup,
|
||||
AccordionSummary, Button, ColorPaletteProp,
|
||||
DialogContent,
|
||||
DialogTitle, Input,
|
||||
Link, Stack
|
||||
} from "@mui/joy";
|
||||
import './Settings.css';
|
||||
import * as React from "react";
|
||||
import {createContext, Dispatch, useContext, useEffect, useState} from "react";
|
||||
import {Article} from '@mui/icons-material';
|
||||
import {TrangaSettings} from "../../apiClient/data-contracts.ts";
|
||||
import {ApiContext} from "../../apiClient/ApiContext.tsx";
|
||||
|
||||
export const SettingsContext = createContext<TrangaSettings>({});
|
||||
|
||||
export default function Settings({setApiUri} : {setApiUri: Dispatch<React.SetStateAction<string>>}) {
|
||||
const Api = useContext(ApiContext);
|
||||
const [settings, setSettings] = useState<TrangaSettings>({});
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const [apiUriColor, setApiUriColor] = useState<ColorPaletteProp>("neutral");
|
||||
const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
|
||||
const [apiUriAccordionOpen, setApiUriAccordionOpen] = React.useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
Api.settingsList().then((response) => {
|
||||
setSettings(response.data)
|
||||
});
|
||||
}, []);
|
||||
|
||||
const apiUriChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
|
||||
clearTimeout(timerRef.current);
|
||||
setApiUriColor("warning");
|
||||
timerRef.current = setTimeout(() => {
|
||||
setApiUri(e.target.value);
|
||||
setApiUriColor("success");
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsContext value={settings}>
|
||||
<Button onClick={() => setOpen(true)}>Settings</Button>
|
||||
<Drawer size={"lg"} open={open} onClose={() => setOpen(false)}>
|
||||
<ModalClose />
|
||||
<DialogTitle>Settings</DialogTitle>
|
||||
<DialogContent>
|
||||
<AccordionGroup>
|
||||
<Accordion expanded={apiUriAccordionOpen} onChange={(_e, expanded) => setApiUriAccordionOpen(expanded)}>
|
||||
<AccordionSummary>ApiUri</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Input
|
||||
color={apiUriColor}
|
||||
placeholder={"http(s)://"}
|
||||
type={"url"}
|
||||
defaultValue={Api.baseUrl}
|
||||
onChange={apiUriChanged} />
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
<Stack spacing={2} direction="row">
|
||||
<Link target={"_blank"} href={Api.baseUrl + "/swagger"}><Article />Swagger Doc</Link>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
</Drawer>
|
||||
</SettingsContext>
|
||||
);
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
import IBackendSettings from "../../api/types/IBackendSettings";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionSummary,
|
||||
Button,
|
||||
ColorPaletteProp,
|
||||
Input
|
||||
} from "@mui/joy";
|
||||
import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
|
||||
import {ApiUriContext} from "../../api/fetchApi.tsx";
|
||||
import {GetUserAgent, ResetUserAgent, UpdateUserAgent} from "../../api/BackendSettings.tsx";
|
||||
|
||||
export default function UserAgent({backendSettings}: {backendSettings?: IBackendSettings}) {
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [value, setValue] = useState<string>(backendSettings?.userAgent??"");
|
||||
const [color, setColor] = useState<ColorPaletteProp>("neutral");
|
||||
|
||||
const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
|
||||
if(value === undefined) return;
|
||||
if(e.key === "Enter") {
|
||||
setLoading(true);
|
||||
UpdateUserAgent(apiUri, value)
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}
|
||||
}, [apiUri, value])
|
||||
|
||||
const Reset = useCallback(() => {
|
||||
setLoading(true);
|
||||
ResetUserAgent(apiUri)
|
||||
.then(() => GetUserAgent(apiUri))
|
||||
.then((val) => setValue(val))
|
||||
.then(() => setColor("success"))
|
||||
.catch(() => setColor("danger"))
|
||||
.finally(() => setLoading(false));
|
||||
}, [apiUri]);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(backendSettings?.userAgent??"");
|
||||
}, [backendSettings]);
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary>UserAgent</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Input disabled={backendSettings === undefined || loading}
|
||||
placeholder={"UserAgent"}
|
||||
value={value}
|
||||
onKeyDown={keyDown}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
color={color}
|
||||
endDecorator={<Button onClick={Reset} loading={loading}>Reset</Button>}
|
||||
/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
import Drawer from '@mui/joy/Drawer';
|
||||
import ModalClose from '@mui/joy/ModalClose';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionDetails,
|
||||
AccordionGroup,
|
||||
AccordionSummary, CircularProgress, ColorPaletteProp,
|
||||
DialogContent,
|
||||
DialogTitle, Input,
|
||||
Link, Stack
|
||||
} from "@mui/joy";
|
||||
import './Settings.css';
|
||||
import * as React from "react";
|
||||
import {useCallback, useContext, useEffect, useState} from "react";
|
||||
import {ApiUriContext} from "./api/fetchApi.tsx";
|
||||
import IBackendSettings from "./api/types/IBackendSettings.ts";
|
||||
import { GetSettings } from './api/BackendSettings.tsx';
|
||||
import UserAgent from "./Components/Settings/UserAgent.tsx";
|
||||
import ImageProcessing from "./Components/Settings/ImageProcessing.tsx";
|
||||
import ChapterNamingScheme from "./Components/Settings/ChapterNamingScheme.tsx";
|
||||
import AprilFoolsMode from './Components/Settings/AprilFoolsMode.tsx';
|
||||
import RequestLimits from "./Components/Settings/RequestLimits.tsx";
|
||||
import FlareSolverr from "./Components/Settings/FlareSolverr.tsx";
|
||||
import {Article} from '@mui/icons-material';
|
||||
|
||||
const checkConnection = async (apiUri: string): Promise<boolean> =>{
|
||||
return fetch(`${apiUri}/swagger/v2/swagger.json`,
|
||||
{
|
||||
method: 'GET',
|
||||
})
|
||||
.then((response) => {
|
||||
if(!(response.ok && response.status == 200))
|
||||
return false;
|
||||
return response.json().then((json) => (json as {openapi:string}).openapi.match("[0-9]+(?:\.[0-9]+)+")?true:false).catch(() => false);
|
||||
})
|
||||
.catch(() => {
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
export default function Settings({open, setOpen, setApiUri, setConnected}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>, setConnected:React.Dispatch<React.SetStateAction<boolean>>}) {
|
||||
|
||||
const apiUri = useContext(ApiUriContext);
|
||||
|
||||
const [apiUriColor, setApiUriColor] = useState<ColorPaletteProp>("neutral");
|
||||
const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
|
||||
const [apiUriAccordionOpen, setApiUriAccordionOpen] = React.useState(true);
|
||||
const [checking, setChecking] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
OnCheckConnection(apiUri);
|
||||
}, []);
|
||||
|
||||
const apiUriChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
|
||||
clearTimeout(timerRef.current);
|
||||
setApiUriColor("warning");
|
||||
timerRef.current = setTimeout(() => {
|
||||
OnCheckConnection(e.target.value);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
const OnCheckConnection = (uri: string) => {
|
||||
console.log("Checking connection...");
|
||||
setChecking(true);
|
||||
checkConnection(uri)
|
||||
.then((result) => {
|
||||
setConnected(result);
|
||||
if(result)
|
||||
console.log("Connected!");
|
||||
setApiUriAccordionOpen(!result);
|
||||
setApiUriColor(result ? "success" : "danger");
|
||||
if(result)
|
||||
setApiUri(uri);
|
||||
})
|
||||
.finally(() => setChecking(false));
|
||||
}
|
||||
|
||||
const [backendSettings, setBackendSettings] = useState<IBackendSettings>();
|
||||
|
||||
const getBackendSettings = useCallback(() => {
|
||||
GetSettings(apiUri).then(setBackendSettings);
|
||||
}, [apiUri]);
|
||||
|
||||
useEffect(() => {
|
||||
getBackendSettings();
|
||||
}, [checking]);
|
||||
|
||||
return (
|
||||
<Drawer size={"lg"} open={open} onClose={() => setOpen(false)}>
|
||||
<ModalClose />
|
||||
<DialogTitle>Settings</DialogTitle>
|
||||
<DialogContent>
|
||||
<AccordionGroup>
|
||||
<Accordion expanded={apiUriAccordionOpen} onChange={(_e, expanded) => setApiUriAccordionOpen(expanded)}>
|
||||
<AccordionSummary>ApiUri</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Input
|
||||
disabled={checking}
|
||||
color={apiUriColor}
|
||||
placeholder={"http(s)://"}
|
||||
type={"url"}
|
||||
defaultValue={apiUri}
|
||||
onChange={apiUriChanged}
|
||||
onKeyDown={(e) => {
|
||||
if(e.key === "Enter") {
|
||||
clearTimeout(timerRef.current);
|
||||
OnCheckConnection(e.currentTarget.value);
|
||||
}
|
||||
}}
|
||||
endDecorator={(checking ? <CircularProgress color={apiUriColor} size={"sm"} /> : null)} />
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<UserAgent backendSettings={backendSettings} />
|
||||
<ImageProcessing backendSettings={backendSettings} />
|
||||
<ChapterNamingScheme backendSettings={backendSettings} />
|
||||
<AprilFoolsMode backendSettings={backendSettings} />
|
||||
<RequestLimits backendSettings={backendSettings} />
|
||||
<FlareSolverr backendSettings={backendSettings} />
|
||||
</AccordionGroup>
|
||||
<Stack spacing={2} direction="row">
|
||||
<Link target={"_blank"} href={apiUri + "/swagger"}><Article />Swagger Doc</Link>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
import {deleteData, getData, patchData, postData} from './fetchApi.tsx';
|
||||
import IBackendSettings from "./types/IBackendSettings.ts";
|
||||
import IRequestLimits from "./types/IRequestLimits.ts";
|
||||
import {RequestLimitType} from "./types/EnumRequestLimitType.ts";
|
||||
|
||||
export const GetSettings = async (apiUri: string) : Promise<IBackendSettings> => {
|
||||
return await getData(`${apiUri}/v2/Settings`) as Promise<IBackendSettings>;
|
||||
}
|
||||
|
||||
export const GetUserAgent = async (apiUri: string) : Promise<string> => {
|
||||
return await getData(`${apiUri}/v2/Settings/UserAgent`) as Promise<string>;
|
||||
}
|
||||
|
||||
export const UpdateUserAgent = async (apiUri: string, userAgent: string)=> {
|
||||
if(userAgent === undefined || userAgent === null)
|
||||
return Promise.reject(`userAgent was not provided`);
|
||||
return patchData(`${apiUri}/v2/Settings/UserAgent`, userAgent);
|
||||
}
|
||||
|
||||
export const ResetUserAgent = async (apiUri: string) => {
|
||||
return deleteData(`${apiUri}/v2/Settings/UserAgent`);
|
||||
}
|
||||
|
||||
export const GetRequestLimits = async(apiUri: string) : Promise<IRequestLimits> => {
|
||||
return await getData(`${apiUri}/v2/Settings/RequestLimits`) as Promise<IRequestLimits>;
|
||||
}
|
||||
|
||||
export const ResetRequestLimits = async (apiUri: string) => {
|
||||
return deleteData(`${apiUri}/v2/Settings/RequestLimits`);
|
||||
}
|
||||
|
||||
export const UpdateRequestLimit = async (apiUri: string, requestType: RequestLimitType, value: number) => {
|
||||
if(requestType === undefined || requestType === null || value === undefined || value === null)
|
||||
return Promise.reject();
|
||||
return patchData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`, value);
|
||||
}
|
||||
|
||||
export const ResetRequestLimit = async (apiUri: string, requestType: RequestLimitType) => {
|
||||
if(requestType === undefined || requestType === null)
|
||||
return Promise.reject("requestType was not provided");
|
||||
return deleteData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`);
|
||||
}
|
||||
|
||||
export const GetImageCompressionValue = async (apiUri: string) : Promise<number> => {
|
||||
return await getData(`${apiUri}/v2/Settings/ImageCompression`) as Promise<number>;
|
||||
}
|
||||
|
||||
export const UpdateImageCompressionValue = async (apiUri: string, value: number) => {
|
||||
if(value === undefined || value === null)
|
||||
return Promise.reject("value was not provided");
|
||||
return patchData(`${apiUri}/v2/Settings/ImageCompression`, value);
|
||||
}
|
||||
|
||||
export const GetBWImageToggle = async (apiUri: string) : Promise<boolean> => {
|
||||
return await getData(`${apiUri}/v2/Settings/BWImages`) as Promise<boolean>;
|
||||
}
|
||||
|
||||
export const UpdateBWImageToggle = async (apiUri: string, value: boolean) => {
|
||||
if(value === undefined || value === null)
|
||||
return Promise.reject("value was not provided");
|
||||
return patchData(`${apiUri}/v2/Settings/BWImages`, value);
|
||||
}
|
||||
|
||||
export const GetAprilFoolsToggle = async (apiUri: string) : Promise<boolean> => {
|
||||
return await getData(`${apiUri}/v2/Settings/AprilFoolsMode`) as Promise<boolean>;
|
||||
}
|
||||
|
||||
export const UpdateAprilFoolsToggle = async (apiUri: string, value: boolean) => {
|
||||
if(value === undefined || value === null)
|
||||
return Promise.reject("value was not provided");
|
||||
return patchData(`${apiUri}/v2/Settings/AprilFoolsMode`, value);
|
||||
}
|
||||
|
||||
export const GetChapterNamingScheme = async (apiUri: string) : Promise<string> => {
|
||||
return await getData(`${apiUri}/v2/Settings/ChapterNamingScheme`) as Promise<string>;
|
||||
}
|
||||
|
||||
export const UpdateChapterNamingScheme = async (apiUri: string, value: string) => {
|
||||
return patchData(`${apiUri}/v2/Settings/ChapterNamingScheme`, value);
|
||||
}
|
||||
|
||||
export const SetFlareSolverrUrl = async (apiUri: string, value: string) => {
|
||||
return postData(`${apiUri}/v2/Settings/FlareSolverr/Url`, value);
|
||||
}
|
||||
|
||||
export const ResetFlareSolverrUrl = async (apiUri: string) => {
|
||||
return deleteData(`${apiUri}/v2/Settings/FlareSolverr/Url`);
|
||||
}
|
||||
|
||||
export const TestFlareSolverrUrl = async (apiUri: string) => {
|
||||
return postData(`${apiUri}/v2/Settings/FlareSolverr/Test`);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import {getData} from "./fetchApi.tsx";
|
||||
import IChapter from "./types/IChapter.ts";
|
||||
|
||||
export const GetChapterFromId = async (apiUri: string, chapterId: string): Promise<IChapter> => {
|
||||
if(chapterId === undefined || chapterId === null)
|
||||
return Promise.reject(`chapterId was not provided`);
|
||||
return await getData(`${apiUri}/v2/Query/Chapter/${chapterId}`) as Promise<IChapter>;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import {createContext} from "react";
|
||||
import IChapter from "../types/IChapter.ts";
|
||||
|
||||
export const ChapterContext = createContext<{chapters: IChapter[], GetChapter: (chapterId: string) => Promise<IChapter | undefined>}>(
|
||||
{
|
||||
chapters : [],
|
||||
GetChapter: _ => Promise.resolve(undefined)
|
||||
}
|
||||
);
|
||||
@@ -1,4 +0,0 @@
|
||||
import {createContext} from "react";
|
||||
import IMangaConnector from "../types/IMangaConnector.ts";
|
||||
|
||||
export const MangaConnectorContext = createContext<IMangaConnector[]>([]);
|
||||
@@ -1,9 +0,0 @@
|
||||
import {createContext} from "react";
|
||||
import IManga, {DefaultManga} from "../types/IManga.ts";
|
||||
|
||||
export const MangaContext = createContext<{mangas: IManga[], GetManga: (mangaId: string) => Promise<IManga | undefined>}>(
|
||||
{
|
||||
mangas : [],
|
||||
GetManga: _ => Promise.resolve(DefaultManga)
|
||||
}
|
||||
);
|
||||
@@ -1,97 +0,0 @@
|
||||
import {deleteData, getData, patchData, postData, putData} from "./fetchApi";
|
||||
import IJob, {JobState, JobType} from "./types/Jobs/IJob";
|
||||
import IModifyJobRecord from "./types/records/IModifyJobRecord";
|
||||
import IDownloadAvailableChaptersJobRecord from "./types/records/IDownloadAvailableChaptersJobRecord.ts";
|
||||
|
||||
export const GetAllJobs = async (apiUri: string) : Promise<IJob[]> => {
|
||||
return await getData(`${apiUri}/v2/Job`) as Promise<IJob[]>;
|
||||
}
|
||||
|
||||
export const GetJobsWithIds = async (apiUri: string, jobIds: string[]) : Promise<IJob[]> => {
|
||||
if(jobIds === null || jobIds === undefined || jobIds.length === 0)
|
||||
return Promise.reject("jobIds was not provided");
|
||||
return await postData(`${apiUri}/v2/Job/WithIDs`, jobIds) as Promise<IJob[]>;
|
||||
}
|
||||
|
||||
export const GetJobsInState = async (apiUri: string, state: JobState) : Promise<IJob[]> => {
|
||||
if(state == null)
|
||||
return Promise.reject("state was not provided");
|
||||
return await getData(`${apiUri}/v2/Job/State/${state}`) as Promise<IJob[]>;
|
||||
}
|
||||
|
||||
export const GetJobsWithType = async (apiUri: string, jobType: JobType) : Promise<IJob[]> => {
|
||||
if(jobType == null) {
|
||||
return Promise.reject("jobType was not provided");
|
||||
}
|
||||
return await getData(`${apiUri}/v2/Job/Type/${jobType}`) as Promise<IJob[]>;
|
||||
}
|
||||
|
||||
export const GetJobsOfTypeAndWithState = async (apiUri: string, jobType: JobType, state: JobState) : Promise<IJob[]> => {
|
||||
if(jobType == null)
|
||||
return Promise.reject("jobType was not provided");
|
||||
if(state == null)
|
||||
return Promise.reject("state was not provided");
|
||||
return await getData(`${apiUri}/v2/Job/TypeAndState/${jobType}/${state}`) as Promise<IJob[]>;
|
||||
}
|
||||
|
||||
export const GetJob = async (apiUri: string, jobId: string) : Promise<IJob> => {
|
||||
if(jobId === undefined || jobId === null || jobId.length < 1)
|
||||
return Promise.reject("jobId was not provided");
|
||||
return await getData(`${apiUri}/v2/Job/${jobId}`) as Promise<IJob>;
|
||||
}
|
||||
|
||||
export const DeleteJob = async (apiUri: string, jobId: string) : Promise<void> => {
|
||||
if(jobId === undefined || jobId === null || jobId.length < 1)
|
||||
return Promise.reject("jobId was not provided");
|
||||
return await deleteData(`${apiUri}/v2/Job/${jobId}`);
|
||||
}
|
||||
|
||||
export const ModifyJob = async (apiUri: string, jobId: string, modifyData: IModifyJobRecord) : Promise<IJob> => {
|
||||
if(jobId === undefined || jobId === null || jobId.length < 1)
|
||||
return Promise.reject("jobId was not provided");
|
||||
if(modifyData === undefined || modifyData === null)
|
||||
return Promise.reject("modifyData was not provided");
|
||||
return await patchData(`${apiUri}/v2/Job/${jobId}`, modifyData) as Promise<IJob>;
|
||||
}
|
||||
|
||||
export const CreateDownloadAvailableChaptersJob = async (apiUri: string, mangaId: string, data: IDownloadAvailableChaptersJobRecord) : Promise<string[]> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(data === undefined || data === null)
|
||||
return Promise.reject("data was not provided");
|
||||
return await putData(`${apiUri}/v2/Job/DownloadAvailableChaptersJob/${mangaId}`, data) as Promise<string[]>;
|
||||
}
|
||||
|
||||
export const CreateDownloadSingleChapterJob = async (apiUri: string, chapterId: string) : Promise<string[]> => {
|
||||
if(chapterId === undefined || chapterId === null || chapterId.length < 1)
|
||||
return Promise.reject("chapterId was not provided");
|
||||
return await putData(`${apiUri}/v2/Job/DownloadSingleChapterJob/${chapterId}`, {}) as Promise<string[]>;
|
||||
}
|
||||
|
||||
export const CreateUpdateFilesJob = async (apiUri: string, mangaId: string) : Promise<string[]> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
return await putData(`${apiUri}/v2/Job/UpdateFilesJob/${mangaId}`, {}) as Promise<string[]>;
|
||||
}
|
||||
|
||||
export const CreateUpdateAllFilesJob = async (apiUri: string) : Promise<string[]> => {
|
||||
return await putData(`${apiUri}/v2/Job/UpdateAllFilesJob`, {}) as Promise<string[]>;
|
||||
}
|
||||
|
||||
export const CreateUpdateMetadataJob = async (apiUri: string, mangaId: string) : Promise<string[]> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
return await putData(`${apiUri}/v2/Job/UpdateMetadataJob/${mangaId}`, {}) as Promise<string[]>;
|
||||
}
|
||||
|
||||
export const CreateUpdateAllMetadataJob = async (apiUri: string) : Promise<string[]> => {
|
||||
return await putData(`${apiUri}/v2/Job/UpdateAllMetadataJob`, {}) as Promise<string[]>;
|
||||
}
|
||||
|
||||
export const StartJob = async (apiUri: string, jobId: string, startDependencies: boolean) : Promise<object | undefined> => {
|
||||
return await postData(`${apiUri}/v2/Job/${jobId}/Start`, startDependencies);
|
||||
}
|
||||
|
||||
export const StopJob = async (apiUri: string, jobId: string) : Promise<object | undefined> => {
|
||||
return await postData(`${apiUri}/v2/Job/${jobId}/Stop`);
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import ILocalLibrary from "./types/ILocalLibrary.ts";
|
||||
import {deleteData, getData, patchData, putData} from "./fetchApi.tsx";
|
||||
import INewLibraryRecord from "./types/records/INewLibraryRecord.ts";
|
||||
|
||||
export const GetLibraries = async (apiUri: string) : Promise<ILocalLibrary[]> => {
|
||||
return await getData(`${apiUri}/v2/LocalLibraries`) as Promise<ILocalLibrary[]>;
|
||||
}
|
||||
|
||||
export const GetLibrary = async (apiUri: string, libraryId: string) : Promise<ILocalLibrary> => {
|
||||
return await getData(`${apiUri}/v2/LocalLibraries/${libraryId}`) as Promise<ILocalLibrary>;
|
||||
}
|
||||
|
||||
export const CreateLibrary = async (apiUri: string, data: INewLibraryRecord) : Promise<ILocalLibrary> => {
|
||||
return await putData(`${apiUri}/v2/LocalLibraries`, data) as Promise<ILocalLibrary>
|
||||
}
|
||||
|
||||
export const DeleteLibrary = async (apiUri: string, libraryId: string) : Promise<void> => {
|
||||
return await deleteData(`${apiUri}/v2/LocalLibraries/${libraryId}`);
|
||||
}
|
||||
|
||||
export const ChangeLibraryPath = async (apiUri: string, libraryId: string, newPath: string) : Promise<object | undefined> => {
|
||||
return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeBasePath`, newPath);
|
||||
}
|
||||
|
||||
export const ChangeLibraryName = async (apiUri: string, libraryId: string, newName: string) : Promise<object | undefined> => {
|
||||
return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeName`, newName);
|
||||
}
|
||||
|
||||
export const UpdateLibrary = async (apiUri: string, libraryId: string, record: INewLibraryRecord) : Promise<object | undefined> => {
|
||||
return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}`, record);
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
import {deleteData, getData, patchData, postData} from './fetchApi.tsx';
|
||||
import IManga, {DefaultManga} from "./types/IManga.ts";
|
||||
import IChapter from "./types/IChapter.ts";
|
||||
|
||||
export const GetAllManga = async (apiUri: string) : Promise<IManga[]> => {
|
||||
return await getData(`${apiUri}/v2/Manga`) as Promise<IManga[]>;
|
||||
}
|
||||
|
||||
export const GetMangaWithIds = async (apiUri: string, mangaIds: string[]) : Promise<IManga[]> => {
|
||||
if(mangaIds === undefined || mangaIds === null || mangaIds.length < 1)
|
||||
return Promise.reject("mangaIds was not provided");
|
||||
return await postData(`${apiUri}/v2/Manga/WithIds`, mangaIds) as Promise<IManga[]>;
|
||||
}
|
||||
|
||||
export const GetMangaById = async (apiUri: string, mangaId: string) : Promise<IManga> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await getData(`${apiUri}/v2/Manga/${mangaId}`) as Promise<IManga>;
|
||||
}
|
||||
|
||||
export const DeleteManga = async (apiUri: string, mangaId: string) : Promise<void> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await deleteData(`${apiUri}/v2/Manga/${mangaId}`);
|
||||
}
|
||||
|
||||
export const GetMangaCoverImageUrl = (apiUri: string, mangaId: string, ref: HTMLImageElement | undefined | null) : string => {
|
||||
if(ref == null || mangaId === DefaultManga.mangaId)
|
||||
return "/blahaj.png";
|
||||
return `${apiUri}/v2/Manga/${mangaId}/Cover?width=${ref.clientWidth}&height=${ref.clientHeight}`;
|
||||
}
|
||||
|
||||
export const GetChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
|
||||
if(mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters`) as Promise<IChapter[]>;
|
||||
}
|
||||
|
||||
export const GetDownloadedChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/Downloaded`) as Promise<IChapter[]>;
|
||||
}
|
||||
|
||||
export const GetNotDownloadedChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/NotDownloaded`) as Promise<IChapter[]>;
|
||||
}
|
||||
|
||||
export const GetLatestChapterAvailable = async (apiUri: string, mangaId: string) : Promise<IChapter> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestAvailable`) as Promise<IChapter>;
|
||||
}
|
||||
|
||||
export const GetLatestChapterDownloaded = async (apiUri: string, mangaId: string) : Promise<IChapter> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestDownloaded`) as Promise<IChapter>;
|
||||
}
|
||||
|
||||
export const SetIgnoreThreshold = async (apiUri: string, mangaId: string, chapterThreshold: number) : Promise<object | undefined> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(chapterThreshold === undefined || chapterThreshold === null)
|
||||
return Promise.reject("chapterThreshold was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await patchData(`${apiUri}/v2/Manga/${mangaId}/IgnoreChaptersBefore`, chapterThreshold);
|
||||
}
|
||||
|
||||
export const MoveFolder = async (apiUri: string, mangaId: string, newPath: string) : Promise<object | undefined> => {
|
||||
if(mangaId === undefined || mangaId === null || mangaId.length < 1)
|
||||
return Promise.reject("mangaId was not provided");
|
||||
if(newPath === undefined || newPath === null || newPath.length < 1)
|
||||
return Promise.reject("newPath was not provided");
|
||||
if(mangaId === DefaultManga.mangaId)
|
||||
return Promise.reject("Default Manga was requested");
|
||||
return await postData(`${apiUri}/v2/Manga/{MangaId}/MoveFolder`, {newPath});
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import {getData, patchData} from './fetchApi.tsx';
|
||||
import IMangaConnector from "./types/IMangaConnector.ts";
|
||||
|
||||
export const GetAllConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
|
||||
return await getData(`${apiUri}/v2/MangaConnector`) as Promise<IMangaConnector[]>
|
||||
}
|
||||
|
||||
export const GetConnector = async (apiUri: string, mangaConnectorName: string) : Promise<IMangaConnector> => {
|
||||
return await getData(`${apiUri}/v2/MangaConnector/${mangaConnectorName}`) as Promise<IMangaConnector>;
|
||||
}
|
||||
|
||||
export const GetEnabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
|
||||
return await getData(`${apiUri}/v2/MangaConnector/enabled`) as Promise<IMangaConnector[]>
|
||||
}
|
||||
|
||||
export const GetDisabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
|
||||
return await getData(`${apiUri}/v2/MangaConnector/disabled`) as Promise<IMangaConnector[]>
|
||||
}
|
||||
|
||||
export const SetConnectorEnabled = async (apiUri: string, connectorName: string, enabled: boolean) : Promise<object | undefined> => {
|
||||
if(connectorName === undefined || connectorName === null || connectorName.length < 1)
|
||||
return Promise.reject("connectorName was not provided");
|
||||
if(enabled === undefined || enabled === null)
|
||||
return Promise.reject("enabled was not provided");
|
||||
return await patchData(`${apiUri}/v2/MangaConnector/${connectorName}/SetEnabled/${enabled}`, {});
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import {deleteData, getData, putData} from "./fetchApi.tsx";
|
||||
import INotificationConnector from "./types/INotificationConnector.ts";
|
||||
import IGotifyRecord from "./types/records/IGotifyRecord.ts";
|
||||
import INtfyRecord from "./types/records/INtfyRecord.ts";
|
||||
import IPushoverRecord from "./types/records/IPushoverRecord.ts";
|
||||
|
||||
export const GetNotificationConnectors = async (apiUri: string) : Promise<INotificationConnector[]> => {
|
||||
return await getData(`${apiUri}/v2/NotificationConnector`) as Promise<INotificationConnector[]>
|
||||
}
|
||||
|
||||
export const CreateNotificationConnector = async (apiUri: string, newConnector: INotificationConnector) : Promise<string> => {
|
||||
if(newConnector === undefined || newConnector === null)
|
||||
return Promise.reject("newConnector was not provided");
|
||||
return await putData(`${apiUri}/v2/NotificationConnector`, newConnector) as Promise<string>;
|
||||
}
|
||||
|
||||
export const GetNotificationConnectorWithId = async (apiUri: string, notificationConnectorId: string) : Promise<INotificationConnector> => {
|
||||
if(notificationConnectorId === undefined || notificationConnectorId === null || notificationConnectorId.length < 1)
|
||||
return Promise.reject("notificationConnectorId was not provided");
|
||||
return await getData(`${apiUri}/v2/NotificationConnector/${notificationConnectorId}`) as Promise<INotificationConnector>;
|
||||
}
|
||||
|
||||
export const DeleteNotificationConnectorWithId = async (apiUri: string, notificationConnectorId: string) : Promise<void> => {
|
||||
if(notificationConnectorId === undefined || notificationConnectorId === null || notificationConnectorId.length < 1)
|
||||
return Promise.reject("notificationConnectorId was not provided");
|
||||
return await deleteData(`${apiUri}/v2/NotificationConnector/${notificationConnectorId}`);
|
||||
}
|
||||
|
||||
export const CreateGotify = async (apiUri: string, gotify: IGotifyRecord) : Promise<string> => {
|
||||
if(gotify === undefined || gotify === null)
|
||||
return Promise.reject("gotify was not provided");
|
||||
return await putData(`${apiUri}/v2/NotificationConnector/Gotify`, gotify) as Promise<string>;
|
||||
}
|
||||
|
||||
export const CreateNtfy = async (apiUri: string, ntfy: INtfyRecord) : Promise<string> => {
|
||||
if(ntfy === undefined || ntfy === null)
|
||||
return Promise.reject("gotify was not provided");
|
||||
return await putData(`${apiUri}/v2/NotificationConnector/Ntfy`, ntfy) as Promise<string>;
|
||||
}
|
||||
|
||||
export const CreatePushover = async (apiUri: string, pushover: IPushoverRecord) : Promise<string> => {
|
||||
if(pushover === undefined || pushover === null)
|
||||
return Promise.reject("pushover was not provided");
|
||||
return await putData(`${apiUri}/v2/NotificationConnector/Pushover`, pushover) as Promise<string>;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import IAuthor from "./types/IAuthor.ts";
|
||||
import {getData} from "./fetchApi.tsx";
|
||||
import ILink from "./types/ILink.ts";
|
||||
|
||||
export const GetAuthor = async (apiUri: string, authorId: string) : Promise<IAuthor> => {
|
||||
if(authorId === undefined || authorId === null || authorId.length < 1)
|
||||
return Promise.reject("authorId was not provided");
|
||||
return await getData(`${apiUri}/v2/Query/Author/${authorId}`) as Promise<IAuthor>;
|
||||
}
|
||||
|
||||
export const GetLink = async (apiUri: string, linkId: string) : Promise<ILink> => {
|
||||
if(linkId === undefined || linkId === null || linkId.length < 1)
|
||||
return Promise.reject("linkId was not provided");
|
||||
return await getData(`${apiUri}/v2/Query/Link/${linkId}`) as Promise<ILink>;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import {getData, postData} from "./fetchApi.tsx";
|
||||
import IManga from "./types/IManga.ts";
|
||||
|
||||
export const SearchName = async (apiUri: string, name: string) : Promise<IManga[]> => {
|
||||
if(name === undefined || name === null || name.length < 1)
|
||||
return Promise.reject("name was not provided");
|
||||
return await postData(`${apiUri}/v2/Search/Name`, name) as Promise<IManga[]>;
|
||||
}
|
||||
|
||||
export const SearchNameOnConnector = async (apiUri: string, connectorName: string, name: string) : Promise<IManga[]> => {
|
||||
if(connectorName === undefined || connectorName === null || connectorName.length < 1)
|
||||
return Promise.reject("connectorName was not provided");
|
||||
if(name === undefined || name === null || name.length < 1)
|
||||
return Promise.reject("name was not provided");
|
||||
return await getData(`${apiUri}/v2/Search/${connectorName}/${name}`) as Promise<IManga[]>;
|
||||
}
|
||||
|
||||
export const SearchUrl = async (apiUri: string, url: string) : Promise<IManga> => {
|
||||
if(url === undefined || url === null || url.length < 1)
|
||||
return Promise.reject("name was not provided");
|
||||
return await postData(`${apiUri}/v2/Search/Url`, url) as Promise<IManga>;
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import {createContext} from "react";
|
||||
|
||||
export const ApiUriContext = createContext<string>("");
|
||||
|
||||
export function getData(uri: string) : Promise<object | undefined> {
|
||||
return makeRequestWrapper("GET", uri, null);
|
||||
}
|
||||
|
||||
export function postData(uri: string, content?: object | string | number | boolean | null) : Promise<object | undefined> {
|
||||
return makeRequestWrapper("POST", uri, content);
|
||||
}
|
||||
|
||||
export function deleteData(uri: string) : Promise<void> {
|
||||
return makeRequestWrapper("DELETE", uri, null) as Promise<void>;
|
||||
}
|
||||
|
||||
export function patchData(uri: string, content: object | string | number | boolean) : Promise<object | undefined> {
|
||||
return makeRequestWrapper("patch", uri, content);
|
||||
}
|
||||
|
||||
export function putData(uri: string, content: object | string | number | boolean) : Promise<object | undefined> {
|
||||
return makeRequestWrapper("PUT", uri, content);
|
||||
}
|
||||
|
||||
function makeRequestWrapper(method: string, uri: string, content?: object | string | number | null | boolean) : Promise<object | undefined>{
|
||||
return makeRequest(method, uri, content)
|
||||
.then((result) => result as Promise<object>)
|
||||
.catch((e) => {
|
||||
console.warn(e);
|
||||
return Promise.reject(e);
|
||||
});
|
||||
}
|
||||
|
||||
let currentlyRequestedEndpoints: string[] = [];
|
||||
function makeRequest(method: string, uri: string, content?: object | string | number | null | boolean) : Promise<object | void> {
|
||||
const id = method + uri;
|
||||
if(currentlyRequestedEndpoints.find(x => x == id) != undefined)
|
||||
return Promise.reject(`DO NOT REPORT! Already requested: ${method} ${uri}`);
|
||||
currentlyRequestedEndpoints.push(id);
|
||||
return fetch(uri,
|
||||
{
|
||||
method: method,
|
||||
headers : {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: content ? JSON.stringify(content) : null
|
||||
})
|
||||
.then(function(response){
|
||||
if(!response.ok){
|
||||
if(response.status === 503){
|
||||
currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1)
|
||||
let retryHeaderVal = response.headers.get("Retry-After");
|
||||
let seconds = 10;
|
||||
if(retryHeaderVal === null){
|
||||
return response.text().then(text => {
|
||||
seconds = parseInt(text);
|
||||
return new Promise(resolve => setTimeout(resolve, seconds * 1000))
|
||||
.then(() => {
|
||||
return makeRequest(method, uri, content);
|
||||
});
|
||||
});
|
||||
}else {
|
||||
seconds = parseInt(retryHeaderVal);
|
||||
return new Promise(resolve => setTimeout(resolve, seconds * 1000))
|
||||
.then(() => {
|
||||
return makeRequest(method, uri, content);
|
||||
});
|
||||
}
|
||||
}else
|
||||
throw new Error(response.statusText);
|
||||
}
|
||||
let json = response.json();
|
||||
return json.then((json) => json).catch(() => null);
|
||||
})
|
||||
.catch(function(err : Error){
|
||||
console.error(`Error ${method}ing Data ${uri}\n${err}`);
|
||||
return Promise.reject();
|
||||
}).finally(() => currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1));
|
||||
}
|
||||
|
||||
export function isValidUri(uri: string) : boolean{
|
||||
try {
|
||||
new URL(uri);
|
||||
return true;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import {ColorPaletteProp} from "@mui/joy";
|
||||
|
||||
export enum MangaReleaseStatus {
|
||||
Continuing = "Continuing",
|
||||
Completed = "Completed",
|
||||
OnHiatus = "OnHiatus",
|
||||
Cancelled = "Cancelled",
|
||||
Unreleased = "Unreleased",
|
||||
}
|
||||
|
||||
export function ReleaseStatusToPalette(status: MangaReleaseStatus): ColorPaletteProp {
|
||||
switch (status) {
|
||||
case MangaReleaseStatus.Continuing:
|
||||
return "success";
|
||||
case MangaReleaseStatus.Completed:
|
||||
return "primary";
|
||||
case MangaReleaseStatus.Cancelled:
|
||||
return "danger";
|
||||
case MangaReleaseStatus.Unreleased:
|
||||
return "neutral";
|
||||
case MangaReleaseStatus.OnHiatus:
|
||||
return "warning";
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export enum RequestLimitType {
|
||||
Default = "Default",
|
||||
MangaDexFeed = "MangaDexFeed",
|
||||
MangaImage = "MangaImage",
|
||||
MangaCover = "MangaCover",
|
||||
MangaDexImage = "MangaDexImage",
|
||||
MangaInfo = "MangaInfo"
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export default interface IAuthor {
|
||||
authorId: string;
|
||||
authorName: string;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
export default interface IBackendSettings {
|
||||
downloadLocation: string;
|
||||
workingDirectory: string;
|
||||
userAgent: string;
|
||||
aprilFoolsMode: boolean;
|
||||
requestLimits: {
|
||||
Default: number,
|
||||
MangaInfo: number,
|
||||
MangaDexFeed: number,
|
||||
MangaDexImage: number,
|
||||
MangaImage: number,
|
||||
MangaCover: number,
|
||||
};
|
||||
compression: number;
|
||||
bwImages: boolean;
|
||||
startNewJobTimeoutMs: number;
|
||||
chapterNamingScheme: string;
|
||||
flareSolverrUrl: string;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
export default interface IChapter{
|
||||
chapterId: string;
|
||||
parentMangaId: string;
|
||||
volumeNumber: number | null;
|
||||
chapterNumber: string;
|
||||
url: string;
|
||||
title: string | null;
|
||||
fileName: string | null;
|
||||
downloaded: boolean;
|
||||
fullArchiveFilePath: string;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export default interface IFrontendSettings {
|
||||
jobInterval: Date;
|
||||
apiUri: string;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
export default interface ILibraryConnector {
|
||||
libraryConnectorId: string;
|
||||
libraryType: LibraryType;
|
||||
baseUrl: string;
|
||||
auth: string;
|
||||
}
|
||||
|
||||
export enum LibraryType {
|
||||
Komga = "Komga",
|
||||
Kavita = "Kavita"
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default interface ILink {
|
||||
linkId: string;
|
||||
linkProvider: string;
|
||||
linkUrl: string;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default interface ILocalLibrary {
|
||||
localLibraryId: string;
|
||||
basePath: string;
|
||||
libraryName: string;
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import {MangaReleaseStatus} from "./EnumMangaReleaseStatus";
|
||||
import IAuthor from "./IAuthor.ts";
|
||||
import IMangaAltTitle from "./IMangaAltTitle.ts";
|
||||
import IMangaTag from "./IMangaTag.ts";
|
||||
import ILink from "./ILink.ts";
|
||||
|
||||
export default interface IManga{
|
||||
mangaId: string;
|
||||
idOnConnectorSite: string;
|
||||
name: string;
|
||||
description: string;
|
||||
websiteUrl: string;
|
||||
releaseStatus: MangaReleaseStatus;
|
||||
libraryId: string | null;
|
||||
mangaConnectorName: string;
|
||||
authors: IAuthor[] | null;
|
||||
mangaTags: IMangaTag[] | null;
|
||||
links: ILink[] | null;
|
||||
altTitles: IMangaAltTitle[] | null;
|
||||
ignoreChaptersBefore: number;
|
||||
directoryName: string;
|
||||
year: number | null;
|
||||
originalLanguage: string | null;
|
||||
chapterIds: string[] | null;
|
||||
}
|
||||
|
||||
export const DefaultManga : IManga = {
|
||||
mangaId: "Loading",
|
||||
idOnConnectorSite: "Loading",
|
||||
name: "Loading",
|
||||
description: "Loading",
|
||||
websiteUrl: "",
|
||||
releaseStatus: MangaReleaseStatus.Continuing,
|
||||
libraryId: null,
|
||||
mangaConnectorName: "Loading",
|
||||
authors: null,
|
||||
mangaTags: null,
|
||||
links: null,
|
||||
altTitles: null,
|
||||
ignoreChaptersBefore: 0,
|
||||
directoryName: "",
|
||||
year: 1999,
|
||||
originalLanguage: "en",
|
||||
chapterIds: null
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default interface IMangaAltTitle {
|
||||
altTitleId: string;
|
||||
language: string;
|
||||
title: string;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default interface IMangaConnector {
|
||||
name: string;
|
||||
supportedLanguages: string[];
|
||||
iconUrl: string;
|
||||
baseUris: string[];
|
||||
enabled: boolean;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default interface IMangaTag {
|
||||
tag: string;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default interface INotificationConnector {
|
||||
name: string;
|
||||
url: string;
|
||||
headers: Record<string, string>[];
|
||||
httpMethod: string;
|
||||
body: string;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export default interface IRequestLimits {
|
||||
Default: number;
|
||||
MangaDexFeed: number;
|
||||
MangaImage: number;
|
||||
MangaCover: number;
|
||||
MangaDexImage: number;
|
||||
MangaInfo: number;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJobWithMangaId from "./IJobWithMangaId.ts";
|
||||
|
||||
export default interface IDownloadAvailableChaptersJob extends IJobWithMangaId {
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJobWithMangaId from "./IJobWithMangaId.ts";
|
||||
|
||||
export default interface IDownloadMangaCoverJob extends IJobWithMangaId {
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJobWithChapterId from "./IJobWithChapterId.tsx";
|
||||
|
||||
export default interface IDownloadSingleChapterJob extends IJobWithChapterId {
|
||||
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
export default interface IJob{
|
||||
jobId: string;
|
||||
parentJobId: string | null;
|
||||
jobType: JobType;
|
||||
recurrenceMs: number;
|
||||
lastExecution: Date;
|
||||
nextExecution: Date;
|
||||
state: JobState;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export enum JobType {
|
||||
DownloadSingleChapterJob = "DownloadSingleChapterJob",
|
||||
DownloadAvailableChaptersJob = "DownloadAvailableChaptersJob",
|
||||
DownloadMangaCoverJob = "DownloadMangaCoverJob",
|
||||
RetrieveChaptersJob = "RetrieveChaptersJob",
|
||||
UpdateChaptersDownloadedJob = "UpdateChaptersDownloadedJob",
|
||||
MoveMangaLibraryJob = "MoveMangaLibraryJob",
|
||||
UpdateCoverJob = "UpdateCoverJob"
|
||||
}
|
||||
|
||||
export function JobTypeToString(job: JobType | string): string {
|
||||
return job.replace(/([A-Z])/g, ' $1').replace("Job", "").trim();
|
||||
}
|
||||
|
||||
export enum JobState {
|
||||
FirstExecution = "FirstExecution",
|
||||
Running = "Running",
|
||||
Completed = "Completed",
|
||||
CompletedWaiting = "CompletedWaiting",
|
||||
Failed = "Failed"
|
||||
}
|
||||
|
||||
export function JobStateToString(state: JobState | string): string {
|
||||
return state.replace(/([A-Z])/g, ' $1').trim();
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJob from "./IJob.ts";
|
||||
|
||||
export default interface IJobWithChapterId extends IJob {
|
||||
chapterId: string;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJob from "./IJob.ts";
|
||||
|
||||
export default interface IJobWithMangaId extends IJob {
|
||||
mangaId: string;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import IJob from "./IJob";
|
||||
|
||||
export default interface IMoveFileOrFolderJob extends IJob {
|
||||
fromLocation: string;
|
||||
toLocation: string;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJobWithMangaId from "./IJobWithMangaId.ts";
|
||||
|
||||
export default interface IMoveMangaLibraryJob extends IJobWithMangaId {
|
||||
ToLibraryId: string;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJobWithMangaId from "./IJobWithMangaId.ts";
|
||||
|
||||
export default interface IRetrieveChaptersJob extends IJobWithMangaId {
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJobWithMangaId from "./IJobWithMangaId.ts";
|
||||
|
||||
export default interface IUpdateChaptersDownloadedJob extends IJobWithMangaId {
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import IJobWithMangaId from "./IJobWithMangaId.ts";
|
||||
|
||||
export default interface IUpdateCoverJob extends IJobWithMangaId {
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default interface IDownloadAvailableChaptersJobRecord {
|
||||
language: string;
|
||||
recurrenceTimeMs: number;
|
||||
localLibraryId: string;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default interface IGotifyRecord {
|
||||
endpoint: string;
|
||||
appToken: string;
|
||||
priority: number;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export default interface IModifyJobRecord {
|
||||
recurrenceMs: number;
|
||||
enabled: boolean;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
export default interface INewLibraryRecord {
|
||||
path: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export function Validate(record: INewLibraryRecord) : boolean {
|
||||
if(record.path.length < 1)
|
||||
return false;
|
||||
if(record.name.length < 1)
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default interface INtfyRecord {
|
||||
endpoint: string;
|
||||
username: string;
|
||||
password: string;
|
||||
topic: string;
|
||||
priority: number;
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export default interface IPushoverRecord {
|
||||
apptoken: string;
|
||||
user: string;
|
||||
}
|
||||
4
tranga-website/src/apiClient/ApiContext.tsx
Normal file
4
tranga-website/src/apiClient/ApiContext.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
import { createContext } from "react";
|
||||
import {V2} from "./V2.ts";
|
||||
|
||||
export const ApiContext = createContext<V2>(new V2());
|
||||
34
tranga-website/src/apiClient/MangaContext.tsx
Normal file
34
tranga-website/src/apiClient/MangaContext.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import {createContext, useContext} from "react";
|
||||
import {Manga} from "./data-contracts.ts";
|
||||
import {ApiContext} from "./ApiContext.tsx";
|
||||
|
||||
const mangaPromises = new Map<string, Promise<Manga | undefined>>();
|
||||
const mangas : Manga[] = [];
|
||||
|
||||
export const GetManga : (id: string) => Promise<Manga | undefined> = (id: string) => {
|
||||
const API = useContext(ApiContext);
|
||||
|
||||
const promise = mangaPromises.get(id);
|
||||
if(promise) return promise;
|
||||
const p = new Promise<Manga | undefined>((resolve, reject) => {
|
||||
let ret = mangas?.find(m => m.key == id);
|
||||
if (ret) resolve(ret);
|
||||
|
||||
console.log(`Fetching manga ${id}`);
|
||||
API.mangaDetail(id)
|
||||
.then(result => {
|
||||
if (!result.ok)
|
||||
throw new Error(`Error fetching manga detail ${id}`);
|
||||
mangas.push(result.data);
|
||||
resolve(result.data);
|
||||
}).catch(reject);
|
||||
});
|
||||
mangaPromises.set(id, p);
|
||||
return p;
|
||||
};
|
||||
|
||||
export const MangaContext = createContext<{ GetManga: (id: string) => Promise<Manga | undefined> }>(
|
||||
{
|
||||
GetManga: GetManga
|
||||
}
|
||||
);
|
||||
31
tranga-website/src/apiClient/SettingsContext.tsx
Normal file
31
tranga-website/src/apiClient/SettingsContext.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import {createContext, useContext, useState} from "react";
|
||||
import {TrangaSettings} from "./data-contracts.ts";
|
||||
import {ApiContext} from "./ApiContext.tsx";
|
||||
|
||||
const [settingsPromise, setSettingsPromise] = useState<Promise<TrangaSettings | undefined>>();
|
||||
const [settings, setSettings] = useState<TrangaSettings>();
|
||||
|
||||
const API = useContext(ApiContext);
|
||||
|
||||
export const SettingsContext = createContext<{ GetSettings: () => Promise<TrangaSettings | undefined> }>(
|
||||
{
|
||||
GetSettings: () : Promise<TrangaSettings | undefined> => {
|
||||
const promise = settingsPromise;
|
||||
if(promise) return promise;
|
||||
const p = new Promise<TrangaSettings | undefined>((resolve, reject) => {
|
||||
if (settings) resolve(settings);
|
||||
|
||||
console.log(`Fetching settings`);
|
||||
API.settingsList()
|
||||
.then(result => {
|
||||
if (!result.ok)
|
||||
throw new Error(`Error fetching settings`);
|
||||
setSettings(result.data);
|
||||
resolve(result.data);
|
||||
}).catch(reject);
|
||||
});
|
||||
setSettingsPromise(p);
|
||||
return p;
|
||||
}
|
||||
}
|
||||
);
|
||||
1308
tranga-website/src/apiClient/V2.ts
Normal file
1308
tranga-website/src/apiClient/V2.ts
Normal file
File diff suppressed because it is too large
Load Diff
335
tranga-website/src/apiClient/data-contracts.ts
Normal file
335
tranga-website/src/apiClient/data-contracts.ts
Normal file
@@ -0,0 +1,335 @@
|
||||
/* eslint-disable */
|
||||
/* tslint:disable */
|
||||
// @ts-nocheck
|
||||
/*
|
||||
* ---------------------------------------------------------------
|
||||
* ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API ##
|
||||
* ## ##
|
||||
* ## AUTHOR: acacode ##
|
||||
* ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
|
||||
* ---------------------------------------------------------------
|
||||
*/
|
||||
|
||||
export enum WorkerExecutionState {
|
||||
Failed = "Failed",
|
||||
Cancelled = "Cancelled",
|
||||
Created = "Created",
|
||||
Waiting = "Waiting",
|
||||
Running = "Running",
|
||||
Completed = "Completed",
|
||||
}
|
||||
|
||||
export enum RequestType {
|
||||
Default = "Default",
|
||||
MangaDexFeed = "MangaDexFeed",
|
||||
MangaImage = "MangaImage",
|
||||
MangaCover = "MangaCover",
|
||||
MangaDexImage = "MangaDexImage",
|
||||
MangaInfo = "MangaInfo",
|
||||
}
|
||||
|
||||
export enum MangaReleaseStatus {
|
||||
Continuing = "Continuing",
|
||||
Completed = "Completed",
|
||||
OnHiatus = "OnHiatus",
|
||||
Cancelled = "Cancelled",
|
||||
Unreleased = "Unreleased",
|
||||
}
|
||||
|
||||
export enum LibraryType {
|
||||
Komga = "Komga",
|
||||
Kavita = "Kavita",
|
||||
}
|
||||
|
||||
export interface AltTitle {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 8
|
||||
*/
|
||||
language: string;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 256
|
||||
*/
|
||||
title: string;
|
||||
key?: string | null;
|
||||
}
|
||||
|
||||
export interface Author {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 128
|
||||
*/
|
||||
authorName: string;
|
||||
key?: string | null;
|
||||
}
|
||||
|
||||
export interface BaseWorker {
|
||||
/** Workers this Worker depends on being completed before running. */
|
||||
dependsOn?: BaseWorker[] | null;
|
||||
/** Dependencies and dependencies of dependencies. See also API.Workers.BaseWorker.DependsOn. */
|
||||
allDependencies?: BaseWorker[] | null;
|
||||
/** API.Workers.BaseWorker.AllDependencies and Self. */
|
||||
dependenciesAndSelf?: BaseWorker[] | null;
|
||||
/** API.Workers.BaseWorker.DependsOn where API.Workers.WorkerExecutionState is less than Completed. */
|
||||
missingDependencies?: BaseWorker[] | null;
|
||||
allDependenciesFulfilled?: boolean;
|
||||
key?: string | null;
|
||||
}
|
||||
|
||||
export interface Chapter {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 64
|
||||
*/
|
||||
parentMangaId: string;
|
||||
idsOnMangaConnectors?: Record<string, string>;
|
||||
/** @format int32 */
|
||||
volumeNumber?: number | null;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 10
|
||||
*/
|
||||
chapterNumber: string;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 256
|
||||
*/
|
||||
title?: string | null;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 256
|
||||
*/
|
||||
fileName: string;
|
||||
downloaded: boolean;
|
||||
fullArchiveFilePath?: string | null;
|
||||
key?: string | null;
|
||||
}
|
||||
|
||||
export interface FileLibrary {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 256
|
||||
*/
|
||||
basePath: string;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 512
|
||||
*/
|
||||
libraryName: string;
|
||||
key?: string | null;
|
||||
}
|
||||
|
||||
export interface GotifyRecord {
|
||||
name?: string | null;
|
||||
endpoint?: string | null;
|
||||
appToken?: string | null;
|
||||
/** @format int32 */
|
||||
priority?: number;
|
||||
}
|
||||
|
||||
export interface LibraryConnector {
|
||||
libraryType: LibraryType;
|
||||
/**
|
||||
* @format uri
|
||||
* @minLength 0
|
||||
* @maxLength 256
|
||||
*/
|
||||
baseUrl: string;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 256
|
||||
*/
|
||||
auth: string;
|
||||
key?: string | null;
|
||||
}
|
||||
|
||||
export interface Link {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 64
|
||||
*/
|
||||
linkProvider: string;
|
||||
/**
|
||||
* @format uri
|
||||
* @minLength 0
|
||||
* @maxLength 2048
|
||||
*/
|
||||
linkUrl: string;
|
||||
key?: string | null;
|
||||
}
|
||||
|
||||
export interface Manga {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 512
|
||||
*/
|
||||
name: string;
|
||||
/** @minLength 1 */
|
||||
description: string;
|
||||
releaseStatus: MangaReleaseStatus;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 64
|
||||
*/
|
||||
libraryId?: string | null;
|
||||
authors?: Author[] | null;
|
||||
mangaTags?: MangaTag[] | null;
|
||||
links?: Link[] | null;
|
||||
altTitles?: AltTitle[] | null;
|
||||
/** @format float */
|
||||
ignoreChaptersBefore: number;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 1024
|
||||
*/
|
||||
directoryName: string;
|
||||
/** @format int32 */
|
||||
year?: number | null;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 8
|
||||
*/
|
||||
originalLanguage?: string | null;
|
||||
chapterIds?: string[] | null;
|
||||
idsOnMangaConnectors?: Record<string, string>;
|
||||
key?: string | null;
|
||||
}
|
||||
|
||||
export interface MangaConnector {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 32
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 8
|
||||
*/
|
||||
supportedLanguages: string[];
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 2048
|
||||
*/
|
||||
iconUrl: string;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 256
|
||||
*/
|
||||
baseUris: string[];
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export interface MangaTag {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 64
|
||||
*/
|
||||
tag: string;
|
||||
}
|
||||
|
||||
export interface MetadataEntry {
|
||||
mangaId?: string | null;
|
||||
metadataFetcherName?: string | null;
|
||||
identifier?: string | null;
|
||||
}
|
||||
|
||||
export interface MetadataSearchResult {
|
||||
identifier?: string | null;
|
||||
name?: string | null;
|
||||
url?: string | null;
|
||||
description?: string | null;
|
||||
coverUrl?: string | null;
|
||||
}
|
||||
|
||||
export interface NotificationConnector {
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 64
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* @format uri
|
||||
* @minLength 0
|
||||
* @maxLength 2048
|
||||
*/
|
||||
url: string;
|
||||
headers: Record<string, string>;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 8
|
||||
*/
|
||||
httpMethod: string;
|
||||
/**
|
||||
* @minLength 0
|
||||
* @maxLength 4096
|
||||
*/
|
||||
body: string;
|
||||
}
|
||||
|
||||
export interface NtfyRecord {
|
||||
name?: string | null;
|
||||
endpoint?: string | null;
|
||||
username?: string | null;
|
||||
password?: string | null;
|
||||
topic?: string | null;
|
||||
/** @format int32 */
|
||||
priority?: number;
|
||||
}
|
||||
|
||||
export interface ProblemDetails {
|
||||
type?: string | null;
|
||||
title?: string | null;
|
||||
/** @format int32 */
|
||||
status?: number | null;
|
||||
detail?: string | null;
|
||||
instance?: string | null;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface PushoverRecord {
|
||||
name?: string | null;
|
||||
appToken?: string | null;
|
||||
user?: string | null;
|
||||
}
|
||||
|
||||
export interface TrangaSettings {
|
||||
downloadLocation?: string | null;
|
||||
userAgent?: string | null;
|
||||
/** @format int32 */
|
||||
imageCompression?: number;
|
||||
blackWhiteImages?: boolean;
|
||||
flareSolverrUrl?: string | null;
|
||||
/**
|
||||
* Placeholders:
|
||||
* %M Obj Name
|
||||
* %V Volume
|
||||
* %C Chapter
|
||||
* %T Title
|
||||
* %A Author (first in list)
|
||||
* %I Chapter Internal ID
|
||||
* %i Obj Internal ID
|
||||
* %Y Year (Obj)
|
||||
*
|
||||
* ?_(...) replace _ with a value from above:
|
||||
* Everything inside the braces will only be added if the value of %_ is not null
|
||||
*/
|
||||
chapterNamingScheme?: string | null;
|
||||
/** @format int32 */
|
||||
workCycleTimeoutMs?: number;
|
||||
requestLimits?: {
|
||||
/** @format int32 */
|
||||
Default?: number;
|
||||
/** @format int32 */
|
||||
MangaDexFeed?: number;
|
||||
/** @format int32 */
|
||||
MangaImage?: number;
|
||||
/** @format int32 */
|
||||
MangaCover?: number;
|
||||
/** @format int32 */
|
||||
MangaDexImage?: number;
|
||||
/** @format int32 */
|
||||
MangaInfo?: number;
|
||||
} | null;
|
||||
downloadLanguage?: string | null;
|
||||
}
|
||||
260
tranga-website/src/apiClient/http-client.ts
Normal file
260
tranga-website/src/apiClient/http-client.ts
Normal file
@@ -0,0 +1,260 @@
|
||||
/* eslint-disable */
|
||||
/* tslint:disable */
|
||||
// @ts-nocheck
|
||||
/*
|
||||
* ---------------------------------------------------------------
|
||||
* ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API ##
|
||||
* ## ##
|
||||
* ## AUTHOR: acacode ##
|
||||
* ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
|
||||
* ---------------------------------------------------------------
|
||||
*/
|
||||
|
||||
export type QueryParamsType = Record<string | number, any>;
|
||||
export type ResponseFormat = keyof Omit<Body, "body" | "bodyUsed">;
|
||||
|
||||
export interface FullRequestParams extends Omit<RequestInit, "body"> {
|
||||
/** set parameter to `true` for call `securityWorker` for this request */
|
||||
secure?: boolean;
|
||||
/** request path */
|
||||
path: string;
|
||||
/** content type of request body */
|
||||
type?: ContentType;
|
||||
/** query params */
|
||||
query?: QueryParamsType;
|
||||
/** format of response (i.e. response.json() -> format: "json") */
|
||||
format?: ResponseFormat;
|
||||
/** request body */
|
||||
body?: unknown;
|
||||
/** base url */
|
||||
baseUrl?: string;
|
||||
/** request cancellation token */
|
||||
cancelToken?: CancelToken;
|
||||
}
|
||||
|
||||
export type RequestParams = Omit<
|
||||
FullRequestParams,
|
||||
"body" | "method" | "query" | "path"
|
||||
>;
|
||||
|
||||
export interface ApiConfig<SecurityDataType = unknown> {
|
||||
baseUrl?: string;
|
||||
baseApiParams?: Omit<RequestParams, "baseUrl" | "cancelToken" | "signal">;
|
||||
securityWorker?: (
|
||||
securityData: SecurityDataType | null,
|
||||
) => Promise<RequestParams | void> | RequestParams | void;
|
||||
customFetch?: typeof fetch;
|
||||
}
|
||||
|
||||
export interface HttpResponse<D extends unknown, E extends unknown = unknown>
|
||||
extends Response {
|
||||
data: D;
|
||||
error: E;
|
||||
}
|
||||
|
||||
type CancelToken = Symbol | string | number;
|
||||
|
||||
export enum ContentType {
|
||||
Json = "application/json",
|
||||
JsonApi = "application/vnd.api+json",
|
||||
FormData = "multipart/form-data",
|
||||
UrlEncoded = "application/x-www-form-urlencoded",
|
||||
Text = "text/plain",
|
||||
}
|
||||
|
||||
export class HttpClient<SecurityDataType = unknown> {
|
||||
public baseUrl: string = "";
|
||||
private securityData: SecurityDataType | null = null;
|
||||
private securityWorker?: ApiConfig<SecurityDataType>["securityWorker"];
|
||||
private abortControllers = new Map<CancelToken, AbortController>();
|
||||
private customFetch = (...fetchParams: Parameters<typeof fetch>) =>
|
||||
fetch(...fetchParams);
|
||||
|
||||
private baseApiParams: RequestParams = {
|
||||
credentials: "same-origin",
|
||||
headers: {},
|
||||
redirect: "follow",
|
||||
referrerPolicy: "no-referrer",
|
||||
};
|
||||
|
||||
constructor(apiConfig: ApiConfig<SecurityDataType> = {}) {
|
||||
Object.assign(this, apiConfig);
|
||||
}
|
||||
|
||||
public setSecurityData = (data: SecurityDataType | null) => {
|
||||
this.securityData = data;
|
||||
};
|
||||
|
||||
protected encodeQueryParam(key: string, value: any) {
|
||||
const encodedKey = encodeURIComponent(key);
|
||||
return `${encodedKey}=${encodeURIComponent(typeof value === "number" ? value : `${value}`)}`;
|
||||
}
|
||||
|
||||
protected addQueryParam(query: QueryParamsType, key: string) {
|
||||
return this.encodeQueryParam(key, query[key]);
|
||||
}
|
||||
|
||||
protected addArrayQueryParam(query: QueryParamsType, key: string) {
|
||||
const value = query[key];
|
||||
return value.map((v: any) => this.encodeQueryParam(key, v)).join("&");
|
||||
}
|
||||
|
||||
protected toQueryString(rawQuery?: QueryParamsType): string {
|
||||
const query = rawQuery || {};
|
||||
const keys = Object.keys(query).filter(
|
||||
(key) => "undefined" !== typeof query[key],
|
||||
);
|
||||
return keys
|
||||
.map((key) =>
|
||||
Array.isArray(query[key])
|
||||
? this.addArrayQueryParam(query, key)
|
||||
: this.addQueryParam(query, key),
|
||||
)
|
||||
.join("&");
|
||||
}
|
||||
|
||||
protected addQueryParams(rawQuery?: QueryParamsType): string {
|
||||
const queryString = this.toQueryString(rawQuery);
|
||||
return queryString ? `?${queryString}` : "";
|
||||
}
|
||||
|
||||
private contentFormatters: Record<ContentType, (input: any) => any> = {
|
||||
[ContentType.Json]: (input: any) =>
|
||||
input !== null && (typeof input === "object" || typeof input === "string")
|
||||
? JSON.stringify(input)
|
||||
: input,
|
||||
[ContentType.JsonApi]: (input: any) =>
|
||||
input !== null && (typeof input === "object" || typeof input === "string")
|
||||
? JSON.stringify(input)
|
||||
: input,
|
||||
[ContentType.Text]: (input: any) =>
|
||||
input !== null && typeof input !== "string"
|
||||
? JSON.stringify(input)
|
||||
: input,
|
||||
[ContentType.FormData]: (input: any) =>
|
||||
Object.keys(input || {}).reduce((formData, key) => {
|
||||
const property = input[key];
|
||||
formData.append(
|
||||
key,
|
||||
property instanceof Blob
|
||||
? property
|
||||
: typeof property === "object" && property !== null
|
||||
? JSON.stringify(property)
|
||||
: `${property}`,
|
||||
);
|
||||
return formData;
|
||||
}, new FormData()),
|
||||
[ContentType.UrlEncoded]: (input: any) => this.toQueryString(input),
|
||||
};
|
||||
|
||||
protected mergeRequestParams(
|
||||
params1: RequestParams,
|
||||
params2?: RequestParams,
|
||||
): RequestParams {
|
||||
return {
|
||||
...this.baseApiParams,
|
||||
...params1,
|
||||
...(params2 || {}),
|
||||
headers: {
|
||||
...(this.baseApiParams.headers || {}),
|
||||
...(params1.headers || {}),
|
||||
...((params2 && params2.headers) || {}),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected createAbortSignal = (
|
||||
cancelToken: CancelToken,
|
||||
): AbortSignal | undefined => {
|
||||
if (this.abortControllers.has(cancelToken)) {
|
||||
const abortController = this.abortControllers.get(cancelToken);
|
||||
if (abortController) {
|
||||
return abortController.signal;
|
||||
}
|
||||
return void 0;
|
||||
}
|
||||
|
||||
const abortController = new AbortController();
|
||||
this.abortControllers.set(cancelToken, abortController);
|
||||
return abortController.signal;
|
||||
};
|
||||
|
||||
public abortRequest = (cancelToken: CancelToken) => {
|
||||
const abortController = this.abortControllers.get(cancelToken);
|
||||
|
||||
if (abortController) {
|
||||
abortController.abort();
|
||||
this.abortControllers.delete(cancelToken);
|
||||
}
|
||||
};
|
||||
|
||||
public request = async <T = any, E = any>({
|
||||
body,
|
||||
secure,
|
||||
path,
|
||||
type,
|
||||
query,
|
||||
format,
|
||||
baseUrl,
|
||||
cancelToken,
|
||||
...params
|
||||
}: FullRequestParams): Promise<HttpResponse<T, E>> => {
|
||||
const secureParams =
|
||||
((typeof secure === "boolean" ? secure : this.baseApiParams.secure) &&
|
||||
this.securityWorker &&
|
||||
(await this.securityWorker(this.securityData))) ||
|
||||
{};
|
||||
const requestParams = this.mergeRequestParams(params, secureParams);
|
||||
const queryString = query && this.toQueryString(query);
|
||||
const payloadFormatter = this.contentFormatters[type || ContentType.Json];
|
||||
const responseFormat = format || requestParams.format;
|
||||
|
||||
return this.customFetch(
|
||||
`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`,
|
||||
{
|
||||
...requestParams,
|
||||
headers: {
|
||||
...(requestParams.headers || {}),
|
||||
...(type && type !== ContentType.FormData
|
||||
? { "Content-Type": type }
|
||||
: {}),
|
||||
},
|
||||
signal:
|
||||
(cancelToken
|
||||
? this.createAbortSignal(cancelToken)
|
||||
: requestParams.signal) || null,
|
||||
body:
|
||||
typeof body === "undefined" || body === null
|
||||
? null
|
||||
: payloadFormatter(body),
|
||||
},
|
||||
).then(async (response) => {
|
||||
const r = response.clone() as HttpResponse<T, E>;
|
||||
r.data = null as unknown as T;
|
||||
r.error = null as unknown as E;
|
||||
|
||||
const data = !responseFormat
|
||||
? r
|
||||
: await response[responseFormat]()
|
||||
.then((data) => {
|
||||
if (r.ok) {
|
||||
r.data = data;
|
||||
} else {
|
||||
r.error = data;
|
||||
}
|
||||
return r;
|
||||
})
|
||||
.catch((e) => {
|
||||
r.error = e;
|
||||
return r;
|
||||
});
|
||||
|
||||
if (cancelToken) {
|
||||
this.abortControllers.delete(cancelToken);
|
||||
}
|
||||
|
||||
if (!response.ok) throw data;
|
||||
return data;
|
||||
});
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user