Add user's training to webclient
This commit is contained in:
@@ -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>
|
||||
|
@@ -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
49
webclient/src/Training.js
Normal 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>
|
||||
);
|
||||
};
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user