Add Spawnpoints

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}

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>

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>

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>

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>

client/src/components/spawnpoints/Popup.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const SpawnpointPopup = ({ spawnpoint }) => {
+  return (
+    <>
+    {spawnpoint.despawn_sec}
+    </>
+  )
+}
+
+export default SpawnpointPopup

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

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,  
+  }
+}

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

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 }

server/src/configs/default.json

@@ -275,7 +275,7 @@
     "event": []
   },
   "devOptions": {
-    "enabled": true,
-    "graphiql": true
+    "enabled": false,
+    "graphiql": false
   }
 }

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

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
 }

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])
+      }
     }
   }
 })

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 }
+  })
+})