Add status to loading view

This commit is contained in:
Johannes Zillmann 2017-01-09 20:08:32 +01:00
parent 147df8e304
commit 1a97cef440
5 changed files with 101 additions and 67 deletions

View File

@ -23,6 +23,7 @@
"bootstrap": "^3.3.7",
"enumify": "^1.0.4",
"pdfjs-dist": "^1.6.317",
"rc-progress": "^2.0.5",
"react": "^15.3.2",
"react-bootstrap": "^0.30.3",
"react-dom": "^15.3.2",

View File

@ -15,18 +15,19 @@ export default class App extends React.Component {
};
render() {
console.debug(this.props.appState);
// console.debug(this.props.appState);
const appState = this.props.appState;
var mainView;
switch (this.props.appState.mainView) {
case View.UPLOAD:
mainView = <PdfUploadView uploadPdfFunction={ this.props.appState.uploadPdf } />
mainView = <PdfUploadView uploadPdfFunction={ appState.storeFileBuffer } />
break;
case View.LOADING:
mainView = <LoadingView/>
mainView = <LoadingView fileBuffer={ appState.fileBuffer } storePdfPagesFunction={ appState.storePdfPages } />
break;
case View.PDF_VIEW:
mainView = <PdfView pdfPages={ this.props.appState.pdfPages } transformations={ this.props.appState.transformations } />
mainView = <PdfView pdfPages={ appState.pdfPages } transformations={ appState.transformations } />
break;
}

View File

@ -1,21 +1,102 @@
import React from 'react';
import Spinner from './lib/Spinner.jsx';
import pdfjs from 'pdfjs-dist';
import { Line } from 'rc-progress';
import PdfPage from '../models/PdfPage.jsx';
import TextItem from '../models/TextItem.jsx';
export default class LoadingView extends React.Component {
static propTypes = {
fileBuffer: React.PropTypes.object.isRequired,
storePdfPagesFunction: React.PropTypes.func.isRequired,
};
constructor(props) {
super(props);
this.state = {
parsedPages: 0,
pdfPages: []
};
}
anounceInitialParse(pdfPages) {
this.setState({
pdfPages: pdfPages
});
}
anouncePageParsed(index, textItems) {
//TODO might make problems.. concat unordered and order at the end ?
this.state.pdfPages[index].textItems = textItems;
this.setState({
parsedPages: this.state.parsedPages + 1
});
}
componentWillMount() {
const anounceInitialParseFunction = this.anounceInitialParse.bind(this);
const anouncePageParsedFunction = this.anouncePageParsed.bind(this);
PDFJS.getDocument(this.props.fileBuffer).then(function(pdfDocument) {
console.log('Number of pages: ' + pdfDocument.numPages);
// console.debug(pdfDocument);
const numPages = pdfDocument.numPages;
// const numPages = 4; // hack
var pdfPages = [];
for (var i = 0; i < numPages; i++) {
pdfPages.push(new PdfPage({
index: i
}));
}
anounceInitialParseFunction(pdfPages);
for (var i = 1; i <= numPages; i++) {
pdfDocument.getPage(i).then(function(page) {
page.getTextContent().then(function(textContent) {
// console.debug(textContent);
const textItems = textContent.items.map(function(item) {
return new TextItem({
x: item.transform[4],
y: item.transform[5],
width: item.width,
height: item.height,
text: item.str
});
});
anouncePageParsedFunction(page.pageIndex, textItems);
});
});
}
});
}
render() {
const {parsedPages, pdfPages} = this.state;
var percentDone = 0;
var details = '';
if (pdfPages.length > 0) {
percentDone = parsedPages / pdfPages.length * 100;
details = parsedPages + ' / ' + pdfPages.length
if (parsedPages == pdfPages.length) {
this.props.storePdfPagesFunction(this.state.pdfPages);
}
}
return (
<div style={ { textAlign: 'center' } }>
<br/>
<br/>
<br/>
<br/>
<Spinner/>
<Line percent={ percentDone } strokeWidth="2" strokeColor="#D3D3D3" />
<br/>
<br/>
<div>
Uploading and parsing PDF...
<br/>
{ ' ' + details }
</div>
</div>);
}

View File

@ -1,32 +0,0 @@
import pdfjs from 'pdfjs-dist';
import AppState from '../models/AppState.jsx';
import TextItem from '../models/TextItem.jsx';
export function pdfToTextItemsAsync(fileBuffer:ArrayBuffer, appState:AppState) {
PDFJS.getDocument(fileBuffer).then(function(pdfDocument) {
console.log('Number of pages: ' + pdfDocument.numPages);
// console.debug(pdfDocument);
const numPages = pdfDocument.numPages;
// const numPages = 3;
appState.setPageCount(numPages);
for (var i = 0; i <= numPages; i++) {
pdfDocument.getPage(i).then(function(page) {
page.getTextContent().then(function(textContent) {
// console.debug(textContent);
const textItems = textContent.items.map(function(item) {
const transform = item.transform;
return new TextItem({
x: transform[4],
y: transform[5],
width: item.width,
height: item.height,
text: item.str
});
});
appState.setPdfPage(page.pageIndex, textItems);
});
});
}
});
}

View File

@ -1,8 +1,5 @@
import { Enum } from 'enumify';
import { pdfToTextItemsAsync } from '../functions/pdfToTextItems.jsx'
import PdfPage from './PdfPage.jsx';
import NoOpTransformation from './transformations/NoOpTransformation.jsx';
import RoundCoordinatesTransformation from './transformations/RoundCoordinatesTransformation.jsx';
import CombineSameYTransformation from './transformations/CombineSameYTransformation.jsx';
@ -13,46 +10,32 @@ export default class AppState {
constructor(options) {
this.renderFunction = options.renderFunction;
this.mainView = View.UPLOAD;
this.pagesToUpload = 0;
this.uploadedPages = 0;
this.fileBuffer;
this.pdfPages = [];
this.transformations = [new NoOpTransformation(), new RoundCoordinatesTransformation(), new CombineSameYTransformation()];
//bind functions
this.render = this.render.bind(this);
this.uploadPdf = this.uploadPdf.bind(this);
this.setPageCount = this.setPageCount.bind(this);
this.setPdfPage = this.setPdfPage.bind(this);
this.storeFileBuffer = this.storeFileBuffer.bind(this);
this.storePdfPages = this.storePdfPages.bind(this);
}
render() {
this.renderFunction(this)
}
uploadPdf(fileBuffer:ArrayBuffer) {
pdfToTextItemsAsync(fileBuffer, this);
// the uploaded pdf as file buffer
storeFileBuffer(fileBuffer:ArrayBuffer) {
this.fileBuffer = fileBuffer;
this.mainView = View.LOADING;
this.render()
}
setPageCount(numPages) {
this.pagesToUpload = numPages;
for (var i = 0; i < numPages; i++) {
this.pdfPages.push(new PdfPage({
index: i
}));
}
}
setPdfPage(pageIndex, textItems) {
console.debug("Upload " + pageIndex);
this.pdfPages[pageIndex].textItems = textItems;
this.uploadedPages++;
if (this.uploadedPages == this.pagesToUpload) {
console.debug("Fin");
this.mainView = View.PDF_VIEW;
this.render();
}
storePdfPages(pdfPages) {
this.pdfPages = pdfPages;
this.fileBuffer = null;
this.mainView = View.PDF_VIEW;
this.render();
}
}