From 758b458e8d07dae4fbff544af7a1785f803d5655 Mon Sep 17 00:00:00 2001
From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>
Date: Fri, 12 Mar 2021 12:28:25 -0500
Subject: [PATCH] Add Spawnpoints

- Add ability to see spawnpoints
- Green are confirmed, red unconfirmed timers
- Slight refactoring
---
 client/src/components/MapTiles.jsx            |  4 +-
 client/src/components/devices/Device.jsx      |  8 ++--
 .../devices/{MarkerIcon.js => marker.js}      |  0
 client/src/components/gyms/Gym.jsx            |  8 ++--
 .../gyms/{MarkerIcon.js => marker.js}         |  0
 client/src/components/pokemon/Pokemon.jsx     |  8 ++--
 .../pokemon/{MarkerIcon.js => marker.js}      |  0
 client/src/components/pokestops/Pokestop.jsx  |  8 ++--
 .../pokestops/{MarkerIcon.js => marker.js}    |  0
 client/src/components/spawnpoints/Popup.jsx   | 11 +++++
 .../src/components/spawnpoints/Spawnpoint.jsx | 42 +++++++++++++++++++
 client/src/components/spawnpoints/marker.js   |  7 ++++
 client/src/services/Query.js                  |  5 +++
 client/src/services/data/spawnpoint.js        | 14 +++++++
 server/src/configs/default.json               |  4 +-
 server/src/models/Spawnpoint.js               |  9 ++++
 server/src/models/index.js                    |  4 +-
 server/src/schema/schema.js                   | 40 +++++++++---------
 server/src/schema/spawnpoint.js               | 12 ++++++
 19 files changed, 149 insertions(+), 35 deletions(-)
 rename client/src/components/devices/{MarkerIcon.js => marker.js} (100%)
 rename client/src/components/gyms/{MarkerIcon.js => marker.js} (100%)
 rename client/src/components/pokemon/{MarkerIcon.js => marker.js} (100%)
 rename client/src/components/pokestops/{MarkerIcon.js => marker.js} (100%)
 create mode 100644 client/src/components/spawnpoints/Popup.jsx
 create mode 100644 client/src/components/spawnpoints/Spawnpoint.jsx
 create mode 100644 client/src/components/spawnpoints/marker.js
 create mode 100644 client/src/services/data/spawnpoint.js
 create mode 100644 server/src/models/Spawnpoint.js
 create mode 100644 server/src/schema/spawnpoint.js

diff --git a/client/src/components/MapTiles.jsx b/client/src/components/MapTiles.jsx
index c401f135b..0f957f1a3 100644
--- a/client/src/components/MapTiles.jsx
+++ b/client/src/components/MapTiles.jsx
@@ -5,6 +5,7 @@ import Gym from './gyms/Gym.jsx'
 import Pokestop from './pokestops/Pokestop.jsx'
 import Pokemon from './pokemon/Pokemon.jsx'
 import Nav from './layout/Nav.jsx'
