Users can now add songs to one of their playlists

frontend/components/Modals/AddSongToPlaylist.vue

@@ -0,0 +1,92 @@
+<template>
+	<modal title='Add Song To Playlist'>
+		<div slot='body'>
+			<aside class="menu">
+				<p class="menu-label">
+					Playlists
+				</p>
+				<ul class="menu-list">
+					<li v-for='playlist in playlists'>
+						<div class='playlist'>
+							<span class='icon is-small' @click='removeSongFromPlaylist(playlist._id)' v-if='playlistContains(playlist._id)'>
+								<i class="material-icons">playlist_add_check</i>
+							</span>
+							<span class='icon is-small' @click='addSongToPlaylist(playlist._id)' v-else>
+								<i class="material-icons">playlist_add</i>
+							</span>
+							{{ playlist.displayName }}
+						</div>
+					</li>
+				</ul>
+				</aside>
+		</div>
+	</modal>
+</template>
+
+<script>
+	import { Toast } from 'vue-roaster';
+	import Modal from './Modal.vue';
+	import io from '../../io';
+	import auth from '../../auth';
+
+	export default {
+		data() {
+			return {
+				playlists: {}
+			}
+		},
+		methods: {
+			playlistContains: function (playlistId) {
+				let _this = this;
+				let toReturn = false;
+
+				let playlist = this.playlists.filter(playlist => {
+				    return playlist._id === playlistId;
+				})[0];
+
+				for (let i = 0; i < playlist.songs.length; i++) {
+					if (playlist.songs[i].songId === _this.$parent.currentSong.songId) {
+						toReturn = true;
+					}
+				}
+
+				return toReturn;
+			},
+			addSongToPlaylist: function (playlistId) {
+				let _this = this;
+				this.socket.emit('playlists.addSongToPlaylist', this.$parent.currentSong.songId, playlistId, res => {
+					Toast.methods.addToast(res.message, 4000);
+					this.$parent.modals.addSongToPlaylist = false;
+				});
+			},
+			removeSongFromPlaylist: function (playlistId) {
+				let _this = this;
+				this.socket.emit('playlists.removeSongFromPlaylist', this.$parent.currentSong.songId, playlistId, res => {
+					Toast.methods.addToast(res.message, 4000);
+					this.$parent.modals.addSongToPlaylist = false;
+				});
+			}
+		},
+		ready: function () {
+			let _this = this;
+			io.getSocket((socket) => {
+				_this.socket = socket;
+				_this.socket.emit('playlists.indexForUser', res => {
+					if (res.status === 'success') _this.playlists = res.data;
+				});
+			});
+		},
+		events: {
+			closeModal: function () {
+				this.$parent.modals.addSongToPlaylist = !this.$parent.modals.addSongToPlaylist;
+			}
+		},
+		components: { Modal }
+	}
+</script>
+
+<style type='scss' scoped>
+	.icon.is-small {
+		margin-right: 10px !important;
+	}
+</style>

frontend/components/Station/Station.vue

@@ -3,6 +3,7 @@
 	<community-header v-if='type == "community"'></community-header>
 
 	<song-queue v-if='modals.addSongToQueue'></song-queue>
+	<add-to-playlist v-if='modals.addSongToPlaylist'></add-to-playlist>
 	<edit-playlist v-if='modals.editPlaylist'></edit-playlist>
 	<create-playlist v-if='modals.createPlaylist'></create-playlist>
 	<edit-station v-show='modals.editStation'></edit-station>
@@ -36,7 +37,12 @@
 		<div class="columns is-mobile" v-show="!noSong">
 			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
 				<div class="columns is-mobile">
-					<div class="column is-12-mobile" v-bind:class="{'is-8-desktop': !simpleSong}">
+					<div class="column is-1-desktop add-to-playlist">
+						<span class="icon is-large" @click='modals.addSongToPlaylist = true'>
+							<i class="material-icons">playlist_add</i>
+						</span>
+					</div>
+					<div class="column is-11-desktop" v-bind:class="{'is-7-desktop': !simpleSong}">
 						<h4 id="time-display">{{timeElapsed}} / {{formatTime(currentSong.duration)}}</h4>
 						<h3>{{currentSong.title}}</h3>
 						<h4 class="thin" style="margin-left: 0">{{currentSong.artists}}</h4>
@@ -78,6 +84,7 @@
 	import { Toast } from 'vue-roaster';
 
 	import SongQueue from '../Modals/AddSongToQueue.vue';
+	import AddToPlaylist from '../Modals/AddSongToPlaylist.vue';
 	import EditPlaylist from '../Modals/Playlists/Edit.vue';
 	import CreatePlaylist from '../Modals/Playlists/Create.vue';
 	import EditStation from '../Modals/EditStation.vue';
@@ -109,6 +116,7 @@
 				disliked: false,
 				modals: {
 					addSongToQueue: false,
+					addSongToPlaylist: false,
 					editPlaylist: false,
 					createPlaylist: false,
 					editStation: false,
@@ -376,7 +384,6 @@
 							owner: res.data.owner,
 							privatePlaylist: res.data.privatePlaylist
 						};
-						console.log(res.data.currentSong);
 						_this.currentSong = (res.data.currentSong) ? res.data.currentSong : {};
 						_this.type = res.data.type;
 						_this.startedAt = res.data.startedAt;
@@ -599,6 +606,7 @@
 			OfficialHeader,
 			CommunityHeader,
 			SongQueue,
+			AddToPlaylist,
 			EditPlaylist,
 			CreatePlaylist,
 			EditStation,
@@ -635,6 +643,12 @@
 		color: white !important;
 	}
 
+	.add-to-playlist {
+		display: flex;
+	    align-items: center;
+	    justify-content: center;
+	}
+
 	.slideout {
 		top: 50px;
 		height: 100%;