add pdf-js viewer

config/webpack.js

@@ -21,8 +21,8 @@ module.exports = env => {
         },
         resolve: {
             alias: {
-                'react': 'preact/aliases',
+                'react': 'preact-compat',
-                'react-dom': 'preact/aliases'
+                'react-dom': 'preact-compat'
             }
         },
         module: {

package.json

@@ -16,7 +16,9 @@
     "cors": "^2.8.1",
     "express": "^4.14.1",
     "preact": "^7.2.0",
-    "preact-router": "^2.4.1"
+    "preact-compat": "^3.13.1",
+    "preact-router": "^2.4.1",
+    "react-pdf": "0.0.10"
   },
   "devDependencies": {
     "babel-core": "^6.23.1",

webapp/index.html

@@ -9,5 +9,7 @@
         <div id="root">
             <div id="app">Loading</div>
         </div>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.2/fetch.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.7.300/pdf.min.js"></script>
     </body>
 </html>

webapp/views/components/Button.js

@@ -0,0 +1,7 @@
+import { h } from 'preact';
+
+export default function(props) {
+    return (
+        <button onClick={props.onClick}>{props.text}</button>
+    );
+}

webapp/views/components/Input.js

@@ -0,0 +1,10 @@
+import { h } from 'preact';
+
+export default function(props) {
+    return (
+        <label>
+            {props.text}:
+            <input onChange={props.onChange.bind(null, props.name)} type="text" />
+        </label>
+    );
+}

webapp/views/components/Preview.js

@@ -0,0 +1,24 @@
+import { Component, h } from 'preact';
+import PDF from 'react-pdf';
+
+class Preview extends Component {
+    render(props) {
+        return (
+            <PDF
+                content={props.pdf}
+                onDocumentComplete={this._onDocumentComplete}
+                onPageComplete={this._onPageComplete}
+            />
+        );
+    }
+
+    _onDocumentComplete(pages) {
+        this.setState({pages: pages});
+    }
+
+    _onPageComplete(page) {
+        this.setState({page});
+    }
+}
+
+export default Preview;

webapp/views/pages/Home.js

@@ -1,11 +1,63 @@
-import { h } from 'preact';
+import { Component, h } from 'preact';
+import PDF from 'react-pdf';
 
-export default function (props) {
+import Input from '../components/Input';
-    return (
+import Button from '../components/Button';
-        <div>
+import Preview from '../components/Preview';
-            <h1>Home</h1>
+
-            <p>This is the home page.</p>
+function arrayBufferToBase64(arrayBuffer) {
-            <p>Anything is insane</p>
+    return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
-        </div>
-    );
 }
+
+class Home extends Component {
+    render(props) {
+        return (
+            <div>
+                <Input
+                    name="subject"
+                    text="Betreff"
+                    onChange={this._onChange.bind(this)}
+                    value={props.subject}
+                />
+                <Button onClick={this._onGenerate.bind(this)} text="Generiere"/>
+                <Preview pdf={this.state.pdf} />
+            </div>
+        );
+    }
+
+    _onChange(name, event) {
+        if (!name) {
+            return;
+        }
+        const value = event && event.target && event.target.value;
+        this.setState({[name]: value || null})
+    }
+
+    _onGenerate(name, event){
+        var component = this;
+
+        fetch('http://localhost:5000/generate/pdf/brief', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(this.state)
+        }).then(function(res) {
+            if (res.status !== 200) {
+                console.log('request failed');
+                return;
+            }
+            return res.arrayBuffer();
+        }).then(function(arrayBuffer) {
+            component.setState({
+                pdf: arrayBufferToBase64(arrayBuffer)
+            });
+        }).catch(function(error) {
+            component.setState({
+                pdf: null
+            })
+        });
+    }
+}
+
+export default Home;