add pdf-js viewer

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) {
-    return (
-        <div>
-            <h1>Home</h1>
-            <p>This is the home page.</p>
-            <p>Anything is insane</p>
-        </div>
-    );
+import Input from '../components/Input';
+import Button from '../components/Button';
+import Preview from '../components/Preview';
+
+function arrayBufferToBase64(arrayBuffer) {
+    return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
 }
+
+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;