2018-05-31 12:37:57 -04:00
|
|
|
|
import * as _ from 'lodash';
|
2018-05-01 16:58:24 -04:00
|
|
|
|
import { Component } from 'inferno';
|
2018-04-03 14:13:16 -04:00
|
|
|
|
import {
|
2018-04-19 15:23:36 -04:00
|
|
|
|
Button,
|
|
|
|
|
Col,
|
2018-04-03 14:13:16 -04:00
|
|
|
|
Container,
|
|
|
|
|
Jumbotron,
|
2018-05-01 16:58:24 -04:00
|
|
|
|
Modal,
|
|
|
|
|
ModalBody,
|
|
|
|
|
ModalFooter,
|
|
|
|
|
ModalHeader,
|
2018-04-03 14:13:16 -04:00
|
|
|
|
Row,
|
2018-05-03 15:23:48 -04:00
|
|
|
|
} from '//components/Bootstrap';
|
2018-04-03 14:13:16 -04:00
|
|
|
|
|
2018-05-01 16:58:24 -04:00
|
|
|
|
export class HomeView extends Component {
|
|
|
|
|
constructor (props) {
|
|
|
|
|
super(props);
|
2018-04-03 21:47:41 -04:00
|
|
|
|
|
2018-05-01 16:58:24 -04:00
|
|
|
|
this.state = {
|
2018-05-31 12:37:57 -04:00
|
|
|
|
exifData: [],
|
2018-05-01 16:58:24 -04:00
|
|
|
|
showModal: false,
|
|
|
|
|
};
|
|
|
|
|
|
2018-05-31 12:37:57 -04:00
|
|
|
|
_.bindAll(this, [
|
|
|
|
|
'bindEvents',
|
|
|
|
|
'handleDrop',
|
|
|
|
|
'toggleErrorModal',
|
|
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
|
this.bindEvents();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
bindEvents () {
|
|
|
|
|
this.context.ws.subscribe('parsed-exif-tags', data => {
|
|
|
|
|
this.setState({
|
|
|
|
|
exifData: data,
|
|
|
|
|
});
|
|
|
|
|
});
|
2018-04-03 21:47:41 -04:00
|
|
|
|
}
|
2018-04-13 23:28:55 -04:00
|
|
|
|
|
2018-05-01 16:58:24 -04:00
|
|
|
|
handleDragOver (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
}
|
2018-04-03 21:47:41 -04:00
|
|
|
|
|
2018-05-01 16:58:24 -04:00
|
|
|
|
handleDrop (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
2018-04-03 21:47:41 -04:00
|
|
|
|
|
2018-05-01 16:58:24 -04:00
|
|
|
|
const draggedFiles = [];
|
|
|
|
|
for (const f of e.dataTransfer.files) {
|
|
|
|
|
draggedFiles.push(f.path);
|
|
|
|
|
}
|
2018-04-19 15:23:36 -04:00
|
|
|
|
|
2018-05-09 09:06:37 -04:00
|
|
|
|
const newTransfer = { ...e.dataTransfer };
|
2018-05-07 16:33:32 -04:00
|
|
|
|
console.info(newTransfer);
|
|
|
|
|
|
2018-05-31 12:37:57 -04:00
|
|
|
|
this.context.ws.sendJSON('dropped-files', draggedFiles);
|
2018-05-01 16:58:24 -04:00
|
|
|
|
}
|
2018-04-19 15:23:36 -04:00
|
|
|
|
|
2018-05-01 16:58:24 -04:00
|
|
|
|
showErrorDialog () {
|
2018-05-31 12:37:57 -04:00
|
|
|
|
this.context.ws.sendJSON(
|
2018-05-01 16:58:24 -04:00
|
|
|
|
'show-error-box',
|
|
|
|
|
'Looks like there was a problem. (╥﹏╥) \n (╯°□°)╯︵ ┻━┻'
|
2018-05-30 09:34:33 -04:00
|
|
|
|
);
|
2018-05-01 16:58:24 -04:00
|
|
|
|
}
|
2018-04-19 15:23:36 -04:00
|
|
|
|
|
2018-05-01 16:58:24 -04:00
|
|
|
|
showOpenDialog () {
|
2018-05-31 12:37:57 -04:00
|
|
|
|
this.context.ws.sendJSON('show-open-dialog');
|
2018-05-01 16:58:24 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showSaveDialog () {
|
2018-05-31 12:37:57 -04:00
|
|
|
|
this.context.ws.sendJSON('show-save-dialog');
|
2018-05-01 16:58:24 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggleErrorModal () {
|
|
|
|
|
this.setState(prevState => ({
|
|
|
|
|
showModal: !prevState.showModal,
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
return (
|
|
|
|
|
<main>
|
|
|
|
|
<Jumbotron onDrop={this.handleDrop} onDragover={this.handleDragOver}>
|
|
|
|
|
<Container className="App">
|
|
|
|
|
<Row>
|
|
|
|
|
<header className="App-header">
|
|
|
|
|
<h1>Welcome to Film Exif</h1>
|
|
|
|
|
</header>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row>
|
|
|
|
|
<p className="App-intro">
|
|
|
|
|
Drop files here.
|
|
|
|
|
</p>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col md={3}>
|
|
|
|
|
<Button onClick={this.showOpenDialog}>Show Open Dialog</Button>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col md={3}>
|
|
|
|
|
<Button onClick={this.showSaveDialog}>Show Save Dialog</Button>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col md={3}>
|
|
|
|
|
<Button onClick={this.showErrorDialog}>Show Error Dialog</Button>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col md={3}>
|
|
|
|
|
<Button onClick={this.toggleErrorModal}>Show Error Modal</Button>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
2018-05-31 12:37:57 -04:00
|
|
|
|
<Row>
|
|
|
|
|
<Col md={12}>
|
|
|
|
|
<h3>Parsed Exif Data</h3>
|
|
|
|
|
<pre>{JSON.stringify(this.state.exifData, null, 2)}</pre>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
2018-05-01 16:58:24 -04:00
|
|
|
|
</Container>
|
|
|
|
|
</Jumbotron>
|
|
|
|
|
<Modal fade isOpen={this.state.showModal} toggle={this.toggleErrorModal}>
|
|
|
|
|
<ModalHeader toggle={this.toggleErrorModal}>
|
|
|
|
|
Error Title
|
|
|
|
|
</ModalHeader>
|
|
|
|
|
<ModalBody>
|
2018-05-31 12:37:57 -04:00
|
|
|
|
Looks like there was a problem. (╥﹏╥)<br />(╯°□°)╯︵ ┻━┻
|
2018-05-01 16:58:24 -04:00
|
|
|
|
</ModalBody>
|
|
|
|
|
<ModalFooter>
|
|
|
|
|
<Button color="primary" onClick={this.toggleErrorModal}>Close</Button>
|
|
|
|
|
</ModalFooter>
|
|
|
|
|
</Modal>
|
|
|
|
|
</main>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|