Add Ingress Portals

client/src/components/MapTiles.jsx

@@ -6,31 +6,31 @@ import Pokestop from './pokestops/Pokestop.jsx'
 import Pokemon from './pokemon/Pokemon.jsx'
 import Nav from './layout/Nav.jsx'
 import Spawnpoint from './spawnpoints/Spawnpoint.jsx'
+import Portal from './portals/Portal.jsx'
 
 const MapTiles = ({ map, settings }) => {
   const [bounds, setBounds] = useState({
     _southWest: { lat: 0, lng: 0 },
     _northEast: { lat: 0, lng: 0 }
   })
-  const [position, setPosition] = useState({})
   const [selected, setSelected] = useState({
-    Gyms: settings.map.filters.gyms,
-    Raids: settings.map.filters.raids,
-    Pokestops: settings.map.filters.pokestops,
-    Quests: settings.map.filters.quests,
-    Invasions: settings.map.filters.invasions,
-    Spawnpoints: settings.map.filters.spawnpoints,
-    Pokemon: settings.map.filters.pokemon,
-    IngressPortals: settings.map.filters.portals,
-    ScanCells: settings.map.filters.scanCells,
-    S2Cells: settings.map.filters.submissionCells,
-    Weather: settings.map.filters.weather,
-    ScanAreas: settings.map.filters.scanAreas,
-    Devices: settings.map.filters.devices
+    gyms: settings.map.filters.gyms,
+    raids: settings.map.filters.raids,
+    pokestops: settings.map.filters.pokestops,
+    quests: settings.map.filters.quests,
+    invasions: settings.map.filters.invasions,
+    spawnpoints: settings.map.filters.spawnpoints,
+    pokemon: settings.map.filters.pokemon,
+    portals: settings.map.filters.portals,
+    scanCells: settings.map.filters.scanCells,
+    s2Cells: settings.map.filters.submissionCells,
+    weather: settings.map.filters.weather,
+    scanAreas: settings.map.filters.scanAreas,
+    devices: settings.map.filters.devices
   })
 
   const onMove = useCallback(() => {
-    setPosition(map.getCenter())
+    setBounds(map.getBounds())
   }, [map])
 
   useEffect(() => {
@@ -40,22 +40,19 @@ const MapTiles = ({ map, settings }) => {
     }
   }, [map, onMove])
 
-  useEffect(() => {
-    setBounds(map.getBounds())
-  }, [position])
-
   return (
     <>
       <TileLayer
         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"
       />
       <ZoomControl position='topright' zoomInText='+' zoomOutText='-' />
-      {selected.Devices && <Device />}
-      {selected.Gyms && <Gym bounds={bounds} />}
-      {selected.Pokestops && <Pokestop bounds={bounds} />}
-      {selected.Pokemon && <Pokemon bounds={bounds} />}
-      {selected.Spawnpoints && <Spawnpoint bounds={bounds} /> }
+      {selected.devices && <Device />}
+      {selected.gyms && <Gym bounds={bounds} />}
+      {selected.pokestops && <Pokestop bounds={bounds} />}
+      {selected.pokemon && <Pokemon bounds={bounds} />}
+      {selected.portals && <Portal bounds={bounds} />}
+      {selected.spawnpoints && <Spawnpoint bounds={bounds} />}
       <Nav
         selected={selected}
         setSelected={setSelected}
@@ -64,4 +61,4 @@ const MapTiles = ({ map, settings }) => {
   )
 }
 
-export default MapTiles
+export default MapTiles

client/src/components/layout/Drawer.jsx

@@ -21,29 +21,29 @@ 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 /> }
+    { name: 'Gyms', icon: <ArrowForwardIos />, meta: 'gyms' },
+    { name: 'Raids', icon: <ArrowForwardIos />, meta: 'raids' },
+    { name: 'Pokestops', icon: <ArrowForwardIos />, meta: 'pokestops' },
+    { name: 'Quests', icon: <ArrowForwardIos />, meta: 'quests' },
+    { name: 'Invasions', icon: <ArrowForwardIos />, meta: 'invasions' },
+    { name: 'Spawnpoints', icon: <ArrowForwardIos />, meta: 'spawnpoints' },
+    { name: 'Pokemon', icon: <ArrowForwardIos />, meta: 'pokemon' },
+    { name: 'Ingress Portals', icon: <ArrowForwardIos/>, meta: 'portals' },
+    { name: 'Scan-Cells', icon: <ArrowForwardIos />, meta: 'scanCells' },
+    { name: 'S2-Cells', icon: <ArrowForwardIos />, meta: 's2Cells' },
+    { name: 'Weather', icon: <ArrowForwardIos />, meta: 'weather' },
+    { name: 'ScanAreas', icon: <ArrowForwardIos />, meta: 'scanAreas' },
+    { name: 'Devices', icon: <ArrowForwardIos />, meta: 'devices' }
   ]
 
   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 /> }
