首页 发现 帮助
登录
owen
/
MusareNode
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Added Vue Loader. And remember to NEVER delete commits ;)

theflametrooper 8 年之前
父节点
276739359b
当前提交
009dbe4b9d
共有 11 个文件被更改，包括 416 次插入 和 426 次删除
合并视图 显示文件统计
  1. 1 4
      backend/app.js
  2. 1 1
      backend/logic/socketHandler.js
  3. 0 2
      backend/logic/stations.js
  4. 1 1
      frontend/build/index.html
  5. 0 155
      frontend/components/App.vue
  6. 0 168
      frontend/components/HomeBody.vue
  7. 4 1
      frontend/components/MainHeader.vue
  8. 16 2
      frontend/main.js
  9. 2 1
      frontend/package.json
  10. 294 0
      frontend/pages/Home.vue
  11. 97 91
      frontend/pages/Station.vue

+ 1 - 4
backend/app.js
查看文件 

@@ -53,8 +53,7 @@ function setupExpress() {
 
 		station: require('./schemas/station')(mongoose)
 
 		station: require('./schemas/station')(mongoose)
 
 	};
 
 	};
 
 
 
-	console.log("Test");
 
-	const mongoStore = new MongoStore({'mongooseConnection': MongoDB});
 
+		const mongoStore = new MongoStore({'mongooseConnection': MongoDB});
 
 
 
 	app.use(session({
 
 	app.use(session({
 
 		secret: config.get('secret'),
 
 		secret: config.get('secret'),
 
@@ -71,14 +70,12 @@ function setupExpress() {
 
 		store: mongoStore,
 
 		store: mongoStore,
 
 		success: function (data, accept) {
 
 		success: function (data, accept) {
 
 			console.log('successful connection to socket.io');
 
 			console.log('successful connection to socket.io');
 
-
 
 			accept();
 
 			accept();
 
 		},
 
 		},
 
 		fail: function (data, message, error, accept) {
 
 		fail: function (data, message, error, accept) {
 
 			console.log(message);
 
 			console.log(message);
 
 			if (error && message !== "Passport was not initialized")
 
 			if (error && message !== "Passport was not initialized")
 
 				throw new Error(message);
 
 				throw new Error(message);
 
-
 
 			accept();
 
 			accept();
 
 		}
 
 		}
 
 	}));
 
 	}));

+ 1 - 1
backend/logic/socketHandler.js
查看文件 

@@ -12,7 +12,7 @@ module.exports = (core, io) => {
 
 	});
 
 	});
 
 
 
 	io.on('connection', socket => {
 
 	io.on('connection', socket => {
 
-		console.log("CONNECTED!");
 
+		console.log("User has connected");
 
 		socket.on('disconnect', () => {
 
 		socket.on('disconnect', () => {
 
 			console.log('User has disconnected');
 
 			console.log('User has disconnected');
 
 		});
 
 		});

+ 0 - 2
backend/logic/stations.js
查看文件 

@@ -28,7 +28,6 @@ module.exports = {
 
 
 
 		skipSong() {
 
 		skipSong() {
 
 			if (this.playlist.length > 0) {
 
 			if (this.playlist.length > 0) {
 
-				console.log("SKIPP");
 
 				if (this.timer !== undefined) this.timer.pause();
 
 				if (this.timer !== undefined) this.timer.pause();
 
 
 
 				if (this.currentSongIndex + 1 < this.playlist.length) this.currentSongIndex++;
 
 				if (this.currentSongIndex + 1 < this.playlist.length) this.currentSongIndex++;
 
@@ -39,7 +38,6 @@ module.exports = {
 
 
 
 				var self = this;
 
 				var self = this;
 
 				this.timer = new global.Timer(() => {
 
 				this.timer = new global.Timer(() => {
 
-					console.log("Skip!");
 
 					self.skipSong();
 
 					self.skipSong();
 
 				}, this.currentSong.duration, this.paused);
 
 				}, this.currentSong.duration, this.paused);
 
 				this.currentSong.startedAt = Date.now();
 
 				this.currentSong.startedAt = Date.now();

+ 1 - 1
frontend/build/index.html
查看文件 

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

+ 0 - 155
frontend/components/App.vue
查看文件 

@@ -1,155 +0,0 @@
 
-<template>
 
-	<div class="app">
 
-		<main-header></main-header>
 
-		<home-body v-if="home.visible"></home-body>
 
-		<station-body v-if="station.visible"></station-body>
 
-		<main-footer></main-footer>
 
-	</div>
 
-</template>
 
-
 
-<script>
 
-	import MainHeader from './MainHeader.vue'
 
-	import HomeBody from './HomeBody.vue'
 
-	import StationBody from './StationBody.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
 
-			}
 
-		},
 
-		methods: {
 
-			goHome() {
 
-				this.home.visible = true;
 
-				for (let i = 0; i < this.length; i++) {
 
-					this[i].visible = false;
 
-				}
 
-			},
 
-			logout() {
 
-				$.ajax({
 
-					method: "GET",
 
-					url: "/users/logout",
 
-					dataType: "json",
 
-					complete: function (msg) {
 
-						console.log(1, msg);
 
-						alert("Logged out!");
 
-						//do something
 
-						location.reload();
 
-					}
 
-				});
 
-			}
 
-		},
 
-		ready: function () {
 
-			this.socket = io();
 
-			this.socket.on("ready", function(loggedIn) {
 
-				this.loggedIn = loggedIn;
 
-			});
 
-		},
 
-		components: { MainHeader, HomeBody, StationBody, MainFooter },
 
-		events: {
 
-			'switchView': function(hide, show) {
 
-				this[hide].visible = false;
 
-				this[show].visible = true;
 
-			},
 
-			'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) {
 
-						console.log(1, msg);
 
-						alert("Registered!");
 
-						//do something
 
-					},
 
-					error: function (errormessage) {
 
-						console.log(2, errormessage);
 
-						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) {
 
-						console.log(1, msg);
 
-						alert("Logged in!");
 
-						//do something
 
-						location.reload();
 
-					},
 
-					error: function (errormessage) {
 
-						console.log(2, errormessage);
 
-						alert("Not logged in!");
 
-						//do something else
 
-
 
-					}
 
-				});
 
-			}
 
-		}
 
-	}
 
-</script>
 
-
 
-<style lang="sass">
 
-	* { box-sizing: border-box; font-family: Roboto, sans-serif; }
 
-	html {
 
-		width: 100%;
 
-		height: 100%;
 
-		color: rgba(0, 0, 0, 0.87);
 
-
 
-		body {
 
-			width: 100%;
 
-			height: 100%;
 
-			margin: 0;
 
-			padding: 0;
 
-		}
 
-	}
 
-
 
-	@media only screen and (min-width: 1200px) {
 
-		html {
 
-			font-size: 15px;
 
-		}
 
-	}
 
-	@media only screen and (min-width: 992px) {
 
-		html {
 
-			font-size: 14.5px;
 
-		}
 
-	}
 
-	@media only screen and (min-width: 0) {
 
-		html {
 
-			font-size: 14px;
 
-		}
 
-	}
 
-</style>

+ 0 - 168
frontend/components/HomeBody.vue
查看文件 

@@ -1,168 +0,0 @@
 
-<template>
 
-	<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="register-modal">
 
-		<div class="modal-dialog" role="document">
 
-			<div class="modal-content">
 
-				<div class="modal-header">
 
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 
-					<h4 class="modal-title">Register</h4>
 
-				</div>
 
-				<div class="modal-body">
 
-					<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="6Lfa-wYUAAAAANY6iVvWNEXohC38l1cZqHRole9T"></div>
 
-				</div>
 
-				<div class="modal-footer">
 
-					<button type="button" class="btn btn-primary" data-dismiss="modal" @click="this.$dispatch('register');">Submit</button>
 
-				</div>
 
-			</div>
 
-		</div>
 
-	</div>
 
-	<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login-modal">
 
-		<div class="modal-dialog" role="document">
 
-			<div class="modal-content">
 
-				<div class="modal-header">
 
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 
-					<h4 class="modal-title">Login</h4>
 
-				</div>
 
-				<div class="modal-body">
 
-					<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"/>
 
-				</div>
 
-				<div class="modal-footer">
 
-					<button type="button" class="btn btn-primary" data-dismiss="modal" @click="this.$dispatch('login');">Submit</button>
 
-				</div>
 
-			</div>
 
-		</div>
 
-	</div>
 
-	<div class="group" v-for="group in groups">
 
-		<div class="group-title">{{group.name}}</div>
 
-		<div class="group-rooms">
 
-			<div class="rooms-room" v-for="room in group.rooms" @click="this.$dispatch('switchView', 'home', 'station');">
 
-				<img class="room-image" :src="room.thumbnail" />
 
-				<div class="room-info">
 
-					<div class="room-grid-left">
 
-						<h3>{{ room.name }}</h3>
 
-						<p>{{ room.description }}</p>
 
-					</div>
 
-					<div class="room-grid-right">
 
-						<div>{{ room.users }}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i></div>
 
-					</div>
 
-				</div>
 
-			</div>
 
-		</div>
 
-	</div>
 
-</template>
 
-
 
-<script>
 
-	export default {
 
-		data() {
 
-			return {
 
-				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: {
 
-			log(thing) {
 
-				console.log(thing);
 
-			}
 
-		}
 
-	}
 
-</script>
 
-
 
-<style lang="sass" scoped>
 
-	.g-recaptcha {
 
-		display: flex;
 
-		justify-content: center;
 
-		margin-top: 10px;
 
-	}
 
-
 
-	.group {
 
-		width: 100%;
 
-		height: 448px;
 
-		margin: 64px 0 64px 0;
 
-
 
-		.group-title {
 
-			float: left;
 
-			clear: none;
 
-			width: 100%;
 
-			height: 64px;
 
-			line-height: 48px;
 
-			text-align: center;
 
-			font-size: 48px;
 
-		}
 
-
 
-		.group-rooms {
 
-			white-space: nowrap;
 
-			text-align: center;
 
-			overflow: hidden;
 
-			float: left;
 
-			clear: none;
 
-			width: 100%;
 
-			height: 384px;
 
-
 
-			.rooms-room {
 
-				position: relative;
 
-				top: 16px;
 
-				display: inline-block;
 
-				clear: none;
 
-				width: 256px;
 
-				height: 345px;
 
-				margin: 0 16px 0 16px;
 
-				box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
 
-				cursor: pointer;
 
-
 
-				.room-info {
 
-					display: flex;
 
-					flex-direction: row;
 
-					align-items: center;
 
-					padding: 5px;
 
-				}
 
-
 
-				.room-image {
 
-					width: 100%;
 
-					height: 256px;
 
-				}
 
-
 
-				.room-grid-left {
 
-					display: flex;
 
-					flex-direction: column;
 
-					width: 75%;
 
-					text-align: left;
 
-					padding-left: 10px;
 
-
 
-					h3, p {
 
-						margin: 0;
 
-						white-space: normal;
 
-					}
 
-				}
 
-
 
-				.room-grid-right {
 
-					display: flex;
 
-					flex-direction: column;
 
-					width: 25%;
 
-				}
 
-			}
 
-		}
 
-	}
 
-</style>

+ 4 - 1
frontend/components/MainHeader.vue
查看文件 

@@ -8,7 +8,7 @@
 
 					<span class="icon-bar"></span>
 
 					<span class="icon-bar"></span>
 
 					<span class="icon-bar"></span>
 
 					<span class="icon-bar"></span>
 
 				</button>
 
 				</button>
 
-				<a class="navbar-brand" href="#" @click="$parent.goHome()">Musare</a>
 
+				<a class="navbar-brand" href="#" v-link="{ path: '/' }">Musare</a>
 
 			</div>
 
 			</div>
 
 			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
 			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
 				<ul class="nav navbar-nav navbar-right">
 
 				<ul class="nav navbar-nav navbar-right">
 
@@ -32,6 +32,9 @@
 
 		height: 64px;
 
 		height: 64px;
 
 
 
 		.navbar-brand, li a, li a:hover, li a:focus {
 
 		.navbar-brand, li a, li a:hover, li a:focus {
 
+			line-height: 64px;
 
+			padding: 0px 10px;
 
+			margin: 0px;
 
 			color: #fff;
 
 			color: #fff;
 
 		}
 
 		}

+ 16 - 2
frontend/main.js
查看文件 

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

+ 2 - 1
frontend/package.json
查看文件 

@@ -30,6 +30,7 @@
 
     "webpack-dev-server": "^1.15.1"
 
     "webpack-dev-server": "^1.15.1"
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
-    "vue": "^1.0.26"
 
+    "vue": "^1.0.26",
 
+    "vue-router": "^0.7.13"
 
   }
 
   }
 
 }
 
 }

+ 294 - 0
frontend/pages/Home.vue
查看文件 

@@ -0,0 +1,294 @@
 
+<template>
 
+	<div class="app">
 
+		<main-header></main-header>
 
+		<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="register-modal">
 
+			<div class="modal-dialog" role="document">
 
+				<div class="modal-content">
 
+					<div class="modal-header">
 
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 
+						<h4 class="modal-title">Register</h4>
 
+					</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"/>
 
+						<div class="g-recaptcha" data-sitekey="6LdNCQcUAAAAANj_w5leQSrxnAmDp2ioh4alkUHg"></div>
 
+					</div>
 
+					<div class="modal-footer">
 
+						<button type="button" class="btn btn-primary" data-dismiss="modal" @click="this.$dispatch('register');">Submit</button>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+		<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login-modal">
 
+			<div class="modal-dialog" role="document">
 
+				<div class="modal-content">
 
+					<div class="modal-header">
 
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 
+						<h4 class="modal-title">Login</h4>
 
+					</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"/>
 
+					</div>
 
+					<div class="modal-footer">
 
+						<button type="button" class="btn btn-primary" data-dismiss="modal" @click="this.$dispatch('login');">Submit</button>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+		<div class="group" v-for="group in 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' }">
 
+					<img class="room-image" :src="room.thumbnail" />
 
+					<div class="room-info">
 
+						<div class="room-grid-left">
 
+							<h3>{{ room.name }}</h3>
 
+							<p>{{ room.description }}</p>
 
+						</div>
 
+						<div class="room-grid-right">
 
+							<div>{{ room.users }}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i></div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+		<main-footer></main-footer>
 
+	</div>
 
+</template>
 
+
 
+<script>
 
+	import MainHeader from '../components/MainHeader.vue'
 
+	import MainFooter from '../components/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) {
 
+						console.log(1, msg);
 
+						alert("Logged out!");
 
+						//do something
 
+						location.reload();
 
+					}
 
