tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Split classes into upcoming and recent

Browse Source
This commit is contained in:
Tanner Collin 2020-01-10 07:39:05 +00:00
parent 6698c04e91
commit 027a5fdfc1
2 changed files with 56 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
webclient/src/Classes.js
View File

@ -7,6 +7,49 @@ import moment from 'moment';
import { requester } from './utils.js'; import { requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js'; import { NotFound, PleaseLogin } from './Misc.js';
function ClassTable(props) {
const { classes } = props;
const getInstructor = (session) =>
session.instructor ? session.instructor.first_name : session.old_instructor;
return (
<Table basic='very'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>ID</Table.HeaderCell>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Date</Table.HeaderCell>
<Table.HeaderCell>Instructor</Table.HeaderCell>
<Table.HeaderCell>Cost</Table.HeaderCell>
<Table.HeaderCell>Students</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{classes.length ?
classes.map((x, i) =>
<Table.Row key={i}>
<Table.Cell>{x.id}</Table.Cell>
<Table.Cell>{x.course.name}</Table.Cell>
<Table.Cell>
<Link to={'/classes/'+x.id}>
{moment.utc(x.datetime).format('ll')}
</Link>
</Table.Cell>
<Table.Cell>{getInstructor(x)}</Table.Cell>
<Table.Cell>{x.cost === '0.00' ? 'Free' : '$'+x.cost}</Table.Cell>
<Table.Cell>{x.student_count}</Table.Cell>
</Table.Row>
)
:
<p>None</p>
}
</Table.Body>
</Table>
);
};
export function Classes(props) { export function Classes(props) {
const [classes, setClasses] = useState(false); const [classes, setClasses] = useState(false);
const { token } = props; const { token } = props;
@ -22,47 +65,22 @@ export function Classes(props) {
}); });
}, []); }, []);
const getInstructor = (session) => const now = new Date().toISOString();
session.instructor ? session.instructor.first_name : session.old_instructor;
return ( return (
<Container> <Container>
<Header size='large'>Most Recent Classes</Header> <Header size='large'>Class List</Header>
<Header size='medium'>Upcoming</Header>
{classes ? {classes ?
<Table basic='very'> <ClassTable classes={classes.filter(x => x.datetime > now)} />
<Table.Header> :
<Table.Row> <p>Loading...</p>
<Table.HeaderCell>ID</Table.HeaderCell> }
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Date</Table.HeaderCell>
<Table.HeaderCell>Instructor</Table.HeaderCell>
<Table.HeaderCell>Cost</Table.HeaderCell>
<Table.HeaderCell>Students</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body> <Header size='medium'>Recent</Header>
{classes.length ? {classes ?
classes.map((x, i) => <ClassTable classes={classes.filter(x => x.datetime < now)} />
<Table.Row key={i}>
<Table.Cell>{x.id}</Table.Cell>
<Table.Cell>{x.course.name}</Table.Cell>
<Table.Cell>
<Link to={'/classes/'+x.id}>
{moment.utc(x.datetime).format('LL')}
</Link>
</Table.Cell>
<Table.Cell>{getInstructor(x)}</Table.Cell>
<Table.Cell>{x.cost === '0.00' ? 'Free' : '$'+x.cost}</Table.Cell>
<Table.Cell>{x.student_count}</Table.Cell>
</Table.Row>
)
:
<p>None</p>
}
</Table.Body>
</Table>
: :
<p>Loading...</p> <p>Loading...</p>
} }
@ -96,7 +114,7 @@ export function ClassDetail(props) {
{!error ? {!error ?
clazz ? clazz ?
<div> <div>
<Header size='large'>Class Detail</Header> <Header size='large'>Class Details</Header>
<Table unstackable basic='very'> <Table unstackable basic='very'>
<Table.Body> <Table.Body>
@ -111,7 +129,7 @@ export function ClassDetail(props) {
<Table.Row> <Table.Row>
<Table.Cell>Date:</Table.Cell> <Table.Cell>Date:</Table.Cell>
<Table.Cell> <Table.Cell>
{moment.utc(clazz.datetime).format('LL')} {moment.utc(clazz.datetime).format('ll')}
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>

2
webclient/src/Courses.js
View File

@ -108,7 +108,7 @@ export function CourseDetail(props) {
<Table.Row key={i}> <Table.Row key={i}>
<Table.Cell> <Table.Cell>
<Link to={'/classes/'+x.id}> <Link to={'/classes/'+x.id}>
{moment.utc(x.datetime).format('LL')} {moment.utc(x.datetime).format('ll')}
</Link> </Link>
</Table.Cell> </Table.Cell>
<Table.Cell>{moment.utc(x.datetime).format('LT')}</Table.Cell> <Table.Cell>{moment.utc(x.datetime).format('LT')}</Table.Cell>