Added an initial cut at a student segement of the site, with a list of workshops and the ability to sign up for them.

imports/ui/App.jsx

@@ -12,6 +12,9 @@ import History from './pages/History'
 import Search from './pages/Search'
 import Users from './pages/Users'
 import Admin from './pages/Admin'
+import Home from './pages/Home'
+import {StudentPage} from './pages/Student/StudentPage'
+import {Workshops} from './pages/Student/Workshops'
 
 const appTheme = createTheme({
 	components: {
@@ -65,7 +68,7 @@ const appTheme = createTheme({
 	}
 })
 
-export const App = () => {
+export const App = (props) => {
 	const {user, canManageLaptops, isAdmin} = useTracker(() => {
 		const user = Meteor.user();
 		const canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
@@ -84,43 +87,44 @@ export const App = () => {
 				<Routes>
 					<Route path="/" element={
 						<Page>
-							<div className="container">
-								<div className="row">
-									TODO: Some statistics and such.
-								</div>
-							</div>
-						</Page>}
-					/>
+							<Home/>
+						</Page>
+					}/>
+					<Route path="/student" element={
+						<StudentPage>
+							{user && <Workshops/>}
+						</StudentPage>
+					}/>
 					<Route path="/assignments/*" element={
 						<Page>
 							{canManageLaptops && <Assignments/>}
-						</Page>}
-					/>
+						</Page>
+					}/>
 					<Route path="/assets/*" element={
 						<Page>
 							{isAdmin && <Assets/>}
-						</Page>}
-					/>
+						</Page>
+					}/>
 					<Route path="/admin/*" element={
 						<Page>
 							{isAdmin && <Admin/>}
-						</Page>}
-					/>
+						</Page>
+					}/>
 					<Route path="/history/*" element={
 						<Page>
 							{canManageLaptops && <History/>}
-						</Page>}
-					/>
+						</Page>
+					}/>
 					<Route path="/search" element={
 						<Page>
 							{canManageLaptops && <Search/>}
-						</Page>}
-					/>
+						</Page>
+					}/>
 					<Route path="/users/*" element={
 						<Page>
 							{isAdmin && <Users/>}
-						</Page>}
-					/>
+						</Page>
+					}/>
 				</Routes>
 			</BrowserRouter>
 		</ThemeProvider>

imports/ui/pages/Assignments/ByAsset.jsx

@@ -24,6 +24,7 @@ import {Assets, conditions} from "/imports/api/assets";
 import {AssetTypes} from "/imports/api/asset-types";
 import {Students} from "/imports/api/students";
 import {Staff} from "/imports/api/staff";
