175 lines
4.1 KiB
TypeScript
175 lines
4.1 KiB
TypeScript
import SettingsIcon from "@mui/icons-material/Settings";
|
|
import { Backdrop, Box, Button, IconButton, Paper } from "@mui/material";
|
|
import { useNavigate } from "@tanstack/react-router";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import FileUpload from "react-material-file-upload";
|
|
import { socket } from "../socket";
|
|
import { CircularProgressWithLabel } from "./CircularProgressWithLabel";
|
|
|
|
export default function UploadPage() {
|
|
const [files, setFiles] = useState<File[]>([]);
|
|
const [pageId, setPageId] = useState<string | null>(null);
|
|
const [loadingState, setLoadingState] = useState<number | null>(null);
|
|
const fileTypes = ["pdf"];
|
|
const navigate = useNavigate();
|
|
|
|
const uploadFile = useCallback(async () => {
|
|
const formData = new FormData();
|
|
formData.append("file", files[0]);
|
|
const response = await fetch("http://localhost:5050/api/pitch_book", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (response.ok) {
|
|
console.log("File uploaded successfully");
|
|
const data = await response.json();
|
|
setPageId(data.id.toString());
|
|
setLoadingState(5);
|
|
} else {
|
|
console.error("Failed to upload file");
|
|
}
|
|
}, [files]);
|
|
|
|
const onConnection = useCallback(() => {
|
|
console.log("connected");
|
|
}, []);
|
|
|
|
const onProgress = useCallback(
|
|
(progress: { id: number; progress: number }) => {
|
|
if (pageId === progress.id.toString()) {
|
|
setLoadingState(progress.progress);
|
|
|
|
if (progress.progress === 100) {
|
|
setPageId(null);
|
|
setLoadingState(null);
|
|
navigate({
|
|
to: "/extractedResult/$pitchBook",
|
|
params: { pitchBook: progress.id.toString() },
|
|
});
|
|
}
|
|
}
|
|
},
|
|
[pageId, navigate],
|
|
);
|
|
|
|
useEffect(() => {
|
|
socket.on("connect", onConnection);
|
|
socket.on("progress", onProgress);
|
|
return () => {
|
|
socket.off("connect", onConnection);
|
|
socket.off("progress", onProgress);
|
|
};
|
|
}, [onConnection, onProgress]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
setPageId(null);
|
|
setLoadingState(null);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Backdrop
|
|
sx={(theme) => ({ color: "#fff", zIndex: theme.zIndex.drawer + 1 })}
|
|
open={pageId !== null && loadingState !== null && loadingState < 100}
|
|
>
|
|
<CircularProgressWithLabel
|
|
color="inherit"
|
|
value={loadingState || 0}
|
|
size={60}
|
|
/>
|
|
</Backdrop>
|
|
<Box
|
|
display="flex"
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
height="100vh"
|
|
bgcolor="white"
|
|
>
|
|
<Box
|
|
width="100%"
|
|
maxWidth="1300px"
|
|
display="flex"
|
|
justifyContent="flex-end"
|
|
px={2}
|
|
>
|
|
<IconButton onClick={() => navigate({ to: "/config" })}>
|
|
<SettingsIcon fontSize="large" />
|
|
</IconButton>
|
|
</Box>
|
|
<Paper
|
|
elevation={3}
|
|
sx={{
|
|
width: 900,
|
|
height: 500,
|
|
backgroundColor: "#eeeeee",
|
|
borderRadius: 4,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
height: "100%",
|
|
width: "100%",
|
|
maxWidth: "100%",
|
|
margin: "0px",
|
|
padding: "0px",
|
|
"& .MuiBox-root": {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
border: "none",
|
|
textAlign: "center",
|
|
},
|
|
}}
|
|
>
|
|
<FileUpload
|
|
value={files}
|
|
onChange={setFiles}
|
|
accept={`.${fileTypes.join(", .")}`}
|
|
title="Hier Dokument hinziehen"
|
|
buttonText="Datei auswählen"
|
|
sx={{
|
|
height: "100%",
|
|
width: "100%",
|
|
padding: "0px",
|
|
"& svg": {
|
|
color: "#9e9e9e",
|
|
},
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "none",
|
|
},
|
|
"& .MuiButton-root": {
|
|
backgroundColor: "#9e9e9e",
|
|
},
|
|
"& .MuiTypography-root": {
|
|
fontSize: "1.25rem",
|
|
fontWeight: 500,
|
|
marginBottom: 1,
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Paper>
|
|
<Button
|
|
variant="contained"
|
|
sx={{
|
|
mt: 4,
|
|
backgroundColor: "#383838",
|
|
}}
|
|
disabled={files.length === 0}
|
|
onClick={uploadFile}
|
|
>
|
|
Kennzahlen extrahieren
|
|
</Button>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|