no need for pdf-js

webapp/apiHelper.js

@@ -0,0 +1,15 @@
+export function generatePdf(state){
+    return fetch('//localhost:5000/pdf/generate/brief', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(state)
+    }).then(function(res) {
+        if (res.status !== 200) {
+            console.log('request failed');
+            return;
+        }
+        return res.json();
+    });
+}

webapp/index.html

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

webapp/views/components/Input.js

@@ -4,7 +4,7 @@ export default function(props) {
     return (
         <label>
             {props.text}:
-            <input onChange={props.onChange.bind(null, props.name)} type="text" />
+            <input onchange={props.onchange.bind(null, props.name)} type="text" />
         </label>
     );
 }

webapp/views/components/Preview.js

@@ -1,28 +1,11 @@
 import { Component, h } from 'preact';
-import PDF from 'react-pdf';
 
-class Preview extends Component {
+export default props => {
-    render(props) {
+    if (!props.pdfUrl) {
-        if (!props.pdfUrl) {
+        return '';
-            return '';
-        }
-
-        return (
-            <PDF
-                file={props.pdfUrl}
-                onDocumentComplete={this._onDocumentComplete.bind(this)}
-                onPageComplete={this._onPageComplete.bind(this)}
-            />
-        );
     }
 
-    _onDocumentComplete(pages) {
+    return (
-        this.setState({pages: pages});
+        <embed src={props.pdfUrl} width="100%" height="100%"/>
-    }
+    );
-
+};
-    _onPageComplete(page) {
-        this.setState({page});
-    }
-}
-
-export default Preview;

webapp/views/components/TextAreaInput.js

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

webapp/views/pages/Home.js

@@ -2,21 +2,27 @@ import { Component, h } from 'preact';
 import PDF from 'react-pdf';
 
 import Input from '../components/Input';
+import TextAreaInput from '../components/TextAreaInput';
 import Button from '../components/Button';
 import Preview from '../components/Preview';
 
-function toBase64(arrayBuffer) {
+import {generatePdf} from '../../apiHelper';
-    return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
-}
 
 class Home extends Component {
     render(props) {
+        const component = this;
         return (
             <div>
+                <TextAreaInput
+                    name="address"
+                    text="Adresse"
+                    onchange={this._onChange.bind(this)}
+                    value={props.address}
+                />
                 <Input
                     name="subject"
                     text="Betreff"
-                    onChange={this._onChange.bind(this)}
+                    onchange={this._onChange.bind(this)}
                     value={props.subject}
                 />
                 <Button onClick={this._onGenerate.bind(this)} text="Generiere"/>
@@ -25,6 +31,21 @@ class Home extends Component {
         );
     }
 
+    _onGenerate() {
+        generatePdf(this.state)
+            .then((data) => {
+                const {id} = data;
+                this.setState({
+                    pdfUrl: `//localhost:5000/pdf/${id}`
+                });
+            })
+            .catch((error) => {
+                this.setState({
+                    pdfUrl: null
+                });
+            });
+    }
+
     _onChange(name, event) {
         if (!name) {
             return;
@@ -33,32 +54,6 @@ class Home extends Component {
         this.setState({[name]: value || null})
     }
 
-    _onGenerate(name, event){
-        var component = this;
-
-        fetch('//localhost:5000/pdf/generate/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.json();
-        }).then(function(data) {
-            const {id} = data;
-            component.setState({
-                pdfUrl: `//localhost:5000/pdf/${id}`
-            });
-        }).catch(function(error) {
-            component.setState({
-                pdfUrl: null
-            })
-        });
-    }
 }
 
 export default Home;