+				});
 
+			}
 
+		},
 
+		ready: function () {
 
+			this.socket = io();
 
+			this.socket.on("ready", function(loggedIn) {
 
+				this.loggedIn = loggedIn;
 
+			});
 
+		},
 
+		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) {
 
+						console.log(1, msg);
 
+						alert("Registered!");
 
+						//do something
 
+					},
 
+					error: function (errormessage) {
 
+						console.log(2, errormessage);
 
+						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) {
 
+						console.log(1, msg);
 
+						alert("Logged in!");
 
+						//do something
 
+						location.reload();
 
+					},
 
+					error: function (errormessage) {
 
+						console.log(2, errormessage);
 
+						alert("Not logged in!");
 
+						//do something else
 
+
 
+					}
 
+				});
 
+			}
 
+		}
 
+	}
 
+</script>
 
+
 
+<style lang="sass">
 
+	* { box-sizing: border-box; font-family: Roboto, sans-serif; }
 
+
 
+	html {
 
+		width: 100%;
 
+		height: 100%;
 
+		color: rgba(0, 0, 0, 0.87);
 
+
 
+		body {
 
+			width: 100%;
 
+			height: 100%;
 
+			margin: 0;
 
+			padding: 0;
 
+		}
 
+	}
 
+
 
+	@media only screen and (min-width: 1200px) {
 
+		html {
 
+			font-size: 15px;
 
+		}
 
+	}
 
