diff --git a/project/frontend/public/example.pdf b/project/frontend/public/example.pdf new file mode 100644 index 0000000..759093b Binary files /dev/null and b/project/frontend/public/example.pdf differ diff --git a/project/frontend/src/components/UploadPage.tsx b/project/frontend/src/components/UploadPage.tsx index 172ce61..6916b27 100644 --- a/project/frontend/src/components/UploadPage.tsx +++ b/project/frontend/src/components/UploadPage.tsx @@ -26,7 +26,7 @@ export default function UploadPage() { px={2} > navigate({ to: '/config' })}> - + alert('Kein Backend, aber Button klickbar')} + onClick={() => navigate({ to: '/extractedResult' })} > Kennzahlen extrahieren diff --git a/project/frontend/src/components/pdfViewer.tsx b/project/frontend/src/components/pdfViewer.tsx new file mode 100644 index 0000000..2e8f7d1 --- /dev/null +++ b/project/frontend/src/components/pdfViewer.tsx @@ -0,0 +1,91 @@ +import { Document, Page, pdfjs } from "react-pdf"; +import { useState, useRef, useEffect } from 'react'; +import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; +import 'react-pdf/dist/esm/Page/TextLayer.css'; +import { Box, IconButton } from '@mui/material'; +import ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft'; +import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight'; +import testPDF from '/example.pdf'; + +pdfjs.GlobalWorkerOptions.workerSrc = new URL( + "pdfjs-dist/build/pdf.worker.min.mjs", + import.meta.url, +).toString(); + +export default function PDFViewer() { + const [numPages, setNumPages] = useState(null); + const [pageNumber, setPageNumber] = useState(1); + const [containerWidth, setContainerWidth] = useState(null); + + const containerRef = useRef(null); + + const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { + setNumPages(numPages); + }; + + useEffect(() => { + const updateWidth = () => { + if (containerRef.current) { + setContainerWidth(containerRef.current.offsetWidth); + } + }; + + updateWidth(); + window.addEventListener('resize', updateWidth); + return () => window.removeEventListener('resize', updateWidth); + }, []); + + return ( + + + console.error('Es gab ein Fehler beim Laden des PDFs:', error)} + onSourceError={(error) => console.error('Ungültige PDF:', error)}> + {containerWidth && ( + + )} + + + + setPageNumber(p => p - 1)}> + + + {pageNumber} / {numPages} + = (numPages || 1)} + onClick={() => setPageNumber(p => p + 1)} + > + + + + + ); +} \ No newline at end of file diff --git a/project/frontend/src/routeTree.gen.ts b/project/frontend/src/routeTree.gen.ts index fecd2db..cade514 100644 --- a/project/frontend/src/routeTree.gen.ts +++ b/project/frontend/src/routeTree.gen.ts @@ -11,11 +11,18 @@ // Import Routes import { Route as rootRoute } from './routes/__root' +import { Route as ExtractedResultImport } from './routes/extractedResult' import { Route as ConfigImport } from './routes/config' import { Route as IndexImport } from './routes/index' // Create/Update Routes +const ExtractedResultRoute = ExtractedResultImport.update({ + id: '/extractedResult', + path: '/extractedResult', + getParentRoute: () => rootRoute, +} as any) + const ConfigRoute = ConfigImport.update({ id: '/config', path: '/config', @@ -46,6 +53,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof ConfigImport parentRoute: typeof rootRoute } + '/extractedResult': { + id: '/extractedResult' + path: '/extractedResult' + fullPath: '/extractedResult' + preLoaderRoute: typeof ExtractedResultImport + parentRoute: typeof rootRoute + } } } @@ -54,36 +68,41 @@ declare module '@tanstack/react-router' { export interface FileRoutesByFullPath { '/': typeof IndexRoute '/config': typeof ConfigRoute + '/extractedResult': typeof ExtractedResultRoute } export interface FileRoutesByTo { '/': typeof IndexRoute '/config': typeof ConfigRoute + '/extractedResult': typeof ExtractedResultRoute } export interface FileRoutesById { __root__: typeof rootRoute '/': typeof IndexRoute '/config': typeof ConfigRoute + '/extractedResult': typeof ExtractedResultRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: '/' | '/config' + fullPaths: '/' | '/config' | '/extractedResult' fileRoutesByTo: FileRoutesByTo - to: '/' | '/config' - id: '__root__' | '/' | '/config' + to: '/' | '/config' | '/extractedResult' + id: '__root__' | '/' | '/config' | '/extractedResult' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexRoute: typeof IndexRoute ConfigRoute: typeof ConfigRoute + ExtractedResultRoute: typeof ExtractedResultRoute } const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, ConfigRoute: ConfigRoute, + ExtractedResultRoute: ExtractedResultRoute, } export const routeTree = rootRoute @@ -97,7 +116,8 @@ export const routeTree = rootRoute "filePath": "__root.tsx", "children": [ "/", - "/config" + "/config", + "/extractedResult" ] }, "/": { @@ -105,6 +125,9 @@ export const routeTree = rootRoute }, "/config": { "filePath": "config.tsx" + }, + "/extractedResult": { + "filePath": "extractedResult.tsx" } } } diff --git a/project/frontend/src/routes/extractedResult.tsx b/project/frontend/src/routes/extractedResult.tsx new file mode 100644 index 0000000..15ce5b8 --- /dev/null +++ b/project/frontend/src/routes/extractedResult.tsx @@ -0,0 +1,101 @@ +import { Box, Paper, Typography, Button } from '@mui/material'; +import {createFileRoute, useNavigate} from '@tanstack/react-router'; +import PDFViewer from '../components/pdfViewer'; +import ContentPasteIcon from '@mui/icons-material/ContentPaste'; + +export const Route = createFileRoute('/extractedResult')({ + component: ExtractedResultsPage, +}); + +function ExtractedResultsPage() { + const navigate = useNavigate(); + const status: 'green' | 'yellow' | 'red' = 'red'; + + const statusColor = { + red: '#f43131', + yellow: '#f6ed48', + green: '#3fd942', + }[status]; + + return ( + + + + + Kennzahlen extrahiert aus:
FONDSNAME: TODO + + + + + To-do: Table hierhin + + + + + + + + + + + + + ); +} \ No newline at end of file