IcyNet.eu/src/script/component/BanList.vue

<template lang="pug">
  #banlist
    h3 Bans ({{pagination.total}})
    .message.error(v-if='error') {{ error }}
    .entry(v-else='v-else')
      .pgn
        span.pagenum Page {{ pagination.page }} of {{ pagination.pages }}
        .button(v-if='pagination.page > 1', v-on:click='getBans(pagination.page - 1)') Previous
        .button(v-for='n in pagination.pages', v-on:click='getBans(n)', v-bind:class='{active: n == pagination.page}') {{ n }}
        .button(v-if='pagination.page < pagination.pages', v-on:click='getBans(pagination.page + 1)') Next
      .list.bans
        .ban.list-item(v-for='ban in bans')
          .stamps
            .noactive(title='Expired', v-if='ban.expired')
              i.fa.fa-fw.fa-ban
          .info
            .section
              span.key User
              span.value {{ ban.user.display_name }}
            .section
              span.key Admin
              span.value {{ ban.admin.display_name }}
            .section
              span.key Reason
              span.value {{ ban.reason }}
            .section
              span.key Placed
              span.value {{ new Date(ban.created_at).toString() }}
            .section
              span.key Expires
              span.value(v-if='ban.expires_at') {{ new Date(ban.expires_at).toString() }}
              span.value(v-else='v-else')
                b This ban is permanent.
            .button.remove(@click='pardon(ban.id)') Pardon
</template>

<script type="text/javascript">
  export default {
    data: function () {
      return {
        pagination: {
          offset: 0,
          page: 1,
          pages: 1,
          perPage: 6,
          total: 0
        },
        error: '',
        bans: []
      }
    },
    methods: {
      getBans: function (page) {
        this.error = ''
        this.pagination.total = 0
        this.$http.get('/admin/api/bans?page=' + page).then(data => {
          if (data.body && data.body.error) {
            this.error = data.body.error
            return
          }

          this.pagination = data.body.page
          this.bans = data.body.bans
        })
      },
      pardon: function (id) {
        this.$http.post('/admin/api/ban/pardon/' + id).then(data => {
          this.getBans(1)
        })
      }
    },
    mounted: function () {
      this.getBans(1)

      this.$root.$on('reload_bans', () => {
        this.getBans(1)
      })
    }
  }
</script>