MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-02-25 04:19:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Use named route for the about page

Browse Source 
Switching to named routes in order to reduce future maintenance.
This commit is contained in:
Alain Nussbaumer 2023-07-10 10:37:45 +02:00
parent 53e132f441
commit 9f3fee08b2
4 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web-src/src/components/NavbarBottom.vue
View File

@ -107,12 +107,12 @@
</div>
</div>
<div class="navbar-brand is-flex-grow-1">
<navbar-item-link to="/" exact class="mr-auto">
<navbar-item-link :to="{ path: '/' }" exact class="mr-auto">
<mdicon class="icon" name="playlist-play" size="24" />
</navbar-item-link>
<navbar-item-link
v-if="!is_now_playing_page"
to="/now-playing"
:to="{ path: '/now-playing' }"
exact
class="navbar-item fd-is-text-clipped is-expanded is-clipped is-size-7"
>
@ -267,14 +267,14 @@ import ControlSlider from '@/components/ControlSlider.vue'
import { mdiCancel } from '@mdi/js'
import NavbarItemLink from './NavbarItemLink.vue'
import NavbarItemOutput from './NavbarItemOutput.vue'
import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause.vue'
import PlayerButtonNext from '@/components/PlayerButtonNext.vue'
import PlayerButtonPrevious from '@/components/PlayerButtonPrevious.vue'
import PlayerButtonShuffle from '@/components/PlayerButtonShuffle.vue'
import PlayerButtonConsume from '@/components/PlayerButtonConsume.vue'
import PlayerButtonNext from '@/components/PlayerButtonNext.vue'
import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause.vue'
import PlayerButtonPrevious from '@/components/PlayerButtonPrevious.vue'
import PlayerButtonRepeat from '@/components/PlayerButtonRepeat.vue'
import PlayerButtonSeekBack from '@/components/PlayerButtonSeekBack.vue'
import PlayerButtonSeekForward from '@/components/PlayerButtonSeekForward.vue'
import PlayerButtonShuffle from '@/components/PlayerButtonShuffle.vue'
import webapi from '@/webapi'
export default {
@ -283,14 +283,14 @@ export default {
ControlSlider,
NavbarItemLink,
NavbarItemOutput,
PlayerButtonPlayPause,
PlayerButtonNext,
PlayerButtonPrevious,
PlayerButtonShuffle,
PlayerButtonConsume,
PlayerButtonNext,
PlayerButtonPlayPause,
PlayerButtonPrevious,
PlayerButtonRepeat,
PlayerButtonSeekBack,
PlayerButtonSeekForward,
PlayerButtonSeekBack
PlayerButtonShuffle
},
data() {

4
web-src/src/components/NavbarItemLink.vue
View File

@ -15,7 +15,7 @@ import * as types from '@/store/mutation_types'
export default {
name: 'NavbarItemLink',
props: {
to: String,
to: Object,
exact: Boolean
},
@ -54,7 +54,7 @@ export default {
if (this.show_player_menu) {
this.$store.commit(types.SHOW_PLAYER_MENU, false)
}
this.$router.push({ path: this.to })
this.$router.push(this.to)
},
full_path() {

49
web-src/src/components/NavbarTop.vue
View File

@ -6,25 +6,31 @@
aria-label="main navigation"
>
<div class="navbar-brand">
<navbar-item-link v-if="is_visible_playlists" to="/playlists">
<navbar-item-link
v-if="is_visible_playlists"
:to="{ path: '/playlists' }"
>
<mdicon class="icon" name="music-box-multiple" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_music" to="/music">
<navbar-item-link v-if="is_visible_music" :to="{ path: '/music' }">
<mdicon class="icon" name="music" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
<navbar-item-link v-if="is_visible_podcasts" :to="{ path: '/podcasts' }">
<mdicon class="icon" name="microphone" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
<navbar-item-link
v-if="is_visible_audiobooks"
:to="{ path: '/audiobooks' }"
>
<mdicon class="icon" name="book-open-variant" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_radio" to="/radio">
<navbar-item-link v-if="is_visible_radio" :to="{ path: '/radio' }">
<mdicon class="icon" name="radio" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_files" to="/files">
<navbar-item-link v-if="is_visible_files" :to="{ path: '/files' }">
<mdicon class="icon" name="folder-open" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_search" to="/search">
<navbar-item-link v-if="is_visible_search" :to="{ path: '/search' }">
<mdicon class="icon" name="magnify" size="16" />
</navbar-item-link>
<div
@ -54,48 +60,51 @@
/>
</a>
<div class="navbar-dropdown is-right">
<navbar-item-link to="/playlists">
<navbar-item-link :to="{ path: '/playlists' }">
<mdicon class="icon" name="music-box-multiple" size="16" />
<b v-text="$t('navigation.playlists')" />
</navbar-item-link>
<navbar-item-link to="/music" exact>
<navbar-item-link :to="{ path: '/music' }" exact>
<mdicon class="icon" name="music" size="16" />
<b v-text="$t('navigation.music')" />
</navbar-item-link>
<navbar-item-link to="/music/artists">
<navbar-item-link :to="{ path: '/music/artists' }">
<span class="pl-5" v-text="$t('navigation.artists')" />
</navbar-item-link>
<navbar-item-link to="/music/albums">
<navbar-item-link :to="{ path: '/music/albums' }">
<span class="pl-5" v-text="$t('navigation.albums')" />
</navbar-item-link>
<navbar-item-link to="/music/genres">
<navbar-item-link :to="{ path: '/music/genres' }">
<span class="pl-5" v-text="$t('navigation.genres')" />
</navbar-item-link>
<navbar-item-link v-if="spotify_enabled" to="/music/spotify">
<navbar-item-link
v-if="spotify_enabled"
:to="{ path: '/music/spotify' }"
>
<span class="pl-5" v-text="$t('navigation.spotify')" />
</navbar-item-link>
<navbar-item-link to="/podcasts">
<navbar-item-link :to="{ path: '/podcasts' }">
<mdicon class="icon" name="microphone" size="16" />
<b v-text="$t('navigation.podcasts')" />
</navbar-item-link>
<navbar-item-link to="/audiobooks">
<navbar-item-link :to="{ path: '/audiobooks' }">
<mdicon class="icon" name="book-open-variant" size="16" />
<b v-text="$t('navigation.audiobooks')" />
</navbar-item-link>
<navbar-item-link to="/radio">
<navbar-item-link :to="{ path: '/radio' }">
<mdicon class="icon" name="radio" size="16" />
<b v-text="$t('navigation.radio')" />
</navbar-item-link>
<navbar-item-link to="/files">
<navbar-item-link :to="{ path: '/files' }">
<mdicon class="icon" name="folder-open" size="16" />
<b v-text="$t('navigation.files')" />
</navbar-item-link>
<navbar-item-link to="/search">
<navbar-item-link :to="{ path: '/search' }">
<mdicon class="icon" name="magnify" size="16" />
<b v-text="$t('navigation.search')" />
</navbar-item-link>
<hr class="my-3" />
<navbar-item-link to="/settings/webinterface">{{
<navbar-item-link :to="{ path: '/settings/webinterface' }">{{
$t('navigation.settings')
}}</navbar-item-link>
<a
@ -103,7 +112,7 @@
@click.stop.prevent="open_update_dialog()"
v-text="$t('navigation.update-library')"
/>
<navbar-item-link to="/about">{{
<navbar-item-link :to="{ name: 'about' }">{{
$t('navigation.about')
}}</navbar-item-link>
<div class="navbar-item is-hidden-desktop" />

14
web-src/src/router/index.js
View File

@ -1,6 +1,6 @@
import * as types from '@/store/mutation_types'
import { createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store'
import PageAbout from '@/pages/PageAbout.vue'
import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue'
import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue'
import PageQueue from '@/pages/PageQueue.vue'
@ -28,7 +28,6 @@ import PagePlaylist from '@/pages/PagePlaylist.vue'
import PageFiles from '@/pages/PageFiles.vue'
import PageRadioStreams from '@/pages/PageRadioStreams.vue'
import PageSearch from '@/pages/PageSearch.vue'
import PageAbout from '@/pages/PageAbout.vue'
import SpotifyPageBrowse from '@/pages/SpotifyPageBrowse.vue'
import SpotifyPageBrowseNewReleases from '@/pages/SpotifyPageBrowseNewReleases.vue'
import SpotifyPageBrowseFeaturedPlaylists from '@/pages/SpotifyPageBrowseFeaturedPlaylists.vue'
@ -40,20 +39,21 @@ import SettingsPageWebinterface from '@/pages/SettingsPageWebinterface.vue'
import SettingsPageArtwork from '@/pages/SettingsPageArtwork.vue'
import SettingsPageOnlineServices from '@/pages/SettingsPageOnlineServices.vue'
import SettingsPageRemotesOutputs from '@/pages/SettingsPageRemotesOutputs.vue'
import store from '@/store'
export const router = createRouter({
history: createWebHashHistory(),
routes: [
{
component: PageAbout,
name: 'about',
path: '/about'
},
{
path: '/',
name: 'PageQueue',
component: PageQueue
},
{
path: '/about',
name: 'About',
component: PageAbout
},
{
component: PageAudiobooksAlbum,
meta: { show_progress: true },