PyCS/webui/src/components/projects/project-data-add-window.vue

<template>
  <div class="project-data-add-window">
    <!-- TODO use valid url -->
    <file-input :socket="socket" :name="'/projects/' + currentProject.id + '/data'"></file-input>

    <template v-if="uploads.length > 0">
      <h1>Uploads</h1>

      <div class="uploads">
        <template v-for="up in uploads">
          <div :key="up.id + '-div'">{{ up.filename }}</div>
          <progress-bar :key="up.id + '-progress'" :progress="up.progress"></progress-bar>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import FileInput from "@/components/base/file-input";
import ProgressBar from "@/components/base/progress-bar";

export default {
  name: "project-data-add-window",
  components: {ProgressBar, FileInput},
  props: ['socket', 'currentProject'],
  computed: {
    uploads: function() {
      const filtered = Object.keys(this.currentProject.jobs)
          .map(e => this.currentProject.jobs[e])
          .filter(e => e.type === 'upload');

      filtered.sort(this.sortUploads);
      return filtered;
    }
  },
  methods: {
    sortUploads: function(u, v) {
      if (u.created < v.created)
        return 1;
      else
        return -1;
    }
  }
}
</script>

<style scoped>
.project-data-add-window {
  padding: 1rem;
}

h1 {
  margin-bottom: 1rem;
}

.uploads {
  display: grid;
  grid-template-columns: auto 1fr;
}

.progress-bar {
  margin-left: 1rem;
}
</style>