LibraryDetail.vue 6.47 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <div v-if="isLoading" class="ui vertical segment" v-title="'Library'">
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
    <template v-if="object">
      <div :class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']" v-title="libraryUsername">
        <div class="segment-content">
          <h2 class="ui center aligned icon header">
            <i class="circular inverted cloud olive icon"></i>
            <div class="content">
              {{ libraryUsername }}
            </div>
          </h2>
        </div>
        <div class="ui hidden divider"></div>
        <div class="ui one column centered grid">
          <table class="ui collapsing very basic table">
            <tbody>
              <tr>
21
22
23
24
                <td >
                  Follow status
                  <span :data-tooltip="$t('This indicate if the remote library granted you access')"><i class="question circle icon"></i></span>
                </td>
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
                <td>
                  <template v-if="object.follow.approved === null">
                    <i class="loading icon"></i> Pending approval
                  </template>
                  <template v-else-if="object.follow.approved === true">
                    <i class="check icon"></i> Following
                  </template>
                  <template v-else-if="object.follow.approved === false">
                    <i class="x icon"></i> Not following
                  </template>
                </td>
                <td>
                </td>
              </tr>
              <tr>
40
41
42
43
                <td>
                  Federation
                  <span :data-tooltip="$t('Use this flag to enable/disable federation with this library')"><i class="question circle icon"></i></span>
                </td>
44
45
46
47
48
49
50
51
52
53
54
55
                <td>
                  <div class="ui toggle checkbox">
                    <input
                      @change="update('federation_enabled')"
                      v-model="object.federation_enabled" type="checkbox">
                    <label></label>
                  </div>
                </td>
                <td>
                </td>
              </tr>
              <tr>
56
57
58
59
                <td>
                  Auto importing
                  <span :data-tooltip="$t('When enabled, auto importing will automatically import new tracks published in this library')"><i class="question circle icon"></i></span>
                </td>
60
61
62
63
64
65
66
67
68
69
                <td>
                  <div class="ui toggle checkbox">
                    <input
                      @change="update('autoimport')"
                      v-model="object.autoimport" type="checkbox">
                    <label></label>
                  </div>
                </td>
                <td></td>
              </tr>
70
              <!-- Disabled until properly implemented on the backend
71
72
73
74
75
76
77
78
79
80
81
82
              <tr>
                <td>File mirroring</td>
                <td>
                  <div class="ui toggle checkbox">
                    <input
                      @change="update('download_files')"
                      v-model="object.download_files" type="checkbox">
                    <label></label>
                  </div>
                </td>
                <td></td>
              </tr>
Eliot Berriot's avatar
Eliot Berriot committed
83
              -->
84
85
86
87
88
89
90
              <tr>
                <td>Library size</td>
                <td>
                  {{ object.tracks_count }} tracks
                </td>
                <td></td>
              </tr>
91
92
93
94
95
              <tr>
                <td>Last fetched</td>
                <td>
                  <human-date v-if="object.fetched_date" :date="object.fetched_date"></human-date>
                  <template v-else>Never</template>
96
97
98
99
100
101
102
103
104
105
                  <button
                    @click="scan"
                    v-if="!scanTrigerred"
                    :class="['ui', 'basic', {loading: isScanLoading}, 'button']">
                    <i class="sync icon"></i> Trigger scan
                  </button>
                  <button v-else class="ui success button">
                    <i class="check icon"></i> Scan triggered!
                  </button>

106
107
108
                </td>
                <td></td>
              </tr>
109
110
111
            </tbody>
          </table>
        </div>
Eliot Berriot's avatar
Eliot Berriot committed
112
113
        <div class="ui hidden divider"></div>
        <button @click="fetchData" class="ui basic button">Refresh</button>
114
115
116
      </div>
      <div class="ui vertical stripe segment">
        <h2>Tracks available in this library</h2>
Eliot Berriot's avatar
Eliot Berriot committed
117
        <library-track-table v-if="!isLoading" :filters="{library: id}"></library-track-table>
118
119
120
121
122
123
124
125
126
      </div>
    </template>
  </div>
</template>

<script>
import axios from 'axios'
import logger from '@/logging'

127
128
import LibraryTrackTable from '@/components/federation/LibraryTrackTable'

129
130
export default {
  props: ['id'],
131
132
133
  components: {
    LibraryTrackTable
  },
134
135
136
  data () {
    return {
      isLoading: true,
137
138
139
      isScanLoading: false,
      object: null,
      scanTrigerred: false
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      var self = this
      this.isLoading = true
      let url = 'federation/libraries/' + this.id + '/'
      logger.default.debug('Fetching library "' + this.id + '"')
      axios.get(url).then((response) => {
        self.object = response.data
        self.isLoading = false
      })
    },
156
157
158
159
160
161
162
163
164
165
166
167
    scan (until) {
      var self = this
      this.isScanLoading = true
      let data = {}
      let url = 'federation/libraries/' + this.id + '/scan/'
      logger.default.debug('Triggering scan for library "' + this.id + '"')
      axios.post(url, data).then((response) => {
        self.scanTrigerred = true
        logger.default.debug('Scan triggered with id', response.data)
        self.isScanLoading = false
      })
    },
168
169
170
171
172
173
    update (attr) {
      let newValue = this.object[attr]
      let params = {}
      let self = this
      params[attr] = newValue
      axios.patch('federation/libraries/' + this.id + '/', params).then((response) => {
Eliot Berriot's avatar
Eliot Berriot committed
174
        logger.default.info(`${attr} was updated succcessfully to ${newValue}`)
175
      }, (error) => {
Eliot Berriot's avatar
Eliot Berriot committed
176
        logger.default.error(`Error while setting ${attr} to ${newValue}`, error)
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
        self.object[attr] = !newValue
      })
    }
  },
  computed: {
    libraryUsername () {
      let actor = this.object.actor
      return `${actor.preferred_username}@${actor.domain}`
    }
  },
  watch: {
    id () {
      this.fetchData()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>