+import Spawnpoint from './spawnpoints/Spawnpoint.jsx'
 
 const MapTiles = ({ map, settings }) => {
   const [bounds, setBounds] = useState({
@@ -50,10 +51,11 @@ const MapTiles = ({ map, settings }) => {
         url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
       />
       <ZoomControl position='topright' zoomInText='+' zoomOutText='-' />
+      {selected.Devices && <Device />}
       {selected.Gyms && <Gym bounds={bounds} />}
       {selected.Pokestops && <Pokestop bounds={bounds} />}
       {selected.Pokemon && <Pokemon bounds={bounds} />}
-      {selected.Devices && <Device />}
+      {selected.Spawnpoints && <Spawnpoint bounds={bounds} /> }
       <Nav
         selected={selected}
         setSelected={setSelected}
diff --git a/client/src/components/devices/Device.jsx b/client/src/components/devices/Device.jsx
index c5199cd79..511a3b596 100644
--- a/client/src/components/devices/Device.jsx
+++ b/client/src/components/devices/Device.jsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import { Marker, Popup } from 'react-leaflet'
-import MarkerIcon from './MarkerIcon.js'
-import PopupContent from './Popup.jsx'
+
 import { useQuery } from '@apollo/client'
 import Query from '../../services/Query.js'
 
+import marker from './marker.js'
+import PopupContent from './Popup.jsx'
+
 const Device = () => {
   const { loading, error, data } = useQuery(Query.getAllDevices())
 
@@ -15,7 +17,7 @@ const Device = () => {
           <Marker
             key={device.uuid}
             position={[device.last_lat, device.last_lon]}
-            icon={MarkerIcon(device)}>
+            icon={marker(device)}>
             <Popup position={[device.last_lat, device.last_lon]}>
               <PopupContent device={device} />
             </Popup>
diff --git a/client/src/components/devices/MarkerIcon.js b/client/src/components/devices/marker.js
similarity index 100%
rename from client/src/components/devices/MarkerIcon.js
rename to client/src/components/devices/marker.js
diff --git a/client/src/components/gyms/Gym.jsx b/client/src/components/gyms/Gym.jsx
index 132b45b42..8b7d6d2e7 100644
--- a/client/src/components/gyms/Gym.jsx
+++ b/client/src/components/gyms/Gym.jsx
@@ -1,11 +1,13 @@
 import React from 'react'
 import { Marker, Popup } from 'react-leaflet'
-import MarkerIcon from './MarkerIcon.js'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
-import PopupContent from './Popup.jsx'
+
 import { useQuery } from '@apollo/client'
 import Query from '../../services/Query.js'
 
+import marker from './marker.js'
+import PopupContent from './Popup.jsx'
+
 const Gym = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllGyms(), {
     variables: {
@@ -25,7 +27,7 @@ const Gym = ({ bounds }) => {
           <Marker
             key={gym.id}
             position={[gym.lat, gym.lon]}
-            icon={MarkerIcon(gym)}>
+            icon={marker(gym)}>
             <Popup position={[gym.lat, gym.lon]}>
               <PopupContent gym={gym} />
             </Popup>
diff --git a/client/src/components/gyms/MarkerIcon.js b/client/src/components/gyms/marker.js
similarity index 100%
rename from client/src/components/gyms/MarkerIcon.js
rename to client/src/components/gyms/marker.js
diff --git a/client/src/components/pokemon/Pokemon.jsx b/client/src/components/pokemon/Pokemon.jsx
index d13d68775..b882ffe9d 100644
--- a/client/src/components/pokemon/Pokemon.jsx
+++ b/client/src/components/pokemon/Pokemon.jsx
@@ -1,11 +1,13 @@
 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'
 
+import marker from './marker.js'
+import PopupContent from './Popup.jsx'
+
 const Pokemon = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllPokemon(), {
     variables: {
@@ -25,7 +27,7 @@ const Pokemon = ({ bounds }) => {
           <Marker
             key={pokemon.id}
             position={[pokemon.lat, pokemon.lon]}
-            icon={MarkerIcon(pokemon)}>
+            icon={marker(pokemon)}>
             <Popup position={[pokemon.lat, pokemon.lon]}>
               <PopupContent pokemon={pokemon} />
             </Popup>
diff --git a/client/src/components/pokemon/MarkerIcon.js b/client/src/components/pokemon/marker.js
similarity index 100%
rename from client/src/components/pokemon/MarkerIcon.js
rename to client/src/components/pokemon/marker.js
diff --git a/client/src/components/pokestops/Pokestop.jsx b/client/src/components/pokestops/Pokestop.jsx
index 62cf0ad93..42ad5ccf7 100644
--- a/client/src/components/pokestops/Pokestop.jsx
+++ b/client/src/components/pokestops/Pokestop.jsx
@@ -1,11 +1,13 @@
 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'
 
+import marker from './marker.js'
+import PopupContent from './Popup.jsx'
+
 const Pokestop = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllPokestops(), {
     variables: {
@@ -25,7 +27,7 @@ const Pokestop = ({ bounds }) => {
           <Marker
             key={pokestop.id}
             position={[pokestop.lat, pokestop.lon]}
-            icon={MarkerIcon(pokestop)}>
+            icon={marker(pokestop)}>
             <Popup position={[pokestop.lat, pokestop.lon]}>
               <PopupContent pokestop={pokestop} />
             </Popup>
diff --git a/client/src/components/pokestops/MarkerIcon.js b/client/src/components/pokestops/marker.js
similarity index 100%
rename from client/src/components/pokestops/MarkerIcon.js
rename to client/src/components/pokestops/marker.js
diff --git a/client/src/components/spawnpoints/Popup.jsx b/client/src/components/spawnpoints/Popup.jsx
new file mode 100644
index 000000000..aaa05e047
--- /dev/null
+++ b/client/src/components/spawnpoints/Popup.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const SpawnpointPopup = ({ spawnpoint }) => {
+  return (
+    <>
+    {spawnpoint.despawn_sec}
+    </>
+  )
+}
+
+export default SpawnpointPopup
\ No newline at end of file
diff --git a/client/src/components/spawnpoints/Spawnpoint.jsx b/client/src/components/spawnpoints/Spawnpoint.jsx
new file mode 100644
index 000000000..f25582c5d
--- /dev/null
+++ b/client/src/components/spawnpoints/Spawnpoint.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Popup, CircleMarker } from 'react-leaflet'
+import MarkerClusterGroup from 'react-leaflet-markercluster'
+
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
+
+import marker from './marker.js'
+import PopupContent from './Popup.jsx'
+
+const Spawnpoint = ({ bounds }) => {
+  const { loading, error, data } = useQuery(Query.getAllSpawnpoints(), {
+    variables: {
+      minLat: bounds._southWest.lat,
+      minLon: bounds._southWest.lng,
+      maxLat: bounds._northEast.lat,
+      maxLon: bounds._northEast.lng
+    }
+  })
+
+  return (
+    <MarkerClusterGroup
+      disableClusteringAtZoom={16}
+    >
+      {data && data.spawnpoints.map(spawnpoint => {
+        return (
+          <CircleMarker
+            key={spawnpoint.id}
+            center={[spawnpoint.lat, spawnpoint.lon]}
+            radius={1}
+            pathOptions={marker(spawnpoint)}>
+            <Popup position={[spawnpoint.lat, spawnpoint.lon]}>
+              <PopupContent spawnpoint={spawnpoint} />
+            </Popup>
+          </CircleMarker>
+        )
+      })}
+    </MarkerClusterGroup>
+  )
+}
+
+export default Spawnpoint
diff --git a/client/src/components/spawnpoints/marker.js b/client/src/components/spawnpoints/marker.js
new file mode 100644
index 000000000..da91ed681
--- /dev/null
+++ b/client/src/components/spawnpoints/marker.js
@@ -0,0 +1,7 @@
+export default function (spawnpoint) {
+  return {
+    color: spawnpoint.despawn_sec ? 'green' : 'red',
+    fillColor: spawnpoint.despawn_sec ? 'green' : 'red',
+    fillOpacity: 0.5,  
+  }
+}
\ No newline at end of file
diff --git a/client/src/services/Query.js b/client/src/services/Query.js
index 040dd9195..2b4b712ef 100644
--- a/client/src/services/Query.js
+++ b/client/src/services/Query.js
@@ -2,6 +2,7 @@ import { getAllDevices } from './data/device.js'
 import { getAllGyms } from './data/gym.js'
 import { getAllPokestops } from './data/pokestop.js'
 import { getAllPokemon } from './data/pokemon.js'
+import { getAllSpawnpoints } from './data/spawnpoint.js'
 
 class Query {
 
@@ -21,6 +22,10 @@ class Query {
     return getAllPokemon
   }
 
+  static getAllSpawnpoints() {
+    return getAllSpawnpoints
+  }
+
 }
 
 export default Query
\ No newline at end of file
diff --git a/client/src/services/data/spawnpoint.js b/client/src/services/data/spawnpoint.js
new file mode 100644
index 000000000..c2ada2dee
--- /dev/null
+++ b/client/src/services/data/spawnpoint.js
@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client'
+
+const getAllSpawnpoints = gql`
+query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+  spawnpoints(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+    id
+    lat
+    lon
+    despawn_sec
+  }
+}
+`
+
+export { getAllSpawnpoints }
\ No newline at end of file
diff --git a/server/src/configs/default.json b/server/src/configs/default.json
index 9d57006fb..5b9bbe5d4 100644
--- a/server/src/configs/default.json
+++ b/server/src/configs/default.json
@@ -275,7 +275,7 @@
     "event": []
   },
   "devOptions": {
-    "enabled": true,
-    "graphiql": true
+    "enabled": false,
+    "graphiql": false
   }
 }
diff --git a/server/src/models/Spawnpoint.js b/server/src/models/Spawnpoint.js
new file mode 100644
index 000000000..6014d11ee
--- /dev/null
+++ b/server/src/models/Spawnpoint.js
@@ -0,0 +1,9 @@
+import { Model } from 'objection'
+
+class Spawnpoint extends Model {
+  static get tableName() {
+    return 'spawnpoint'
+  }
+}
+
+export default Spawnpoint
\ No newline at end of file
diff --git a/server/src/models/index.js b/server/src/models/index.js
index 8de4a1e79..44750453d 100644
--- a/server/src/models/index.js
+++ b/server/src/models/index.js
@@ -2,10 +2,12 @@ import Device from './Device.js'
 import Gym from './Gym.js'
 import Pokestop from './Pokestop.js'
 import Pokemon from './Pokemon.js'
+import Spawnpoint from './Spawnpoint.js'
 
 export {
   Device,
   Gym,
   Pokestop,
-  Pokemon
+  Pokemon,
+  Spawnpoint
 }
\ No newline at end of file
diff --git a/server/src/schema/schema.js b/server/src/schema/schema.js
index 65d41fbb0..cd1fb3ed2 100644
--- a/server/src/schema/schema.js
+++ b/server/src/schema/schema.js
@@ -4,7 +4,15 @@ import DeviceType from './device.js'
 import GymType from './gym.js'
 import PokestopType from './pokestop.js'
 import PokemonType from './pokemon.js'
-import { Device, Gym, Pokemon, Pokestop } from '../models/index.js'
+import SpawnpointType from './spawnpoint.js'
+import { Device, Gym, Pokemon, Pokestop, Spawnpoint } from '../models/index.js'
+
+const minMaxArgs = {
+  minLat: { type: GraphQLFloat },
+  maxLat: { type: GraphQLFloat },
+  minLon: { type: GraphQLFloat },
+  maxLon: { type: GraphQLFloat }
+}
 
 const RootQuery = new GraphQLObjectType({
   name: 'RootQueryType',
@@ -17,12 +25,7 @@ const RootQuery = new GraphQLObjectType({
     },
     gyms: {
       type: new GraphQLList(GymType),
-      args: {
-        minLat: { type: GraphQLFloat },
-        maxLat: { type: GraphQLFloat },
-        minLon: { type: GraphQLFloat },
-        maxLon: { type: GraphQLFloat }
-      },
+      args: minMaxArgs,
       async resolve(parent, args) {
         return await Gym.query()
           .whereBetween('lat', [args.minLat, args.maxLat])
@@ -33,12 +36,7 @@ const RootQuery = new GraphQLObjectType({
     },
     pokestops: {
       type: new GraphQLList(PokestopType),
-      args: {
-        minLat: { type: GraphQLFloat },
-        maxLat: { type: GraphQLFloat },
-        minLon: { type: GraphQLFloat },
-        maxLon: { type: GraphQLFloat }
-      },
+      args: minMaxArgs,
       async resolve(parent, args) {
         return await Pokestop.query()
           .whereBetween('lat', [args.minLat, args.maxLat])
@@ -49,12 +47,7 @@ const RootQuery = new GraphQLObjectType({
     },
     pokemon: {
       type: new GraphQLList(PokemonType),
-      args: {
-        minLat: { type: GraphQLFloat },
-        maxLat: { type: GraphQLFloat },
-        minLon: { type: GraphQLFloat },
-        maxLon: { type: GraphQLFloat }
-      },
+      args: minMaxArgs,
       async resolve(parent, args) {
         const ts = Math.floor((new Date).getTime() / 1000)
         return await Pokemon.query()
@@ -74,6 +67,15 @@ const RootQuery = new GraphQLObjectType({
         result.ultraLeague = JSON.parse(result.pvp_rankings_ultra_league)
         return result
       }
+    },
+    spawnpoints: {
+      type: new GraphQLList(SpawnpointType),
+      args: minMaxArgs,
+      async resolve(parent, args) {
+        return await Spawnpoint.query()
+          .whereBetween('lat', [args.minLat, args.maxLat])
+          .andWhereBetween('lon', [args.minLon, args.maxLon])
+      }
     }
   }
 })
diff --git a/server/src/schema/spawnpoint.js b/server/src/schema/spawnpoint.js
new file mode 100644
index 000000000..97bd3d866
--- /dev/null
+++ b/server/src/schema/spawnpoint.js
@@ -0,0 +1,12 @@
+import { GraphQLObjectType, GraphQLID, GraphQLInt, GraphQLFloat } from 'graphql'
+
+export default new GraphQLObjectType({
+  name: 'Spawnpoint',
+  fields: () => ({
+    id: { type: GraphQLID },
+    lat: { type: GraphQLFloat },
+    lon: { type: GraphQLFloat },
+    updated: { type: GraphQLInt },
+    despawn_sec: { type: GraphQLInt }
+  })
+})