tomru/pdfer
1
0
Fork 0
mirror of https://github.com/tomru/pdfer.git synced 2026-03-03 06:27:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

further work

Browse Source
This commit is contained in:
Thomas Ruoff
2017-02-19 23:27:53 +01:00
parent 6865a63832
commit da027191d6
8 changed files with 138 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -31,6 +31,7 @@
"copy-webpack-plugin": "^4.0.1",
"eslint": "^3.15.0",
"html-webpack-plugin": "^2.28.0",
"styled-components": "^1.4.3",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.3.0",
"webpack-dev-server": "^2.3.0"

4
templates/brief.js
View File

@@ -4,7 +4,9 @@ function convertLineBreaks(string){
module.exports = (options) => {
var {
console.log(options);
const {
template = 'brief-fam',
subject = 'Betreff',
yourRef = '',

1
webapp/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>PDFer</title>
<meta name="application-name" content="PDFer">
<link href="/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="root">

21
webapp/static/styles.css Normal file
View File

@@ -0,0 +1,21 @@
label,
label input,
label textarea {
display: block;
}
button {
margin-top: 12px;
}
.home {
display: flex;
}
.home > div {
padding: 12px;
}
embed {
flex: 1 100%;
}

0
webapp/styles/styles.css
View File

76
webapp/views/components/LetterOptions.js Normal file
View File

@@ -0,0 +1,76 @@
import { h } from 'preact';
import Input from './Input';
import TextAreaInput from './TextAreaInput';
export default function(props) {
return (
<div>
<TextAreaInput
name="address"
text="Adresse"
onchange={props.onChange}
value={props.address}
/>
<Input
name="subject"
text="Betreff"
onchange={props.onChange}
value={props.subject}
/>
<Input
name="yourRef"
text="Ihr Zeichen"
onchange={props.onChange}
value={props.yourRef}
/>
<Input
name="yourMail"
text="Ihr Schreiben vom"
onchange={props.onChange}
value={props.yourMail}
/>
<Input
name="customer"
text="Kundernummer"
onchange={props.onChange}
value={props.customer}
/>
<Input
name="invoice"
text="Rechnung"
onchange={props.onChange}
value={props.invoice}
/>
<Input
name="yourMail"
text="Ihr Schreiben vom"
onchange={props.onChange}
value={props.yourMail}
/>
<Input
name="date"
text="Datum"
onchange={props.onChange}
value={props.date}
/>
<Input
name="opening"
text="Anrede"
onchange={props.onChange}
value={props.opening}
/>
<TextAreaInput
name="body"
text="Brieftext"
onchange={props.onChange}
value={props.body}
/>
<Input
name="closing"
text="Grußformel"
onchange={props.onChange}
value={props.closing}
/>
</div>
);
};

18
webapp/views/components/Preview.js
View File

@@ -1,11 +1,25 @@
import { Component, h } from 'preact';
export default props => {
if (props.pdfIsLoading) {
return (
<div>Lade...</div>
);
}
if (props.pdfError) {
return (
<div>{props.pdfError}</div>
);
}
if (!props.pdfUrl) {
return '';
return (
<div>Knopf drücken dann gibts hier was zu sehen!</div>
);
}
return (
<embed src={props.pdfUrl} width="100%" height="100%"/>
<embed src={props.pdfUrl} width="600px" height="1000px"/>
);
};

33
webapp/views/pages/Home.js
View File

@@ -1,8 +1,7 @@
import { Component, h } from 'preact';
import PDF from 'react-pdf';
import Input from '../components/Input';
import TextAreaInput from '../components/TextAreaInput';
import LetterOptions from '../components/LetterOptions';
import Button from '../components/Button';
import Preview from '../components/Preview';
@@ -12,35 +11,39 @@ class Home extends Component {
render(props) {
const component = this;
return (
<div className="home">
<div>
<TextAreaInput
name="address"
text="Adresse"
onchange={this._onChange.bind(this)}
value={props.address}
/>
<Input
name="subject"
text="Betreff"
onchange={this._onChange.bind(this)}
value={props.subject}
/>
<LetterOptions onChange={this._onChange.bind(this)} />
<Button onClick={this._onGenerate.bind(this)} text="Generiere"/>
<Preview pdfUrl={this.state.pdfUrl} />
</div>
<div>
<Preview
pdfUrl={this.state.pdfUrl}
pdfIsLoading={this.state.pdfIsLoading}
pdfError={this.state.pdfError}
/>
</div>
</div>
);
}
_onGenerate() {
this.setState({
pdfIsLoading: true,
pdfError: null
})
generatePdf(this.state)
.then((data) => {
const {id} = data;
this.setState({
pdfIsLoading: false,
pdfUrl: `//localhost:5000/pdf/${id}`
});
})
.catch((error) => {
this.setState({
pdfIsLoading: false,
pdfError: error,
pdfUrl: null
});
});