Add user's training to webclient

This commit is contained in:
2020-01-10 00:29:52 +00:00
parent 42f3594e38
commit b1ff647c6e
6 changed files with 72 additions and 8 deletions

View File

@@ -7,6 +7,7 @@ import { requester } from './utils.js';
import { Home } from './Home.js';
import { Transactions, TransactionDetail } from './Transactions.js';
import { Cards } from './Cards.js';
import { Training } from './Training.js';
import { NotFound, PleaseLogin } from './Misc.js';
function App() {
@@ -41,9 +42,6 @@ function App() {
setUserCache(false);
}
let menuName = user && user.member && user.member.preferred_name || 'Profile';
menuName = menuName.length > 7 ? 'Profile' : menuName;
return (
<Router>
<Container>
@@ -60,13 +58,18 @@ function App() {
to='/'
/>
<Dropdown item text={menuName} id='ps-menu'>
<Dropdown item text='Profile' id='ps-menu'>
<Dropdown.Menu>
<Dropdown.Item
content='Transactions'
as={Link}
to='/transactions'
/>
<Dropdown.Item
content='Training'
as={Link}
to='/training'
/>
<Dropdown.Item
content='Cards'
as={Link}
@@ -115,6 +118,10 @@ function App() {
<Cards user={user} />
</Route>
<Route path='/training'>
<Training user={user} />
</Route>
<Route path='/:page'>
<NotFound />
</Route>

View File

@@ -142,7 +142,9 @@ function MemberInfo(props) {
{lastTrans.length ?
lastTrans.map((x, i) =>
<Table.Row key={i}>
<Table.Cell>{x.date}</Table.Cell>
<Table.Cell>
<Link to={'/transactions/'+x.id}>{x.date}</Link>
</Table.Cell>
<Table.Cell>{x.account_type}</Table.Cell>
<Table.Cell>${x.amount}</Table.Cell>
</Table.Row>

49
webclient/src/Training.js Normal file
View File

@@ -0,0 +1,49 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment';
import { requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
export function Training(props) {
const { user } = props;
return (
<Container>
<Header size='large'>Training</Header>
{user.training.length ?
<Table basic='very'>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Course / Event Name</Table.HeaderCell>
<Table.HeaderCell>Class Date</Table.HeaderCell>
<Table.HeaderCell>Status</Table.HeaderCell>
<Table.HeaderCell>Instructor</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{user.training.map((x, i) =>
<Table.Row key={i}>
<Table.Cell>
<Link to={'/courses/'+x.session.course.id}>{x.session.course.name}</Link>
</Table.Cell>
<Table.Cell>
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
</Table.Cell>
<Table.Cell>{x.attendance_status}</Table.Cell>
<Table.Cell>{x.session.old_instructor}</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
:
<p>No training yet! Sign up for a course to take a class.</p>
}
</Container>
);
};

View File

@@ -17,7 +17,6 @@ export function Transactions(props) {
<Table.Header>
<Table.Row>
<Table.HeaderCell>Date</Table.HeaderCell>
<Table.HeaderCell>ID</Table.HeaderCell>
<Table.HeaderCell>Amount</Table.HeaderCell>
<Table.HeaderCell>Account</Table.HeaderCell>
<Table.HeaderCell>Memo</Table.HeaderCell>
@@ -28,8 +27,9 @@ export function Transactions(props) {
{user.transactions.length ?
user.transactions.slice().reverse().map((x, i) =>
<Table.Row key={i}>
<Table.Cell>{x.date}</Table.Cell>
<Table.Cell><Link to={'/transactions/'+x.id}>{x.id}</Link></Table.Cell>
<Table.Cell>
<Link to={'/transactions/'+x.id}>{x.date}</Link>
</Table.Cell>
<Table.Cell>${x.amount}</Table.Cell>
<Table.Cell>{x.account_type}</Table.Cell>
<Table.Cell>{x.memo}</Table.Cell>