Radio page before going to shows

src/js/routes.js

@@ -1,5 +1,6 @@
 
 import HomePage from '../pages/home.vue'
+import RadioPage from '../pages/Radio.vue'
 import RadioShowsPage from '../pages/RadioShows.vue'
 import ShowPage from '../pages/Show.vue'
 import NotFoundPage from '../pages/404.vue'
@@ -9,7 +10,13 @@ var routes = [
     path: (process.env.NODE_ENV === 'development') ? '/' : '/plaid/',
     master: true,
     component: HomePage,
-    detailRoutes: [{
+    detailRoutes: [
+    {
+      name: 'Radio',
+      path: '/radio/:radioName',
+      component: RadioPage,
+    },
+    {
       name: 'RadioShows',
       path: '/radio/:radioName/shows',
       component: RadioShowsPage,

src/pages/Radio.vue

@@ -0,0 +1,49 @@
+<template>
+  <f7-page name="radio">
+    <img :src='Radio.logo' id='logo'/> 
+    <f7-block-title>{{Radio.name}}</f7-block-title>
+    <f7-block-header>{{Radio.description}}</f7-block-header>
+
+    <f7-preloader v-if='loading' />
+    <f7-list v-else>
+        <f7-list-item title="Diretta" :link='`/radio/${radioId}/live`' />
+        <f7-list-item title="Trasmissioni" :link='`/radio/${radioId}/shows`' />
+        <f7-list-item title="Contatti" :link='`/radio/${radioId}/contacts`' disabled />
+
+    </f7-list>
+  </f7-page>    
+</template>
+
+<script>
+import radiomanifest from '../js/radiomanifest'
+
+export default {
+  name: 'radio',
+  data () {
+    return {
+      loading: true,
+      radioId: null,
+      radio: { name: '' },
+      Radio: { }
+    }
+  },
+  props: { f7route: Object, f7router: Object },
+  async mounted () {
+    this.radioId = this.f7route.params.radioName
+    try {
+      this.Radio = await radiomanifest.get(this.f7route.params.radioName)
+      this.loading = false
+    } catch (e) {
+      console.error('le cose non vanno mai sempre bene!', e)
+    }
+  }
+}
+
+</script>
+<style>
+#logo {
+  margin-left: 10px;
+  max-width: 40px;
+}
+</style>
+

src/pages/home.vue

@@ -8,7 +8,7 @@ import radiomanifest from '../js/radiomanifest'
     <!-- Page content-->
     <f7-block-title>Radio</f7-block-title>
     <f7-list>
-      <f7-list-item v-for='(radio, id) in radiomanifest.radio' :key='id' :link="`/radio/${id}/shows`" :title="radio.name" />
+      <f7-list-item v-for='(radio, id) in radiomanifest.radio' :key='id' :link="`/radio/${id}`" :title="radio.name" />
     </f7-list>