Add Devices

client/src/components/MapTiles.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { TileLayer, ZoomControl } from 'react-leaflet'
+import Device from './devices/Device.jsx'
 import Gym from './gyms/Gym.jsx'
 import Pokestop from './pokestops/Pokestop.jsx'
 import Pokemon from './pokemon/Pokemon.jsx'
@@ -12,19 +13,19 @@ const MapTiles = ({ map, settings }) => {
   })
   const [position, setPosition] = useState({})
   const [selected, setSelected] = useState({
-    Gyms: true,
+    Gyms: false,
     Raids: false,
     Pokestops: false,
     Quests: false,
     Invasions: false,
     Spawnpoints: false,
-    Pokemon: true,
+    Pokemon: false,
     IngressPortals: false,
     ScanCells: false,
     S2Cells: false,
     Weather: false,
     ScanAreas: false,
-    Devices: false
+    Devices: true
   })
 
   const onMove = useCallback(() => {
@@ -52,6 +53,7 @@ const MapTiles = ({ map, settings }) => {
       {selected.Gyms && <Gym bounds={bounds} />}
       {selected.Pokestops && <Pokestop bounds={bounds} />}
       {selected.Pokemon && <Pokemon bounds={bounds} />}
+      {selected.Devices && <Device />}
       <Nav
         selected={selected}
         setSelected={setSelected}

client/src/components/devices/Device.jsx

@@ -0,0 +1,29 @@
+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'
+
+const Device = () => {
+  const { loading, error, data } = useQuery(Query.getAllDevices())
+
+  return (
+    <>
+      {data && data.devices.map(device => {
+        return (
+          <Marker
+            key={device.uuid}
+            position={[device.last_lat, device.last_lon]}
+            icon={MarkerIcon(device)}>
+            <Popup position={[device.last_lat, device.last_lon]}>
+              <PopupContent device={device} />
+            </Popup>
+          </Marker>
+        )
+      })}
+    </>
+  )
+}
+
+export default Device

client/src/components/devices/MarkerIcon.js

@@ -0,0 +1,12 @@
+import { Icon } from 'leaflet' 
+
+export default function (device) {
+  const ts = ((new Date).getTime())/1000 - 900
+  const deviceStatus = ts - device.last_seen < 900 ? '0' : '1'
+  return new Icon({
+    iconUrl: `/img/device/${deviceStatus}.png`,
+    iconSize: [30, 30],
+    iconAnchor: [20, 33.96],
+    popupAnchor: [0, -41.96],
+  })
+}

client/src/components/devices/Popup.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const GymPopup = ({ device }) => {
+
+  return (
+    <>
+    {device.instance_name}
+    </>
+  )
+}
+
+export default GymPopup

client/src/components/gyms/Gym.jsx

@@ -1,8 +1,8 @@
 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 PopupContent from './Popup.jsx'
 import { useQuery } from '@apollo/client'
 import Query from '../../services/Query.js'
 
@@ -15,26 +15,24 @@ const Gym = ({ bounds }) => {
       maxLon: bounds._northEast.lng
     }
   })
-  
+
   return (
-    <>
-      {data && <MarkerClusterGroup
-        disableClusteringAtZoom={16}
-      >
-        {data.gyms.map(gym => {
-          return (
-            <Marker
-              key={gym.id}
-              position={[gym.lat, gym.lon]}
-              icon={MarkerIcon(gym)}>
-              <Popup position={[gym.lat, gym.lon]}>
-                <PopupContent gym={gym} />
-              </Popup>
-            </Marker>
-          )
-        })}
-      </MarkerClusterGroup>}
-    </>
+    <MarkerClusterGroup
+      disableClusteringAtZoom={16}
+    >
+      {data && data.gyms.map(gym => {
+        return (
+          <Marker
+            key={gym.id}
+            position={[gym.lat, gym.lon]}
+            icon={MarkerIcon(gym)}>
+            <Popup position={[gym.lat, gym.lon]}>
+              <PopupContent gym={gym} />
+            </Popup>
+          </Marker>
+        )
+      })}
+    </MarkerClusterGroup>
   )
 }
 

client/src/components/pokemon/Pokemon.jsx

