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>

    <template v-if="this.data.length > 0">
      <h1>Data</h1>

      <div class="wrapper">
        <div class="data">
          <div v-for="d in this.data"
               v-bind:key="d.id"
               class="element">
            <img alt="media" class="media"
                 :src="d.src"
                 :srcset="d.srcset" :sizes="d.sizes">
            <img alt="remove" class="remove"
                 @click="removeMedia(d.src)"
                 src="@/assets/icons/x-circle.svg">
          </div>
        </div>
      </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'],
  data: function () {
    return {
      sizes: [400, 700, 1000]
    }
  },
  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;
    },
    data: function () {
      return Object.keys(this.currentProject.data).map(key => {
        const data = this.currentProject.data[key];
        const src = this.socket.media(this.currentProject.id, data.id);

        return Object.assign({
          src: src,
          srcset: this.sizes.map(e => src + '/' + e + ' ' + e + 'w').join(','),
          sizes: '10rem'
        }, data);
      });
    }
  },
  methods: {
    sortUploads: function (u, v) {
      if (u.created < v.created)
        return 1;
      else
        return -1;
    },
    removeMedia: function (src) {
      this.socket.post(src, {delete: true})
    }
  }
}
</script>

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

h1 {
  margin-bottom: 1rem;
}

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

.progress-bar {
  margin-left: 1rem;
}

.wrapper {
  flex-basis: 0;
  flex-grow: 1;
  overflow-y: auto;
}

.data {
  display: grid;
  grid-template-columns: repeat(auto-fill, 10rem);
}

.element {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.media {
  max-height: 7rem;
}

.remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.4rem;
  border-radius: 0.2rem;
  filter: invert(1);
}
</style>