112 lines
2.3 KiB
JavaScript
112 lines
2.3 KiB
JavaScript
import { Component } from 'inferno';
|
|
import {
|
|
Button,
|
|
Col,
|
|
Container,
|
|
Jumbotron,
|
|
Modal,
|
|
ModalBody,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
Row,
|
|
} from '//components/Bootstrap';
|
|
|
|
export class HomeView extends Component {
|
|
constructor (props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
showModal: false,
|
|
};
|
|
|
|
this.toggleErrorModal = this.toggleErrorModal.bind(this);
|
|
}
|
|
|
|
handleDragOver (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
handleDrop (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const draggedFiles = [];
|
|
for (const f of e.dataTransfer.files) {
|
|
draggedFiles.push(f.path);
|
|
}
|
|
|
|
const newTransfer = { ...e.dataTransfer };
|
|
console.info(newTransfer);
|
|
|
|
window.wsCache.sendJSON('dropped-files', draggedFiles);
|
|
}
|
|
|
|
showErrorDialog () {
|
|
window.wsCache.sendJSON(
|
|
'show-error-box',
|
|
'Looks like there was a problem. (╥﹏╥) \n (╯°□°）╯︵ ┻━┻'
|
|
);
|
|
}
|
|
|
|
showOpenDialog () {
|
|
window.wsCache.sendJSON('show-open-dialog');
|
|
}
|
|
|
|
showSaveDialog () {
|
|
window.wsCache.sendJSON('show-save-dialog');
|
|
}
|
|
|
|
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>
|
|
</Container>
|
|
</Jumbotron>
|
|
<Modal fade isOpen={this.state.showModal} toggle={this.toggleErrorModal}>
|
|
<ModalHeader toggle={this.toggleErrorModal}>
|
|
Error Title
|
|
</ModalHeader>
|
|
<ModalBody>
|
|
Body of error message
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button color="primary" onClick={this.toggleErrorModal}>Close</Button>
|
|
</ModalFooter>
|
|
</Modal>
|
|
</main>
|
|
);
|
|
}
|
|
}
|