Finished Queue Sidebar

backend/logic/actions/stations.js

@@ -70,6 +70,20 @@ module.exports = {
 		});
 	},
 
+	getPlaylist: (session, stationId, cb) => {
+		let playlist = [];
+
+		stations.getStation(stationId, (err, station) => {
+			for (let s = 1; s < station.playlist.length; s++) {
+				songs.getSong(station.playlist[s], (err, song) => {
+					playlist.push(song);
+				});
+			}
+		});
+
+		cb({ status: 'success', data: playlist })
+	},
+
 	/**
 	 * Joins the station by its id
 	 *

frontend/components/Sidebars/Queue.vue

@@ -4,19 +4,53 @@
 			<div class='title'>
 				Queue
 			</div>
+
+			<article class="media">
+				<figure class="media-left">
+					<p class="image is-64x64">
+						<img :src="$parent.currentSong.thumbnail">
+					</p>
+				</figure>
+				<div class="media-content">
+					<div class="content">
+						<p>
+							Current Song: <strong>{{ $parent.currentSong.title }}</strong>
+							<br>
+							<small>{{ $parent.currentSong.artists }}</small>
+						</p>
+					</div>
+				</div>
+			</article>
+
+			<article class="media" v-for='song in playlist'>
+				<div class="media-content">
+					<div class="content">
+						<p>
+							<strong>{{ song.title }}</strong>
+							<br>
+							<small>{{ song.artists }}</small>
+						</p>
+					</div>
+				</div>
+			</article>
 		</div>
 	</div>
 </template>
 
 <script>
 	export default {
+		data() {
+			return {
+				playlist: []
+			}
+		},
 		ready: function () {
 			let _this = this;
 			let socketInterval = setInterval(() => {
 				if (!!_this.$parent.$parent.socket) {
 					_this.socket = _this.$parent.$parent.socket;
-					_this.socket.emit('stations.getPlaylist', _this.$parent.stationId, data => {
-						console.log(data);
+					_this.socket.emit('stations.getPlaylist', _this.$parent.stationId, res => {
+						if (res.status == 'success') _this.playlist = res.data;
 					});
 					clearInterval(socketInterval);
 				}
@@ -57,4 +91,14 @@
 		color: white;
 		font-weight: 600;
 	}
+
+	.media {
+    	padding: 0px 25px;
+	}
+
+	.media-content .content {
+		height: 64px;
+		display: flex;
+		align-items: center;
+	}
 </style>