BatchDetail.vue 3.16 KB
Newer Older
1
<template>
Bat's avatar
Bat committed
2
  <div v-title="'Import Batch #' + id">
3
4
5
6
7
8
9
10
    <div v-if="isLoading && !batch" class="ui vertical segment">
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
    <div v-if="batch" class="ui vertical stripe segment">
      <div :class="
        ['ui',
        {'active': batch.status === 'pending'},
        {'warning': batch.status === 'pending'},
Eliot Berriot's avatar
Eliot Berriot committed
11
        {'error': batch.status === 'errored'},
12
13
14
15
16
17
18
19
        {'success': batch.status === 'finished'},
        'progress']">
        <div class="bar" :style="progressBarStyle">
          <div class="progress"></div>
        </div>
        <div v-if="batch.status === 'pending'" class="label">Importing {{ batch.jobs.length }} tracks...</div>
        <div v-if="batch.status === 'finished'" class="label">Imported {{ batch.jobs.length }} tracks!</div>
      </div>
20
      <table class="ui unstackable table">
21
22
23
24
25
26
        <thead>
          <tr>
            <th>Job ID</th>
            <th>Recording MusicBrainz ID</th>
            <th>Source</th>
            <th>Status</th>
27
            <th>Track</th>
28
29
30
31
32
33
34
35
36
37
38
39
40
          </tr>
        </thead>
        <tbody>
          <tr v-for="job in batch.jobs">
            <td>{{ job.id }}</th>
            <td>
              <a :href="'https://www.musicbrainz.org/recording/' + job.mbid" target="_blank">{{ job.mbid }}</a>
            </td>
            <td>
              <a :href="job.source" target="_blank">{{ job.source }}</a>
            </td>
            <td>
              <span
Eliot Berriot's avatar
Eliot Berriot committed
41
                :class="['ui', {'yellow': job.status === 'pending'}, {'red': job.status === 'errored'}, {'green': job.status === 'finished'}, 'label']">{{ job.status }}</span>
42
            </td>
43
44
45
            <td>
              <router-link v-if="job.track_file" :to="{name: 'library.tracks.detail', params: {id: job.track_file.track }}">{{ job.track_file.track }}</router-link>
            </td>
46
47
48
49
50
51
52
53
54
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</template>

<script>
Eliot Berriot's avatar
Eliot Berriot committed
55
import axios from 'axios'
56
57
import logger from '@/logging'

Eliot Berriot's avatar
Eliot Berriot committed
58
const FETCH_URL = 'import-batches/'
59
60
61
62
63
64

export default {
  props: ['id'],
  data () {
    return {
      isLoading: true,
65
66
      batch: null,
      timeout: null
67
68
69
70
71
    }
  },
  created () {
    this.fetchData()
  },
72
73
74
75
76
  destroyed () {
    if (this.timeout) {
      clearTimeout(this.timeout)
    }
  },
77
78
79
80
81
82
  methods: {
    fetchData () {
      var self = this
      this.isLoading = true
      let url = FETCH_URL + this.id + '/'
      logger.default.debug('Fetching batch "' + this.id + '"')
Eliot Berriot's avatar
Eliot Berriot committed
83
      axios.get(url).then((response) => {
84
85
86
        self.batch = response.data
        self.isLoading = false
        if (self.batch.status === 'pending') {
87
          self.timeout = setTimeout(
88
89
90
91
92
93
94
95
96
97
            self.fetchData,
            5000
          )
        }
      })
    }
  },
  computed: {
    progress () {
      return this.batch.jobs.filter(j => {
Eliot Berriot's avatar
Eliot Berriot committed
98
        return j.status !== 'pending'
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
      }).length * 100 / this.batch.jobs.length
    },
    progressBarStyle () {
      return 'width: ' + parseInt(this.progress) + '%'
    }
  },
  watch: {
    id () {
      this.fetchData()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>