From 9a5d762a2e4da74bb382363fec5f26238b8ee2bc Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Sat, 18 Feb 2017 01:04:47 +0100
Subject: [PATCH] add pdf-js viewer

---
 config/webpack.js                  |  4 +-
 package.json                       |  4 +-
 webapp/index.html                  |  2 +
 webapp/views/components/Button.js  |  7 +++
 webapp/views/components/Input.js   | 10 +++++
 webapp/views/components/Preview.js | 24 ++++++++++
 webapp/views/pages/Home.js         | 70 ++++++++++++++++++++++++++----
 7 files changed, 109 insertions(+), 12 deletions(-)
 create mode 100644 webapp/views/components/Button.js
 create mode 100644 webapp/views/components/Input.js
 create mode 100644 webapp/views/components/Preview.js

diff --git a/config/webpack.js b/config/webpack.js
index 1522486..61a493f 100644
--- a/config/webpack.js
+++ b/config/webpack.js
@@ -21,8 +21,8 @@ module.exports = env => {
         },
         resolve: {
             alias: {
-                'react': 'preact/aliases',
-                'react-dom': 'preact/aliases'
+                'react': 'preact-compat',
+                'react-dom': 'preact-compat'
             }
         },
         module: {
diff --git a/package.json b/package.json
index 197334d..0621b77 100644
--- a/package.json
+++ b/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",
diff --git a/webapp/index.html b/webapp/index.html
index cd5fd3f..a6884f7 100644
--- a/webapp/index.html
+++ b/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>
diff --git a/webapp/views/components/Button.js b/webapp/views/components/Button.js
new file mode 100644
index 0000000..94881ab
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/webapp/views/components/Input.js b/webapp/views/components/Input.js
new file mode 100644
index 0000000..dd0bba4
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/webapp/views/components/Preview.js b/webapp/views/components/Preview.js
new file mode 100644
index 0000000..8743f13
--- /dev/null
+++ b/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;
diff --git a/webapp/views/pages/Home.js b/webapp/views/pages/Home.js
index 6c35d4f..bf38789 100644
--- a/webapp/views/pages/Home.js
+++ b/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;