Brought back the beloved $parent :heart:

frontend/App.vue

@@ -0,0 +1,124 @@
+<template>
+	<div>
+		<router-view></router-view>
+	</div>
+</template>
+
+<script>
+	export default {
+		replace: false,
+		data() {
+			return {
+				home: {
+					visible: true
+				},
+				station: {
+					visible: false
+				},
+				register: {
+					email: "",
+					username: "",
+					password: ""
+				},
+				login: {
+					email: "",
+					password: ""
+				},
+				loggedIn: true,
+				groups: [
+					{
+						id: "lu08gw56571r4497wrk9",
+						name: "Official Rooms",
+						rooms: [
+							{ id: "73qvw65746acvo8yqfr", thumbnail: "https://lh6.googleusercontent.com/-ghASz3s6yL4/AAAAAAAAAAI/AAAAAAAAALc/tFblPp2myu0/s0-c-k-no-ns/photo.jpg", name: "Country", description: "Johnny Cash - I Walk The Line", users: 10 },
+							{ id: "enxcysmhn1k7ld56ogvi", thumbnail: "http://66.media.tumblr.com/1734069af425e491fae7deae0a19869f/tumblr_o0i0xmIYrF1v421f2o1_1280.jpg", name: "Pop", description: "Sia - Cheap Thrills", users: 14 },
+							{ id: "kqa99gbva7lij05dn29", thumbnail: "http://www.youredm.com/wp-content/uploads/2014/09/taking-you-higher.jpg", name: "Chill", description: "MrSuicideSheep - Taking you higher", users: 13 },
+							{ id: "w19hu791iiub6wmjf9a4i", thumbnail: "http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2012/12/Deadmau5-album-title-goes-here.jpg", name: "EDM", description: "Deadmau5 - There Might Be Coffee", users: 13 }
+						]
+					},
+					{
+						id: "g2b8v03xaedj8ht1emi",
+						name: "Trending Rooms",
+						rooms: [
+							{ id: "73qvw65746acvo8yqfr", thumbnail: "https://lh6.googleusercontent.com/-ghASz3s6yL4/AAAAAAAAAAI/AAAAAAAAALc/tFblPp2myu0/s0-c-k-no-ns/photo.jpg", name: "Country", description: "Johnny Cash - I Walk The Line", users: 10 },
+							{ id: "enxcysmhn1k7ld56ogvi", thumbnail: "http://66.media.tumblr.com/1734069af425e491fae7deae0a19869f/tumblr_o0i0xmIYrF1v421f2o1_1280.jpg", name: "Pop", description: "Sia - Cheap Thrills", users: 14 },
+							{ id: "kqa99gbva7lij05dn29", thumbnail: "http://www.youredm.com/wp-content/uploads/2014/09/taking-you-higher.jpg", name: "Chill", description: "MrSuicideSheep - Taking you higher", users: 13 },
+							{ id: "w19hu791iiub6wmjf9a4i", thumbnail: "http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2012/12/Deadmau5-album-title-goes-here.jpg", name: "EDM", description: "Deadmau5 - There Might Be Coffee", users: 13 }
+						]
+					}
+				]
+			}
+		},
+		methods: {
+			logout() {
+				$.ajax({
+					method: "GET",
+					url: "/users/logout",
+					dataType: "json",
+					complete: function (msg) {
+						alert("Logged in!");
+						location.reload();
+					}
+				});
+			}
+		},
+		ready: function () {
+			this.socket = io();
+			this.socket.on("ready", function(status) {
+				this.loggedIn = status;
+			});
+		},
+		events: {
+			'register': function() {
+				console.log('registered');
+				$.ajax({
+					method: "POST",
+					url: "/users/register",
+					data: JSON.stringify({
+						email: this.register.email,
+						username: this.register.username,
+						password: this.register.password,
+						recaptcha: grecaptcha.getResponse()
+					}),
+					contentType: "application/json; charset=utf-8",
+					dataType: "json",
+					success: function (msg) {
+						if (msg) console.log(msg);
+						alert("Registered!");
+						//do something
+					},
+					error: function (err) {
+						if (err) console.log(err);
+						alert("Not registered!");
+						//do something else
+
+					}
+				});
+			},
+			'login': function() {
+				console.log('login');
+				$.ajax({
+					method: "POST",
+					url: "/users/login",
+					data: JSON.stringify({
+						email: this.login.email,
+						password: this.login.password
+					}),
+					contentType: "application/json; charset=utf-8",
+					dataType: "json",
+					success: function (msg) {
+						if (msg) console.log(msg);
+						alert("Logged in!");
+						//do something
+					},
+					error: function (err) {
+						if (err) console.log(err);
+						alert("Not logged in!");
+						//do something else
+
+					}
+				});
+			}
+		}
+	}
+</script>

