Add Initial Filtering Menus

client/package.json

@@ -33,7 +33,10 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/pickers": "^3.2.10",
+    "@mui-treasury/layout": "^4.5.0",
+    "@mui-treasury/styles": "^1.13.1",
     "babel-loader": "^8.2.2",
+    "clsx": "^1.1.1",
     "css-loader": "^5.1.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.2.0",

client/src/assets/scss/main.scss

@@ -10,4 +10,12 @@
   bottom: 0;
   left: 0;
   right: 0;
+}
+
+.MuiDrawer-paper {
+  background-color: 'rgb(51,51,51)';
+}
+
+.MuiToggleButton-root {
+  background-color: white;
 }

client/src/components/App.js

@@ -1,14 +1,14 @@
+import "../assets/scss/main.scss"
+
 import React, { useState, useEffect } from 'react'
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
 import { hot } from "react-hot-loader/root.js"
-import "../assets/scss/main.scss"
-
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
 import { MapContainer } from 'react-leaflet'
+
 import MapTiles from './MapTiles.jsx'
 import Fetch from '../services/Fetch.js'
 
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
-
 const client = new ApolloClient({
   uri: '/graphql',
   cache: new InMemoryCache()
@@ -17,28 +17,40 @@ const client = new ApolloClient({
 const App = props => {
   const [map, setMap] = useState(null)
   const [settings, setSettings] = useState(undefined)
+  const [zoom, setZoom] = useState(15)
 
   const getSettings = async () => {
     const body = (await Fetch.fetchSettings())
     setSettings(body)
+    setZoom(body.startZoom)
   }
 
   useEffect(() => {
     getSettings()
   }, [])
 
   return (
-    <ApolloProvider client={client}>
-      <Router>
-        <Switch>
-          <Route exact path="/">
-            {settings && <MapContainer center={[settings.startLat, settings.startLon]} zoom={settings.startZoom} whenCreated={setMap} >
-              {map ? <MapTiles map={map} settings={settings} /> : null}
-            </MapContainer>}
-          </Route>
-        </Switch>
-      </Router>
-    </ApolloProvider>
+    <Router>
+      <Switch>
+        <Route exact path="/">
+          <ApolloProvider client={client}>
+            {settings &&
+              <MapContainer
+                center={[settings.startLat, settings.startLon]}
+                zoom={zoom}
+                whenCreated={setMap}
+                zoomControl={false} >
+                {map &&
+                  <MapTiles
+                    map={map}
+                    settings={settings}
+                    zoom={zoom}
+                    setZoom={setZoom} />}
+              </MapContainer>}
+          </ApolloProvider>
+        </Route>
+      </Switch>
+    </Router>
   )
 }
 

client/src/components/MapTiles.jsx

@@ -1,31 +1,31 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { TileLayer } from 'react-leaflet'
+import { TileLayer, ZoomControl } from 'react-leaflet'
 import Gym from './gyms/Gym.jsx'
 import Pokestop from './pokestops/Pokestop.jsx'
 import Pokemon from './pokemon/Pokemon.jsx'
-import { useQuery } from '@apollo/client'
-import { getDataQuery } from '../services/queries.js'
+import Nav from './layout/Nav.jsx'
 
 const MapTiles = ({ map, settings }) => {
   const [bounds, setBounds] = useState({
-    _southWest: {
-      lat: 0,
-      lng: 0
-    },
-    _northEast: {
-      lat: 0,
-      lng: 0
-    }
+    _southWest: { lat: 0, lng: 0 },
+    _northEast: { lat: 0, lng: 0 }
   })
   const [position, setPosition] = useState({})
-  const { loading, error, data } = useQuery(getDataQuery, {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
-  });
+  const [selected, setSelected] = useState({
+    Gyms: true,
+    Raids: false,
+    Pokestops: false,
+    Quests: false,
+    Invasions: false,
+    Spawnpoints: false,
+    Pokemon: true,
+    IngressPortals: false,
+    ScanCells: false,
+    S2Cells: false,
+    Weather: false,
+    ScanAreas: false,
+    Devices: false
+  })
 
   const onMove = useCallback(() => {
     setPosition(map.getCenter())
@@ -48,13 +48,14 @@ const MapTiles = ({ map, settings }) => {
         attribution={`&copy; <a href='https://stadiamaps.com/'>Stadia Maps</a>, &copy; <a href='https://openmaptiles.org/'>OpenMapTiles</a> &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors`}
         url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
       />
-      {data &&
-        <>
-          <Gym data={data.gyms} />
-          <Pokestop data={data.pokestops} />
-          <Pokemon data={data.pokemon} />
-        </>
-      }
+      <ZoomControl position='topright' zoomInText='+' zoomOutText='-' />
+      {selected.Gyms && <Gym bounds={bounds} />}
+      {selected.Pokestops && <Pokestop bounds={bounds} />}
+      {selected.Pokemon && <Pokemon bounds={bounds} />}
+      <Nav
+        selected={selected}
+        setSelected={setSelected}
+      />
     </>
   )
 }

client/src/components/gyms/Gym.jsx

@@ -1,28 +1,41 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { Marker, Popup } from 'react-leaflet'
 import MarkerIcon from './MarkerIcon.js'
 import PopupContent from './Popup.jsx'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
 
-const Gym = ({ data }) => {
+const Gym = ({ bounds }) => {
+  const { loading, error, data } = useQuery(Query.getAllGyms(), {
+    variables: {
+      minLat: bounds._southWest.lat,
+      minLon: bounds._southWest.lng,
+      maxLat: bounds._northEast.lat,
+      maxLon: bounds._northEast.lng
+    }
+  })
+
   return (
-    <MarkerClusterGroup
-      disableClusteringAtZoom={16}
-    >
-      {data.map(gym => {
-        return (
-          <Marker
-            key={gym.id}
-            position={[gym.lat, gym.lon]}
-            icon={MarkerIcon(gym)}>
-            <Popup position={[gym.lat, gym.lon]}>
-              <PopupContent gym={gym} />
-            </Popup>
-          </Marker>
-        )
-      })}
-    </MarkerClusterGroup>
+    <>
+      {data && <MarkerClusterGroup
+        disableClusteringAtZoom={16}
+      >
+        {data.gyms.map(gym => {
+          return (
+            <Marker
+              key={gym.id}
+              position={[gym.lat, gym.lon]}
+              icon={MarkerIcon(gym)}>
+              <Popup position={[gym.lat, gym.lon]}>
+                <PopupContent gym={gym} />
+              </Popup>
+            </Marker>
+          )
+        })}
+      </MarkerClusterGroup>}
+    </>
   )
 }
 
-export default Gym
+export default Gym

client/src/components/layout/Drawer.jsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import clsx from 'clsx'
+import { makeStyles } from '@material-ui/core/styles'
+import { Drawer, Button, List, Divider, ListItem, ListItemText, Typography } from '@material-ui/core'
+import { Check, Clear, ArrowForwardIos } from '@material-ui/icons'
+import { ToggleButton } from '@material-ui/lab'
+
+const useStyles = makeStyles({
+  list: {
+    width: 'auto',
+    zIndex: 9998,
+    color: '#FFFFFF',
+    backgroundColor: 'rgb(51,51,51)'
+
+  },
+  drawer: {
+  }
+})
+
+const DrawerMenu = ({ drawer, toggleDrawer, selected, setSelected }) => {
+  const classes = useStyles()
+
+  const filterItems = [
+    { name: 'Gyms', icon: <ArrowForwardIos /> },
+    { name: 'Raids', icon: <ArrowForwardIos /> },
+    { name: 'Pokestops', icon: <ArrowForwardIos /> },
+    { name: 'Quests', icon: <ArrowForwardIos /> },
+    { name: 'Invasions', icon: <ArrowForwardIos /> },
+    { name: 'Spawnpoints', icon: <ArrowForwardIos /> },
+    { name: 'Pokemon', icon: <ArrowForwardIos /> },
+    { name: 'Ingress Portals', icon: <ArrowForwardIos /> },
+    { name: 'Scan-Cells', icon: <ArrowForwardIos /> },
+    { name: 'S2-Cells', icon: <ArrowForwardIos /> },
+    { name: 'Weather', icon: <ArrowForwardIos /> },
+    { name: 'ScanAreas', icon: <ArrowForwardIos /> },
+    { name: 'Devices', icon: <ArrowForwardIos /> }
+  ]
+
+  const menuItems = [
+    { name: 'Areas', icon: <ArrowForwardIos /> },
+    { name: 'Stats', icon: <ArrowForwardIos /> },
+    { name: 'Search', icon: <ArrowForwardIos /> },
+    { name: 'Settings', icon: <ArrowForwardIos /> },
+    { name: 'ClearCache', icon: <ArrowForwardIos /> },
+    { name: 'Discord', icon: <ArrowForwardIos /> },
+    { name: 'Logout', icon: <ArrowForwardIos /> }
+  ]
+
+  return (
+    <Drawer anchor={'left'} open={drawer} onClose={toggleDrawer(false)}>
+      <div
+        className={clsx(classes.list)}
+        role="presentation"
+        onKeyDown={toggleDrawer(false)}
+      >
+        <List>
+          <Typography>Map Filters</Typography>
+          {filterItems.map(item => {
+            return (
+              <ListItem button key={item.name}>
+                {item.icon}
+                <ListItemText primary={item.name} />
+                <ToggleButton
+                  value="x"
+                  selected={selected[item.name]}
+                  onChange={() => {
+                    setSelected({ ...selected, [item.name]: !selected[item.name] });
+                  }}
+                >
+                  {selected[item.name] ? <Check style={{ fontSize: 15, color: 'green' }} /> : <Clear style={{ fontSize: 15, color: 'red' }} />}
+
+                </ToggleButton>
+              </ListItem>
+            )
+          })}
+        </List>
+        <Divider />
+        <List>
+          <ListItem>
+            <Button variant="contained" color="secondary">
+              Import
+          </Button>&nbsp;&nbsp;&nbsp;
+          <Button variant="contained" color="primary">
+              Export
+          </Button>
+          </ListItem>
+        </List>
+        <Divider />
+        <List>
+          <Typography>Options</Typography>
+          {menuItems.map(item => {
+            return (
+              <ListItem button key={item.name}>
+                {item.icon}
+                <ListItemText primary={item.name} />
+              </ListItem>
+            )
+          })}
+        </List>
+      </div>
+    </Drawer>
+  )
+}
+
+export default DrawerMenu

client/src/components/layout/FloatingBtn.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { Grid, ThemeProvider, Fab } from '@material-ui/core'
+import { Menu, LocationOn, ZoomIn, ZoomOut } from '@material-ui/icons'
+import theme from './theme'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+      position: 'sticky',
+      top: 0,
+      left: 5,
+      zIndex: 9998
+    },
+  }
+}))
+
+const ActionButtons = ({ zoom, setZoom, toggleDrawer }) => {
+  const classes = useStyles()
+
+  const onClickZoom = value => {
+    setZoom(zoom + value)
+  }
+
+  return (
+    <ThemeProvider theme={theme} >
+      <Grid container direction='column' spacing={1} className={classes.root}>
+        <Grid item >
+          <Fab color="primary" aria-label="add">
+            <Menu onClick={toggleDrawer(true)}/>
+          </Fab>
+        </Grid>
+        <Grid item >
+          <Fab color="secondary" aria-label="edit">
+            <LocationOn />
+          </Fab>
+        </Grid>
+        <Grid item >
+          <Fab color="secondary" aria-label="edit">
+            <ZoomIn onClick={() => onClickZoom(1)}/>
+          </Fab>
+        </Grid>
+        <Grid item >
+          <Fab color="secondary" aria-label="edit">
+            <ZoomOut onClick={() => onClickZoom(-1)}/>
+          </Fab>
+        </Grid>
+      </Grid>
+    </ThemeProvider>
+  )
+}
+
+export default ActionButtons