77 lines
1.6 KiB
JavaScript
77 lines
1.6 KiB
JavaScript
import {
|
|
Alert,
|
|
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 (
|
|
<main>
|
|
<Alert color="info">
|
|
This is a work in progress
|
|
</Alert>
|
|
<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>
|
|
</main>
|
|
);
|
|
};
|