components/location/LocationResultsToolbar.vue

<template lang="pug">
.location-results-toolbar
    div(v-show="isAutorefreshFeatureVisible" @click="toggleAutomaticSearch" 
      :style="{'background-color':isAutomaticRefreshActivated?'rgb(11 114 181 / 12%)':'transparent'}"
      v-b-tooltip.hover.viewport
      :title="$t(isAutomaticRefreshActivated?'location.main_results.toolbar.autorefresh_enabled':'location.main_results.toolbar.autorefresh_disabled')"
    )
      Icon(ref="reload" icon="mdi:reload" :style="{fontSize:'20px'}" style="cursor:pointer")
    div(
      v-b-tooltip.hover.viewport,
      :title="$t('buttons.center_map_results')"
    )
      b-button.mini-btn(
          variant="outline-primary",
          @click="centerOverMapResults()",
        )
        img(src="./assets/center-results.svg") 
</template>
<script>
import { Icon } from '@iconify/vue2'
import anime from 'animejs/lib/anime.es.js'

/**
 * Location module results can auto refresh each X seconds
 */
const autoRefreshMixin = {
  data() {
    return {
      isAutomaticRefreshActivated: false,
    }
  },
  computed: {
    isAutorefreshFeatureVisible() {
      return !this.$store.getters['search_module/hasSelectedDates']
    },
    autorefreshTimeInterval: {
      get() {
        return this.$store.getters['settings/getParameter'](
          'autorefreshTimeInterval'
        )
      },
    },
  },
  destroyed() {
    !!this.autorefreshInterval && clearInterval(this.autorefreshInterval)
  },
  methods: {
    autoRefreshHandler() {
      //console.log("autoRefreshHandler");
      this.$store.dispatch('search_module/validateSearch')
    },
    toggleAutomaticSearch() {
      this.autorefreshToggleDateStart = Date.now()

      this.isAutomaticRefreshActivated = !this.isAutomaticRefreshActivated
      const animate = () => {
        this.$nextTick(() => {
          if (this.$refs.reload && this.$refs.reload.$el) {
            anime({
              targets: this.$refs.reload.$el,
              rotate: '180deg',
              direction: 'alternate',
              loop: 1,
              easing: 'spring',
              complete: () => {
                if (this.isAutomaticRefreshActivated) {
                  setTimeout(() => animate(), 30000)
                }
              },
            })
          }
        })
      }
      animate()
      if (this.isAutomaticRefreshActivated) {
        let intervalTime = this.$env.getEnvValue(
          'VUE_APP_AUTOREFRESH_INTERVAL',
          (this.autorefreshTimeInterval || 2) * (1000 * 60), //Default: 2 minutes
          {
            transform: (value) => parseInt(value),
          }
        )

        this.autorefreshInterval = setInterval(
          this.autoRefreshHandler,
          intervalTime
        )
        //console.log("autorefreshInterval", intervalTime);
        this.$store.state.location_module.isAutoRefreshEnabled = true

        //Toggle autorefresh off after one hour if enabled all long
        let timeout = this.$env.getEnvValue(
          'VUE_APP_AUTOREFRESH_DESTROY_TIMEOUT',
          1000 * 60 * 60,
          {
            transform: (value) => parseInt(value),
          }
        )
        this.autorefreshDestroyTimeout = setTimeout(() => {
          if (
            Date.now() - this.autorefreshToggleDateStart > timeout &&
            this.isAutomaticRefreshActivated
          ) {
            this.toggleAutomaticSearch()
            this.$log.debug(
              'LocationResultsToolbar::autorefresh-toggle-of-after-some-time'
            )
          }
        }, timeout + 1000)
      } else {
        this.$store.state.location_module.isAutoRefreshEnabled = false
        !!this.autorefreshInterval && clearInterval(this.autorefreshInterval)
        !!this.autorefreshDestroyTimeout &&
          clearTimeout(this.autorefreshDestroyTimeout)
      }
    },
  },
}

/**
 * @TODO Add other buttons to the toolbar component (TableMapButton/FilterResults)
 */
export default {
  components: {
    Icon,
  },
  mixins: [autoRefreshMixin],
  methods: {
    /**
     * Center map markers
     * If realtime: Should zoom/center over entire results (markers)
     * If history: Should render the entire results (linestrings/polylines)
     * Note: Will hide item details window if opened
     */
    centerOverMapResults() {
      this.$store.dispatch('app/changeLayout', {
        sub_menu: false,
      })
      this.$mitt.emit('SIMPLICITI_MAP__FIT_TO_BOUNDS')
    },
  },
}
</script>
<style lang="scss" scoped>
.location-results-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>