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

Chapter Naming Scheme Settings

Browse Source
This commit is contained in:
glax 2025-04-02 00:16:13 +02:00
parent 6340c5ad03
commit e605578a34
2 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
tranga-website/src/Components/Settings/ChapterNamingScheme.tsx Normal file
View File

@ -0,0 +1,74 @@
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>
);
}

2
tranga-website/src/Settings.tsx
View File

@ -16,6 +16,7 @@ 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";
const checkConnection = async (apiUri: string): Promise<boolean> =>{
return fetch(`${apiUri}/swagger/v2/swagger.json`,
@ -103,6 +104,7 @@ export default function Settings({open, setOpen, setApiUri, setConnected}:{open:
</Accordion>
<UserAgent backendSettings={backendSettings} />
<ImageProcessing backendSettings={backendSettings} />
<ChapterNamingScheme backendSettings={backendSettings} />
</AccordionGroup>
</DialogContent>
</Drawer>