+
 
+	@media only screen and (min-width: 992px) {
 
+		html {
 
+			font-size: 14.5px;
 
+		}
 
+	}
 
+
 
+	@media only screen and (min-width: 0) {
 
+		html {
 
+			font-size: 14px;
 
+		}
 
+	}
 
+
 
+		.g-recaptcha {
 
+			display: flex;
 
+			justify-content: center;
 
+			margin-top: 10px;
 
+	}
 
+
 
+		.group {
 
+			width: 100%;
 
+			height: 448px;
 
+			margin: 64px 0 64px 0;
 
+
 
+			.group-title {
 
+				float: left;
 
+				clear: none;
 
+				width: 100%;
 
+				height: 64px;
 
+				line-height: 48px;
 
+				text-align: center;
 
+				font-size: 48px;
 
+		}
 
+
 
+			.group-rooms {
 
+				white-space: nowrap;
 
+				text-align: center;
 
+				overflow: hidden;
 
+				float: left;
 
+				clear: none;
 
+				width: 100%;
 
+				height: 384px;
 
+
 
+				.rooms-room {
 
+					position: relative;
 
+					top: 16px;
 
+					display: inline-block;
 
+					clear: none;
 
+					width: 256px;
 
+					height: 345px;
 
+					margin: 0 16px 0 16px;
 
+					box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
 
+					cursor: pointer;
 
+
 
+					.room-info {
 
+						display: flex;
 
+						flex-direction: row;
 
+						align-items: center;
 
+						padding: 5px;
 
+				}
 
+
 
+					.room-image {
 
+						width: 100%;
 
+						height: 256px;
 
+				}
 
+
 
+					.room-grid-left {
 
+						display: flex;
 
+						flex-direction: column;
 
+						width: 75%;
 
+						text-align: left;
 
+						padding-left: 10px;
 
+
 
+						h3, p {
 
+							margin: 0;
 
+							white-space: normal;
 
+					}
 
+				}
 
+
 
+					.room-grid-right {
 
+						display: flex;
 
+						flex-direction: column;
 
+						width: 25%;
 
+				}
 
+			}
 
+		}
 
+	}
 
