Add a link to auth server for admins

This commit is contained in:
Tanner Collin 2019-01-28 16:42:33 -07:00
parent 6a448aca85
commit 909a7645ff
5 changed files with 118 additions and 90 deletions

29
webclient/src/Admin.js Normal file
View File

@ -0,0 +1,29 @@
import React, { Component } from 'react';
import { Breadcrumb, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
import { Link } from 'react-router-dom';
class Admin extends Component {
render() {
const data = this.props.data;
const match = this.props.match;
return (
<div>
<Breadcrumb size='large'>
<Breadcrumb.Section active>Admin</Breadcrumb.Section>
</Breadcrumb>
<Item.Group link unstackable divided>
<Item as='a' href='https://tools-auth.protospace.ca'>
<Item.Content>
<Item.Header>Auth Server</Item.Header>
<Item.Description>Manage tools, members, courses, and firmware</Item.Description>
</Item.Content>
</Item>
</Item.Group>
</div>
);
}
}
export default Admin;

View File

@ -235,7 +235,7 @@ class App extends Component {
{user.profile.selected_courses ? {user.profile.selected_courses ?
<div> <div>
<Route exact path='/' render={props => <Route exact path='/' render={props =>
<Categories {...props} data={toolData} /> <Categories {...props} data={toolData} user={user} />
} /> } />
<Route exact path='/:category' render={props => <Route exact path='/:category' render={props =>

View File

@ -1,14 +1,16 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Breadcrumb, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react' import { Breadcrumb, Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Admin from './Admin';
class Categories extends Component { class Categories extends Component {
render() { render() {
const data = this.props.data; const data = this.props.data;
const user = this.props.user;
const match = this.props.match; const match = this.props.match;
return ( return (
<div> <Container>
<Breadcrumb size='large'> <Breadcrumb size='large'>
<Breadcrumb.Section active>Categories</Breadcrumb.Section> <Breadcrumb.Section active>Categories</Breadcrumb.Section>
</Breadcrumb> </Breadcrumb>
@ -25,7 +27,8 @@ class Categories extends Component {
</Item> </Item>
)} )}
</Item.Group> </Item.Group>
</div> {user.profile.lockout_admin && <Admin />}
</Container>
); );
} }
} }

View File

@ -13,36 +13,34 @@ class Category extends Component {
); );
return ( return (
<div> <Container>
<Container> <Breadcrumb size='large'>
<Breadcrumb size='large'> <Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section> <Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Divider icon='right angle' /> <Breadcrumb.Section active>{category.name}</Breadcrumb.Section>
<Breadcrumb.Section active>{category.name}</Breadcrumb.Section> </Breadcrumb>
</Breadcrumb>
<Item.Group link unstackable divided> <Item.Group link unstackable divided>
{category.tools.map((x, n) => {category.tools.map((x, n) =>
<Item as={Link} to={'/' + category.slug + '/' + x.slug} key={n}> <Item as={Link} to={'/' + category.slug + '/' + x.slug} key={n}>
<Item.Image size='tiny' src={x.photo} /> <Item.Image size='tiny' src={x.photo} />
<Item.Content> <Item.Content>
<Item.Header>{x.name}</Item.Header> <Item.Header>{x.name}</Item.Header>
<Item.Description> <Item.Description>
{user.profile.authorized_tools.includes(x.slug) ? {user.profile.authorized_tools.includes(x.slug) ?
<Label color='green'> <Label color='green'>
<Icon name='check' /> Authorized <Icon name='check' /> Authorized
</Label> : <Label color='red'> </Label> : <Label color='red'>
<Icon name='x' /> Unauthorized <Icon name='x' /> Unauthorized
</Label> </Label>
} }
</Item.Description> </Item.Description>
<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra> <Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
</Item.Content> </Item.Content>
</Item> </Item>
)} )}
</Item.Group> </Item.Group>
</Container> </Container>
</div>
); );
} }
} }

View File

@ -43,65 +43,63 @@ class Tool extends Component {
const approved = user.profile.authorized_tools.includes(tool.slug); const approved = user.profile.authorized_tools.includes(tool.slug);
return ( return (
<div> <Container>
<Container> <Breadcrumb size='large'>
<Breadcrumb size='large'> <Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section> <Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Divider icon='right angle' /> <Breadcrumb.Section link as={Link} to={'/' + category.slug}>{category.name}</Breadcrumb.Section>
<Breadcrumb.Section link as={Link} to={'/' + category.slug}>{category.name}</Breadcrumb.Section> <Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Divider icon='right angle' /> <Breadcrumb.Section active>{tool.name}</Breadcrumb.Section>
<Breadcrumb.Section active>{tool.name}</Breadcrumb.Section> </Breadcrumb>
</Breadcrumb>
<Segment> <Segment>
<Image src={tool.photo} size='medium' centered rounded /> <Image src={tool.photo} size='medium' centered rounded />
<Segment textAlign='center' basic> <Segment textAlign='center' basic>
<p>Status: {decodedStatus.msg}</p> <p>Status: {decodedStatus.msg}</p>
<div> <div>
<Button color='green' <Button color='green'
disabled={!approved || !decodedStatus.canArm} disabled={!approved || !decodedStatus.canArm}
onClick={() => requestInterlock({toolSlug: tool.slug, action: 'arm',})} onClick={() => requestInterlock({toolSlug: tool.slug, action: 'arm',})}
> >
<Icon name='lightning' /> Arm <Icon name='lightning' /> Arm
</Button> </Button>
<Button color='red' <Button color='red'
disabled={!approved || !decodedStatus.canDisarm} disabled={!approved || !decodedStatus.canDisarm}
onClick={() => requestInterlock({toolSlug: tool.slug, action: 'disarm',})} onClick={() => requestInterlock({toolSlug: tool.slug, action: 'disarm',})}
> >
<Icon name='stop' /> Disarm <Icon name='stop' /> Disarm
</Button> </Button>
<br /> <br />
{approved || <Label basic color='red' pointing> {approved || <Label basic color='red' pointing>
Not authorized! Please take the xyz course. Not authorized! Please take the xyz course.
</Label>} </Label>}
</div> </div>
</Segment>
<Table basic='very' unstackable>
<Table.Body>
<Table.Row>
<Table.Cell>Cat</Table.Cell>
<Table.Cell>Meow</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Dog</Table.Cell>
<Table.Cell warning>
<Icon name='attention' />
Bark
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Bird</Table.Cell>
<Table.Cell>Chrip</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<Header as='h4'>Notes</Header>
<p>{tool.notes}</p>
</Segment> </Segment>
</Container>
</div> <Table basic='very' unstackable>
<Table.Body>
<Table.Row>
<Table.Cell>Cat</Table.Cell>
<Table.Cell>Meow</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Dog</Table.Cell>
<Table.Cell warning>
<Icon name='attention' />
Bark
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Bird</Table.Cell>
<Table.Cell>Chrip</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<Header as='h4'>Notes</Header>
<p>{tool.notes}</p>
</Segment>
</Container>
); );
} }
} }