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
-- 
2.26.2