<template>
  <div class="vn-pp row justify-center">
    <toolbar>
      <div class="row">
        <q-badge
          v-if="count != null"
          class="text-subtitle1 q-mr-sm"
          color="secondary">
          {{$t('nConnections', [count])}}
        </q-badge>
      </div>
    </toolbar>
    <q-drawer
      v-model="$state.rightDrawerOpen"
      side="right"
      elevated>
      <div class="q-pa-md">
        <q-select
          :label="$t('refreshRate')"
          v-model="rate"
          :options="rates"
          @input="$refs.scroll.reload()"
          emit-value>
          <template v-slot:prepend>
            <q-icon name="timer"/>
          </template>
        </q-select>
        <q-select
          :label="$t('orderBy')"
          v-model="order"
          :options="orderOptions"
          @input="$refs.scroll.reload()"
          emit-value>
          <template v-slot:prepend>
            <q-icon name="sort"/>
          </template>
        </q-select>
      </div>
    </q-drawer>
    <div>
      <lb-scroll
        ref="scroll"
        :request="request"
        @data="onData"
        :auto-refresh="rate">
        <q-card class="vn-w-md">
          <q-list bordered separator>
            <q-item
              v-for="conn in data"
              :key="conn.id"
              :to="`/access-log/${conn.userVisit.user.id}`"
              :title="$t('accessLog')"
              clickable>
              <q-item-section>
                <q-item-label>
                  {{conn.userVisit.user.nickname}}
                </q-item-label>
                <q-item-label caption>
                  {{conn.lastUpdate | elapsedTime}}
                </q-item-label>
                <q-item-label caption>
                  {{conn.userVisit.access.agent.platform}} -
                  {{conn.userVisit.access.agent.browser}}
                  {{conn.userVisit.access.agent.version}}
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </lb-scroll>
    </div>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="refresh"
        color="accent"
        @click="$refs.scroll.refresh()"
        :title="$t('refresh')"/>
    </q-page-sticky>
  </div>
</template>

<script>
import Page from 'components/Page'

export default {
  name: 'Connections',
  mixins: [Page],
  data () {
    return {
      data: [],
      rate: 5,
      count: null,
      rates: [
        {
          label: this.$t('dontRefresh'),
          value: null
        }
      ],
      where: { userVisitFk: { neq: null } },
      order: 'lastUpdate DESC',
      orderOptions: [
        {
          label: this.$t('lastAction'),
          value: 'lastUpdate DESC'
        }, {
          label: this.$t('sessionInit'),
          value: 'created DESC'
        }
      ]
    }
  },
  created () {
    this.$state.useRightDrawer = true
  },
  mounted () {
    let seconds = [1, 2, 5, 10, 30]
    for (let secs of seconds) {
      this.rates.push({
        label: this.$t('nSeconds', [secs]),
        value: secs
      })
    }
  },
  methods: {
    request () {
      return {
        url: 'UserSessions',
        filter: {
          fields: ['created', 'lastUpdate', 'userVisitFk'],
          order: this.order,
          where: this.where,
          include: {
            relation: 'userVisit',
            scope: {
              fields: ['accessFk', 'userFk'],
              include: [
                {
                  relation: 'access',
                  scope: {
                    fields: ['agentFk'],
                    include: {
                      relation: 'agent',
                      scope: {
                        fields: [
                          'platform',
                          'browser',
                          'version'
                        ]
                      }
                    }
                  }
                }, {
                  relation: 'user',
                  scope: {
                    fields: ['id', 'nickname']
                  }
                }
              ]
            }
          }
        }
      }
    },
    onData (data) {
      this.data = data
      let params = { where: this.where }
      this.$axios.get(`UserSessions/count`, { params })
        .then(res => (this.count = res.data.count))
    }
  }
}
</script>
