diff --git a/client/package.json b/client/package.json
index b1462e8be..ee2c381d6 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/assets/scss/main.scss b/client/src/assets/scss/main.scss
index a7152ffed..1dfa61558 100644
--- a/client/src/assets/scss/main.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/client/src/components/App.js b/client/src/components/App.js
index 0b3af2b22..89e535919 100644
--- a/client/src/components/App.js
+++ b/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,10 +17,12 @@ 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(() => {
@@ -28,17 +30,27 @@ const App = props => {
}, [])
return (
-
-
-
-
- {settings &&
- {map ? : null}
- }
-
-
-
-
+
+
+
+
+ {settings &&
+
+ {map &&
+ }
+ }
+
+
+
+
)
}
diff --git a/client/src/components/MapTiles.jsx b/client/src/components/MapTiles.jsx
index 4ac9f0324..1c331086d 100644
--- a/client/src/components/MapTiles.jsx
+++ b/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={`© Stadia Maps, © OpenMapTiles © OpenStreetMap contributors`}
url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
/>
- {data &&
- <>
-
-
-
-
- }
+
+ {selected.Gyms && }
+ {selected.Pokestops && }
+ {selected.Pokemon && }
+
)
}
diff --git a/client/src/components/gyms/Gym.jsx b/client/src/components/gyms/Gym.jsx
index 50783ecfa..fee785da2 100644
--- a/client/src/components/gyms/Gym.jsx
+++ b/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 (
-
- {data.map(gym => {
- return (
-
-
-
-
-
- )
- })}
-
+ <>
+ {data &&
+ {data.gyms.map(gym => {
+ return (
+
+
+
+
+
+ )
+ })}
+ }
+
)
}
-export default Gym
\ No newline at end of file
+export default Gym
diff --git a/client/src/components/layout/Drawer.jsx b/client/src/components/layout/Drawer.jsx
new file mode 100644
index 000000000..4b7b4a605
--- /dev/null
+++ b/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: },
+ { name: 'Raids', icon: },
+ { name: 'Pokestops', icon: },
+ { name: 'Quests', icon: },
+ { name: 'Invasions', icon: },
+ { name: 'Spawnpoints', icon: },
+ { name: 'Pokemon', icon: },
+ { name: 'Ingress Portals', icon: },
+ { name: 'Scan-Cells', icon: },
+ { name: 'S2-Cells', icon: },
+ { name: 'Weather', icon: },
+ { name: 'ScanAreas', icon: },
+ { name: 'Devices', icon: }
+ ]
+
+ const menuItems = [
+ { name: 'Areas', icon: },
+ { name: 'Stats', icon: },
+ { name: 'Search', icon: },
+ { name: 'Settings', icon: },
+ { name: 'ClearCache', icon: },
+ { name: 'Discord', icon: },
+ { name: 'Logout', icon: }
+ ]
+
+ return (
+
+
+
+ Map Filters
+ {filterItems.map(item => {
+ return (
+
+ {item.icon}
+
+ {
+ setSelected({ ...selected, [item.name]: !selected[item.name] });
+ }}
+ >
+ {selected[item.name] ? : }
+
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+ Options
+ {menuItems.map(item => {
+ return (
+
+ {item.icon}
+
+
+ )
+ })}
+
+