[WIP] User Info

client/admin/admin.jsx

@@ -2,15 +2,44 @@ require('./admin.less');
 const React = require('react');
 const createClass = require('create-react-class');
 
-
-const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
-const BrewLookup = require('./brewLookup/brewLookup.jsx');
-const BrewCompress = require ('./brewCompress/brewCompress.jsx');
-const Stats = require('./stats/stats.jsx');
+const BrewTab = require('./tabs/brewTab/brewTab.jsx');
+const UserTab = require('./tabs/userTab/userTab.jsx');
 
 const Admin = createClass({
 	getDefaultProps : function() {
-		return {};
+		return {
+			tab : 'brew',
+
+			tabObject : {
+				brew : <BrewTab></BrewTab>,
+				user : <UserTab></UserTab>
+			}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			tab : this.props.tab
+		};
+	},
+
+	handleTabChange : function(newTab){
+		if(this.state.tab === newTab) return;
+		this.setState({
+			tab : newTab
+		});
+	},
+
+	renderButton : function(label){
+		if(!label) return;
+		return <button className={`tab ${this.state.tab===label ? 'active' : ''}`} onClick={()=>this.handleTabChange(label)}>{label.toUpperCase()}</button>;
+	},
+
+	renderTabs : function(){
+		return <div className='container tabContainer'>
+			{this.renderButton('brew')}
+			{this.renderButton('user')}
+		</div>;
 	},
 
 	render : function(){
@@ -22,15 +51,8 @@ const Admin = createClass({
 					homebrewery admin
 				</div>
 			</header>
-			<div className='container'>
-				<Stats />
-				<hr />
-				<BrewLookup />
-				<hr />
-				<BrewCleanup />
-				<hr />
-				<BrewCompress />
-			</div>
+			{this.renderTabs()}
+			{this.props.tabObject[this.state.tab]}
 		</div>;
 	}
 });

client/admin/admin.less

@@ -40,5 +40,20 @@ body{
 		margin : 30px 0px;
 	}
 
-
+	.tabContainer {
+		border: 1px solid grey;
+		border-radius: 5px;
+		background-color: lightgrey;
+		padding: 10px 15px;
+		.tab {
+			margin: 7px;
+			border-radius: 2px;
+			background-color: #19703D;
+			&.active {
+				border: 5px double white;
+				margin: 2px;
+				background-color: #27AE60;
+			}
+		}
+	}
 }

client/admin/tabs/brewTab/brewTab.jsx

@@ -0,0 +1,44 @@
+const React = require('react');
+const createClass = require('create-react-class');
+
+const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
+const BrewLookup = require('./brewLookup/brewLookup.jsx');
+const BrewCompress = require ('./brewCompress/brewCompress.jsx');
+const Stats = require('./stats/stats.jsx');
+
+const BrewTab = createClass({
+	getDefaultProps : function() {
+		return {};
+	},
+
+	render : function(){
+		return <div className='container'>
+			<table>
+				<tbody>
+					<tr>
+						<td>
+							<Stats />
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<BrewLookup />
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<BrewCleanup />
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<BrewCompress />
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>;
+	}
+});
+
+module.exports = BrewTab;

client/admin/tabs/userTab/badgeList/badgeList.jsx

@@ -0,0 +1,33 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const cx    = require('classnames');
+const _ = require('lodash');
+
+const BadgeList = createClass({
+	getDefaultProps() {
+		return {
+			badges : [{
+				title   : 'placeholder',
+				svgPath : 'sun.svg'
+			}]
+		};
+	},
+
+	renderBadgeList() {
+		return _.map(this.props.badges, (badge, idx)=>{
+			return <div key={idx}>
+				<h3>{badge.title}</h3>
+				<img src={`/assets/badgeSvg/${badge.svgPath}`} style={{ width: '50px' }} />
+			</div>;
+		});
+	},
+
+	render(){
+		return <div className='userLookup'>
+			<h2>Badges</h2>
+			{this.renderBadgeList()}
+		</div>;
+	}
+});
+
+module.exports = BadgeList;

client/admin/tabs/userTab/badges.json

@@ -0,0 +1,22 @@
+[
+    {
+        "title" : "Contributer",
+        "svgPath" : "ribbon.svg"
+    },
+    {
+        "title" : "Liker",
+        "svgPath" : "thumbsUp.svg"
+    },
+    {
+        "title" : "Developer",
+        "svgPath" : "shield.svg"
+    },
+    {
+        "title" : "Royalty",
+        "svgPath" : "crown.svg"
+    },
+    {
+        "title" : "God",
+        "svgPath" : "sun.svg"
+    }
+]

client/admin/tabs/userTab/userLookup/userLookup.jsx

@@ -0,0 +1,85 @@
+require('./userLookup.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const cx    = require('classnames');
+const _ = require('lodash');
+
+const request = require('superagent');
+const Moment = require('moment');
+
+
+const UserLookup = createClass({
+	getDefaultProps() {
+		return {};
+	},
+	getInitialState() {
+		return {
+			query     : '',
+			foundUser : null,
+			searching : false,
+			error     : null
+		};
+	},
+	handleChange(e){
+		this.setState({ query: e.target.value });
+	},
+	lookup(){
+		this.setState({ searching: true, error: null });
+
+		request.get(`/admin/userlookup/${this.state.query}`)
+			.then((res)=>this.setState({ foundUser: res.body }))
+			.catch((err)=>this.setState({ error: err }))
+			.finally(()=>this.setState({ searching: false }));
+	},
+
+	renderFoundUser(){
+		const user = this.state.foundUser;
+		return <div className='foundUser'>
+			<dl>
+				<dt>Username</dt>
+				<dd>{user.username}</dd>
+
+				<dt>Last Activity</dt>
+				<dd>{user.lastActivity} : {Moment(user.lastActivity).fromNow()}</dd>
+
+				<dt>Options</dt>
+				{Object.entries(user.options).map((opt, idx)=>{
+					return <dd key={idx}>- {opt.join(' : ')}</dd>;
+				})}
+
+				{user.badges?.length > 0 && <>
+					<dt>Badges</dt>
+					{user.badges.map((badge, idx)=>{
+						return <dd key={idx}>{`- ${badge.type}; awarded ${Moment(badge.awardedAt).toLocaleString()}`}</dd>;
+					})}
+				</>
+				}
+
+			</dl>
+		</div>;
+	},
+
+	render(){
+		return <div className='userLookup'>
+			<h2>User Lookup</h2>
+			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='username' />
+			<button onClick={this.lookup}>
+				<i className={cx('fas', {
+					'fa-search'          : !this.state.searching,
+					'fa-spin fa-spinner' : this.state.searching,
+				})} />
+			</button>
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+
+			{this.state.foundUser
+				? this.renderFoundUser()
+				: <div className='noUser'>No user found.</div>
+			}
+		</div>;
+	}
+});
+
+module.exports = UserLookup;

client/admin/tabs/userTab/userLookup/userLookup.less

@@ -0,0 +1,30 @@
+
+.userLookup{
+	input{
+		height        : 33px;
+		margin-bottom : 20px;
+		padding       : 0px 10px;
+		font-family   : monospace;
+	}
+	button{
+		vertical-align : middle;
+		height         : 37px;
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			height      : 1em;
+			margin-left : @maxItemWidth + 6px;
+			padding     : 0 0 0.5em 0;
+		}
+	}
+}

client/admin/tabs/userTab/userTab.jsx

@@ -0,0 +1,34 @@
+const React = require('react');
+const createClass = require('create-react-class');
+
+const UserLookup = require('./userLookup/userLookup.jsx');
+const BadgeList = require('./badgeList/badgeList.jsx');
+
+const badgesJson = require('./badges.json');
+
+const UserTab = createClass({
+	getDefaultProps : function() {
+		return {};
+	},
+
+	render : function(){
+		return <div className='container'>
+			<table>
+				<tbody>
+					<tr>
+						<td>
+							<UserLookup />
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<BadgeList badges={badgesJson} />
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>;
+	}
+});
+
+module.exports = UserTab;

server/admin.api.js

@@ -1,7 +1,8 @@
 const HomebrewModel = require('./homebrew.model.js').model;
+const UserInfoModel = require('./userinfo.model.js').model;
 const router = require('express').Router();
 const Moment = require('moment');
-//const render = require('vitreum/steps/render');
+// const render = require('vitreum/steps/render');
 const templateFn = require('../client/template.js');
 const zlib = require('zlib');
 
@@ -64,6 +65,15 @@ router.get('/admin/lookup/:id', mw.adminOnly, (req, res, next)=>{
 	});
 });
 
+/* Searches for matching edit or share id, also attempts to partial match */
+router.get('/admin/userlookup/:id', mw.adminOnly, (req, res, next)=>{
+	UserInfoModel.findOne({ $or : [
+		{ username: { '$regex': req.params.id, '$options': 'i' } }
+	] }).exec((err, user)=>{
+		return res.json(user);
+	});
+});
+
 /* Find 50 brews that aren't compressed yet */
 router.get('/admin/finduncompressed', mw.adminOnly, (req, res)=>{
 	uncompressedBrewQuery.exec((err, objs)=>{
@@ -104,7 +114,7 @@ router.get('/admin', mw.adminOnly, (req, res)=>{
 		url : req.originalUrl
 	})
 		.then((page)=>res.send(page))
-		.catch((err)=>res.sendStatus(500));
+		.catch((err)=>res.status(500).send(err));
 });
 
 module.exports = router;