components/location/LocationEvents/LocationEvents.vue

<template lang="pug">
  .location_events
    .container
      .row(v-if="loading")
        .col-12
          b-spinner(
                class="loader"
                variant="info"
                style="width: 3rem; height: 3rem; margin: 0 auto; display:block;"
            )
      .row(v-if="!loading")
          .col-9.px-0
            LocationEventsFilter(:title="$t('location_module.event_filter.menu_title')" v-model="eventsFilter")
          .col-3.text-right(v-if="events.length>0")
            .row.justify-content-end
              TableButton(
                @click="switchToTablePlusMapMode({top:'LocationEventsMap',bottom:'LocationEventsTable'})"
                :title="$t('location_module.buttons.table_and_map_events')"
                :is-event-view="view === 'events'"
                icon="table-map"
                elevated
              )
    .container(v-if="!loading")
      .row(v-for="event in events" :key="event.evenement_id").mt-2.mb-2
          .col-12.px-0
            .card
              .card-body
                  b-row.justify-content-around
                    b-col(cols="2" align-self="center")
                      CalendarAlertIcon(:color="event.color" :size="28")
                    b-col(cols="8" align-self="center")
                      b-row
                        span.text-sm-left {{ $date.formatDatetime(event.date) }}
                      b-row
                        span.font-weight-bold.mb-0(:style="style") {{ event.label }}
                    b-col(cols="2" align-self="center")
                      i.fa.fa-search.p-2(:style="`cursor: pointer;font-size: 1rem;`" @click="handleItemClick(event)")
    .container(v-if="!loading&&events.length===0")
      .row
        .col-12
            .alert.alert-info.p-2 {{ $t('location_module.events.no_event') }}

</template>
<script>
import locationLayoutModesMixin from '@c/location/mixins/location-layout-modes.js'
import moment from 'moment'
import TableButton from '@c/shared/TableButton.vue'
import MapIcon from '@c/shared/TableModesToolbar/MapIcon.vue'
import { mapGetters } from 'vuex'
import CalendarAlertIcon from '../../shared/SearchResults/Submenu/assets/CalendarAlertIcon.vue'
import LocationEventsFilter from './LocationEventsFilter.vue'

/**
 * List feature
 * @namespace components
 * @category components
 * @subcategory location/events
 * @module LocationEvents
 **/
export default {
  name: 'VehicleEventsTab',
  components: {
    TableButton,
    MapIcon,
    CalendarAlertIcon,
    LocationEventsFilter,
  },
  mixins: [locationLayoutModesMixin],
  props: {
    vehicle: {
      type: Object,
      default: () => ({}),
    },
    view: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      eventsFilter: {
        anomaly: true,
        eventExploitation: false,
        status: false,
      },
    }
  },
  computed: {
    ...mapGetters({
      item: 'location_module/selectedItem',
      events: 'location_module/getEvents',
    }),
    color() {
      return '#ED2C2C'
    },
    style() {
      return `color: ${this.color};font-size: .9em;`
    },
  },
  watch: {
    eventsFilter: {
      async handler(value) {
        this.update()
      },
      deep: true,
    },
    item: {
      async handler() {
        this.update()
      },
      deep: true,
    },
  },
  created() {
    this.update()
  },
  mounted() {
    this.switchToListMode({
      mapComponent: 'LocationEventsMap',
    })
  },
  methods: {
    async update() {
      this.loading = true
      await this.$store.dispatch('location_module/getVehicleEvents', {
        vehicleId: this.item.vehicleId,
        datetimeFrom: this.item.date,
        filters: this.eventsFilter,
      })
      this.loading = false
    },
    handleItemClick({ id, lat, lng } = eventItem) {
      this.$mitt.emit('SIMPLICITI_MAP_FIT_TO_BOUNDS', [[lat, lng]])
      this.$mitt.emit('SIMPLICITI_MAP_OPEN_MARKER_POPUP', {
        groupName: 'vehicle_events',
        layerId: id,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
span {
  color: #727272;
  font-size: 0.8em;
}
.card-title {
  border-bottom: none;
  font-weight: 600;
}
</style>