<template>
  <div>
    <h1>Files</h1>

    <div v-if="files.length">
      <table class="table">
        <thead>
        <tr>
          <th>Id</th>
          <th>File name</th>
          <th class="text-end">File size</th>
          <th>Extension</th>
          <th>Download</th>
          <th>Remove</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="file in files">
          <td>{{ file.id }}</td>
          <td>{{ file.fileName }}</td>
          <td class="text-end">{{ formatSize(file.fileSize) }}</td>
          <td>{{ file.extension }}</td>
          <td><a :href="'/file/'+ file.id" class="link-secondary">download</a></td>
          <td><a :href="'/file/delete/'+file.id" class="link-danger">remove</a></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Files',
  data() {
    return {
      files: []
    }
  },
  mounted() {
    this.getFiles();
  },
  methods: {
    formatSize: function (bytes) {
      if (bytes == 0) {
        return "0.00 B";
      }
      var e = Math.floor(Math.log(bytes) / Math.log(1024));
      return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
    },
    getFiles: function () {
      axios.get(document.URL + '/files').then(response => this.files = response.data)
    }
  }
}
</script>