Initial commit

src/playlist/Playlist.vue

@@ -0,0 +1,48 @@
+<template>
+  <Spinner :data="playlist" v-slot="{ data }">
+    <h1>{{ data.name }}</h1>
+    <TrackList :tracks="data.tracks" show-album @remove="remove(index)">
+      <template v-slot:context-menu="{index}">
+        <b-dropdown-item-button @click="remove(index)">
+          Remove
+        </b-dropdown-item-button>
+      </template>
+    </TrackList>
+  </Spinner>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import TrackList from "@/library/TrackList.vue";
+
+export default Vue.extend({
+  components: {
+    TrackList,
+  },
+  props: {
+    id: String,
+  },
+  data() {
+    return {
+      playlist: null as any,
+    };
+  },
+  watch: {
+    'id': {
+      immediate: true,
+      handler(value: string) {
+        this.playlist = null;
+        this.$api.getPlaylist(value).then(playlist => {
+          this.playlist = playlist;//.sort((a: any, b:any) => a.created.localeCompare(b.created));
+        });
+      }
+    }
+  },
+  methods: {
+    remove(index: number) {
+      console.log("remove: " + index)
+      this.$api.removeFromPlaylist(this.id, index.toString());
+      this.playlist.tracks.splice(index, 1);
+    }
+  }
+});
+</script>

src/playlist/PlaylistList.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <b-table-simple>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Created</th>
+        <th>Updated</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(item, index) in playlists" :key="item.id">
+        <td>
+          <router-link :to="{name: 'playlist', params: { id: item.id } }">
+            {{ item.name }}
+          </router-link>
+        </td>
+        <td>{{ item.created | dateTime }}</td>
+        <td>{{ item.changed | dateTime }}</td>
+        <td class="text-right">
+          <OverflowMenu>
+            <b-dropdown-item-btn @click="deletePlaylist(item.id)">Delete</b-dropdown-item-btn>
+          </OverflowMenu>
+        </td>
+      </tr>
+    </tbody>
+    </b-table-simple>
+  </div>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+  import { mapState, mapActions } from 'vuex';
+
+  export default Vue.extend({
+    computed: {
+      ...mapState([
+        "playlists"
+      ]),
+    },
+    methods: {
+      ...mapActions({
+        deletePlaylist: 'deletePlaylist'
+      })
+    }
+  });
+</script>

src/playlist/PlaylistNav.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <span class="nav-link">
+      <small class="text-uppercase text-muted font-weight-bold">
+        Playlists
+         <button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true">
+           <Icon>mdi-plus</Icon>
+         </button>
+      </small>
+    </span>
+
+    <router-link class="nav-item nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
+      <Icon>mdi-view-list</Icon> Random
+    </router-link>
+
+    <router-link v-for="item in playlists" :key="item.id"
+                  :to="{name: 'playlist', params: { id: item.id }}"
+                  class="nav-item nav-link">
+      <span @dragover="onDragover" @drop="onDrop(item.id, $event)">
+        <Icon>mdi-playlist-music</Icon> {{ item.name }}
+      </span>
+    </router-link>
+
+    <router-link class="nav-item nav-link" :to="{name: 'playlists'}">
+      More...
+    </router-link>
+
+    <b-modal v-model="showModal" title="New playlist">
+      <b-form-group label="Name">
+        <b-form-input type="text" v-model="playlistName"/>
+      </b-form-group>
+      <template #modal-footer>
+        <b-button variant="primary" @click="createPlaylist">Create</b-button>
+      </template>
+    </b-modal>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import { mapState } from 'vuex';
+
+export default Vue.extend({
+  data() {
+    return {
+      playlistName: "",
+      showModal: false,
+    }
+  },
+  computed: {
+    playlists() {
+      return this.$store.state.playlists.slice(0, 10);
+    },
+  },
+  methods: {
+    createPlaylist() {
+      this.$store.dispatch("createPlaylist", this.playlistName);
+      this.playlistName = "";
+      this.showModal = false;
+    },
+    onDrop(playlistId: string, event: any) {
+      console.log("onDrop")
+      event.preventDefault();
+      const trackId = event.dataTransfer.getData("id");
+      this.$store.dispatch("addTrackToPlaylist", { playlistId, trackId })
+    },
+    onDragover(event: any) {
+      console.log("onDragover")
+      event.preventDefault();
+    },
+  }
+});
+</script>

src/playlist/RandomSongs.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="items">
+    <TrackList :tracks="items" show-album/>
+    <table class="table">
+      <thead>
+      </thead>
+      <tbody>
+        <tr v-for="item in items" :key="item.id">
+          <td>
+             <Icon @click="() => {}">mdi-play-outline</Icon>
+        <Icon @click="() => {}">mdi-plus</Icon>
+          </td>
+          <td>{{ item.artist }}</td>
+          <td>{{ item.album }}</td>
+          <td>{{ item.duration | duration }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import TrackList from "@/library/TrackList.vue";
+
+export default Vue.extend({
+  components: {
+    TrackList,
+  },
+  data() {
+    return {
+      loading: true,
+      items: [] as any[],
+    };
+  },
+  created() {
+    this.$api.getRandomSongs().then(items => {
+      this.loading = false;
+      this.items = items;//.sort((a: any, b:any) => a.created.localeCompare(b.created));
+    });
+  }
+});
+</script>