glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-04-12 14:38:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

MangaList

Browse Source
This commit is contained in:
glax 2025-04-01 19:05:57 +02:00
parent 63b220bd79
commit 9e0eb0262e
5 changed files with 112 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
tranga-website/src/App.tsx
View File

@ -6,6 +6,7 @@ import {Badge, Button} from "@mui/joy";
import {useState} from "react";
import {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx';
import MangaList from "./Components/MangaList.tsx";
export default function App () {
@ -27,7 +28,7 @@ export default function App () {
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
<Search open={showSearch} setOpen={setShowSearch} />
<Sheet className={"app-content"}>
<MangaList />
</Sheet>
</Sheet>
</ApiUriContext.Provider>

95
tranga-website/src/Components/Manga.tsx
View File

@ -13,7 +13,7 @@ import {
} from "@mui/joy";
import IManga, {DefaultManga} from "../api/types/IManga.ts";
import {ReactElement, useCallback, useContext, useEffect, useState} from "react";
import {GetLatestChapterAvailable, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
import {GetLatestChapterAvailable, GetMangaById, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
import {ApiUriContext} from "../api/fetchApi.tsx";
import AuthorTag from "./AuthorTag.tsx";
import LinkTag from "./LinkTag.tsx";
@ -22,8 +22,27 @@ import IChapter from "../api/types/IChapter.ts";
import MarkdownPreview from "@uiw/react-markdown-preview";
import {SxProps} from "@mui/joy/styles/types";
export function Manga({manga, children} : { manga: IManga | undefined, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }) {
export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
const [manga, setManga] = useState(DefaultManga);
const [loading, setLoading] = useState(true);
const apiUri = useContext(ApiUriContext);
const loadManga = useCallback(() => {
setLoading(true);
GetMangaById(apiUri, mangaId).then(setManga).finally(() => setLoading(false));
},[apiUri, mangaId]);
useEffect(() => {
loadManga();
}, []);
return <Manga manga={manga} loading={loading} children={children} />
}
export function Manga({manga, children, loading} : { manga: IManga | undefined, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined, loading?: boolean}) {
const useManga = manga ?? DefaultManga;
loading = loading ?? false;
const apiUri = useContext(ApiUriContext);
@ -79,19 +98,25 @@ export function Manga({manga, children} : { manga: IManga | undefined, children?
}}/>
<CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
<Box sx={sideSx}>
<Link href={useManga.websiteUrl} level={"h1"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
{useManga.name}
</Link>
<Skeleton loading={loading}>
<Link href={useManga.websiteUrl} level={"h1"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
{useManga.name}
</Link>
</Skeleton>
</Box>
{
expanded ?
<Box sx={sideSx}>
<Stack direction={"row"} flexWrap={"wrap"} spacing={0.5}>
{useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
{useManga.tags.map(tag => <Chip key={tag} variant={"outlined"} size={"md"} color={"primary"}>{tag}</Chip>)}
{useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"danger"} />)}
</Stack>
<MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black"}} />
<Skeleton loading={loading} variant={"text"} level={"title-lg"}>
<Stack direction={"row"} flexWrap={"wrap"} spacing={0.5}>
{useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
{useManga.tags.map(tag => <Chip key={tag} variant={"outlined"} size={"md"} color={"primary"}>{tag}</Chip>)}
{useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"danger"} />)}
</Stack>
</Skeleton>
<Skeleton loading={loading} sx={{maxHeight:"300px"}}>
<MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black"}} />
</Skeleton>
</Box>
: null
}
@ -99,30 +124,32 @@ export function Manga({manga, children} : { manga: IManga | undefined, children?
{
expanded ?
<CardActions sx={{justifyContent:"space-between"}}>
<Input
type={"number"}
placeholder={"0.0"}
startDecorator={
<>
{
updatingThreshold ?
<CircularProgress color={"primary"} size={"sm"} />
: <Typography>Ch.</Typography>
<Skeleton loading={loading} sx={{maxHeight: "30px", maxWidth:"calc(100% - 40px)"}}>
<Input
type={"number"}
placeholder={"0.0"}
startDecorator={
<>
{
updatingThreshold ?
<CircularProgress color={"primary"} size={"sm"} />
: <Typography>Ch.</Typography>
}
</>
}
</>
}
endDecorator={
<Typography>
<Skeleton loading={maxChapterLoading}>
/{mangaMaxChapter?.chapterNumber??"Load Failed"}
</Skeleton>
</Typography>
}
sx={{width:"min-content"}}
size={"md"}
onChange={(e) => updateIgnoreThreshhold(e.currentTarget.valueAsNumber)}
/>
{children}
endDecorator={
<Typography>
<Skeleton loading={maxChapterLoading}>
/{mangaMaxChapter?.chapterNumber??"Load Failed"}
</Skeleton>
</Typography>
}
sx={{width:"min-content"}}
size={"md"}
onChange={(e) => updateIgnoreThreshhold(e.currentTarget.valueAsNumber)}
/>
{children}
</Skeleton>
</CardActions>
: null
}

36
tranga-website/src/Components/MangaList.tsx Normal file
View File

@ -0,0 +1,36 @@
import {Button, Stack} from "@mui/joy";
import {useCallback, useContext, useEffect, useState} from "react";
import {ApiUriContext} from "../api/fetchApi.tsx";
import {DeleteJob, GetJobsWithType} from "../api/Job.tsx";
import {JobType} from "../api/types/Jobs/IJob.ts";
import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
import {MangaFromId} from "./Manga.tsx";
import { Remove } from "@mui/icons-material";
export default function MangaList(){
const apiUri = useContext(ApiUriContext);
const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
const getJobList = useCallback(() => {
GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[]));
},[apiUri]);
const deleteJob = useCallback((jobId: string) => {
DeleteJob(apiUri, jobId).finally(() => getJobList());
},[apiUri]);
useEffect(() => {
getJobList();
}, [apiUri]);
return(
<Stack direction="row" spacing={1}>
{jobList.map((job) => (
<MangaFromId key={job.mangaId} mangaId={job.mangaId}>
<Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>
</MangaFromId>
))}
</Stack>
);
}

1
tranga-website/src/Components/Search.tsx
View File

@ -149,6 +149,7 @@ export default function Search({open, setOpen}:{open:boolean, setOpen:React.Disp
placeholder={"Select Library"}
defaultValue={""}
startDecorator={<LibraryBooks />}
value={selectedLibraryId}
onChange={(_e, newValue) => setSelectedLibraryId(newValue!)}>
{localLibrariesLoading ?
<Option value={""} disabled>Loading <CircularProgress color={"primary"} size={"sm"} /></Option>

24
tranga-website/src/api/types/IManga.ts
View File

@ -19,19 +19,19 @@ export default interface IManga{
}
export const DefaultManga : IManga = {
mangaId: "MangaId",
idOnConnectorSite: "ID",
name: "TestManga",
description: "Wow so much text, very cool",
websiteUrl: "https://realsite.realdomain",
mangaId: "Loading",
idOnConnectorSite: "Loading",
name: "Loading",
description: "Loading",
websiteUrl: "",
year: 1999,
originalLanguage: "lindtChoccy",
originalLanguage: "en",
releaseStatus: MangaReleaseStatus.Continuing,
folderName: "uhhh",
folderName: "Loading",
ignoreChapterBefore: 0,
mangaConnectorId: "MangaDex",
authorIds: ["We got", "Authors"],
tags: ["And we", "got Tags"],
linkIds: ["And most", "definitely", "links"],
altTitleIds: ["But not alt-titles."],
mangaConnectorId: "Loading",
authorIds: ["Loading"],
tags: ["Loading"],
linkIds: ["Loading"],
altTitleIds: ["Loading"],
}