+</style>

+ 97 - 91
frontend/components/StationBody.Vue → frontend/pages/Station.vue
查看文件 

@@ -1,4 +1,5 @@
 
 <template>
 
 <template>
 
+	<main-header></main-header>
 
 	<div class="station">
 
 	<div class="station">
 
 		<div class="row">
 
 		<div class="row">
 
 			<div class="col-md-8 col-md-push-2 col-sm-10 col-sm-push-1 col-xs-12 video-col">
 
 			<div class="col-md-8 col-md-push-2 col-sm-10 col-sm-push-1 col-xs-12 video-col">
 
@@ -35,9 +36,13 @@
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
+	<main-footer></main-footer>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
+	import MainHeader from '../components/MainHeader.vue'
 
+	import MainFooter from '../components/MainFooter.vue'
 
+
 
 	export default {
 
 	export default {
 
 		data() {
 
 		data() {
 
 			return {
 
 			return {
 
@@ -166,7 +171,8 @@
 
 				var firstScriptTag = document.getElementsByTagName('script')[0];
 
 				var firstScriptTag = document.getElementsByTagName('script')[0];
 
 				firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
 				firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
 			});
 
 			});
 
-		}
 
+		},
 
+		components: { MainHeader, MainFooter }
 
 	}
 
 	}
 
 </script>
 
 </script>
 
 
 
