Continued work on Queue Sidebar

backend/logic/actions/hooks/adminRequired.js

@@ -4,9 +4,7 @@ const db = require('../../db');
 module.exports = function(next) {
 	return function(session) {
 		let args = [];
-		for (let prop in arguments) {
-			args.push(arguments[prop]);
-		}
+		for (let prop in arguments) args.push(arguments[prop]);
 		let cb = args[args.length - 1];
 		cache.hget('sessions', session.sessionId, (err, session) => {
 			if (err || !session || !session.userId) return cb({ status: 'failure', message: 'Login required.' });

backend/logic/actions/hooks/loginRequired.js

@@ -3,9 +3,7 @@ const cache = require('../../cache');
 module.exports = function(next) {
 	return function(session) {
 		let args = [];
-		for (let prop in arguments) {
-			args.push(arguments[prop]);
-		}
+		for (let prop in arguments) args.push(arguments[prop]);
 		let cb = args[args.length - 1];
 		cache.hget('sessions', session.sessionId, (err, session) => {
 			if (err || !session || !session.userId) return cb({ status: 'failure', message: 'Login required.' });

frontend/components/Sidebars/Playlist.vue

@@ -1,27 +0,0 @@
-<template>
-	<div class='sidebar' transition='slide' v-if='$parent.sidebars.playlist'>
-		<h1>Hi</h1>
-	</div>
-</template>
-
-<style type='scss' scoped>
-	.sidebar {
-		position: fixed;
-		top: 0;
-		right: 0;
-		width: 300px;
-		height: 100vh;
-		padding: 30px;
-		background-color: #fff;
-		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-	}
-
-	.slide-transition {
-		transition: transform 0.6s ease-in-out;
-		transform: translateX(0);
-	}
-
-	.slide-enter, .slide-leave {
-		transform: translateX(100%);
-	}
-</style>

frontend/components/Sidebars/Queue.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class='sidebar' transition='slide' v-if='$parent.sidebars.queue'>
+		<div class='inner-wrapper'>
+			<div class='title'>
+				Queue
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		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);
+					});
+					clearInterval(socketInterval);
+				}
+			}, 100);
+		}
+	}
+</script>
+
+<style type='scss' scoped>
+	.sidebar {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: 300px;
+		height: 100vh;
+		background-color: #fff;
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	}
+
+	.inner-wrapper {	
+		top: 50px;
+		position: relative;
+	}
+
+	.slide-transition {
+		transition: transform 0.6s ease-in-out;
+		transform: translateX(0);
+	}
+
+	.slide-enter, .slide-leave {
+		transform: translateX(100%);
+	}
+
+	.title {
+		background-color: rgb(3, 169, 244);
+		text-align: center;
+		padding: 10px;
+		color: white;
+		font-weight: 600;
+	}
+</style>

frontend/components/Station/Station.vue

@@ -1,7 +1,7 @@
 <template>
 	<station-header></station-header>
 
-	<playlist-sidebar v-if='sidebars.playlist'></playlist-sidebar>
+	<queue-sidebar v-if='sidebars.queue'></queue-sidebar>
 	
 	<div class="station">
 		<div class="columns is-mobile">
@@ -91,7 +91,7 @@
 <script>
 	import { Toast } from 'vue-roaster';
 
-	import PlaylistSidebar from '../Sidebars/Playlist.vue';
+	import QueueSidebar from '../Sidebars/Queue.vue';
 
 	import StationHeader from './StationHeader.vue';
 
@@ -112,7 +112,7 @@
 				liked: false,
 				disliked: false,
 				sidebars: {
-					playlist: true
+					queue: false
 				}
 			}
 		},
@@ -378,7 +378,7 @@
 			volume = (typeof volume === "number") ? volume : 20;
 			$("#volumeSlider").val(volume);
 		},
-		components: { StationHeader, PlaylistSidebar }
+		components: { StationHeader, QueueSidebar }
 	}
 </script>
 

frontend/components/Station/StationHeader.vue

@@ -59,7 +59,7 @@
 		</span>-->
 
 		<div class="nav-right">
-			<a class="nav-item" href="#" @click='$parent.sidebars.playlist = !$parent.sidebars.playlist'>
+			<a class="nav-item" href="#" @click='$parent.sidebars.queue = !$parent.sidebars.queue'>
 				<span class="icon">
 					<i class="material-icons">queue_music</i>
 				</span>