<template>
  <h3>
    feature upload
  </h3>
  <div>
    Selection: {{ selection }}
  </div>
  <div>
    <button class="btn btn-secondary me-2" @click="$refs.file_selector.show()">Select files</button>
    <button class="btn btn-primary" @click="start_job">Start</button>
  </div>
  <FileSelector ref="file_selector" multiple=1 :fsdriver="estor_fs" @ok="select_ok">
  </FileSelector>
</template>

<script>
import FileSelector from '@/components/file-selector.vue';
export default {
  name: 'FeatureExtractPage',
  props: [],
  components: {
    FileSelector,
  },
  data: function () {
    return {
      jobs: [],
      estor_fs: {
        list: this.$root.estor_list,
      },
      selection: null,
    };
  },
  computed: {
  },
  methods: {
    async reload() {
      var r = await this.axios.post(this.estor_url + "/api", {
        command: "ListJobs",
      });
      this.jobs = r.data.data.data;
    },
    select_ok(selection) {
      this.selection = selection;
    },
    async start_job() {
      if (!this.selection) return;
      var r = await this.$root.estor_call("CreateJob", {
        name: "feature upload",
        spec: {
          type: "HttpPost",
          args: {
            space: this.$root.estor_space,
            files: this.selection,
            url: 'http://127.0.0.1:18484/upload',
            recursive: true,
          },
        },
      });
      console.log(r);
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style scoped>
</style>