@@ -180,22 +186,22 @@
 
 		width: 90%;
 
 		width: 90%;
 
 
 
 		@media only screen and (min-width: 993px) {
 
 		@media only screen and (min-width: 993px) {
 
-			width: 70%;
 
-		}
 
+		width: 70%;
 
+	}
 
 
 
 		@media only screen and (min-width: 601px) {
 
 		@media only screen and (min-width: 601px) {
 
-			width: 85%;
 
-		}
 
+		width: 85%;
 
+	}
 
 
 
 		input[type=range] {
 
 		input[type=range] {
 
 			-webkit-appearance: none;
 
 			-webkit-appearance: none;
 
 			width: 100%;
 
 			width: 100%;
 
 			margin: 7.3px 0;
 
 			margin: 7.3px 0;
 
-		}
 
+	}
 
 
 
 		input[type=range]:focus {
 
 		input[type=range]:focus {
 
 			outline: none;
 
 			outline: none;
 
-		}
 
+	}
 
 
 
 		input[type=range]::-webkit-slider-runnable-track {
 
 		input[type=range]::-webkit-slider-runnable-track {
 
 			width: 100%;
 
 			width: 100%;
 
@@ -205,7 +211,7 @@
 
 			background: #c2c0c2;
 
 			background: #c2c0c2;
 
 			border-radius: 0;
 
 			border-radius: 0;
 
 			border: 0;
 
 			border: 0;
 
-		}
 
+	}
 
 
 
 		input[type=range]::-webkit-slider-thumb {
 
 		input[type=range]::-webkit-slider-thumb {
 
 			box-shadow: 0;
 
 			box-shadow: 0;
 
@@ -217,7 +223,7 @@
 
 			cursor: pointer;
 
 			cursor: pointer;
 
 			-webkit-appearance: none;
 
 			-webkit-appearance: none;
 
 			margin-top: -6.5px;
 
 			margin-top: -6.5px;
 
-		}
 
+	}
 
 
 
 		input[type=range]::-moz-range-track {
 
 		input[type=range]::-moz-range-track {
 
 			width: 100%;
 
 			width: 100%;
 
@@ -227,7 +233,7 @@
 
 			background: #c2c0c2;
 
 			background: #c2c0c2;
 
 			border-radius: 0;
 
 			border-radius: 0;
 
 			border: 0;
 
 			border: 0;
 
-		}
 
+	}
 
 
 
 		input[type=range]::-moz-range-thumb {
 
 		input[type=range]::-moz-range-thumb {
 
 			box-shadow: 0;
 
 			box-shadow: 0;
 
@@ -239,7 +245,7 @@
 
 			cursor: pointer;
 
 			cursor: pointer;
 
 			-webkit-appearance: none;
 
 			-webkit-appearance: none;
 
 			margin-top: -6.5px;
 
 			margin-top: -6.5px;
 
-		}
 
+	}
 
 
 
 		input[type=range]::-ms-track {
 
 		input[type=range]::-ms-track {
 
 			width: 100%;
 
 			width: 100%;
 
@@ -248,21 +254,21 @@
 
 			box-shadow: 0;
 
 			box-shadow: 0;
 
 			background: #c2c0c2;
 
 			background: #c2c0c2;
 
 			border-radius: 1.3px;
 
 			border-radius: 1.3px;
 
-		}
 
+	}
 
 
 
 		input[type=range]::-ms-fill-lower {
 
 		input[type=range]::-ms-fill-lower {
 
 			background: #c2c0c2;
 
 			background: #c2c0c2;
 
 			border: 0;
 
 			border: 0;
 
 			border-radius: 0;
 
 			border-radius: 0;
 
 			box-shadow: 0;
 
 			box-shadow: 0;
 
-		}
 
+	}
 
 
 
 		input[type=range]::-ms-fill-upper {
 
 		input[type=range]::-ms-fill-upper {
 
 			background: #c2c0c2;
 
 			background: #c2c0c2;
 
 			border: 0;
 
 			border: 0;
 
 			border-radius: 0;
 
 			border-radius: 0;
 
 			box-shadow: 0;
 
 			box-shadow: 0;
 
-		}
 
+	}
 
 
 
 		input[type=range]::-ms-thumb {
 
 		input[type=range]::-ms-thumb {
 
 			box-shadow: 0;
 
 			box-shadow: 0;
 
@@ -274,7 +280,7 @@
 
 			cursor: pointer;
 
 			cursor: pointer;
 
 			-webkit-appearance: none;
 
 			-webkit-appearance: none;
 
 			margin-top: 1.5px;
 
 			margin-top: 1.5px;
 
-		}
 
+	}
 
 
 
 		.video-container {
 
 		.video-container {
 
 			position: relative;
 
 			position: relative;
 
@@ -288,130 +294,130 @@
 
 				left: 0;
 
 				left: 0;
 
 				width: 100%;
 
 				width: 100%;
 
 				height: 100%;
 
 				height: 100%;
 
-			}
 
 		}
 
 		}
 
