<template>
  <div id="uploads">
    <Menu></Menu>

    <div class="page">
      <div v-if="uploads !== null">
        <div class="pure-g list-header">
          <div class="pure-u-3-4">{{ $t('admin.uploads.created') }}</div>
          <div class="pure-u-1-4">{{ $t('admin.uploads.owner') }}</div>
        </div>

        <div v-for="upload in uploads" class="list">
          <div class="pure-g row">
            <div class="pure-u-3-4">{{ upload.created }}</div>
            <div class="pure-u-1-4">{{ upload.username }}</div>
            <div class="pure-u-1-1" v-for="file in upload.files">
              <div class="file">
                <img :src="getFileIconUrl(file.name)">
                {{ file.name }}
              </div>
            </div>
          </div>
        </div>

        <div v-if="uploads.length == 0" class="nodata">
          {{ $t('admin.empty') }}
        </div>
      </div>

      <div v-else class="loading">
        {{ $t('admin.loading') }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Menu from './Menu.vue';
import shared from '../../shared';

export default {
  data()
  {
    return {
      uploads: null
    };
  },

  components: {
    Menu
  },

  created()
  {
    var self = this;

    if (!shared.token)
    {
      self.$router.push('/admin');
      return;
    }


    axios.get('/admin/uploads', {
      headers: {
        Authorization: 'Bearer ' + shared.token
      }
    })
    .then((response) =>
    {
      self.uploads = response.data;
    })
    .catch((error) =>
    {
      if (error.response && error.response.status == 403)
      {
        shared.token = null;
        self.$router.push('/admin');
      }
      else
        shared.$emit('showNotification', error.message);
    });
  },

  methods: {
    getFileIconUrl(filename)
    {
      var ext = '_blank';

      var parts = filename.split('.');
      if (parts.length > 0)
        ext = parts.pop();

      console.log(ext);
      return '/images/fileicons/32px/' + ext + '.png';
    }
  }
}
</script>

<style lang="scss">
.file
{
  font-size: 75%;
}
</style>