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

Add latest training to Home page, make dates readable

Browse Source
This commit is contained in:
Tanner Collin 2022-01-14 00:32:21 +00:00
parent 72108a0dcb
commit 554544bde6
4 changed files with 68 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webclient/src/Cards.js
View File

@ -36,7 +36,7 @@ export function Cards(props) {
<Table.Row>
<Table.HeaderCell>Number</Table.HeaderCell>
<Table.HeaderCell>Notes</Table.HeaderCell>
<Table.HeaderCell>Last Seen</Table.HeaderCell>
<Table.HeaderCell>Last Scan</Table.HeaderCell>
<Table.HeaderCell>Active</Table.HeaderCell>
</Table.Row>
</Table.Header>

86
webclient/src/Home.js
View File

@ -14,8 +14,9 @@ function MemberInfo(props) {
const user = props.user;
const member = user.member;
const lastTrans = user.transactions && user.transactions.slice(0,3);
const lastCard = user.cards && user.cards.sort((a, b) => a.last_seen < b.last_seen)[0];
const lastTrans = user.transactions?.slice(0,3);
const lastTrain = user.training?.sort((a, b) => a.session.datetime < b.session.datetime ? 1 : -1).slice(0,3);
const lastCard = user.cards?.sort((a, b) => a.last_seen < b.last_seen)[0];
return (
<div>
@ -47,7 +48,7 @@ function MemberInfo(props) {
</Table.Row>
<Table.Row>
<Table.Cell>Expiry:</Table.Cell>
<Table.Cell>{member.expire_date}</Table.Cell>
<Table.Cell>{moment(member.expire_date).format('ll')}</Table.Cell>
</Table.Row>
</Table.Body>
</BasicTable>
@ -82,29 +83,75 @@ function MemberInfo(props) {
<QRCode value={siteUrl + '/subscribe?monthly_fees=' + user.member.monthly_fees + '&id=' + user.member.id} />
</React.Fragment>}
<Header size='medium'>Latest Training</Header>
<BasicTable>
<Table.Body>
{lastTrain.length ?
lastTrain.map(x =>
<Table.Row key={x.id}>
<Table.Cell style={{ minWidth: '8rem' }}>
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).tz('America/Edmonton').format('ll')}</Link>
</Table.Cell>
<Table.Cell>{x.session.course_data.name}</Table.Cell>
</Table.Row>
)
:
<Table.Row><Table.Cell>None, please sign up for an <Link to={'/courses/249/'}>Orientation</Link></Table.Cell></Table.Row>
}
{user.training.length > 3 && <Link to='/training'>[more]</Link>}
</Table.Body>
</BasicTable>
<Header size='medium'>Latest Transactions</Header>
<BasicTable>
<Table.Body>
{lastTrans.length ?
lastTrans.map(x =>
<Table.Row key={x.id}>
<Table.Cell style={{ minWidth: '8rem' }}>
<Link to={'/transactions/'+x.id}>{moment(x.date).format('ll')}</Link>
</Table.Cell>
<Table.Cell>{x.account_type}</Table.Cell>
<Table.Cell>${x.amount}</Table.Cell>
</Table.Row>
)
:
<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
}
{user.transactions.length > 3 && <Link to='/transactions'>[more]</Link>}
</Table.Body>
</BasicTable>
<Header size='medium'>Details</Header>
<BasicTable>
<Table.Body>
<Table.Row>
<Table.Cell>Application:</Table.Cell>
<Table.Cell>{member.application_date || 'Unknown'}</Table.Cell>
<Table.Cell>{moment(member.application_date).format('ll') || 'Unknown'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Start:</Table.Cell>
<Table.Cell>{member.current_start_date || 'Unknown'}</Table.Cell>
<Table.Cell>{moment(member.current_start_date).format('ll') || 'Unknown'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Vetted:</Table.Cell>
<Table.Cell>{member.vetted_date || 'Not vetted'}</Table.Cell>
<Table.Cell>{moment(member.vetted_date).format('ll') || 'Not vetted'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Monthly:</Table.Cell>
<Table.Cell>${member.monthly_fees || 'Unknown'}</Table.Cell>
<Table.Cell>Monthly dues:</Table.Cell>
<Table.Cell>${member.monthly_fees || 'Unknown'}.00</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Card Number:</Table.Cell>
<Table.Cell>Last scan:</Table.Cell>
<Table.Cell>
{lastCard && lastCard.card_number || 'None'}
{lastCard && lastCard.last_seen ?
lastCard.last_seen > '2021-11-14T02:01:35.415685Z' ?
moment.utc(lastCard.last_seen).tz('America/Edmonton').format('lll')
:
moment.utc(lastCard.last_seen).tz('America/Edmonton').format('ll')
:
'Unknown'
}
{user.cards.length > 1 && <Link to='/cards'> [more]</Link>}
</Table.Cell>
</Table.Row>
@ -116,25 +163,6 @@ function MemberInfo(props) {
View application forms
</a>
</p>}
<Header size='medium'>Latest Transactions</Header>
<BasicTable>
<Table.Body>
{lastTrans.length ?
lastTrans.map(x =>
<Table.Row key={x.id}>
<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>
)
:
<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
}
</Table.Body>
</BasicTable>
</div>
);
};

15
webclient/src/Training.js
View File

@ -2,7 +2,7 @@ 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, Popup, Segment, Table } from 'semantic-ui-react';
import moment from 'moment';
import moment from 'moment-timezone';
import { requester, getInstructor } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
@ -96,7 +96,7 @@ export function TrainingList(props) {
<Table.Row key={x.id}>
<Table.Cell>{x.session.course_data.name}</Table.Cell>
<Table.Cell>
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).tz('America/Edmonton').format('ll')}</Link>
</Table.Cell>
<Table.Cell>{x.attendance_status}</Table.Cell>
<Table.Cell>{getInstructor(x.session)}</Table.Cell>
@ -113,12 +113,6 @@ export function Training(props) {
return (
<Container>
<Header size='large'>Your Certifications</Header>
<CertList member={user.member} />
<p>Certifications are based on the courses you've taken. If there's any errors, please email <a href='mailto:directors@protospace.ca'>directors@protospace.ca</a>.</p>
<Header size='large'>Your Training</Header>
{user.training.length ?
@ -127,6 +121,11 @@ export function Training(props) {
<p>No training yet! Sign up for a course to take a class.</p>
}
<Header size='large'>Your Certifications</Header>
<CertList member={user.member} />
<p>Certifications are based on the courses you've taken. If there's any errors, please email <a href='mailto:directors@protospace.ca'>directors@protospace.ca</a>.</p>
</Container>
);
};

5
webclient/src/Transactions.js
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import moment from 'moment-timezone';
import ReactToPrint from 'react-to-print';
import './light.css';
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
@ -279,8 +280,8 @@ export function TransactionList(props) {
{transactions.length ?
transactions.slice().sort((a, b) => a.date < b.date ? 1 : -1).map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Link to={'/transactions/'+x.id}>{x.date}</Link>
<Table.Cell style={{ minWidth: '8rem' }}>
<Link to={'/transactions/'+x.id}>{moment(x.date).format('ll')}</Link>
</Table.Cell>
{!noMember && <Table.Cell>
{x.member_id ?