+	}
 
 		.video-col {
 
 		.video-col {
 
 			padding-right: 0.75rem;
 
 			padding-right: 0.75rem;
 
 			padding-left: 0.75rem;
 
 			padding-left: 0.75rem;
 
-		}
 
+	}
 
 	}
 
 	}
 
 
 
-	.room-title {
 
-		left: 50%;
 
-		-webkit-transform: translateX(-50%);
 
-		transform: translateX(-50%);
 
-		font-size: 2.1em;
 
+		.room-title {
 
+			left: 50%;
 
+			-webkit-transform: translateX(-50%);
 
+			transform: translateX(-50%);
 
+			font-size: 2.1em;
 
 	}
 
 	}
 
 
 
-	#ratings {
 
-		span {
 
-			font-size: 1.68rem;
 
+		#ratings {
 
+			span {
 
+				font-size: 1.68rem;
 
 		}
 
 		}
 
 
 
-		i {
 
-			color: #9e9e9e !important;
 
-			cursor: pointer;
 
-			transition: 0.1s color;
 
+			i {
 
+				color: #9e9e9e !important;
 
+				cursor: pointer;
 
+				transition: 0.1s color;
 
 		}
 
 		}
 
 	}
 
 	}
 
 
 
-	#time-display {
 
-		margin-top: 30px;
 
