From 6f4970545f935f3458af25c997b85a207208b202 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sun, 23 Aug 2020 08:52:46 +0200
Subject: [PATCH] [web-src] Turn "radio" into top level item and allow
 customization of visible menue items

---
 web-src/src/components/NavbarTop.vue          | 39 ++++++++++++---
 web-src/src/components/TabsMusic.vue          |  6 ---
 web-src/src/pages/PageRadioStreams.vue        |  5 +-
 .../src/pages/SettingsPageWebinterface.vue    | 48 +++++++++++++++++++
 web-src/src/router/index.js                   | 12 ++---
 web-src/src/store/index.js                    | 12 +++++
 6 files changed, 99 insertions(+), 23 deletions(-)

diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index b89b0861..3e048152 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -1,22 +1,25 @@
 <template>
   <nav class="fd-top-navbar navbar is-light is-fixed-top" :style="zindex" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-      <navbar-item-link to="/playlists">
+      <navbar-item-link to="/playlists" v-if="is_visible_playlists">
         <span class="icon"><i class="mdi mdi-library-music"></i></span>
       </navbar-item-link>
-      <navbar-item-link to="/music">
+      <navbar-item-link to="/music" v-if="is_visible_music">
         <span class="icon"><i class="mdi mdi-music"></i></span>
       </navbar-item-link>
-      <navbar-item-link to="/podcasts">
+      <navbar-item-link to="/podcasts" v-if="is_visible_podcasts">
         <span class="icon"><i class="mdi mdi-microphone"></i></span>
       </navbar-item-link>
-      <navbar-item-link to="/audiobooks" v-if="audiobooks.tracks > 0">
+      <navbar-item-link to="/audiobooks" v-if="is_visible_audiobooks">
         <span class="icon"><i class="mdi mdi-book-open-variant"></i></span>
       </navbar-item-link>
-      <navbar-item-link to="/files">
+      <navbar-item-link to="/radio" v-if="is_visible_radio">
+        <span class="icon"><i class="mdi mdi-radio"></i></span>
+      </navbar-item-link>
+      <navbar-item-link to="/files" v-if="is_visible_files">
         <span class="icon"><i class="mdi mdi-folder-open"></i></span>
       </navbar-item-link>
-      <navbar-item-link to="/search">
+      <navbar-item-link to="/search" v-if="is_visible_search">
         <span class="icon"><i class="mdi mdi-magnify"></i></span>
       </navbar-item-link>
 
@@ -49,10 +52,10 @@
             <navbar-item-link to="/music/artists"><span class="fd-navbar-item-level2">Artists</span></navbar-item-link>
             <navbar-item-link to="/music/albums"><span class="fd-navbar-item-level2">Albums</span></navbar-item-link>
             <navbar-item-link to="/music/genres"><span class="fd-navbar-item-level2">Genres</span></navbar-item-link>
-            <navbar-item-link to="/music/radio"><span class="fd-navbar-item-level2">Radio</span></navbar-item-link>
             <navbar-item-link to="/music/spotify" v-if="spotify_enabled"><span class="fd-navbar-item-level2">Spotify</span></navbar-item-link>
             <navbar-item-link to="/podcasts"><span class="icon"><i class="mdi mdi-microphone"></i></span> <b>Podcasts</b></navbar-item-link>
             <navbar-item-link to="/audiobooks"><span class="icon"><i class="mdi mdi-book-open-variant"></i></span> <b>Audiobooks</b></navbar-item-link>
+            <navbar-item-link to="/radio"><span class="icon"><i class="mdi mdi-radio"></i></span> <b>Radio</b></navbar-item-link>
             <navbar-item-link to="/files"><span class="icon"><i class="mdi mdi-folder-open"></i></span> <b>Files</b></navbar-item-link>
             <navbar-item-link to="/search"><span class="icon"><i class="mdi mdi-magnify"></i></span> <b>Search</b></navbar-item-link>
             <hr class="fd-navbar-divider">
