Introduce Result View

src/javascript/components/App.jsx

@@ -6,6 +6,7 @@ import TopBar from './TopBar.jsx';
 import { View } from '../models/AppState.jsx';
 import PdfUploadView from './PdfUploadView.jsx';
 import LoadingView from './LoadingView.jsx';
+import ResultView from './ResultView.jsx';
 import DebugView from './DebugView.jsx';
 
 export default class App extends React.Component {
@@ -26,14 +27,19 @@ export default class App extends React.Component {
         case View.LOADING:
             mainView = <LoadingView fileBuffer={ appState.fileBuffer } storePdfPagesFunction={ appState.storePdfPages } />
             break;
+        case View.RESULT:
+            mainView = <ResultView pdfPages={ appState.pdfPages } transformations={ appState.transformations } />
+            break;
         case View.DEBUG:
             mainView = <DebugView pdfPages={ appState.pdfPages } transformations={ appState.transformations } />
             break;
+        default:
+            throw `View ${this.props.appState.mainView} not supported!`;
         }
 
         return (
             <div>
-              <TopBar/>
+              <TopBar mainView={ appState.mainView } switchMainViewFunction={ appState.switchMainView } />
               <Grid>
                 <div>
                   { mainView }

src/javascript/components/DebugView.jsx

@@ -10,9 +10,9 @@ import Label from 'react-bootstrap/lib/Label'
 import Checkbox from 'react-bootstrap/lib/Checkbox'
 
 import ContentView from '../models/ContentView.jsx';
-import PdfPageView from './PdfPageView.jsx';
-import TextPageView from './TextPageView.jsx';
-import MarkdownView from './MarkdownView.jsx';
+import PdfPageView from './debug/PdfPageView.jsx';
+import TextPageView from './debug/TextPageView.jsx';
+import MarkdownPageView from './debug/MarkdownPageView.jsx';
 
 // A view which displays the content of the given pages transformed by the given transformations
 export default class DebugView extends React.Component {
@@ -92,7 +92,7 @@ export default class DebugView extends React.Component {
             pageComponents = transformedPages.map(page => <TextPageView key={ page.index } page={ page } />);
             break;
         case ContentView.MARKDOWN:
-            pageComponents = transformedPages.map(page => <MarkdownView key={ page.index } page={ page } />);
+            pageComponents = transformedPages.map(page => <MarkdownPageView key={ page.index } page={ page } />);
             break;
         }
 

src/javascript/components/ResultView.jsx

@@ -5,17 +5,33 @@ import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'
 import Button from 'react-bootstrap/lib/Button'
 
-export default class MarkdownView extends React.Component {
+export default class ResultView extends React.Component {
 
     static propTypes = {
-        page: React.PropTypes.object.isRequired,
+        pdfPages: React.PropTypes.array.isRequired,
+        transformations: React.PropTypes.array.isRequired,
     };
 
     constructor(props) {
         super(props);
+    }
+
+    componentWillMount() {
+        const {pdfPages, transformations} = this.props;
+        var transformedPages = pdfPages;
+        var lastTransformation;
+        transformations.forEach(transformation => {
+            if (lastTransformation) {
+                transformedPages = lastTransformation.processAnnotations(transformedPages);
+            }
+            transformedPages = transformation.transform(transformedPages);
+            lastTransformation = transformation;
+        });
+
         this.state = {
             preview: true,
-            text: props.page.text
+            text: transformedPages[0].text
+
         };
     }
 

src/javascript/components/TopBar.jsx

@@ -1,17 +1,25 @@
 import React from 'react';
 
 import Navbar from 'react-bootstrap/lib/Navbar'
+import Nav from 'react-bootstrap/lib/Nav'
+import NavItem from 'react-bootstrap/lib/NavItem'
 import MenuItem from 'react-bootstrap/lib/MenuItem'
 import Dropdown from 'react-bootstrap/lib/Dropdown'
 import Popover from 'react-bootstrap/lib/Popover'
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'
 
 import AppLogo from './AppLogo.jsx';
+import { View } from '../models/AppState.jsx';
 
 export default class TopBar extends React.Component {
 
-    render() {
+    static propTypes = {
+        mainView: React.PropTypes.object.isRequired,
+        switchMainViewFunction: React.PropTypes.func.isRequired,
+    };
 
+    render() {
+        const {mainView, switchMainViewFunction} = this.props;
         const aboutPopover = (
         <Popover id="popover-trigger-click-root-close" title={ `About PDF to Markdown Converter - ${ process.env.version }` }>
           <p>
@@ -20,6 +28,8 @@ export default class TopBar extends React.Component {
         </Popover>
         );
 
+        const showTabs = mainView == View.RESULT || mainView == View.DEBUG;
+
         return (
             <Navbar inverse>
               <Navbar.Header>
@@ -41,6 +51,15 @@ export default class TopBar extends React.Component {
                     </Dropdown.Menu>
                   </Dropdown>
                 </Navbar.Brand>
+                { showTabs &&
+                  <Nav bsStyle="tabs" activeKey={ mainView } pullRight>
+                    <NavItem eventKey={ View.RESULT } activeKey={ mainView } onSelect={ switchMainViewFunction }>
+                      Result View
+                    </NavItem>
+                    <NavItem eventKey={ View.DEBUG } activeKey={ mainView } onSelect={ switchMainViewFunction }>
+                      Debug View
+                    </NavItem>
+                  </Nav> }
               </Navbar.Header>
             </Navbar>
             );

src/javascript/components/debug/MarkdownPageView.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Remarkable from 'remarkable';
+
+export default class MarkdownPageView extends React.Component {
+
+    static propTypes = {
+        page: React.PropTypes.object.isRequired,
+    };
+
+    render() {
+        const remarkable = new Remarkable({
+            breaks: true
+        });
+
+        const html = remarkable.render(this.props.page.text);
+        return (
+            <div>
+              <div dangerouslySetInnerHTML={ { __html: html } } />
+            </div>
+            );
+    }
+
+}

src/javascript/components/debug/TextPageView.jsx

@@ -11,7 +11,11 @@ export default class TextPageView extends React.Component {
         return (
             <div>
               <h2>{ header }</h2>
-              <textarea rows="45" cols="150" value={ this.props.page.text }>
+              <textarea
+                        rows="45"
+                        cols="150"
+                        value={ this.props.page.text }
+                        readOnly="readonly">
               </textarea>
             </div>
             );

src/javascript/models/AppState.jsx

@@ -8,7 +8,7 @@ import RemoveRepetitiveElements from './transformations/RemoveRepetitiveElements
 import HeadlineDetector from './transformations/HeadlineDetector.jsx'
 import HeadlineToUppercase from './transformations/HeadlineToUppercase.jsx'
 import ToTextPages from './transformations/ToTextPages.jsx';
-import ToSingleTextPage from './transformations/ToSingleTextPage.jsx'
+import ToMarkdown from './transformations/ToMarkdown.jsx'
 
 // Holds the state of the Application
 export default class AppState {
@@ -27,12 +27,13 @@ export default class AppState {
             new HeadlineDetector(),
             new HeadlineToUppercase(),
             new ToTextPages(),
-            new ToSingleTextPage()];
+            new ToMarkdown()];
 
         //bind functions
         this.render = this.render.bind(this);
         this.storeFileBuffer = this.storeFileBuffer.bind(this);
         this.storePdfPages = this.storePdfPages.bind(this);
+        this.switchMainView = this.switchMainView.bind(this);
     }
 
     render() {
@@ -49,7 +50,12 @@ export default class AppState {
     storePdfPages(pdfPages) {
         this.pdfPages = pdfPages;
         this.fileBuffer = null;
-        this.mainView = View.DEBUG;
+        this.mainView = View.RESULT;
+        this.render();
+    }
+
+    switchMainView(view) {
+        this.mainView = view;
         this.render();
     }
 
@@ -57,4 +63,4 @@ export default class AppState {
 
 export class View extends Enum {
 }
-View.initEnum(['UPLOAD', 'LOADING', 'DEBUG'])
+View.initEnum(['UPLOAD', 'LOADING', 'RESULT', 'DEBUG'])

src/javascript/models/transformations/ToMarkdown.jsx

@@ -2,10 +2,10 @@ import Transformation from './Transformation.jsx';
 import TextPage from '../TextPage.jsx';
 import ContentView from '../ContentView.jsx';
 
-export default class ToSingleTextPage extends Transformation {
+export default class ToMarkdown extends Transformation {
 
     constructor() {
-        super("To Single Text Page");
+        super("To Markdown");
     }
 
     showPageSelection() {