frontend/build/index.html

@@ -17,7 +17,6 @@
 	<script src='https://www.google.com/recaptcha/api.js'></script>
 </head>
 <body>
-	<router-view></router-view>
 	<script src="bundle.js"></script>
 </body>
 </html>

frontend/pages/Home.vue → frontend/components/pages/Home.vue

@@ -9,9 +9,9 @@
 						<h5 class="modal-title">Register</h5>
 					</div>
 					<div class="modal-body">
-						<input class="form-control" type="text" placeholder="Email..." v-model="register.email"/>
-						<input class="form-control" type="text" placeholder="Username..." v-model="register.username"/>
-						<input class="form-control" type="password" placeholder="Password..." v-model="register.password"/>
+						<input class="form-control" type="text" placeholder="Email..." v-model="$parent.register.email"/>
+						<input class="form-control" type="text" placeholder="Username..." v-model="$parent.register.username"/>
+						<input class="form-control" type="password" placeholder="Password..." v-model="$parent.register.password"/>
 						<div class="g-recaptcha" data-sitekey="6LdNCQcUAAAAANj_w5leQSrxnAmDp2ioh4alkUHg"></div>
 					</div>
 					<div class="modal-footer">
@@ -28,8 +28,8 @@
 						<h5 class="modal-title">Login</h5>
 					</div>
 					<div class="modal-body">
-						<input class="form-control" type="text" placeholder="Email..." v-model="login.email"/>
-						<input class="form-control" type="password" placeholder="Password..." v-model="login.password"/>
+						<input class="form-control" type="text" placeholder="Email..." v-model="$parent.login.email"/>
+						<input class="form-control" type="password" placeholder="Password..." v-model="$parent.login.password"/>
 						<hr />
 						<a class="btn btn-block btn-default btn-github" href="/users/github"><i class="fa fa-github"></i> Login with GitHub</a>
 						<a class="btn btn-block btn-default btn-discord" href="/users/discord">Login with Discord</a>
@@ -40,7 +40,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="group" v-for="group in groups">
+		<div class="group" v-for="group in $parent.groups">
 			<div class="group-title">{{group.name}}</div>
 			<div class="group-rooms">
 				<div class="rooms-room" v-for="room in group.rooms" v-link="{ path: '/station' }">
@@ -62,124 +62,11 @@
 </template>
 
 <script>