@@ -17,24 +17,22 @@ const Pokemon = ({ bounds }) => {
   })
 
   return (
-    <>
-      {data && <MarkerClusterGroup
-        disableClusteringAtZoom={16}
-      >
-        {data.pokemon.map(pokemon => {
-          return (
-            <Marker
-              key={pokemon.id}
-              position={[pokemon.lat, pokemon.lon]}
-              icon={MarkerIcon(pokemon)}>
-              <Popup position={[pokemon.lat, pokemon.lon]}>
-                <PopupContent pokemon={pokemon} />
-              </Popup>
-            </Marker>
-          )
-        })}
-      </MarkerClusterGroup>}
-    </>
+    <MarkerClusterGroup
+      disableClusteringAtZoom={16}
+    >
+      {data && data.pokemon.map(pokemon => {
+        return (
+          <Marker
+            key={pokemon.id}
+            position={[pokemon.lat, pokemon.lon]}
+            icon={MarkerIcon(pokemon)}>
+            <Popup position={[pokemon.lat, pokemon.lon]}>
+              <PopupContent pokemon={pokemon} />
+            </Popup>
+          </Marker>
+        )
+      })}
+    </MarkerClusterGroup>
   )
 }
 

client/src/components/pokestops/Pokestop.jsx

@@ -15,26 +15,24 @@ const Pokestop = ({ bounds }) => {
       maxLon: bounds._northEast.lng
     }
   })
-  
+
   return (
-    <>
-      {data && <MarkerClusterGroup
-        disableClusteringAtZoom={16}
-      >
-        {data.pokestops.map(pokestop => {
-          return (
-            <Marker
-              key={pokestop.id}
-              position={[pokestop.lat, pokestop.lon]}
-              icon={MarkerIcon(pokestop)}>
-              <Popup position={[pokestop.lat, pokestop.lon]}>
-                <PopupContent pokestop={pokestop} />
-              </Popup>
-            </Marker>
-          )
-        })}
-      </MarkerClusterGroup>}
-    </>
+    <MarkerClusterGroup
+      disableClusteringAtZoom={16}
+    >
+      {data && data.pokestops.map(pokestop => {
+        return (
+          <Marker
+            key={pokestop.id}
+            position={[pokestop.lat, pokestop.lon]}
+            icon={MarkerIcon(pokestop)}>
+            <Popup position={[pokestop.lat, pokestop.lon]}>
+              <PopupContent pokestop={pokestop} />
+            </Popup>
+          </Marker>
+        )
+      })}
+    </MarkerClusterGroup>
   )
 }
 

client/src/services/Query.js

@@ -1,9 +1,14 @@
+import { getAllDevices } from './data/device.js'
 import { getAllGyms } from './data/gym.js'
 import { getAllPokestops } from './data/pokestop.js'
 import { getAllPokemon } from './data/pokemon.js'
 
 class Query {
 
+  static getAllDevices() {
+    return getAllDevices
+  }
+
   static getAllGyms() {
     return getAllGyms
   }

client/src/services/data/device.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client'
+
+const getAllDevices = gql`
+  {
+    devices{
+      uuid
+      instance_name
+      last_seen
+      last_lat
+      last_lon
+    }
+  }
+`
+
+export { getAllDevices }

server/src/models/Device.js

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

server/src/models/index.js

@@ -1,8 +1,10 @@
+import Device from './Device.js'
 import Gym from './Gym.js'
 import Pokestop from './Pokestop.js'
 import Pokemon from './Pokemon.js'
 
 export {
+  Device,
   Gym,
   Pokestop,
   Pokemon

server/src/schema/device.js

@@ -0,0 +1,12 @@
+import { GraphQLObjectType, GraphQLID, GraphQLString, GraphQLInt, GraphQLFloat } from 'graphql'
+
+export default new GraphQLObjectType({
+  name: 'Device',
+  fields: () => ({
+    uuid: { type: GraphQLID },
+    instance_name: { type: GraphQLString },
+    last_seen: { type: GraphQLInt },
+    last_lat: { type: GraphQLFloat },
+    last_lon: { type: GraphQLFloat },
+  })
+})

server/src/schema/schema.js

@@ -1,13 +1,20 @@
 import { GraphQLObjectType, GraphQLID, GraphQLFloat, GraphQLList, GraphQLSchema } from 'graphql'
 
+import DeviceType from './device.js'
 import GymType from './gym.js'
 import PokestopType from './pokestop.js'
 import PokemonType from './pokemon.js'
-import { Gym, Pokemon, Pokestop } from '../models/index.js'
+import { Device, Gym, Pokemon, Pokestop } from '../models/index.js'
 
 const RootQuery = new GraphQLObjectType({
   name: 'RootQueryType',
   fields: {
+    devices: {
+      type: new GraphQLList(DeviceType),
+      async resolve(parent, args) {
+        return await Device.query()
+      }
+    },
     gyms: {
       type: new GraphQLList(GymType),
       args: {