film-exif/src/views/HomeView.js
2018-04-19 15:23:36 -04:00

71 lines
1.5 KiB
JavaScript

import {
Button,
Col,
Container,
Jumbotron,
Row,
} from '../components/Bootstrap';
import { JSONMessage } from '../helpers/web-socket';
function handleDrop (e) {
e.preventDefault();
e.stopPropagation();
const draggedFiles = [];
for (const f of e.dataTransfer.files) {
draggedFiles.push(f.path);
}
window.clientWS.send(JSONMessage('dropped-files', draggedFiles));
}
function handleDragOver (e) {
e.preventDefault();
e.stopPropagation();
}
function showOpenDialog () {
window.clientWS.send(JSONMessage('show-open-dialog', {}));
}
function showSaveDialog () {
window.clientWS.send(JSONMessage('show-save-dialog', {}));
}
function showErrorDialog () {
window.clientWS.send(JSONMessage(
'show-error-box',
'Looks like there was a problem. (╥﹏╥) \n (╯°□°)╯︵ ┻━┻'
));
}
export const HomeView = (props) => {
return (
<Jumbotron onDrop={handleDrop} onDragover={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={4}>
<Button onClick={showOpenDialog}>Show Open Dialog</Button>
</Col>
<Col md={4}>
<Button onClick={showSaveDialog}>Show Save Dialog</Button>
</Col>
<Col md={4}>
<Button onClick={showErrorDialog}>Show Error Dialog</Button>
</Col>
</Row>
</Container>
</Jumbotron>
);
};