diff --git a/client/views/Exams.js b/client/views/Exams.js index f27747153b8f4ebabc47300401f63902337558f1..660f6e5b6c8aa61e8f9e7e16126623af7561883c 100644 --- a/client/views/Exams.js +++ b/client/views/Exams.js @@ -4,6 +4,7 @@ import Hero from '../components/Hero'; import Footer from '../components/Footer'; import Dropzone from 'react-dropzone' +import Spinner from 'react-spinkit' import * as api from '../api' @@ -21,11 +22,13 @@ class Exams extends React.Component { pdfs: [], }, }; + this.onDropYAML = this.onDropYAML.bind(this); this.onDropPDF = this.onDropPDF.bind(this); this.putYaml = this.putYaml.bind(this); this.updateYaml = this.updateYaml.bind(this); this.selectExam = this.selectExam.bind(this); + this.pdfStatus= this.pdfStatus.bind(this); } @@ -44,9 +47,7 @@ class Exams extends React.Component { exams: [...prev.exams, new_exam], })) } - this.setState(prev => ({ - selected_exam: Object.assign(prev.selected_exam, new_exam), - })) + this.selectExam(new_exam.id) alert('Thank you for your upload, it was delicious') }) .catch(resp => { @@ -88,7 +89,18 @@ class Exams extends React.Component { ) } - + pdfStatus(pdf) { + switch(pdf.status) { + case "processing": + const style = {display: "inline-block", top: "6px"} + return <div>{pdf.name} <Spinner name="circle" style={style} fadeIn='none'/> <i>{pdf.message}</i></div> + case "success": + return <div>{pdf.name} <i className="fa fa-check"></i>{pdf.message}</div> + case "error": + return <div>{pdf.name} <i className="fa fa-times"></i><i>{pdf.message}</i></div> + } + } + onDropPDF(accepted, rejected) { if (rejected.length > 0) { alert('Please upload a PDF..') @@ -98,6 +110,12 @@ class Exams extends React.Component { data.append('pdf', accepted[0]) api.post('pdfs/' + this.state.selected_exam.id, data) .then(() => { + api.get('pdfs/' + this.state.selected_exam.id) + .then(pdfs => + this.setState(prev => ({ + selected_exam: Object.assign(prev.selected_exam, {pdfs: pdfs}) + })) + ) alert('Thank you for your upload, it was delicious') }) .catch(resp => { @@ -221,7 +239,7 @@ class Exams extends React.Component { </p> <ul className="menu-list"> {this.state.selected_exam.pdfs.map(pdf => - <li>{pdf.name}</li> + <li>{this.pdfStatus(pdf)}</li> )} </ul> </aside> diff --git a/package.json b/package.json index f93c89e2ef6869453562a95e78606cf7dcbe374f..dd6ec68aa5a0ad45af3f9a5d3e792a1c602d067d 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-dropzone": "^4.2.7", "react-loadable": "^5.3.1", "react-router-dom": "^4.2.2", + "react-spinkit": "^3.0.0", "react-table": "^6.7.6", "style-loader": "^0.19.1", "uglifyjs-webpack-plugin": "^1.1.6", diff --git a/zesje/resources/pdfs.py b/zesje/resources/pdfs.py index c7890fdc94fa916b24e13d333086c1a4b49debf8..8de3dc78173c7f2e812bfeca60df0f8ed914072a 100644 --- a/zesje/resources/pdfs.py +++ b/zesje/resources/pdfs.py @@ -26,18 +26,14 @@ class Pdfs(Resource): name: str filename of the uploaded PDF """ - return self._get(exam_id) - - # Do not call this method without wrapping it in 'orm.db_session' - def _get(self, exam_id): - data_dir = app.config['DATA_DIRECTORY'] - exam = Exam[exam_id] - - exam_data_dir = os.path.join(data_dir, f'{exam.name}_data') - pdfs = [pdf for pdf in os.listdir(exam_data_dir) if pdf.endswith('.pdf')] - - return [{'name': pdf} for pdf in pdfs] - + return [ + { + 'id': 1, + 'name': 'hello.pdf', + 'status': 'processing', + 'message': 'extracting images', + } + ] post_parser = reqparse.RequestParser() post_parser.add_argument('pdf', type=FileStorage, required=True, @@ -51,6 +47,18 @@ class Pdfs(Resource): ---------- exam_id : int pdf : FileStorage + + Returns + ------- + id : int + name : str + status : str + message : str """ args = self.post_parser.parse_args() - # process PDF + return { + 'id': 1, + 'name': 'hello.pdf', + 'status': 'processing', + 'message': 'going', + }