Home.vue 2.15 KB
Newer Older
1
<template>
2 3 4 5 6 7 8 9 10 11 12 13 14
  <div>
    <div class="ui vertical center aligned stripe segment">
      <search :autofocus="true"></search>
    </div>
    <div class="ui hidden divider"></div>
    <div class="ui stackable two column grid">
      <div class="column">
        <h2 class="ui header">Latest artists</h2>
        <div :class="['ui', {'active': isLoadingArtists}, 'inline', 'loader']"></div>
        <div v-if="artists.length > 0" v-for="artist in artists.slice(0, 3)" :key="artist" class="ui cards">
          <artist-card :artist="artist"></artist-card>
        </div>
      </div>
15 16 17 18 19 20
      <div class="column">
        <h2 class="ui header">Radios</h2>
        <radio-card :type="'favorites'"></radio-card>
        <radio-card :type="'random'"></radio-card>
        <radio-card :type="'less-listened'"></radio-card>
      </div>
21
    </div>
22 23 24 25 26
  </div>
</template>

<script>
import Search from '@/components/audio/Search'
27 28 29
import backend from '@/audio/backend'
import logger from '@/logging'
import ArtistCard from '@/components/audio/artist/Card'
30
import config from '@/config'
31
import RadioCard from '@/components/radios/Card'
32

33
const ARTISTS_URL = config.API_URL + 'artists/'
34 35 36

export default {
  name: 'browse',
37 38
  components: {
    Search,
39 40
    ArtistCard,
    RadioCard
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
  },
  data () {
    return {
      artists: [],
      isLoadingArtists: false
    }
  },
  created () {
    this.fetchArtists()
  },
  methods: {
    fetchArtists () {
      var self = this
      this.isLoadingArtists = true
      let params = {
        ordering: '-creation_date'
      }
      let url = ARTISTS_URL
      logger.default.time('Loading latest artists')
      this.$http.get(url, {params: params}).then((response) => {
        self.artists = response.data.results
        self.artists.map((artist) => {
          var albums = JSON.parse(JSON.stringify(artist.albums)).map((album) => {
            return backend.Album.clean(album)
          })
          artist.albums = albums
          return artist
        })
        logger.default.timeEnd('Loading latest artists')
        self.isLoadingArtists = false
      })
    }
  }
74 75 76 77 78 79
}
</script>

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