@@ -87,6 +90,28 @@ export default {
   },
 
   computed: {
+    is_visible_playlists () {
+      return this.$store.getters.settings_option('webinterface', 'show_menu_item_playlists').value
+    },
+    is_visible_music () {
+      return this.$store.getters.settings_option('webinterface', 'show_menu_item_music').value
+    },
+    is_visible_podcasts () {
+      return this.$store.getters.settings_option('webinterface', 'show_menu_item_podcasts').value
+    },
+    is_visible_audiobooks () {
+      return this.$store.getters.settings_option('webinterface', 'show_menu_item_audiobooks').value
+    },
+    is_visible_radio () {
+      return this.$store.getters.settings_option('webinterface', 'show_menu_item_radio').value
+    },
+    is_visible_files () {
+      return this.$store.getters.settings_option('webinterface', 'show_menu_item_files').value
+    },
+    is_visible_search () {
+      return this.$store.getters.settings_option('webinterface', 'show_menu_item_search').value
+    },
+
     player () {
       return this.$store.state.player
     },
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index 13e98db1..fe47b9ab 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -29,12 +29,6 @@
                   <span class="">Genres</span>
                 </a>
               </router-link>
-              <router-link tag="li" to="/music/radio" active-class="is-active">
-                <a>
-                  <span class="icon is-small"><i class="mdi mdi-radio"></i></span>
-                  <span class="">Radio</span>
-                </a>
-              </router-link>
               <router-link tag="li" to="/music/spotify" v-if="spotify_enabled" active-class="is-active">
                 <a>
                   <span class="icon is-small"><i class="mdi mdi-spotify"></i></span>
diff --git a/web-src/src/pages/PageRadioStreams.vue b/web-src/src/pages/PageRadioStreams.vue
index c82c236f..decc5d40 100644
--- a/web-src/src/pages/PageRadioStreams.vue
+++ b/web-src/src/pages/PageRadioStreams.vue
@@ -1,7 +1,5 @@
 <template>
   <div>
-    <tabs-music></tabs-music>
-
     <content-with-heading>
       <template slot="heading-left">
         <p class="title is-4">Radio</p>
@@ -23,7 +21,6 @@
 
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
-import TabsMusic from '@/components/TabsMusic'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
@@ -42,7 +39,7 @@ const streamsData = {
 export default {
   name: 'PageRadioStreams',
   mixins: [LoadDataBeforeEnterMixin(streamsData)],
-  components: { TabsMusic, ContentWithHeading, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack },
 
   data () {
     return {
diff --git a/web-src/src/pages/SettingsPageWebinterface.vue b/web-src/src/pages/SettingsPageWebinterface.vue
index 47cdcb44..45819149 100644
--- a/web-src/src/pages/SettingsPageWebinterface.vue
+++ b/web-src/src/pages/SettingsPageWebinterface.vue
@@ -2,6 +2,54 @@
   <div>
     <tabs-settings></tabs-settings>
 
+    <content-with-heading>
+      <template slot="heading-left">
+        <div class="title is-4">Navbar items</div>
+      </template>
+
+      <template slot="content">
+        <p class="content">
+          Select the top navigation bar menu items
+        </p>
+        <div class="notification is-size-7">
+          Be aware that if you select more items than can be shown on your screen will result in the burger menu item to disapear.
+        </div>
+        <settings-checkbox category_name="webinterface" option_name="show_menu_item_playlists">
+          <template slot="label"> Playlists</template>
+        </settings-checkbox>
+        <settings-checkbox category_name="webinterface" option_name="show_menu_item_music">
+          <template slot="label"> Music</template>
+        </settings-checkbox>
+        <settings-checkbox category_name="webinterface" option_name="show_menu_item_podcasts">
+          <template slot="label"> Podcasts</template>
+        </settings-checkbox>
+        <settings-checkbox category_name="webinterface" option_name="show_menu_item_audiobooks">
+          <template slot="label"> Audiobooks</template>
+        </settings-checkbox>
+        <settings-checkbox category_name="webinterface" option_name="show_menu_item_radio">
+          <template slot="label"> Radio</template>
+        </settings-checkbox>
+        <settings-checkbox category_name="webinterface" option_name="show_menu_item_files">
+          <template slot="label"> Files</template>
+        </settings-checkbox>
+        <settings-checkbox category_name="webinterface" option_name="show_menu_item_search">
+          <template slot="label"> Search</template>
+        </settings-checkbox>
+      </template>
+    </content-with-heading>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <div class="title is-4">Album lists</div>
+      </template>
+
+      <template slot="content">
+        <settings-checkbox category_name="webinterface" option_name="show_cover_artwork_in_album_lists">
+          <template slot="label"> Show cover artwork in album list</template>
+        </settings-checkbox>
+      </template>
+    </content-with-heading>
+
     <content-with-heading>
       <template slot="heading-left">
         <div class="title is-4">Now playing page</div>
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 5a3de87d..17490f22 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -127,12 +127,6 @@ export const router = new VueRouter({
       component: PageGenreTracks,
       meta: { show_progress: true, has_index: true }
     },
-    {
-      path: '/music/radio',
-      name: 'Radio',
-      component: PageRadioStreams,
-      meta: { show_progress: true, has_tabs: true }
-    },
     {
       path: '/podcasts',
       name: 'Podcasts',
@@ -167,6 +161,12 @@ export const router = new VueRouter({
       component: PageAudiobook,
       meta: { show_progress: true }
     },
+    {
+      path: '/radio',
+      name: 'Radio',
+      component: PageRadioStreams,
+      meta: { show_progress: true }
+    },
     {
       path: '/files',
       name: 'Files',
diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js
index f666340a..5b120ce1 100644
--- a/web-src/src/store/index.js
+++ b/web-src/src/store/index.js
@@ -91,6 +91,18 @@ export default new Vuex.Store({
         }
       }
       return null
+    },
+
+    settings_category: (state) => (categoryName) => {
+      return state.settings.categories.find(elem => elem.name === categoryName)
+    },
+
+    settings_option: (state) => (categoryName, optionName) => {
+      const category = state.settings.categories.find(elem => elem.name === categoryName)
+      if (!category) {
+        return {}
+      }
+      return category.options.find(elem => elem.name === optionName)
     }
   },