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

Display correct icon color based on status

Browse Source
This commit is contained in:
Tanner Collin 2020-01-20 02:54:44 +00:00
parent 6c7464fe67
commit 047833b5cc
4 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webclient/src/Admin.js
View File

@ -3,7 +3,7 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } f
import './light.css';
import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment';
import { BasicTable, staticUrl, requester } from './utils.js';
import { statusColor, BasicTable, staticUrl, requester } from './utils.js';
import { TransactionList, TransactionEditor } from './Transactions.js';
export function AdminTransactions(props) {
@ -473,7 +473,10 @@ export function AdminMemberInfo(props) {
</Table.Row>
<Table.Row>
<Table.Cell>Status:</Table.Cell>
<Table.Cell>{member.status}</Table.Cell>
<Table.Cell>
<Icon name='circle' color={statusColor[member.status]} />
{member.status || 'Unknown'}
</Table.Cell>
</Table.Row>
<Table.Row>

14
webclient/src/Home.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, Segment, Table } from 'semantic-ui-react';
import { BasicTable, staticUrl, requester } from './utils.js';
import { statusColor, BasicTable, staticUrl, requester } from './utils.js';
import { LoginForm, SignupForm } from './LoginSignup.js';
import { AccountForm } from './Account.js';
@ -24,18 +24,16 @@ function MemberInfo(props) {
</Grid.Column>
<Grid.Column width={11}>
<Header size='large'>
<Icon.Group size='small'>
<Icon name='circle' color='green' />
</Icon.Group>
<Header.Content>{member.preferred_name} {member.last_name}</Header.Content>
</Header>
<Header size='large'>{member.preferred_name} {member.last_name}</Header>
<BasicTable>
<Table.Body>
<Table.Row>
<Table.Cell>Status:</Table.Cell>
<Table.Cell>{member.status || 'Unknown'}</Table.Cell>
<Table.Cell>
<Icon name='circle' color={statusColor[member.status]} />
{member.status || 'Unknown'}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Expiry:</Table.Cell>

12
webclient/src/Members.js
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect, useReducer } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { isAdmin, BasicTable, staticUrl, requester } from './utils.js';
import { statusColor, isAdmin, BasicTable, staticUrl, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
import { AdminMemberInfo, AdminMemberPause, AdminMemberForm, AdminMemberCards, AdminTransactions } from './Admin.js';
@ -54,7 +54,10 @@ export function Members(props) {
<Item key={x.member.id} as={Link} to={'/members/'+x.member.id}>
<Item.Image size='tiny' src={x.member.photo_small ? staticUrl + '/' + x.member.photo_small : '/nophoto.png'} />
<Item.Content verticalAlign='top'>
<Item.Header>{x.member.preferred_name} {x.member.last_name}</Item.Header>
<Item.Header>
<Icon name='circle' color={statusColor[x.member.status]} />
{x.member.preferred_name} {x.member.last_name}
</Item.Header>
<Item.Description>Status: {x.member.status || 'Unknown'}</Item.Description>
<Item.Description>Joined: {x.member.current_start_date || 'Unknown'}</Item.Description>
</Item.Content>
@ -112,7 +115,10 @@ export function MemberDetail(props) {
<Table.Body>
<Table.Row>
<Table.Cell>Status:</Table.Cell>
<Table.Cell>{member.status || 'Unknown'}</Table.Cell>
<Table.Cell>
<Icon name='circle' color={statusColor[member.status]} />
{member.status || 'Unknown'}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Joined:</Table.Cell>

13
webclient/src/utils.js
View File

@ -1,13 +1,20 @@
import React, { useState, useEffect } from 'react';
import { Table } from 'semantic-ui-react';
export const isAdmin = (user) => user.is_staff || user.member.is_director || user.member.is_staff;
export const isInstructor = (user) => isAdmin(user) || user.member.is_instructor;
export const siteUrl = window.location.protocol + '//' + window.location.hostname;
export const apiUrl = window.location.protocol + '//api.' + window.location.hostname;
export const staticUrl = window.location.protocol + '//static.' + window.location.hostname;
export const isAdmin = (user) => user.is_staff || user.member.is_director || user.member.is_staff;
export const isInstructor = (user) => isAdmin(user) || user.member.is_instructor;
export const statusColor = {
'Current': 'green',
'Due': 'yellow',
'Overdue': 'red',
'Former Member': 'black',
};
export const BasicTable = (props) => (
<Table collapsing padded unstackable basic='very'>
{props.children}