extern/pdf-to-markdown
1
0
Fork 0
mirror of https://github.com/jzillmann/pdf-to-markdown.git synced 2024-11-25 01:03:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

beautify debug page

Browse Source
This commit is contained in:
Johannes Zillmann 2017-01-07 17:38:08 +01:00
parent 9ae32e02b5
commit 147df8e304
4 changed files with 68 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/styles.css
View File

@ -7,3 +7,7 @@ a {
cursor: default;
opacity: 0.6;
}
.btn-round {
border-radius: 24px;
}

4
src/javascript/components/AppLogo.jsx
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import React from 'react';
import FaFilePdfO from 'react-icons/lib/fa/file-pdf-o'
export default class AppLogo extends Component {
export default class AppLogo extends React.Component {
static propTypes = {
onClick: React.PropTypes.func,

2
src/javascript/components/PdfPageView.jsx
View File

@ -9,7 +9,7 @@ export default class PdfPageView extends React.Component {
};
render() {
const header = "Page " + this.props.pdfPage.index;
const header = "Page " + (this.props.pdfPage.index + 1);
return (
<div>
<h2>{ header }</h2>

91
src/javascript/components/PdfView.jsx
View File

@ -1,6 +1,11 @@
import React from 'react';
import Badge from 'react-bootstrap/lib/Badge'
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'
import Button from 'react-bootstrap/lib/Button'
import DropdownButton from 'react-bootstrap/lib/DropdownButton'
import MenuItem from 'react-bootstrap/lib/MenuItem'
import PdfPageView from './PdfPageView.jsx';
@ -24,7 +29,12 @@ export default class PdfView extends React.Component {
this.setState({
pageNr: pageNr
});
}
selectTransformation(currentTransformation) {
this.setState({
currentTransformation: currentTransformation
});
}
nextTransformation() {
@ -46,19 +56,7 @@ export default class PdfView extends React.Component {
const header = "Parsed " + pdfPages.length + " pages!"
var pageLinks = [];
pageLinks.push(<a key={ -1 } onClick={ this.selectPage.bind(this, -1) } style={ { fontSize: '1.20em' } }>All</a>);
pdfPages.forEach((pdfPage, i) => pageLinks.push(<a key={ i } onClick={ this.selectPage.bind(this, i) } style={ { fontSize: '1.10em' } }>
{ " " + i }
</a>));
const currentTransformationName = transformations[currentTransformation].name;
const prevLink = <a onClick={ this.prevTransformation.bind(this) } className={ currentTransformation > 0 ? '' : 'disabled' }>
{ '<==' }
</a>;
const nextLink = <a onClick={ this.nextTransformation.bind(this) } className={ currentTransformation < transformations.length - 1 ? '' : 'disabled' }>
{ '==>' }
</a>;
const transformedPdfPages = pdfPages.filter((elem, i) => pageNr == -1 || i == pageNr).map(pdfPage => {
for (var i = 0; i <= currentTransformation; i++) {
@ -72,25 +70,56 @@ export default class PdfView extends React.Component {
return (
<div>
<div>
<Badge>
{ pdfPages.length }
</Badge> pages!
</div>
<div style={ { textAlign: 'center' } }>
<div>
<b>Pages:</b>
</div>
<div>
{ pageLinks }
</div>
<div>
<b>Current Transformation:</b>
</div>
<div>
{ prevLink }
{ " " + currentTransformationName + " " }
{ nextLink }
</div>
<table style={ { width: '100%' } }>
<caption>
Pages
</caption>
<tbody>
<tr>
<td>
<ButtonToolbar>
<ButtonGroup>
<Button onClick={ this.selectPage.bind(this, -1) } className={ pageNr == -1 ? 'active' : '' }>
All
</Button>
{ pdfPages.map((pdfPage, i) => <Button key={ i } onClick={ this.selectPage.bind(this, i) } className={ pageNr == i ? 'active' : '' }>
{ i + 1 }
</Button>) }
</ButtonGroup>
</ButtonToolbar>
</td>
</tr>
</tbody>
</table>
<br/>
<table>
<caption>
Current Transformation
</caption>
<tbody>
<tr>
<td>
<DropdownButton title={ currentTransformationName } id="dropdown-size-medium">
{ transformations.map((transformation, i) => <MenuItem key={ i } eventKey={ i } onSelect={ this.selectTransformation.bind(this, i) }>
{ transformation.name }
</MenuItem>) }
</DropdownButton>
</td>
</tr>
<tr>
<td>
<br/>
<Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }>
← Previous
</Button>
{ ' ' }
<Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }>
Next →
</Button>
</td>
</tr>
</tbody>
</table>
</div>
<hr/>
{ pageComponents }