Add status to loading view

package.json

@@ -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",

src/javascript/components/App.jsx

@@ -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;
         }
 

src/javascript/components/LoadingView.jsx

@@ -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/>
+              <Line percent={ percentDone } strokeWidth="2" strokeColor="#D3D3D3" />
-              <Spinner/>
               <br/>
               <br/>
               <div>
                 Uploading and parsing PDF...
+                <br/>
+                { ' ' + details }
               </div>
             </div>);
     }

src/javascript/functions/pdfToTextItems.jsx

@@ -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);
-                });
-            });
-        }
-    });
-}

src/javascript/models/AppState.jsx

@@ -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.fileBuffer;
-        this.uploadedPages = 0;
         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.storeFileBuffer = this.storeFileBuffer.bind(this);
-        this.setPageCount = this.setPageCount.bind(this);
+        this.storePdfPages = this.storePdfPages.bind(this);
-        this.setPdfPage = this.setPdfPage.bind(this);
     }
 
     render() {
         this.renderFunction(this)
     }
 
-    uploadPdf(fileBuffer:ArrayBuffer) {
+    // the uploaded pdf as file buffer
-        pdfToTextItemsAsync(fileBuffer, this);
+    storeFileBuffer(fileBuffer:ArrayBuffer) {
+        this.fileBuffer = fileBuffer;
         this.mainView = View.LOADING;
         this.render()
     }
 
-    setPageCount(numPages) {
+    storePdfPages(pdfPages) {
-        this.pagesToUpload = numPages;
+        this.pdfPages = pdfPages;
-        for (var i = 0; i < numPages; i++) {
+        this.fileBuffer = null;
-            this.pdfPages.push(new PdfPage({
+        this.mainView = View.PDF_VIEW;
-                index: i
+        this.render();
-            }));
-        }
-    }
-
-    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();
-        }
     }
 
 }