From 8c9f3f28816e6ae0689936ab58c006432c0f9526 Mon Sep 17 00:00:00 2001 From: Eliot Berriot <contact@eliotberriot.com> Date: Wed, 14 Jun 2017 03:55:32 +0200 Subject: [PATCH] Added radio card and lit of radios on browse home --- src/components/browse/Home.vue | 10 ++++++++- src/components/radios/Card.vue | 37 ++++++++++++++++++++++++++++++++++ src/radios/index.js | 14 +++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 src/components/radios/Card.vue diff --git a/src/components/browse/Home.vue b/src/components/browse/Home.vue index 7599029..ef736a0 100644 --- a/src/components/browse/Home.vue +++ b/src/components/browse/Home.vue @@ -12,6 +12,12 @@ <artist-card :artist="artist"></artist-card> </div> </div> + <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> </div> </div> </template> @@ -22,6 +28,7 @@ import backend from '@/audio/backend' import logger from '@/logging' import ArtistCard from '@/components/audio/artist/Card' import config from '@/config' +import RadioCard from '@/components/radios/Card' const ARTISTS_URL = config.API_URL + 'artists/' @@ -29,7 +36,8 @@ export default { name: 'browse', components: { Search, - ArtistCard + ArtistCard, + RadioCard }, data () { return { diff --git a/src/components/radios/Card.vue b/src/components/radios/Card.vue new file mode 100644 index 0000000..1e49632 --- /dev/null +++ b/src/components/radios/Card.vue @@ -0,0 +1,37 @@ +<template> + <div class="ui card"> + <div class="content"> + <div class="header">Radio : {{ radio.name }}</div> + <div class="description"> + {{ radio.description }} + </div> + </div> + <div class="extra content"> + <radio-button class="right floated button" :type="type"></radio-button> + </div> + </div> +</template> + +<script> +import radios from '@/radios' +import RadioButton from './Button' + +export default { + props: { + type: {type: String, required: true} + }, + components: { + RadioButton + }, + computed: { + radio () { + return radios.types[this.type] + } + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped lang="scss"> + +</style> diff --git a/src/radios/index.js b/src/radios/index.js index a35741c..b468830 100644 --- a/src/radios/index.js +++ b/src/radios/index.js @@ -7,6 +7,20 @@ const CREATE_RADIO_URL = config.API_URL + 'radios/sessions/' const GET_TRACK_URL = config.API_URL + 'radios/tracks/' var radios = { + types: { + random: { + name: 'Random', + description: "Totally random picks, maybe you'll discover new things?" + }, + favorites: { + name: 'Favorites', + description: 'Play your favorites tunes in a never-ending happiness loop.' + }, + 'less-listened': { + name: 'Less listened', + description: "Listen to tracks you usually don't. It's time to restore some balance." + } + }, start (type, objectId) { this.current.type = type this.current.objectId = objectId -- GitLab