glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-09-10 20:08:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Download change Indicator

Browse Source
This commit is contained in:
glax
2025-07-22 22:31:56 +02:00
parent 87589a2a11
commit 9e388c8ac8
1 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
tranga-website/src/Components/Mangas/MangaDownloadDialog.tsx
View File

@@ -7,6 +7,7 @@ import {MangaConnectorLinkFromId} from "../MangaConnectorLink.tsx";
import Sheet from "@mui/joy/Sheet"; import Sheet from "@mui/joy/Sheet";
import {FileLibraryContext} from "../../App.tsx"; import {FileLibraryContext} from "../../App.tsx";
import {ApiContext} from "../../apiClient/ApiContext.tsx"; import {ApiContext} from "../../apiClient/ApiContext.tsx";
import {LoadingState, StateIndicator} from "../Loading.tsx";
export default function ({manga} : {manga: Manga}) : ReactNode{ export default function ({manga} : {manga: Manga}) : ReactNode{
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@@ -51,28 +52,49 @@ function DownloadDrawer({manga, open, setOpen}: {manga: Manga, open: boolean, se
function DownloadCheckBox({mangaConnectorIdId} : {mangaConnectorIdId : string}) : ReactNode { function DownloadCheckBox({mangaConnectorIdId} : {mangaConnectorIdId : string}) : ReactNode {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [useForDownloading, setUseForDownloading] = useState<boolean>(false); const [useForDownloading, setUseForDownloading] = useState<boolean>(false);
const [loading, setLoading] = useState<LoadingState>(LoadingState.none);
useEffect(() => { useEffect(() => {
setLoading(LoadingState.loading);
Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId).then(response => { Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId).then(response => {
if (response.ok) if (response.ok){
setUseForDownloading(response.data.useForDownload as boolean); setUseForDownloading(response.data.useForDownload as boolean);
}) setLoading(LoadingState.none);
}else
setLoading(LoadingState.failure);
}).catch(_ => setLoading(LoadingState.failure));
}, []); }, []);
const onSelected = (event: ChangeEvent<HTMLInputElement>) => { const onSelected = (event: ChangeEvent<HTMLInputElement>) => {
setLoading(LoadingState.loading);
const val = event.currentTarget.checked; const val = event.currentTarget.checked;
Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId).then(response => { Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId).then(response => {
if (!response.ok) if (!response.ok){
setLoading(LoadingState.failure);
return; return;
}
Api.mangaSetAsDownloadFromCreate(response.data.objId, response.data.mangaConnectorName, val) Api.mangaSetAsDownloadFromCreate(response.data.objId, response.data.mangaConnectorName, val)
.then(response => { .then(response => {
if (response.ok) if (response.ok){
setUseForDownloading(val); setUseForDownloading(val);
}); setLoading(LoadingState.success);
}); }else
setLoading(LoadingState.failure);
}).catch(_ => setLoading(LoadingState.failure));
}).catch(_ => setLoading(LoadingState.failure));
} }
return ( return (
<Checkbox checked={useForDownloading} onChange={onSelected} label={<Typography><MangaConnectorLinkFromId MangaConnectorIdId={mangaConnectorIdId} printName={true} /></Typography>} /> <Checkbox
indeterminateIcon={StateIndicator(LoadingState.loading)}
indeterminate={loading === LoadingState.loading}
disabled={loading === LoadingState.loading}
checked={useForDownloading}
onChange={onSelected}
label={
<Typography>
<MangaConnectorLinkFromId MangaConnectorIdId={mangaConnectorIdId} printName={true} />
</Typography>
} />
); );
} }