Home Explore Help
Sign In
archive
/
MusareReact
mirror of https://github.com/Musare/MusareReact
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Started working on station page. Fixed some issues with stations.js. Updated README.

KrisVos130 8 years ago
parent
b2b8fa8ce5
commit
548856aaae
6 changed files with 180 additions and 17 deletions
Unified View Show Diff Stats
  1. 6 1
      README.md
  2. 12 10
      backend/app.js
  3. 4 4
      backend/logic/stations.js
  4. 9 1
      frontend/build/index.html
  5. 147 0
      frontend/components/Station.Vue
  6. 2 1
      frontend/main.js

+ 6 - 1
README.md
View File 

@@ -41,7 +41,7 @@ Make sure to `vagrant ssh` from the root of the repo before calling these (make
 
 
 
 ```bash
 
 ```bash
 
 # Start backend server
 
 # Start backend server
 
-cd /musare; sudo nodemon -L backend/app.js
 
+cd /musare; sudo nodemon -L backend/app.js --ignore 'frontend/*'
 
 
 
 # Build frontend in development mode
 
 # Build frontend in development mode
 
 cd /musare/frontend; npm run development
 
 cd /musare/frontend; npm run development
 
@@ -81,3 +81,8 @@ Vagrant automagically generates and inserts a openssh keypair for you. This does
 
 
 
 ##### Why use Vagrant? I can run NodeJS and mongoDB locally
 
 ##### Why use Vagrant? I can run NodeJS and mongoDB locally
 
 The reason for using vagrant is simple. It gives every developer the same local development server. This removes any inconsistencies across different dev enviroments (Windows vs macOS vs Linux). It also ensures that your changes are running on an environment that exactly matches the production server.
 
 The reason for using vagrant is simple. It gives every developer the same local development server. This removes any inconsistencies across different dev enviroments (Windows vs macOS vs Linux). It also ensures that your changes are running on an environment that exactly matches the production server.
 
+
 
+### Common issues and fixes
 
+
 
+##### Node-sass issue
 
+Sometimes you might get an issue with node-sass. To fix this, run `cd /musare/frontend; sudo npm rebuild node-sass --no-bin-links`.

+ 12 - 10
backend/app.js
View File 

@@ -19,11 +19,8 @@ const express          = require('express'),
 
       LocalStrategy    = require('passport-local').Strategy,
 
       LocalStrategy    = require('passport-local').Strategy,
 
       passportSocketIo = require("passport.socketio");
 
       passportSocketIo = require("passport.socketio");
 
 
 
-// custom modules
 
-const global         = require('./logic/global'),
 
-      coreHandler    = require('./logic/coreHandler'),
 
-      socketHandler  = require('./logic/socketHandler'),
 
-      expressHandler = require('./logic/expressHandler');
 
+// global module
 
+const global         = require('./logic/global');
 
 
 
 
 
 // database
 
 // database
 
@@ -36,17 +33,22 @@ MongoDB.on('error', (err) => {
 
 MongoDB.once('open', () => {
 
 MongoDB.once('open', () => {
 
 	console.log('Connected to database');
 
 	console.log('Connected to database');
 
 });
 
 });
 
+// setup express and socket.io
 
+const app = express(MongoDB);
 
+const server = app.listen(80);
 
+global.io = require('socket.io')(server);
 
+
 
+// other custom modules
 
+const coreHandler    = require('./logic/coreHandler'),
 
+      socketHandler  = require('./logic/socketHandler'),
 
+      expressHandler = require('./logic/expressHandler');
 
+
 
 
 
 global.db = {
 
 global.db = {
 
 	user: require('./schemas/user')(mongoose),
 
 	user: require('./schemas/user')(mongoose),
 
 	station: require('./schemas/station')(mongoose)
 
 	station: require('./schemas/station')(mongoose)
 
 };
 
 };
 
 
 
-// setup express and socket.io
 
-const app = express(MongoDB);
 
-const server = app.listen(80);
 
-global.io = require('socket.io')(server);
 
-
 
 app.use(passport.initialize());
 
 app.use(passport.initialize());
 
 app.use(passport.session());
 
 app.use(passport.session());

+ 4 - 4
backend/logic/stations.js
View File 

@@ -2,13 +2,13 @@
 
 
 
 const global = require('./global');
 
 const global = require('./global');
 
 let io = global.io;
 
 let io = global.io;
 
-let nsp = io.of('/' + id);
 
-nsp.on('connection', socket => {
 
-	console.info('someone connected');
 
-});
 
 
 
 module.exports = class Station {
 
 module.exports = class Station {
 
 	constructor(id, data) {
 
 	constructor(id, data) {
 
+		this.nsp = io.of('/' + id);
 
+		this.nsp.on('connection', socket => {
 
+			console.info('someone connected');
 
+		});
 
 		this.id = id;
 
 		this.id = id;
 
 		this.data = data;
 
 		this.data = data;

+ 9 - 1
frontend/build/index.html
View File 

@@ -7,9 +7,17 @@
 
 	<link rel="shortcut icon" type="image/x-icon" href="https://musare.com/favicon.ico" />
 
 	<link rel="shortcut icon" type="image/x-icon" href="https://musare.com/favicon.ico" />
 
 	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
 	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
 	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
 
 	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
 
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
+
 
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
+	<!-- Latest compiled and minified CSS -->
 
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
 
+
 
+	<!-- Latest compiled and minified JavaScript -->
 
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-	<app></app>
 
+	<Station></Station>
 
 	<script src="bundle.js"></script>
 
 	<script src="bundle.js"></script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 147 - 0
frontend/components/Station.Vue
View File 

@@ -0,0 +1,147 @@
 
+<template>
 
+	<div class="app">
 
+		<header>
 
+			<div class="header-inner">
 
+				<div class="link left"><i class="material-icons">home</i></div>
 
+				<div class="link left"><i class="material-icons">playlist_add</i></div>
 
+				<div class="link left"><i class="material-icons">flag</i></div>
 
+				<div class="link left"><i class="material-icons">skip_next</i></div>
 
+				<span class="room-title">Pop</span>
 
+				<div class="link right"><i class="material-icons">queue_music</i></div>
 
+				<div class="link right"><i class="material-icons">chat</i></div>
 
+				<div class="link right"><i class="material-icons">people</i></div>
 
+			</div>
 
+		</header>
 
+		<div class="body">
 
+			<div class="row">
 
+				<div class="col-md-8 push-md-2 col-sm-10 push-sm-1 col-xs-12">
 
+					<div id="player"></div>
 
+				</div>
 
+				<div class="col-md-8 push-md-2 col-sm-10 push-sm-1 col-xs-12">
 
+					<div class="row">
 
+						<div class="col-md-8 col-sm-12 col-sm-12">
 
+
 
+						</div>
 
+						<img alt="Not loading" class="img-responsive col-md-4 col-xs-12 col-sm-12" onerror="this.src='/notes.png'" id="song-image" style="margin-top: 10px !important" src="https://i.scdn.co/image/32031982517529900c02654c460dc9ac6c47c598" />
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
+</template>
 
+
 
+<script>
 
+	// TODO: Implement these files
 
+	import ComponentHeader from './MusareHeader.vue'
 
+	import ComponentBody from './MusareBody.vue'
 
+	import ComponentFooter from './MusareFooter.vue'
 
+
 
+	export default {
 
+		data() {
 
+			return {}
 
+		},
 
+		components: { }
 
+	}
 
+</script>
 
+
 
+<style lang="sass">
 
+	* { box-sizing: border-box; font-family: Roboto, sans-serif; }
 
+	html {
 
+		width: 100%;
 
+		height: 100%;
 
+		body {
 
+			width: 100%;
 
+			height: 100%;
 
+			margin: 0;
 
+			padding: 0;
 
+		}
 
+	}
 
+
 
+
 
+	header {
 
+		width: 100%;
 
+		height: 64px;
 
+		line-height: 64px;
 
+		text-align: center;
 
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
+	}
 
+
 
+	.header-inner {
 
+		width: 100%;
 
+		height: 100%;
 
+		background-color: #0091ea;
 
+		.title {
 
+			font-weight: 300;
 
+			font-size: 32px;
 
+		}
 
+
 
+		* {
 
+			color: white;
 
+		}
 
+
 
+		.link {
 
+			z-index: 101;
 
+			position: relative;
 
+			padding: 0 16px 0 16px;
 
+			cursor: pointer;
 
+
 
+			height: 64px;
 
+			min-width: 64px;
 
+			line-height: 64px;
 
+			font-size: 2rem;
 
+			transition: background-color .3s;
 
+		}
 
+
 
+		.link:hover {
 
+			background-color: rgba(0, 0, 0, 0.1);
 
+		}
 
+
 
+		.right {
 
+			float: right;
 
+		}
 
+
 
+		.left {
 
+			float: left;
 
+		}
 
+
 
+		i.material-icons {
 
+			display: block;
 
+			font-size: 2rem;
 
+			line-height: 64px;
 
+			height: 64px;
 
+		}
 
+
 
+		.room-title {
 
+			left: 50%;
 
+			-webkit-transform: translateX(-50%);
 
+			transform: translateX(-50%);
 
+			font-size: 2.1em;
 
+		}
 
+	}
 
+
 
+
 
+
 
+	.body {
 
+		/*width: 100%;
 
+		line-height: 256px;
 
+		text-align: center;*/
 
+		background-color: green;
 
+		flex: 1 0 auto;
 
+		padding-top: 4.5vw;
 
+		transition: all 0.1s;
 
+		margin: 0 auto;
 
+		max-width: 1280px;
 
+		width: 90%;
 
+	}
 
+
 
+	@media only screen and (min-width: 993px) {
 
+		.body {
 
+			width: 70%;
 
+		}
 
+	}
 
+	@media only screen and (min-width: 601px) {
 
+		.body {
 
+			width: 85%;
 
+		}
 
+	}
 
+</style>

+ 2 - 1
frontend/main.js
View File 

@@ -1,4 +1,5 @@
 
 import Vue from 'vue';
 
 import Vue from 'vue';
 
 import App from './components/App.vue';
 
 import App from './components/App.vue';
 
+import Station from './components/Station.vue';
 
 
 
-new Vue({ el: 'body', components: { App } });
 
+new Vue({ el: 'body', components: { Station } });