+import {Link} from "react-router-dom";
 
 const cssTwoColumnContainer = {
 	display: 'grid',
@@ -121,7 +122,7 @@ const AssignmentsByAsset = () => {
 					{foundAsset.assignee && (
 						<>
 							<div>Assigned on: {foundAsset.assignmentDate.toString()}</div>
-							<div>Assigned to: {foundAsset.assignee.firstName} {foundAsset.assignee.lastName} {foundAsset.assignee.grade && foundAsset.assignee.grade} ({foundAsset.assignee.email})</div>
+							<div>Assigned to: {foundAsset.assignee.firstName} {foundAsset.assignee.lastName} {foundAsset.assignee.grade && foundAsset.assignee.grade} (<Link to={"/search?email=" + encodeURIComponent(foundAsset.assignee.email)}>{foundAsset.assignee.email}</Link>)</div>
 							<Button variant="contained" color='secondary' className="button" onClick={()=>unassign()}>Unassign</Button>
 						</>
 					)}

imports/ui/pages/Assignments/ByPerson.jsx

@@ -19,6 +19,7 @@ import {Assets, conditions} from "/imports/api/assets";
 import {AssetTypes} from "/imports/api/asset-types";
 import {Students} from "/imports/api/students";
 import {Staff} from "/imports/api/staff";
+import {Link} from "react-router-dom";
 
 const cssTwoColumnContainer = {
 	display: 'grid',
@@ -235,7 +236,8 @@ const AssignmentsByPerson = () => {
 						<div style={cssAssetTile}>
 							<div style={{marginBottom: '1rem'}}><TextField id='assetIdInput' inputRef={input=>setAssetIdInput(input)} style={cssEditorField} variant="standard" label="Asset ID" value={assetId} onChange={(e) => {setAssetId(e.target.value.toUpperCase())}}/></div>
 							<div>{foundAsset && foundAsset.assetType.name}</div>
-							<div>{foundAsset && foundAsset.serial}</div>
+							<div>{foundAsset && <Link to={"/search?assetId=" + encodeURIComponent(foundAsset.assetId)}>{foundAsset.assetId}</Link>}</div>
+							<div>{foundAsset && <Link to={"/search?serial=" + encodeURIComponent(foundAsset.serial)}>{foundAsset.serial}</Link>}</div>
 							{foundAsset && foundAsset.assignee && (
 								<div>Assigned To: {foundAsset.assignee.firstName} {foundAsset.assignee.lastName}</div>
 							)}
@@ -246,8 +248,8 @@ const AssignmentsByPerson = () => {
 						return (
 							<div key={next._id} style={{...getAssetTileStyles(i), ...cssAssetTile}}>
 								<div>{next.assetType.name}</div>
-								<div>{next.assetId}</div>
-								<div>{next.serial}</div>
+								<div><Link to={"/search?assetId=" + encodeURIComponent(next.assetId)}>{next.assetId}</Link></div>
+								<div><Link to={"/search?serial=" + encodeURIComponent(next.serial)}>{next.serial}</Link></div>
 								<Button variant="contained" color='secondary' className="button" onClick={()=>unassign(next)}>Unassign</Button>
 							</div>
 						)

imports/ui/pages/Home.jsx

@@ -0,0 +1,80 @@
+import { Meteor } from 'meteor/meteor';
+import React, { useState, useEffect } from 'react';
+import { useTracker } from 'meteor/react-meteor-data';
+import { useTheme } from '@mui/material/styles';
+import _ from 'lodash';
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
+import MenuItem from '@mui/material/MenuItem';
+import {InputLabel, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
+import Box from "@mui/material/Box";
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import {Assets, conditions} from "/imports/api/assets";
+import {AssetTypes} from "/imports/api/asset-types";
+import {Students} from "/imports/api/students";
+import {Staff} from "/imports/api/staff";
+import {Link} from "react-router-dom";
+
+const cssTwoColumnContainer = {
+	display: 'grid',
+	gridTemplateColumns: "1fr 1fr",
+	columnGap: '1rem',
+	rowGap: '0.4rem',
+}
+const cssEditorField = {
+	minWidth: '10rem'
+}
+
+const Statistics = () => {
+	const [selectedMissingAsset, setSelectedMissingAsset] = useState("")
+	
+	const {missingAssets} = useTracker(() => {
+		let missingAssets = [];
+
+		missingAssets = Assets.find({condition: 'Missing'}).fetch();
+
+		for(let next of missingAssets) {
+			next.assetType = AssetTypes.findOne({_id: next.assetTypeId})
+		}
+
+		return {missingAssets}
+	});
+
+	const getListItemStyle = (item) => {
+		return {
+			backgroundColor: selectedMissingAsset === item ? '#EECFA6' : 'white'
+		}
+	}
+	
+	return (
+		<>
+			<h1>Missing Equipment</h1>
+			<List>
+				{missingAssets.map((next, i) => {
+					return (
+						<ListItemButton key={next._id} style={getListItemStyle(next)} selected={selectedMissingAsset === next} onClick={(e) => {setSelectedMissingAsset(next)}}>
+							<ListItemText primary={next.assetId} secondary={next.assetType.name}/>
+						</ListItemButton>
+					)
+				})}
+			</List>
+		</>
+	)
+}
+
+export default () => {
+	// Meteor.subscribe('students');
+	// Meteor.subscribe('staff');
+	Meteor.subscribe('assetTypes');
+	Meteor.subscribe('assets');
+
+	return (
+		<Statistics/>
+	)
+}

imports/ui/pages/Search.jsx

@@ -26,7 +26,7 @@ const RenderUsage = ({data}) => {
 						{next.asset && (
 							<>Asset ID: <Link to={"/search?assetId=" + encodeURIComponent(next.asset.assetId)}>{next.asset.assetId}</Link><br/></>
 						)}
-						{new Date(next.startTime).toLocaleDateString("en-US") + "-" + new Date(next.endTime).toLocaleDateString("en-US")}<br/>
+						{new Date(next.startTime).toLocaleDateString("en-US") + "-" + new Date(next.endTime).toLocaleDateString("en-US") + " @ " + new Date(next.endTime).toLocaleTimeString("en-US")}<br/>
 						{next.assignedTo && (
 							<>Currently assigned to: {next.assignedTo.firstName} {next.assignedTo.lastName} {next.assignedTo.grade ? "~ " + next.assignedTo.grade : ""} ({next.assignedTo.email})</>
 						)}

imports/ui/pages/Student/StudentPage.jsx

@@ -0,0 +1,80 @@
+import { Meteor } from 'meteor/meteor';
+import {Roles} from 'meteor/alanning:roles';
+import React, { useState } from 'react';
+import { useTracker } from 'meteor/react-meteor-data';
+import {Link} from 'react-router-dom';
+import _ from 'lodash';
+import Button from "@mui/material/Button";
+import {Box, Grid} from "@mui/material";
+
+export const StudentPage = (props) => {
+	const {user, canManageLaptops, isAdmin} = useTracker(() => {
+		const user = Meteor.user();
+		const canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
+		const isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
+
+		return {
+			user,
+			canManageLaptops,
+			isAdmin
+		}
+	})
+
+	function performLogin() {
+		//Login style can be "popup" or "redirect".  I am not sure we need to request and offline token.
+		Meteor.loginWithGoogle({loginStyle: "popup", requestOfflineToken: true}, (err) => {
+			if (err) {
+				console.log(err);
+			} else {
+				//console.log("Logged in");
+			}
+		})
+	}
+
+	function performLogout() {
+		Meteor.logout();
+	}
+
+	return (
+		<>
+			{!user && (
+				<>
+					<div style={{width: '100%', height: '100%', background: 'url(/images/student.svg)', backgroundSize: 'cover', backgroundPosition: 'center bottom', position: 'fixed', right: 0, bottom: 0, top: 0, left: 0}}> </div>
+
+					<div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%', width: '100%'}}>
+						<Button css={{height: "100%", width: '100px', margin: 'auto'}} variant="contained" className="button" onClick={performLogin}>Login</Button>*/}
+					</div>
+				</>
+			)}
+			{user && (
+				<>
+					<div className='pageHeaderContainer'>
+						<div className="container">
+							<header className="row pageHeader">
+								<div className="col-12 logoContainer">
+									<img className="logo" src="/images/logo.svg" alt="Logo"/>
+									<div className="login">
+										<button type="button" role="button" onClick={performLogout}>Logout</button>
+									</div>
+								</div>
+								<div className="col-12 center title">Tempest</div>
+							</header>
+						</div>
+					</div>
+					<div className='pageNavContainer'>
+						<div className='container'>
+							<header className='row pageNavHeader'>
+								<nav className="col-12 center">
+									<Link to='/'>Home</Link>
+								</nav>
+							</header>
+						</div>
+					</div>
+					<div className='pageContentContainer'>
+						{props.children}
+					</div>
+				</>
+			)}
+		</>
+	)
+}

imports/ui/pages/Student/Workshops.jsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import {Meteor} from "meteor/meteor";
+import {Roles} from 'meteor/alanning:roles';
+import { useTracker } from 'meteor/react-meteor-data';
+import {Link} from 'react-router-dom';
+import _ from 'lodash';
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import MenuItem from '@mui/material/MenuItem';
+import {InputLabel, List, ListItem, ListItemButton, ListItemText, Paper} from "@mui/material";
+import Box from "@mui/material/Box";
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import {Editor} from 'react-draft-wysiwyg'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import {Students} from "/imports/api/students";
+import {Staff} from "/imports/api/staff";
+import {conditions} from "/imports/api/assets";
+
+const cssTwoColumnContainer = {
+	display: 'grid',
+	gridTemplateColumns: "1fr 1fr",
+	columnGap: '1rem',
+	rowGap: '0.4rem',
+}
+
+export const Workshops = () => {
+	Meteor.subscribe('students');
+	Meteor.subscribe('staff');
+	Meteor.subscribe('workshops');
+	
+	const user = Meteor.user();
+	const isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
+	const [selectedWorkshop, setSelectedWorkshop] = useState("")
+
+	const {workshops} = useTracker(() => {
+		let workshops = [];
+		
+		workshops = Workshops.find({isComplete: false}).fetch();
+
+		for(let workshop of workshops) {
+			for(let user of workshop.signupSheet) {
+				user.data = Students.findOne({_id: user._id})
+				if(!user.data) user.data = Staff.findOne({_id: user._id})
+			}
+		}
+
+		return {workshops}
+	});
+
+	const getListItemStyle = (item) => {
+		return {
+			backgroundColor: selectedWorkshop === item ? '#EECFA6' : 'white'
+		}
+	}
+	
+	const newWorkshop = () => {
+		if(isAdmin) {
+			setEditedWorkshop({})
+			setOpenWorkshopEditor(true)
+		}
+	}
+	const editWorkshop = () => {
+		if(isAdmin && selectedWorkshop) {
+			setEditedWorkshop({...selectedWorkshop})
+			setOpenWorkshopEditor(true)
+		}
+	}
+
+	const [openWorkshopEditor, setOpenWorkshopEditor] = useState(false)
+	const [editedWorkshop, setEditedWorkshop] = useState(false)
+	const workshopEditorClosed = (save) => {
+		const completeHandler = (err, result) => {
+			if(err) console.error(err)
+			else {
+				setOpenWorkshopEditor(false)
+				setEditedWorkshop(null)
+			}
+		}
+		
+		if(save) {
+			if(editedWorkshop._id) Meteor.call('workshops.update', editedWorkshop._id, editedWorkshop.name, editedWorkshop.description, editedWorkshop.signupLimit, completeHandler)
+			else Meteor.call('workshops.add', editedWorkshop.name, editedWorkshop.description, editedWorkshop.signupLimit, completeHandler)
+		}
+		else completeHandler()
+	}
+	
+	return (
+		<>
+			<Dialog open={openWorkshopEditor} onClose={workshopEditorClosed}>
+				<DialogTitle>Workshop Editor</DialogTitle>
+				<DialogContent style={{display: 'flex', flexDirection: 'column'}}>
+					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" label="Name" value={editedWorkshop.name} onChange={(e) => {editedWorkshop.name = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
+					<Editor editorState={selectedWorkshop.description} toolbarClassName="editorToolbar" wrapperClassName="editorWrapper" editorClassName="editor" onEditorStateChange={(e) => {selectedWorkshop.description = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
+					<TextField style={{marginTop: '1rem',minWidth: '30rem'}} variant="standard" type="number" label="Signup Limit" value={editedWorkshop.signupLimit} onChange={(e) => {editedWorkshop.signupLimit = e.target.value; setEditedWorkshop(editedWorkshop)}}/>
+				</DialogContent>
+				<DialogActions>
+					<Button onClick={() => workshopEditorClosed(true)}>Save</Button>
+					<Button onClick={() => workshopEditorClosed(false)}>Cancel</Button>
+				</DialogActions>
+			</Dialog>
+			
+			<Box style={{marginTop: '1rem',...cssTwoColumnContainer}}>
+				{isAdmin && <Button onClick={() => newWorkshop()}>New...</Button>}
+				<List>
+					{workshops.map((next, i) => {
+						return (
+							<ListItemButton key={next._id} onDoubleClick={editWorkshop} style={getListItemStyle(next)} selected={selectedWorkshop === next} onClick={(e) => {setSelectedWorkshop(next)}}>
+								<ListItemText primary={next.name}/>
+							</ListItemButton>
+						)
+					})}
+				</List>
+			</Box>
+
+			<Box style={{...cssTwoColumnContainer}}>
+				<Paper>
+					{/*<Editor editorState={selectedWorkshop.description} toolbarClassName="editorToolbar" wrapperClassName="editorWrapper" editorClassName="editor" onEditorStateChange={(e) => {selectedWorkshop.description = ""}}/>*/}
+					{`${selectedWorkshop.description}`}
+				</Paper>
+				<List>
+					{selectedWorkshop.signupSheet.map((next, i) => {
+						return (
+							<ListItem key={next._id}>
+								<ListItemText primary={next.data.firstName + " " + next.data.lastName} secondary={next.data.email}/>
+							</ListItem>
+						)
+					})}
+				</List>
+			</Box>
+		</>
+	)
+}