-		float: right;
 
+		#time-display {
 
+			margin-top: 30px;
 
+			float: right;
 
 	}
 
 	}
 
 
 
-	#thumbs_up:hover {
 
-		color: #87D37C !important;
 
+		#thumbs_up:hover {
 
+			color: #87D37C !important;
 
 	}
 
 	}
 
 
 
-	#thumbs_down:hover {
 
-		color: #EC644B !important;
 
+		#thumbs_down:hover {
 
+			color: #EC644B !important;
 
 	}
 
 	}
 
 
 
-	.seeker-bar-container {
 
-		position: relative;
 
-		height: 5px;
 
-		display: block;
 
-		width: 100%;
 
-		overflow: hidden;
 
+		.seeker-bar-container {
 
+			position: relative;
 
+			height: 5px;
 
+			display: block;
 
+			width: 100%;
 
+			overflow: hidden;
 
 	}
 
 	}
 
 
 
-	.seeker-bar {
 
-		top: 0;
 
-		left: 0;
 
-		bottom: 0;
 
-		position: absolute;
 
-		margin-top: 20px;
 
+		.seeker-bar {
 
+			top: 0;
 
+			left: 0;
 
+			bottom: 0;
 
+			position: absolute;
 
+			margin-top: 20px;
 
 	}
 
 	}
 
 
 