-	import MainHeader from '../components/MainHeader.vue'
-	import MainFooter from '../components/MainFooter.vue'
+	import MainHeader from '../MainHeader.vue'
+	import MainFooter from '../MainFooter.vue'
 
 	export default {
-		data() {
-			return {
-				home: {
-					visible: true
-				},
-				station: {
-					visible: false
-				},
-				register: {
-					email: "",
-					username: "",
-					password: ""
-				},
-				login: {
-					email: "",
-					password: ""
-				},
-				loggedIn: true,
-				groups: [
-					{
-						id: "lu08gw56571r4497wrk9",
-						name: "Official Rooms",
-						rooms: [
-							{ id: "73qvw65746acvo8yqfr", thumbnail: "https://lh6.googleusercontent.com/-ghASz3s6yL4/AAAAAAAAAAI/AAAAAAAAALc/tFblPp2myu0/s0-c-k-no-ns/photo.jpg", name: "Country", description: "Johnny Cash - I Walk The Line", users: 10 },
-							{ id: "enxcysmhn1k7ld56ogvi", thumbnail: "http://66.media.tumblr.com/1734069af425e491fae7deae0a19869f/tumblr_o0i0xmIYrF1v421f2o1_1280.jpg", name: "Pop", description: "Sia - Cheap Thrills", users: 14 },
-							{ id: "kqa99gbva7lij05dn29", thumbnail: "http://www.youredm.com/wp-content/uploads/2014/09/taking-you-higher.jpg", name: "Chill", description: "MrSuicideSheep - Taking you higher", users: 13 },
-							{ id: "w19hu791iiub6wmjf9a4i", thumbnail: "http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2012/12/Deadmau5-album-title-goes-here.jpg", name: "EDM", description: "Deadmau5 - There Might Be Coffee", users: 13 }
-						]
-					},
-					{
-						id: "g2b8v03xaedj8ht1emi",
-						name: "Trending Rooms",
-						rooms: [
-							{ id: "73qvw65746acvo8yqfr", thumbnail: "https://lh6.googleusercontent.com/-ghASz3s6yL4/AAAAAAAAAAI/AAAAAAAAALc/tFblPp2myu0/s0-c-k-no-ns/photo.jpg", name: "Country", description: "Johnny Cash - I Walk The Line", users: 10 },
-							{ id: "enxcysmhn1k7ld56ogvi", thumbnail: "http://66.media.tumblr.com/1734069af425e491fae7deae0a19869f/tumblr_o0i0xmIYrF1v421f2o1_1280.jpg", name: "Pop", description: "Sia - Cheap Thrills", users: 14 },
-							{ id: "kqa99gbva7lij05dn29", thumbnail: "http://www.youredm.com/wp-content/uploads/2014/09/taking-you-higher.jpg", name: "Chill", description: "MrSuicideSheep - Taking you higher", users: 13 },
-							{ id: "w19hu791iiub6wmjf9a4i", thumbnail: "http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2012/12/Deadmau5-album-title-goes-here.jpg", name: "EDM", description: "Deadmau5 - There Might Be Coffee", users: 13 }
-						]
-					}
-				]
-			}
-		},
-		methods: {
-			logout() {
-				$.ajax({
-					method: "GET",
-					url: "/users/logout",
-					dataType: "json",
-					complete: function (msg) {
-						alert("Logged in!");
-						location.reload();
-					}
-				});
-			}
-		},
-		ready: function () {
-			this.socket = io();
-			this.socket.on("ready", function(status) {
-				this.loggedIn = status;
-			});
-		},
-		components: { MainHeader, MainFooter },
-		events: {
-			'register': function() {
-				console.log('registered');
-				$.ajax({
-					method: "POST",
-					url: "/users/register",
-					data: JSON.stringify({
-						email: this.register.email,
-						username: this.register.username,
-						password: this.register.password,
-						recaptcha: grecaptcha.getResponse()
-					}),
-					contentType: "application/json; charset=utf-8",
-					dataType: "json",
-					success: function (msg) {
-						if (msg) console.log(msg);
-						alert("Registered!");
-						//do something
-					},
-					error: function (err) {
-						if (err) console.log(err);
-						alert("Not registered!");
-						//do something else
-
-					}
-				});
-			},
-			'login': function() {
-				console.log('login');
-				$.ajax({
-					method: "POST",
-					url: "/users/login",
-					data: JSON.stringify({
-						email: this.login.email,
-						password: this.login.password
-					}),
-					contentType: "application/json; charset=utf-8",
-					dataType: "json",
-					success: function (msg) {
-						if (msg) console.log(msg);
-						alert("Logged in!");
-						//do something
-					},
-					error: function (err) {
-						if (err) console.log(err);
-						alert("Not logged in!");
-						//do something else
-
-					}
-				});
-			}
-		}
+		components: { MainHeader, MainFooter }
 	}
 </script>
 

frontend/pages/Station.vue → frontend/components/pages/Station.vue

@@ -40,8 +40,8 @@
 </template>
 
 <script>