+    { name: 'Areas', icon: <ArrowForwardIos />, meta: 'areas' },
+    { name: 'Stats', icon: <ArrowForwardIos />, meta: 'stats' },
+    { name: 'Search', icon: <ArrowForwardIos />, meta: 'search' },
+    { name: 'Settings', icon: <ArrowForwardIos />, meta: 'settings' },
+    { name: 'ClearCache', icon: <ArrowForwardIos />, meta: 'clearCache' },
+    { name: 'Discord', icon: <ArrowForwardIos />, meta: 'discord' },
+    { name: 'Logout', icon: <ArrowForwardIos />, meta: 'logout' }
   ]
 
   return (
@@ -62,12 +62,12 @@ const DrawerMenu = ({ drawer, toggleDrawer, selected, setSelected }) => {
                 <ListItemText primary={item.name} />
                 <ToggleButton
                   value="x"
-                  selected={selected[item.name]}
+                  selected={selected[item.meta]}
                   onChange={() => {
-                    setSelected({ ...selected, [item.name]: !selected[item.name] });
+                    setSelected({ ...selected, [item.meta]: !selected[item.meta] });
                   }}
                 >
-                  {selected[item.name] ? <Check style={{ fontSize: 15, color: 'green' }} /> : <Clear style={{ fontSize: 15, color: 'red' }} />}
+                  {selected[item.meta] ? <Check style={{ fontSize: 15, color: 'green' }} /> : <Clear style={{ fontSize: 15, color: 'red' }} />}
 
                 </ToggleButton>
               </ListItem>

client/src/components/pokestops/Pokestop.jsx

@@ -17,6 +17,7 @@ const Pokestop = ({ bounds }) => {
       maxLon: bounds._northEast.lng
     }
   })
+  console.log(data)
 
   return (
     <MarkerClusterGroup

client/src/components/portals/Popup.jsx

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

client/src/components/portals/Portal.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 Portal = ({ bounds }) => {
+  const { loading, error, data } = useQuery(Query.getAllPortals(), {
+    variables: {
+      minLat: bounds._southWest.lat,
+      minLon: bounds._southWest.lng,
+      maxLat: bounds._northEast.lat,
+      maxLon: bounds._northEast.lng
+    }
+  })
+  console.log(data)
+  return (
+    <MarkerClusterGroup
+      disableClusteringAtZoom={16}
+    >
+      {data && data.portals.map(portal => {
+        return (
+          <CircleMarker
+            key={portal.id}
+            center={[portal.lat, portal.lon]}
+            radius={20}
+            pathOptions={marker(portal)}>
+            <Popup position={[portal.lat, portal.lon]}>
+              <PopupContent portal={portal} />
+            </Popup>
+          </CircleMarker>
+        )
+      })}
+    </MarkerClusterGroup>
+  )
+}
+
+export default Portal

client/src/components/portals/marker.js

@@ -0,0 +1,8 @@
+export default function (portal) {
+  const ts = ((new Date).getTime())/1000
+  return {
+    color: ts - portal.imported > 86400 ? 'blue' : 'red',
+    fillColor: ts - portal.imported > 86400 ? 'blue' : 'red',
+    fillOpacity: 0.25,  
+  }
+}

client/src/services/Query.js

@@ -3,6 +3,7 @@ import { getAllGyms } from './data/gym.js'
 import { getAllPokestops } from './data/pokestop.js'
 import { getAllPokemon } from './data/pokemon.js'
 import { getAllSpawnpoints } from './data/spawnpoint.js'
+import { getAllPortals } from './data/portal.js' 
 
 class Query {
 
@@ -22,6 +23,10 @@ class Query {
     return getAllPokemon
   }
 
+  static getAllPortals() {
+    return getAllPortals
+  }
+
   static getAllSpawnpoints() {
     return getAllSpawnpoints
   }

client/src/services/data/portal.js

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client'
+
+const getAllPortals = gql`
+  query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+    portals(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+      id
+      lat
+      lon
+      imported
+    }
+  }
+`
+
+export { getAllPortals }

server/src/models/Portal.js

@@ -0,0 +1,9 @@
+import { Model } from 'objection'
+
+class Portal extends Model {
+  static get tableName() {
+    return 'ingress_portals'
+  }
+}
+
+export default Portal

server/src/models/index.js

@@ -3,11 +3,13 @@ import Gym from './Gym.js'
 import Pokestop from './Pokestop.js'
 import Pokemon from './Pokemon.js'
 import Spawnpoint from './Spawnpoint.js'
+import Portal from './Portal.js' 
 
 export {
   Device,
   Gym,
   Pokestop,
   Pokemon,
+  Portal,
   Spawnpoint
 }

server/src/schema/portals.js

@@ -0,0 +1,15 @@
+import { GraphQLObjectType, GraphQLID, GraphQLString, GraphQLInt, GraphQLFloat } from 'graphql'
+
+export default new GraphQLObjectType({
+  name: 'Portal',
+  fields: () => ({
+    id: { type: GraphQLID },
+    external_id: { type: GraphQLString },
+    lat: { type: GraphQLFloat  },
+    lon: { type: GraphQLFloat },
+    name: { type: GraphQLString },
+    url: { type: GraphQLString },
+    imported: { type: GraphQLInt },
+    checked: { type: GraphQLInt }
+  })
+})

server/src/schema/schema.js

@@ -4,8 +4,9 @@ import DeviceType from './device.js'
 import GymType from './gym.js'
 import PokestopType from './pokestop.js'
 import PokemonType from './pokemon.js'
+import PortalType from './portals.js'
 import SpawnpointType from './spawnpoint.js'
-import { Device, Gym, Pokemon, Pokestop, Spawnpoint } from '../models/index.js'
+import { Device, Gym, Pokemon, Pokestop, Portal, Spawnpoint } from '../models/index.js'
 
 const minMaxArgs = {
   minLat: { type: GraphQLFloat },
@@ -68,6 +69,15 @@ const RootQuery = new GraphQLObjectType({
         return result
       }
     },
+    portals: {
+      type: new GraphQLList(PortalType),
+      args: minMaxArgs,
+      async resolve(parent, args) {
+        return await Portal.query()
+          .whereBetween('lat', [args.minLat, args.maxLat])
+          .andWhereBetween('lon', [args.minLon, args.maxLon])
+      }
+    },
     spawnpoints: {
       type: new GraphQLList(SpawnpointType),
       args: minMaxArgs,