Added proper display on frontend for userlists.

backend/logic/actions/stations.js

@@ -84,20 +84,20 @@ setInterval(() => {
 
 		stationsUpdated.forEach((stationId) => {
 			console.log("Updating ", stationId);
-			//cache.pub('station.updateUserCount', stationId);
+			cache.pub('station.updateUsers', stationId);
 		});
 
-		//console.log("Userlist", userList, usersPerStation);
+		//console.log("Userlist", usersPerStation);
 	});
 }, 3000);
 
-cache.sub('station.updateUserlist', stationId => {
-	let list = usersPerStation[stationId] | [];
-	utils.emitToRoom(`station.${stationId}`, "event:userlist.updated", list);
+cache.sub('station.updateUsers', stationId => {
+	let list = usersPerStation[stationId] || [];
+	utils.emitToRoom(`station.${stationId}`, "event:users.updated", list);
 });
 
 cache.sub('station.updateUserCount', stationId => {
-	let count = usersPerStationCount[stationId] | 0;
+	let count = usersPerStationCount[stationId] || 0;
 	utils.emitToRoom(`station.${stationId}`, "event:userCount.updated", count);
 	stations.getStation(stationId, (err, station) => {
 		if (station.privacy === 'public') utils.emitToRoom('home', "event:userCount.updated", stationId, count);
@@ -155,7 +155,7 @@ cache.sub('station.remove', stationId => {
 
 cache.sub('station.create', stationId => {
 	stations.initializeStation(stationId, (err, station) => {
-		station.userCount = usersPerStationCount[stationId] | 0;
+		station.userCount = usersPerStationCount[stationId] || 0;
 		if (err) console.error(err);
 		utils.emitToRoom('admin.stations', 'event:admin.station.added', station);
 		// TODO If community, check if on whitelist
@@ -226,7 +226,7 @@ module.exports = {
 							next(`Insufficient permissions.`);
 						}
 					], (err) => {
-						station.userCount = usersPerStationCount[station._id] | 0;
+						station.userCount = usersPerStationCount[station._id] || 0;
 						if (err === true) resultStations.push(station);
 						next();
 					});
@@ -372,6 +372,8 @@ module.exports = {
 			},
 
 			(data, next) => {
+				data.userCount = usersPerStationCount[data._id] || 0;
+				data.users = usersPerStation[data._id] || [];
 				if (!data.currentSong || !data.currentSong.title) return next(null, data);
 				utils.socketJoinSongRoom(session.socketId, `song.${data.currentSong.songId}`);
 				data.currentSong.skipVotes = data.currentSong.skipVotes.length;
@@ -385,7 +387,6 @@ module.exports = {
 					}
 					next(null, data);
 				});
-				data.userCount = usersPerStationCount[station._id] | 0;
 			}
 		], (err, data) => {
 			if (err) {

frontend/components/Sidebars/UsersList.vue

@@ -2,10 +2,12 @@
 	<div class='sidebar' transition='slide' v-if='$parent.sidebars.users'>
 		<div class='inner-wrapper'>
 			<div class='title'>Users</div>
-			
+			<h5 class="center">Total users: {{$parent.userCount}}</h5>
 			<aside class="menu">
 				<ul class="menu-list">
-					<li><a href="#" v-link="{ path: '/u/atjonathan' }" target="_blank">@atjonathan</a></li>
+					<li v-for="user in $parent.users">
+						<a href="#" v-link="{ path: '/u/' + user }" target="_blank">{{user}}</a>
+					</li>
 				</ul>
 			</aside>
 		</div>

frontend/components/Station/CommunityHeader.vue

@@ -58,11 +58,11 @@
 					<i class='material-icons'>chat</i>
 				</span>
 			</a>-->
-			<!--<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
+			<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
 				<span class='icon'>
 					<i class='material-icons'>people</i>
 				</span>
-			</a>-->
+			</a>
 			<a class='nav-item' href='#' @click='$parent.toggleSidebar("playlist")' v-if='$parent.$parent.loggedIn'>
 				<span class='icon'>
 					<i class='material-icons'>library_music</i>

frontend/components/Station/OfficialHeader.vue

@@ -63,11 +63,11 @@
 					<i class='material-icons'>chat</i>
 				</span>
 			</a>-->
-			<!--<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
+			<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
 				<span class='icon'>
 					<i class='material-icons'>people</i>
 				</span>
-			</a>-->
+			</a>
 		</div>
 	</nav>
 </template>

frontend/components/Station/Station.vue

@@ -126,7 +126,9 @@
 				skipVotes: 0,
 				privatePlaylistQueueSelected: null,
 				automaticallyRequestedSongId: null,
-				systemDifference: 0
+				systemDifference: 0,
+				users: [],
+				userCount: 0
 			}
 		},
 		methods: {
@@ -379,6 +381,8 @@
 						_this.startedAt = res.data.startedAt;
 						_this.paused = res.data.paused;
 						_this.timePaused = res.data.timePaused;
+						_this.userCount = res.data.userCount;
+						_this.users = res.data.users;
 						if (res.data.currentSong) {
 							_this.noSong = false;
 							_this.simpleSong = (res.data.currentSong.likes === -1 && res.data.currentSong.dislikes === -1);
@@ -567,6 +571,14 @@
 						this.songsList = playlist;
 					}
 				});
+
+				_this.socket.on('event:users.updated', users => {
+					_this.users = users;
+				});
+
+				_this.socket.on('event:userCount.updated', userCount => {
+					_this.userCount = userCount;
+				});
 			});
 
 

frontend/components/pages/Home.vue

@@ -14,16 +14,18 @@
 						<div class="media-left displayName">
 							<h5>{{ station.displayName }} - {{station.userCount}}</h5>
 						</div>
-						<div class="media-right">
-							<div v-if="station.privacy !== 'public'" title="This station is not visible to other users." class="station-status">
-								<i class='material-icons'>lock</i>
-							</div>
-						</div>
 					</div>
 
 					<div class="content">
 						{{ station.description }}
 					</div>
+
+					<div class="under-content">
+						<i class='material-icons' title="How many users there are in the station.">people</i>
+						<span class="users-count" title="How many users there are in the station.">&nbsp;{{station.userCount}}</span>
+
+						<i class="material-icons right" v-if="station.privacy !== 'public'" title="This station is not visible to other users.">lock</i>
+					</div>
 				</div>
 				<a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a' v-link="{ path: '/' + station.name }"></a>
 			</div>
@@ -43,21 +45,20 @@
 				<div class="card-content">
 					<div class="media">
 						<div class="media-left displayName">
-							<h5>{{ station.displayName }} - {{station.userCount}}</h5>
-						</div>
-						<div class="media-right">
-							<div v-if="station.privacy !== 'public'" title="This station is not visible to other users." class="station-status">
-								<i class='material-icons'>lock</i>
-							</div>
-							<div v-if="isOwner(station)" title="This is your station." class="station-status">
-								<i class='material-icons'>home</i>
-							</div>
+							<h5>{{ station.displayName }}</h5>
 						</div>
 					</div>
 
 					<div class="content">
 						{{ station.description }}
 					</div>
+					<div class="under-content">
+						<i class='material-icons' title="How many users there are in the station.">people</i>
+						<span class="users-count" title="How many users there are in the station.">&nbsp;{{station.userCount}}</span>
+
+						<i class="material-icons right" v-if="station.privacy !== 'public'" title="This station is not visible to other users.">lock</i>
+						<i class="material-icons right" v-if="isOwner(station)" title="This is your station.">home</i>
+					</div>
 				</div>
 				<a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a' v-link="{ path: '/community/' + station.name }"></a>
 			</div>
@@ -198,6 +199,26 @@
 		html { font-size: 14px; }
 	}
 
+	.under-content {
+		text-align: left;
+		height: 25px;
+
+		* {
+			z-index: 10;
+			position: relative;
+		}
+	}
+
+	.users-count {
+		font-size: 20px;
+		position: relative;
+		top: -4px;
+	}
+
+	.right {
+		float: right;
+	}
+
 	.group { min-height: 64px; }
 
 	.station-card {