aboutsummaryrefslogtreecommitdiff
path: root/modern/src/GeofencesPage.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/GeofencesPage.js')
-rw-r--r--modern/src/GeofencesPage.js66
1 files changed, 66 insertions, 0 deletions
diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js
new file mode 100644
index 00000000..389ac998
--- /dev/null
+++ b/modern/src/GeofencesPage.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { isWidthUp, makeStyles, withWidth } from '@material-ui/core';
+import Drawer from '@material-ui/core/Drawer';
+import ContainerDimensions from 'react-container-dimensions';
+import MainToolbar from './MainToolbar';
+import Map from './map/Map';
+import CurrentLocationMap from './map/CurrentLocationMap';
+import GeofenceEditMap from './map/GeofenceEditMap';
+import GeofencesList from './GeofencesList';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ content: {
+ flexGrow: 1,
+ overflow: 'hidden',
+ display: 'flex',
+ flexDirection: 'row',
+ [theme.breakpoints.down('xs')]: {
+ flexDirection: 'column-reverse',
+ }
+ },
+ drawerPaper: {
+ position: 'relative',
+ [theme.breakpoints.up('sm')]: {
+ width: 350,
+ },
+ [theme.breakpoints.down('xs')]: {
+ height: 250,
+ }
+ },
+ mapContainer: {
+ flexGrow: 1,
+ },
+}));
+
+const GeofencesPage = ({ width }) => {
+ const classes = useStyles();
+
+ return (
+ <div className={classes.root}>
+ <MainToolbar />
+ <div className={classes.content}>
+ <Drawer
+ anchor={isWidthUp('sm', width) ? 'left' : 'bottom'}
+ variant='permanent'
+ classes={{ paper: classes.drawerPaper }}>
+ <GeofencesList />
+ </Drawer>
+ <div className={classes.mapContainer}>
+ <ContainerDimensions>
+ <Map>
+ <CurrentLocationMap />
+ <GeofenceEditMap />
+ </Map>
+ </ContainerDimensions>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default withWidth()(GeofencesPage);