-	ul {
 
-		list-style: none;
 
-		margin: 0;
 
-		display: block;
 
+		ul {
 
+			list-style: none;
 
+			margin: 0;
 
+			display: block;
 
 	}
 
 	}
 
 
 
-	h1, h2, h3, h4, h5, h6 {
 
-		font-weight: 400;
 
-		line-height: 1.1;
 
+		h1, h2, h3, h4, h5, h6 {
 
+			font-weight: 400;
 
+			line-height: 1.1;
 
 	}
 
 	}
 
 
 
-	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 
-		font-weight: inherit;
 
+		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 
+			font-weight: inherit;
 
 	}
 
 	}
 
 
 
-	h1 {
 
-		font-size: 4.2rem;
 
-		line-height: 110%;
 
-		margin: 2.1rem 0 1.68rem 0;
 
+		h1 {
 
+			font-size: 4.2rem;
 
+			line-height: 110%;
 
+			margin: 2.1rem 0 1.68rem 0;
 
 	}
 
 	}
 
 
 
-	h2 {
 
-		font-size: 3.56rem;
 
-		line-height: 110%;
 
-		margin: 1.78rem 0 1.424rem 0;
 
+		h2 {
 
+			font-size: 3.56rem;
 
+			line-height: 110%;
 
+			margin: 1.78rem 0 1.424rem 0;
 
 	}
 
 	}
 
 
 
-	h3 {
 
-		font-size: 2.92rem;
 
-		line-height: 110%;
 
-		margin: 1.46rem 0 1.168rem 0;
 
+		h3 {
 
+			font-size: 2.92rem;
 
+			line-height: 110%;
 
+			margin: 1.46rem 0 1.168rem 0;
 
 	}
 
 	}
 
 
 
-	h4 {
 
-		font-size: 2.28rem;
 
-		line-height: 110%;
 
-		margin: 1.14rem 0 0.912rem 0;
 
+		h4 {
 
+			font-size: 2.28rem;
 
+			line-height: 110%;
 
+			margin: 1.14rem 0 0.912rem 0;
 
 	}
 
 	}
 
 
 
-	h5 {
 
-		font-size: 1.64rem;
 
-		line-height: 110%;
 
-		margin: 0.82rem 0 0.656rem 0;
 
+		h5 {
 
+			font-size: 1.64rem;
 
+			line-height: 110%;
 
+			margin: 0.82rem 0 0.656rem 0;
 
 	}
 
 	}
 
 
 
-	h6 {
 
-		font-size: 1rem;
 
-		line-height: 110%;
 
-		margin: 0.5rem 0 0.4rem 0;
 
+		h6 {
 
+			font-size: 1rem;
 
+			line-height: 110%;
 
+			margin: 0.5rem 0 0.4rem 0;
 
 	}
 
 	}
 
 
 
-	.thin {
 
-		font-weight: 200;
 
+		.thin {
 
+			font-weight: 200;
 
 	}
 
 	}
 
 
 
-	.left {
 
-		float: left !important;
 
+		.left {
 
+			float: left !important;
 
 	}
 
 	}
 
 
 
-	.right {
 
-		float: right !important;
 
+		.right {
 
+			float: right !important;
 
 	}
 
 	}
 
 
 
-	.light-blue {
 
-		background-color: #03a9f4 !important;
 
+		.light-blue {
 
+			background-color: #03a9f4 !important;
 
 	}
 
 	}
 
 
 
-	.white {
 
-		background-color: #FFFFFF !important;
 
+		.white {
 
+			background-color: #FFFFFF !important;
 
 	}
 
 	}
 
 </style>
 
 </style>