-	import MainHeader from '../components/MainHeader.vue'
-	import MainFooter from '../components/MainFooter.vue'
+	import MainHeader from '../MainHeader.vue'
+	import MainFooter from '../MainFooter.vue'
 
 	export default {
 		data() {
@@ -63,7 +63,7 @@
 		},
 		methods: {
 			youtubeReady: function() {
-				var local = this;
+				let local = this;
 				local.player = new YT.Player("player", {
 					height: 270,
 					width: 480,
@@ -72,7 +72,7 @@
 					events: {
 						'onReady': function (event) {
 							local.playerReady = true;
-							var volume = parseInt(localStorage.getItem("volume"));
+							let volume = parseInt(localStorage.getItem("volume"));
 							volume = (typeof volume === "number") ? volume : 20;
 							local.player.setVolume(volume);
 							if (volume > 0) {
@@ -92,27 +92,27 @@
 				});
 			},
 			startSong: function(song) {
-				var local = this;
+				let local = this;
 				if (local.playerReady) {
 
 				}
 			},
 			getTimeElapsed: function() {
-				var local = this;
+				let local = this;
 				if (local.currentSong !== undefined) {
 					return Date.now() - local.currentSong.startedAt - local.timePaused;
 				}
 				return 0;
 			},
 			pauseVideo: function() {
-				var local = this;
+				let local = this;
 				local.paused = true;
 				if (local.playerReady) {
 					local.player.pauseVideo();
 				}
 			},
 			unpauseVideo: function() {
-				var local = this;
+				let local = this;
 				local.paused = false;
 				if (local.playerReady) {
 					local.player.seekTo(local.getTimeElapsed() / 1000);
@@ -120,7 +120,7 @@
 				}
 			},
 			playVideo: function() {
-				var local = this;
+				let local = this;
 				if (local.playerReady) {
 					local.videoLoading = true;
 					local.player.loadVideoById(local.currentSong.id);
@@ -143,26 +143,26 @@
 				}
 			},
 			resizeSeekerbar: function() {
-				var local = this;
+				let local = this;
 				if (!local.paused) {
 					$(".seeker-bar").width(((local.getTimeElapsed() / 1000) / local.currentSong.duration * 100) + "%");
 				}
 			},
 			calculateTimeElapsed: function() {
-				var local = this;
-				var duration = (Date.now() - local.currentSong.startedAt - local.timePaused) / 1000;
-				var songDuration = local.currentSong.duration;
+				let local = this;
+				let duration = (Date.now() - local.currentSong.startedAt - local.timePaused) / 1000;
+				let songDuration = local.currentSong.duration;
 				if (songDuration <= duration) {
 					local.player.pauseVideo();
 				}
-				var d = moment.duration(duration, 'seconds');
+				let d = moment.duration(duration, 'seconds');
 				if (!local.paused) {
 					this.timeElapsed = d.minutes() + ":" + ("0" + d.seconds()).slice(-2);
 				}
 			},
 			changeVolume: function() {
-				var local = this;
-				var volume = $("#volumeSlider").val();
+				let local = this;
+				let volume = $("#volumeSlider").val();
 				localStorage.setItem("volume", volume);
 				if (local.playerReady) {
 					local.player.setVolume(volume);
@@ -172,38 +172,38 @@
 				}
 			},
 			toggleLike: function() {
-				var local = this;
+				let local = this;
 				local.stationSocket.emit("toggleLike");//TODO Add code here to see if this was a success or not
 			},
 			toggleDislike: function() {
-				var local = this;
+				let local = this;
 				local.stationSocket.emit("toggleDislike");//TODO Add code here to see if this was a success or not
 			}
 		},
 		ready: function() {
-			var local = this;
+			let local = this;
 			window.onYouTubeIframeAPIReady = function() {
 				local.youtubeReady();
 			};
 
-			var socket = this.$parent.socket;
+			let socket = this.$parent.socket;
 			local.stationSocket = io.connect('http://dev.musare.com/edm');
 			local.stationSocket.on("skippedSong", function(currentSong) {
 				local.currentSong = currentSong;
 				local.playVideo();
 			});
 
-			var volume = parseInt(localStorage.getItem("volume"));
+			let volume = parseInt(localStorage.getItem("volume"));
 			volume = (typeof volume === "number") ? volume : 20;
 			$("#volumeSlider").val(volume);
 
-			//TODO Remove this
+			// TODO: Remove this
 			socket.emit("/stations/join/:id", "edm", function(data) {
 				local.currentSong = data.data.currentSong;
-				var tag = document.createElement('script');
+				let tag = document.createElement('script');
 
 				tag.src = "https://www.youtube.com/iframe_api";
-				var firstScriptTag = document.getElementsByTagName('script')[0];
+				let firstScriptTag = document.getElementsByTagName('script')[0];
 				firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 			});
 		},

frontend/main.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from './pages/Home.vue';
-import Station from './pages/Station.vue';
+import App from './App.vue';
+import Home from './components/pages/Home.vue';
+import Station from './components/pages/Station.vue';
 
 Vue.use(VueRouter);
 let router = new VueRouter({ history: true });
@@ -15,4 +16,4 @@ router.map({
 	}
 });
 
-router.start(Vue.extend(), 'body');
+router.start(App, 'body');