mirror of
https://github.com/owntone/owntone-server.git
synced 2025-01-28 15:06:02 -05:00
[web-src] Start implementing audiobooks authors page
This commit is contained in:
parent
1258427afc
commit
9c4c25f507
35
web-src/src/components/TabsAudiobooks.vue
Normal file
35
web-src/src/components/TabsAudiobooks.vue
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<section class="section fd-tabs-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns is-centered">
|
||||||
|
<div class="column is-four-fifths">
|
||||||
|
<div class="tabs is-centered is-small">
|
||||||
|
<ul>
|
||||||
|
<router-link tag="li" to="/audiobooks/artists" active-class="is-active">
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="mdi mdi-artist"></i></span>
|
||||||
|
<span class="">Authors</span>
|
||||||
|
</a>
|
||||||
|
</router-link>
|
||||||
|
<router-link tag="li" to="/audiobooks/albums" active-class="is-active">
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small"><i class="mdi mdi-album"></i></span>
|
||||||
|
<span class="">Albums</span>
|
||||||
|
</a>
|
||||||
|
</router-link>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TabsAudiobooks'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
@ -47,7 +47,7 @@ import * as types from '@/store/mutation_types'
|
|||||||
|
|
||||||
const artistsData = {
|
const artistsData = {
|
||||||
load: function (to) {
|
load: function (to) {
|
||||||
return webapi.library_artists()
|
return webapi.library_artists('music')
|
||||||
},
|
},
|
||||||
|
|
||||||
set: function (vm, response) {
|
set: function (vm, response) {
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<tabs-audiobooks></tabs-audiobooks>
|
||||||
|
|
||||||
<content-with-heading>
|
<content-with-heading>
|
||||||
<template slot="heading-left">
|
<template slot="heading-left">
|
||||||
<p class="title is-4">Audiobooks</p>
|
<p class="title is-4">Audiobooks</p>
|
||||||
@ -21,6 +23,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||||
|
import TabsAudiobooks from '@/components/TabsAudiobooks'
|
||||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||||
import ListItemAlbum from '@/components/ListItemAlbum'
|
import ListItemAlbum from '@/components/ListItemAlbum'
|
||||||
import ModalDialogAlbum from '@/components/ModalDialogAlbum'
|
import ModalDialogAlbum from '@/components/ModalDialogAlbum'
|
||||||
@ -39,7 +42,7 @@ const albumsData = {
|
|||||||
export default {
|
export default {
|
||||||
name: 'PageAudiobooks',
|
name: 'PageAudiobooks',
|
||||||
mixins: [LoadDataBeforeEnterMixin(albumsData)],
|
mixins: [LoadDataBeforeEnterMixin(albumsData)],
|
||||||
components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum },
|
components: { TabsAudiobooks, ContentWithHeading, ListItemAlbum, ModalDialogAlbum },
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
@ -1,22 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<tabs-music></tabs-music>
|
<tabs-audiobooks></tabs-audiobooks>
|
||||||
|
|
||||||
<content-with-heading>
|
<content-with-heading>
|
||||||
<template slot="options">
|
<template slot="options">
|
||||||
<index-button-list :index="index_list"></index-button-list>
|
<index-button-list :index="index_list"></index-button-list>
|
||||||
</template>
|
</template>
|
||||||
<template slot="heading-left">
|
<template slot="heading-left">
|
||||||
<p class="title is-4">Artists</p>
|
<p class="title is-4">Authors</p>
|
||||||
<p class="heading">{{ artists.total }} artists</p>
|
<p class="heading">{{ artists.total }} authors</p>
|
||||||
</template>
|
</template>
|
||||||
<template slot="heading-right">
|
<template slot="heading-right">
|
||||||
<a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="mdi mdi-numeric-1-box-multiple-outline"></i>
|
|
||||||
</span>
|
|
||||||
<span>Hide singles</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
</template>
|
||||||
<template slot="content">
|
<template slot="content">
|
||||||
<list-item-artist v-for="artist in artists_filtered"
|
<list-item-artist v-for="artist in artists_filtered"
|
||||||
@ -38,7 +32,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { LoadDataBeforeEnterMixin } from './mixin'
|
import { LoadDataBeforeEnterMixin } from './mixin'
|
||||||
import ContentWithHeading from '@/templates/ContentWithHeading'
|
import ContentWithHeading from '@/templates/ContentWithHeading'
|
||||||
import TabsMusic from '@/components/TabsMusic'
|
import TabsAudiobooks from '@/components/TabsAudiobooks'
|
||||||
import IndexButtonList from '@/components/IndexButtonList'
|
import IndexButtonList from '@/components/IndexButtonList'
|
||||||
import ListItemArtist from '@/components/ListItemArtist'
|
import ListItemArtist from '@/components/ListItemArtist'
|
||||||
import ModalDialogArtist from '@/components/ModalDialogArtist'
|
import ModalDialogArtist from '@/components/ModalDialogArtist'
|
||||||
@ -47,7 +41,7 @@ import * as types from '@/store/mutation_types'
|
|||||||
|
|
||||||
const artistsData = {
|
const artistsData = {
|
||||||
load: function (to) {
|
load: function (to) {
|
||||||
return webapi.library_artists()
|
return webapi.library_artists('audiobook')
|
||||||
},
|
},
|
||||||
|
|
||||||
set: function (vm, response) {
|
set: function (vm, response) {
|
||||||
@ -56,9 +50,9 @@ const artistsData = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PageArtists',
|
name: 'PageAudiobooksArtists',
|
||||||
mixins: [LoadDataBeforeEnterMixin(artistsData)],
|
mixins: [LoadDataBeforeEnterMixin(artistsData)],
|
||||||
components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemArtist, ModalDialogArtist },
|
components: { ContentWithHeading, TabsAudiobooks, IndexButtonList, ListItemArtist, ModalDialogArtist },
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
@ -18,6 +18,7 @@ import PageArtistTracks from '@/pages/PageArtistTracks'
|
|||||||
import PagePodcasts from '@/pages/PagePodcasts'
|
import PagePodcasts from '@/pages/PagePodcasts'
|
||||||
import PagePodcast from '@/pages/PagePodcast'
|
import PagePodcast from '@/pages/PagePodcast'
|
||||||
import PageAudiobooks from '@/pages/PageAudiobooks'
|
import PageAudiobooks from '@/pages/PageAudiobooks'
|
||||||
|
import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists'
|
||||||
import PageAudiobook from '@/pages/PageAudiobook'
|
import PageAudiobook from '@/pages/PageAudiobook'
|
||||||
import PagePlaylists from '@/pages/PagePlaylists'
|
import PagePlaylists from '@/pages/PagePlaylists'
|
||||||
import PagePlaylist from '@/pages/PagePlaylist'
|
import PagePlaylist from '@/pages/PagePlaylist'
|
||||||
@ -146,9 +147,19 @@ export const router = new VueRouter({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/audiobooks',
|
path: '/audiobooks',
|
||||||
name: 'Audiobooks',
|
redirect: '/audiobooks/artists'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/audiobooks/artists',
|
||||||
|
name: 'AudiobooksArtists',
|
||||||
|
component: PageAudiobooksArtists,
|
||||||
|
meta: { show_progress: true, has_tabs: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/audiobooks/albums',
|
||||||
|
name: 'AudiobooksAlbums',
|
||||||
component: PageAudiobooks,
|
component: PageAudiobooks,
|
||||||
meta: { show_progress: true }
|
meta: { show_progress: true, has_tabs: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/audiobooks/:album_id',
|
path: '/audiobooks/:album_id',
|
||||||
|
@ -200,8 +200,8 @@ export default {
|
|||||||
return axios.put('/api/outputs/' + outputId + '/toggle')
|
return axios.put('/api/outputs/' + outputId + '/toggle')
|
||||||
},
|
},
|
||||||
|
|
||||||
library_artists () {
|
library_artists (media_kind = undefined) {
|
||||||
return axios.get('/api/library/artists?media_kind=music')
|
return axios.get('/api/library/artists', { params: { media_kind: media_kind } })
|
||||||
},
|
},
|
||||||
|
|
||||||
library_artist (artistId) {
|
library_artist (artistId) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user