Realtime

package.json

@@ -20,6 +20,7 @@
     "leaflet-editablecirclemarker": "^1.0.1",
     "pbf": "^3.1.0",
     "raven-js": "^3.25.2",
+    "reconnecting-websocket": "^4.0.0-rc5",
     "register-service-worker": "^1.0.0",
     "vue": "^2.5.16",
     "vue-analytics": "^5.12.2",

src/components/ABMap.vue

@@ -13,6 +13,10 @@
         <l-marker v-if="recorrido.itinerario[0].p2" :latLng="recorrido.itinerario[0].p2.latlng" :icon="stopIcon">
           <l-popup>{{recorrido.itinerario[0].p2.nombre}}</l-popup>
         </l-marker>
+
+        <l-marker v-for="gps in gpslocations" :key="gps.gpsid" :latLng="gps" :icon="stopIcon">
+          <l-popup>gpsid: {{gps.gpsid}}<br>timestamp: {{gps.timestamp}}</l-popup>
+        </l-marker>
       </template>
 
       <template v-if="recorrido && recorrido.itinerario.length == 2">
@@ -211,6 +215,9 @@ export default class Map extends Vue {
       precision: coordinates.accuracy,
     }
   }
+  get gpslocations() {
+    return this.$store.getters.getGPSLocations
+  }
   mounted() {
     const A = this.A
     const B = this.B

src/main.ts

@@ -72,7 +72,7 @@ Vue.use(VueAnalytics, {
   id: GA_KEY,
   router,
   debug: {
-    enabled: !isProd,
+    enabled: false,
     sendHitTask: isProd,
   },
 })

src/modules/absearch/index.ts

@@ -2,6 +2,8 @@ import { Module } from 'vuex'
 import { RootState } from '@/store'
 import api from '@/api/api'
 import { Recorrido } from '@/api/schema'
+import Vue from 'vue'
+import ReconnectingWebSocket from 'reconnecting-websocket'
 
 interface LatLng {
   lat: number
@@ -27,6 +29,13 @@ export interface GeocoderResult {
 
 export type Location = LatLng | Geolocation | GeocoderResult | null
 export type LatLngLocation = LatLng | LatLngGeolocation | GeocoderResult | null
+interface GPSLocation {
+  lat: number
+  lng: number
+  gpsid: string
+  recorrido_id: number
+  timestamp: string
+}
 
 interface State {
   A: Location
@@ -42,8 +51,20 @@ interface State {
   transbordo: boolean
   apiError: boolean
   geolocationError: boolean
+  GPSLocations: GPSLocation[]
 }
 
+const sock = new ReconnectingWebSocket(
+  'ws://localhost:8084/subscribe',
+  [],
+  {
+    maxReconnectionDelay: 2000,
+    minReconnectionDelay: 1000,
+    debug: true,
+  }
+)
+
+
 const module: Module<State, RootState> = {
   state: {
     A: null,
@@ -59,9 +80,31 @@ const module: Module<State, RootState> = {
     transbordo: false,
     apiError: false,
     geolocationError: false,
+    GPSLocations: [],
   },
 
   actions: {
+    async setrtapiids({ dispatch, commit }, recorrido_ids) {
+      const { lngA, latA } = await dispatch('getAB')
+      const message = {
+        position: `POINT (${lngA} ${latA})`,
+        recorridos: recorrido_ids,
+      }
+      sock.send(JSON.stringify(message))
+      commit('removeGPSLocations')
+      sock.onmessage = (event: MessageEvent) => {
+        const data = JSON.parse(event.data)
+        const latlng = data.Aproj.match(/POINT\s*\(([-\d\.]*)\s([-\d\.]*)\)/)
+        console.log(data.Aproj, latlng)
+        commit('addGPSLocation', {
+          gpsid: data.id_gps,
+          lng: latlng[1],
+          lat: latlng[2],
+          recorrido_id: null,
+          timestamp: data.timestamp,
+        })
+      }
+    },
     async getAB({ state, dispatch, getters }) {
       if (state.A === null || state.B === null) {
         return
@@ -85,7 +128,7 @@ const module: Module<State, RootState> = {
       let lngA, latA, lngB, latB
       try {
         ({ lngA, latA, lngB, latB } = await dispatch('getAB'))
-      } catch(e) {
+      } catch (e) {
         dispatch('setGeolocationError')
         commit('finishLoadingResults')
         return
@@ -107,6 +150,9 @@ const module: Module<State, RootState> = {
           commit('setResultsMore', true)
         }
         commit('setResults', data.results)
+        if (data.results.length > 0) {
+          dispatch('setrtapiids', [data.results[0].itinerario[0].id])
+        }
       } catch (err) {
         console.log(err)
         dispatch('setApiError')
@@ -124,7 +170,7 @@ const module: Module<State, RootState> = {
       let lngA, latA, lngB, latB
       try {
         ({ lngA, latA, lngB, latB } = await dispatch('getAB'))
-      } catch(e) {
+      } catch (e) {
         dispatch('setGeolocationError')
         commit('finishLoadingResults')
         return
@@ -190,6 +236,7 @@ const module: Module<State, RootState> = {
         await dispatch('getNextPage')
         commit('setRecorridoSelectedIndex', index)
       }
+      dispatch('setrtapiids', [state.results[index].itinerario[0].id])
     },
     // sets A or B from geolocation
     fromGeoLocation({ dispatch, commit }, source: 'origin' | 'destination') {
@@ -244,6 +291,17 @@ const module: Module<State, RootState> = {
   },
 
   mutations: {
+    removeGPSLocations(state) {
+      state.GPSLocations = []
+    },
+    addGPSLocation(state, gpslocation: GPSLocation) {
+      const oldgpslocation = state.GPSLocations.find(g => g.gpsid === gpslocation.gpsid)
+      if (oldgpslocation) {
+        Object.assign(oldgpslocation, gpslocation)
+      } else {
+        state.GPSLocations.push(gpslocation)
+      }
+    },
     setSearchRequested(state) {
       state.searchRequested = true
     },
@@ -299,6 +357,9 @@ const module: Module<State, RootState> = {
     },
   },
   getters: {
+    getGPSLocations(state) {
+      return state.GPSLocations
+    },
     geolocationError(state) {
       return state.geolocationError
     },
@@ -330,9 +391,7 @@ const module: Module<State, RootState> = {
       if (state.resultSelected === state.results.length - 1) {
         return state.resultsMore
       }
-      return (
-        state.resultSelected < state.results.length - 1
-      )
+      return state.resultSelected < state.results.length - 1
     },
     hasPrevResult(state) {
       return !(state.resultSelected === 0)

src/router.ts

@@ -5,6 +5,7 @@ import ABSearch from '@/views/ABSearch.vue'
 import LocationSearch from '@/views/LocationSearch.vue'
 import MapLocationSearch from '@/views/MapLocationSearch.vue'
 import NotFound from '@/views/NotFound.vue'
+import RealTime from '@/views/RealTime.vue'
 import { BASE_URL } from '@/config'
 import CIUDADES from '@/ciudades'