Styled gatherer names with italics if they are no longer on the gather (#127)

page.
Displays a somewhat inaccurate (but in the afk gatherers favour) idle
timer in the gatherer info panel.

app/javascripts/components/gather.js

@@ -873,14 +873,28 @@ const GathererListItem = React.createClass({
 				</dd>
 			]
 		}
+		
+		const lastSeenInMinutes = (gatherer) => {
+			return parseInt((Date.now() - gatherer.user.lastSeen) / (1000 * 60));
+		};
+
+		let idleStatus;
+		if (!gatherer.user.online) {
+			const mins = lastSeenInMinutes(gatherer);
+			idleStatus = [
+				<dt>Last Seen</dt>,
+				<dd>{mins} mins ago</dd>
+			]
+		}
 
 		let tabColor = gatherer.team !== "lobby" ? `panel-${gatherer.team}` : "panel-info";
+		let onlineStatus = gatherer.user.online ? "" : "font-italic"
 		return (
 			<div className={`panel ${tabColor} gatherer-panel`}
 				key={gatherer.user.id} data-userid={gatherer.user.id}>
 				<div className="panel-heading">
 					<h4 className="panel-title">
-						{country} {gatherer.user.username}
+						{country} <span className={onlineStatus}>{gatherer.user.username}</span> 
 						<span className="pull-right">
 							<a href="#" className="btn btn-xs btn-primary add-right"
 								onClick={this.toggleCollapse}>
@@ -894,6 +908,7 @@ const GathererListItem = React.createClass({
 					className={this.collapseState()} >
 					<div className="panel-body">
 						<dl>
+							{idleStatus}
 							<dt>Skill Level</dt>
 							<dd>{skill}</dd>
 							<dt>Team</dt>

app/stylesheets/app.css

@@ -6,6 +6,10 @@ html, body {
 	margin-top: 1em;
 }
 
+.font-italic {
+	font-style: italic;
+}
+
 /*Chat*/
 
 .wordwrap { 

lib/gather/controller.js

@@ -26,15 +26,17 @@ const Event = mongoose.model("Event");
 const _ = require("lodash");
 const winston = require("winston");
 
-const emitGather = (socket, gather) => {
-	socket.emit("gather:refresh", {
-		gather: gather ? gather.toJson() : null,
-		type: gather ? gather.type : null,
-		maps: Map.list,
-	});
-}
-
 module.exports = function (namespace) {
+	const emitGather = (socket, gather) => {
+		const onlineIds = Object.values(namespace.sockets).map(s => s._user.id);
+		
+		socket.emit("gather:refresh", {
+			gather: gather ? gather.toJson(onlineIds) : null,
+			type: gather ? gather.type : null,
+			maps: Map.list,
+		});
+	}
+
 	const refreshArchive = () => {
 		ArchivedGather.recent((error, recentGathers) => {
 			if (error) return winston.error(error);
@@ -78,8 +80,10 @@ module.exports = function (namespace) {
 		gatherManager.onArchiveUpdate(refreshArchive);
 
 		gatherRefreshers[type] = _.debounce(function () {
+			const onlineIds = Object.values(namespace.sockets).map(s => s._user.id);
+
 			namespace.emit("gather:refresh", {
-				gather: gatherManager.current ? gatherManager.current.toJson() : null,
+				gather: gatherManager.current ? gatherManager.current.toJson(onlineIds) : null,
 				type: gatherManager.current ? gatherManager.current.type : null,
 				maps: Map.list,
 			});

lib/gather/gather.js

@@ -337,7 +337,18 @@ Gather.prototype.electionStartTime = function () {
 		null : this.election.startTime.toISOString();
 };
 
-Gather.prototype.toJson = function () {
+Gather.prototype.toJson = function (onlineIds) {
+	if (onlineIds) {
+		const now = Date.now();
+		for (var gatherer of this.gatherers) {
+			if (gatherer.user.online) {
+				gatherer.user.lastSeen = now;
+			}
+	
+			gatherer.user.online = onlineIds.indexOf(gatherer.id) !== -1;
+		}
+	}
+
 	return {
 		name: this.name,
 		description: this.description,