use date time picker in from and to

package.json

@@ -1,6 +1,6 @@
 {
   "name": "traccar-route-replay",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "private": true,
   "scripts": {
     "dev": "nuxt",

pages/index.vue

@@ -26,6 +26,9 @@
           style="background-image: url('forward.svg')"
           @click="(i + 1 < path.length) && i++"
         />
+        <div class="mapboxgl-ctrl-timeline__label">
+          <input v-model="from" type="datetime-local">
+        </div>
         <input
           ref="sliderInput"
           v-model="currentTime"
@@ -35,9 +38,9 @@
           :max="max"
           :style="`background-image: url('${sliderBackground}');`"
         >
-      </div>
-      <div class="mapboxgl-ctrl-timeline__label">
-        {{ timestamps[i] && new Date(timestamps[i]).toLocaleString() }}
+        <div class="mapboxgl-ctrl-timeline__label">
+          <input v-model="to" type="datetime-local">
+        </div>
       </div>
       <div class="mapboxgl-ctrl-timeline__label">
         <select id="speeds" v-model="playSpeed" style="font-size: 1rem;">
@@ -49,6 +52,9 @@
         <label for="follow">{{ $t('Follow vehicle') }}</label>
       </div>
     </div>
+    <div ref="datetime" class="mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-timeline__label" style="padding: 3px">
+      {{ timestamps[i] && new Date(timestamps[i]).toLocaleString() }}
+    </div>
     <div ref="speedometer" class="mapboxgl-ctrl">
       <speedometer :speed="route[i] && route[i].speed * 1.852" />
     </div>
@@ -84,7 +90,7 @@ const overlay = new MapboxOverlay({ layers: [] })
 mapboxgl.accessToken = process.env.MAPBOX_ACCESS_TOKEN
 let map
 let viewer
-const boundsPadding = 50 // px
+const boundsPadding = 100 // px
 const maxAltitude = 400000
 const maxLatitudeDistance = 6
 
@@ -128,9 +134,27 @@ export default {
     currentTime: {
       get () { return this.timestamps[this.i] },
       set (time) { this.i = closest(this.timestamps, time) }
+    },
+    from: {
+      get () { return this.$store.state.from && this.$store.state.from.replace('Z', '') },
+      set (value) { this.$store.commit('SET_FROM', value) }
+    },
+    to: {
+      get () { return this.$store.state.to && this.$store.state.to.replace('Z', '') },
+      set (value) { this.$store.commit('SET_TO', value) }
     }
   },
   watch: {
+    async from () {
+      this.loading = true
+      await this.$store.dispatch('getPath')
+      this.loading = false
+    },
+    async to () {
+      this.loading = true
+      await this.$store.dispatch('getPath')
+      this.loading = false
+    },
     i () {
       if (this.i > 1 && map.getSource('route')) {
         map.getSource('route').setData(lineString(this.path.slice(0, this.i)))
@@ -297,6 +321,7 @@ export default {
     map.on('style.load', this.styleLoaded)
     map.on('styleimagemissing', this.styleImageMissing)
     map.addControl({ onAdd: () => this.$refs.slider }, 'top-right')
+    map.addControl({ onAdd: () => this.$refs.datetime }, 'top-right')
     map.addControl({ onAdd: () => this.$refs.speedometer }, 'top-right')
     map.addControl(new mapboxgl.NavigationControl())
     map.addControl({ onAdd: () => this.$refs.styleSwitcher })

store/index.js

@@ -10,7 +10,9 @@ export const state = {
   geofences: [],
   showTerrain: false,
   showSigns: false,
-  showBuildings: false
+  showBuildings: false,
+  from: null,
+  to: null
 }
 export const getters = {
   devices: state => state.devices,
@@ -31,12 +33,14 @@ export const actions = {
   },
   async getPath ({ commit, dispatch, state }) {
     const query = new URLSearchParams(window.location.search)
-    const from = new Date(query.get('from') || new Date().getTime() - 1000 * 60 * 60 * 24).toISOString()
-    const to = new Date(query.get('to') || new Date().getTime() + 1000 * 60 * 60 * 24).toISOString()
+    const from = new Date(state.from || query.get('from') || new Date().getTime() - 1000 * 60 * 60 * 24).toISOString()
+    const to = new Date(state.to || query.get('to') || new Date().getTime() + 1000 * 60 * 60 * 24).toISOString()
     await dispatch('getUserData')
     const device = state.devices.find(d => d.id === parseInt(query.get('deviceId'))) || state.devices[0]
     const _route = await this.$axios.$get(`/reports/route?deviceId=${device.id}&from=${from}&to=${to}`)
     const route = prettify(_route, 1)
+    if (!state.from) { commit('SET_FROM', from) }
+    if (!state.to) { commit('SET_TO', to) }
     commit('SET_ROUTE', route)
     commit('SET_PATH', route.map(p => [p.longitude, p.latitude]))
     commit('SET_TIMESTAMPS', route.map(p => new Date(p.fixTime).getTime()))
@@ -64,5 +68,11 @@ export const mutations = {
   },
   SET_GEOFENCES (state, geofences) {
     state.geofences = geofences
+  },
+  SET_FROM (state, from) {
+    state.from = from
+  },
+  SET_TO (state, to) {
+    state.to = to
   }
 }