Seperated AddSongToQueue Modal's Scripts into Modals folder too

frontend/components/Modals/AddSongToQueue.vue

@@ -4,28 +4,28 @@
 		<div class="modal-card">
 			<header class="modal-card-head">
 				<p class="modal-card-title">Add Songs to Station</p>
-				<button class="delete" @click="$parent.toggleModal()" ></button>
+				<button class="delete" @click="$parent.toggleModal('addSongToQueue')" ></button>
 			</header>
 			<section class="modal-card-body">
 				<div class="control is-grouped">
 					<p class="control is-expanded">
-						<input class="input" type="text" placeholder="YouTube Query" v-model="$parent.querySearch">
+						<input class="input" type="text" placeholder="YouTube Query" v-model="querySearch">
 					</p>
 					<p class="control">
-						<a class="button is-info" @click="$parent.submitQuery()">
+						<a class="button is-info" @click="submitQuery()">
 							Search
 						</a>
 					</p>
 				</div>
 				<table class="table">
 					<tbody>
-						<tr v-for="result in $parent.queryResults">
+						<tr v-for="result in queryResults">
 							<td>
 								<img :src="result.thumbnail" />
 							</td>
 							<td>{{ result.title }}</td>
 							<td>
-								<a class="button is-success" @click="$parent.addSongToQueue(result.id)">
+								<a class="button is-success" @click="addSongToQueue(result.id)">
 									Add
 								</a>
 							</td>
@@ -35,4 +35,53 @@
 			</section>
 		</div>
 	</div>
-</template>
+</template>
+
+<script>
+	import { Toast } from 'vue-roaster';
+
+	export default {
+		data() {
+			return {
+				querySearch: '',
+				queryResults: [],
+			}
+		},
+		methods: {
+			addSongToQueue: function (songId) {
+				let _this = this;
+				_this.socket.emit('queueSongs.add', songId, data => {
+					if (data.status !== 'success') {
+						Toast.methods.addToast(`Error: ${data.message}`, 8000);
+					} else {
+						Toast.methods.addToast(`${data.message}`, 4000);
+					}
+				});
+			},
+			submitQuery: function () {
+				let _this = this;
+				_this.socket.emit('apis.searchYoutube', _this.querySearch, results => {
+					results = results.data;
+					_this.queryResults = [];
+					for (let i = 0; i < results.items.length; i++) {
+						_this.queryResults.push({
+							id: results.items[i].id.videoId,
+							url: `https://www.youtube.com/watch?v=${this.id}`,
+							title: results.items[i].snippet.title,
+							thumbnail: results.items[i].snippet.thumbnails.default.url
+						});
+					}
+				});
+			}
+		},
+		ready: function () {
+			let _this = this;
+			let socketInterval = setInterval(() => {
+				if (!!_this.$parent.$parent.socket) {
+					_this.socket = _this.$parent.$parent.socket;
+					clearInterval(socketInterval);
+				}
+			}, 100);
+		}
+	}
+</script>

frontend/components/Sidebars/Queue.vue

@@ -32,7 +32,7 @@
 				</div>
 			</article>
 
-			<a class='button add-to-queue' @click='$parent.toggleModal()'>Add Song to Queue</a>
+			<a class='button add-to-queue' @click='$parent.toggleModal("addSongToQueue")'>Add Song to Queue</a>
 		</div>
 	</div>
 </template>

frontend/components/Station/Station.vue

@@ -76,13 +76,10 @@
 				paused: false,
 				timeElapsed: "0:00",
 				interval: 0,
-				querySearch: "",
-				queryResults: [],
-				queue: [],
 				liked: false,
 				disliked: false,
 				modals: {
-					addSongToQueue: true
+					addSongToQueue: false
 				},
 				sidebars: {
 					queue: false,
@@ -93,8 +90,8 @@
 			}
 		},
 		methods: {
-			toggleModal: function() {
-				this.modals.addSongToQueue = !this.modals.addSongToQueue;
+			toggleModal: function (type) {
+				if (type == 'addSongToQueue') this.modals.addSongToQueue = !this.modals.addSongToQueue;
 			},
 			youtubeReady: function() {
 				let local = this;
@@ -224,31 +221,6 @@
 					}
 				});
 			},
-			addSongToQueue: function(songId) {
-				let local = this;
-				local.socket.emit('queueSongs.add', songId, data => {
-					if (data.status !== 'success') {
-						Toast.methods.addToast(`Error: ${data.message}`, 8000);
-					} else {
-						Toast.methods.addToast(`${data.message}`, 4000);
-					}
-				});
-			},
-			submitQuery: function() {
-				let local = this;
-				local.socket.emit('apis.searchYoutube', local.querySearch, results => {
-					results = results.data;
-					local.queryResults = [];
-					for (let i = 0; i < results.items.length; i++) {
-						local.queryResults.push({
-							id: results.items[i].id.videoId,
-							url: `https://www.youtube.com/watch?v=${this.id}`,
-							title: results.items[i].snippet.title,
-							thumbnail: results.items[i].snippet.thumbnails.default.url
-						});
-					}
-				});
-			},
 			toggleLike: function() {
 				let _this = this;
 				if (_this.liked) _this.socket.emit('songs.unlike', _this.currentSong._id, data => {

frontend/components/Station/StationHeader.vue

@@ -4,7 +4,7 @@
 			<a class="nav-item logo" href="#" v-link="{ path: '/' }" @click="this.$dispatch('leaveStation', title)">
 				Musare
 			</a>
-			<a class="nav-item" href="#" @click="$parent.toggleModal()">
+			<a class="nav-item" href="#" @click="$parent.toggleModal('addSongToQueue')">
 				<span class="icon">
 					<i class="material-icons">playlist_add</i>
 				</span>