From 9d29a1ed96c10b31b875d1d453fd4ad2e63614cd Mon Sep 17 00:00:00 2001 From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com> Date: Thu, 11 Mar 2021 21:31:06 -0500 Subject: [PATCH 1/2] Add Initial Filtering Menus - Floating buttons - Drawer - Split up query requests - Initial filtering on/off --- client/package.json | 3 + client/src/assets/scss/main.scss | 8 ++ client/src/components/App.js | 42 ++++--- client/src/components/MapTiles.jsx | 53 ++++---- client/src/components/gyms/Gym.jsx | 51 +++++--- client/src/components/layout/Drawer.jsx | 116 ++++++++++++++++++ client/src/components/layout/FloatingBtn.jsx | 54 ++++++++ client/src/components/layout/Nav.jsx | 33 +++++ client/src/components/layout/theme.js | 21 ++++ client/src/components/pokemon/MarkerIcon.js | 2 +- client/src/components/pokemon/Pokemon.jsx | 52 +++++--- client/src/components/pokestops/MarkerIcon.js | 2 +- client/src/components/pokestops/Pokestop.jsx | 49 +++++--- client/src/main.js | 1 + client/src/services/Query.js | 21 ++++ client/src/services/data/gym.js | 16 +++ client/src/services/data/pokemon.js | 14 +++ client/src/services/data/pokestop.js | 13 ++ client/src/services/queries.js | 27 ---- server/src/schema/schema.js | 2 +- yarn.lock | 97 ++++++++++++++- 21 files changed, 546 insertions(+), 131 deletions(-) create mode 100644 client/src/components/layout/Drawer.jsx create mode 100644 client/src/components/layout/FloatingBtn.jsx create mode 100644 client/src/components/layout/Nav.jsx create mode 100644 client/src/components/layout/theme.js create mode 100644 client/src/services/Query.js create mode 100644 client/src/services/data/gym.js create mode 100644 client/src/services/data/pokemon.js create mode 100644 client/src/services/data/pokestop.js delete mode 100644 client/src/services/queries.js 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 && } +