Detail.vue 3.13 KB
Newer Older
Bat's avatar
Bat committed
1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div>
    <div v-if="isLoading" class="ui vertical segment" v-title="'Radio'">
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
    <div v-if="!isLoading && radio" class="ui head vertical center aligned stripe segment" v-title="radio.name">
      <div class="segment-content">
        <h2 class="ui center aligned icon header">
          <i class="circular inverted feed blue icon"></i>
          <div class="content">
            {{ radio.name }}
            <div class="sub header">
13
              Radio containing {{ totalTracks }} tracks,
Bat's avatar
Bat committed
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
              by <username :username="radio.user.username"></username>
            </div>
          </div>
        </h2>
        <div class="ui hidden divider"></div>
        <radio-button type="custom" :custom-radio-id="radio.id"></radio-button>
        <router-link class="ui icon button" :to="{name: 'library.radios.edit', params: {id: radio.id}}" exact>
          <i class="pencil icon"></i>
          Edit…
        </router-link>
        <dangerous-button class="labeled icon" :action="deleteRadio">
          <i class="trash icon"></i> Delete
          <p slot="modal-header">Do you want to delete the radio "{{ radio.name }}"?</p>
          <p slot="modal-content">This will completely delete this radio and cannot be undone.</p>
          <p slot="modal-confirm">Delete radio</p>
        </dangerous-button>
      </div>
    </div>
    <div class="ui vertical stripe segment">
      <h2>Tracks</h2>
      <track-table :tracks="tracks"></track-table>
Bat's avatar
Bat committed
35
36
37
38
39
40
41
42
43
      <div class="ui center aligned basic segment">
        <pagination
          v-if="totalTracks > 25"
          @page-changed="selectPage"
          :current="page"
          :paginate-by="25"
          :total="totalTracks"
          ></pagination>
      </div>
Bat's avatar
Bat committed
44
45
46
47
48
49
50
51
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import TrackTable from '@/components/audio/track/Table'
import RadioButton from '@/components/radios/Button'
Bat's avatar
Bat committed
52
import Pagination from '@/components/Pagination'
Bat's avatar
Bat committed
53
54
55
56
57
58
59

export default {
  props: {
    id: {required: true}
  },
  components: {
    TrackTable,
Bat's avatar
Bat committed
60
61
    RadioButton,
    Pagination
Bat's avatar
Bat committed
62
63
64
65
66
  },
  data: function () {
    return {
      isLoading: false,
      radio: null,
Bat's avatar
Bat committed
67
68
69
      tracks: [],
      totalTracks: 0,
      page: 1
Bat's avatar
Bat committed
70
71
72
73
74
75
    }
  },
  created: function () {
    this.fetch()
  },
  methods: {
Bat's avatar
Bat committed
76
77
78
    selectPage: function (page) {
      this.page = page
    },
Bat's avatar
Bat committed
79
80
81
82
83
84
    fetch: function () {
      let self = this
      self.isLoading = true
      let url = 'radios/radios/' + this.id + '/'
      axios.get(url).then((response) => {
        self.radio = response.data
Bat's avatar
Bat committed
85
86
        axios.get(url + 'tracks', {params: {page: this.page}}).then((response) => {
          this.totalTracks = response.data.count
Bat's avatar
Bat committed
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
          this.tracks = response.data.results
        }).then(() => {
          self.isLoading = false
        })
      })
    },
    deleteRadio () {
      let self = this
      let url = 'radios/radios/' + this.id + '/'
      axios.delete(url).then((response) => {
        self.$router.push({
          path: '/library'
        })
      })
    }
Bat's avatar
Bat committed
102
103
104
105
106
  },
  watch: {
    page: function () {
      this.fetch()
    }
Bat's avatar
Bat committed
107
108
109
  }
}
</script>