Add playlist view

src/components/Lib/Router.ts

@@ -14,6 +14,7 @@ import RadioStationEdit from "../RadioStation/RadioStationEdit.vue"
 import UserSettingsView from "../User/UserSettingsView.vue"
 import PlaylistList from "../Playlist/PlaylistList.vue"
 import PlaylistEdit from "../Playlist/PlaylistEdit.vue"
+import PlaylistView from "../Playlist/PlaylistView.vue"
 
 const routes = [
   {
@@ -86,6 +87,11 @@ const routes = [
     name: "PlaylistEdit",
     component: PlaylistEdit,
   },
+  {
+    path: "/playlist/:playlistId?",
+    name: "PlaylistView",
+    component: PlaylistView,
+  },
 ];
 
 const Router = createRouter({

src/components/Playlist/PlaylistList.vue

@@ -21,7 +21,7 @@
               <font-awesome-icon class="playButton button" :icon="['fas', 'play']" v-on:click="play(playlist)" :title="$t('playlists.play_playlist')" />
             </td>
             <td>
-              {{ playlist.getName() }}
+              <router-link :to="'/playlist/' + playlist.getId()">{{ playlist.getName() }}</router-link>
             </td>
             <td>
               {{ playlist.getUserName() }}

src/components/Playlist/PlaylistView.vue

@@ -0,0 +1,60 @@
+<template>
+  <template v-if="playlist !== null">
+    <h1>/ <router-link :to="'/playlists'">{{ $t("playlist.title") }}</router-link> / &bdquo;{{ playlist.getName() }}&rdquo;</h1>
+    <SongListView :songList="songList" />
+  </template>
+  <template v-else>
+    <LoadingIcon />
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from 'vue'
+import Player from '../Lib/Player';
+import LoadingIcon from '../Lib/LoadingIcon.vue'
+import PlaylistInterface from '../../model/PlaylistInterface'
+import HttpRequest from '../Lib/HttpRequest';
+import { plainToClass} from 'class-transformer';
+import EntityLoader from '../Lib/EntityLoader';
+import { AxiosResponse } from 'axios';
+import SongListItemInterface from '../../model/SongListItemInterface';
+import SongListItem from '../../model/SongListItem';
+import SongListView from '../Lib/SongListView.vue'
+
+export default defineComponent({
+  name: 'PlaylistView',
+  data() {
+    return { 
+      playlist: null as null|PlaylistInterface,
+      songList: [] as Array<SongListItemInterface>,
+    }
+  },
+  setup() {
+    const player = inject('ply') as Player;
+    return {
+      player,
+    };
+  },
+  components: {
+    LoadingIcon,
+    SongListView,
+  },
+  async created(): Promise<void> {
+    EntityLoader.loadPlaylist(+this.$route.params.playlistId).then((playlist: PlaylistInterface) => this.playlist = playlist);
+
+    HttpRequest.get(
+      'playlist/' + this.$route.params.playlistId + '/songs'
+    ).then((response: AxiosResponse) => {
+      this.songList = response.data.items.map((data: Object): SongListItemInterface => plainToClass(SongListItem, data));
+    });
+  },
+  methods: {
+    async play(playlist: PlaylistInterface): Promise<void> {
+      this.player.playPlaylist(playlist.getId(), this);
+    }
+  }
+})
+</script>
+
+<style scoped>
+</style>

src/locales/de.json

@@ -53,6 +53,9 @@
     "edit_playlist": "Playlist bearbeiten",
     "delete_playlist": "Playlist löschen"
   },
+  "playlist": {
+    "title": "Playlist"
+  },
   "add_to_playlists": {
     "title": "Zu Playlist hinzufügen...",
     "add_media": "Füge die Medien den folgenden Playlists hinzu",

src/locales/en.json

@@ -53,6 +53,9 @@
     "edit_playlist": "Edit playlist",
     "delete_playlist": "Delete playlist"
   },
+  "playlist": {
+    "title": "Playlist"
+  },
   "add_to_playlists": {
     "title": "Add to playlist...",
     "add_media": "Add the media(s) to the following playlists.",