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 ?
<div>
<Route exact path='/' render={props =>
<Categories {...props} data={toolData} />
<Categories {...props} data={toolData} user={user} />
} />
<Route exact path='/:category' render={props =>

View File

@ -1,14 +1,16 @@
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 Admin from './Admin';
class Categories extends Component {
render() {
const data = this.props.data;
const user = this.props.user;
const match = this.props.match;
return (
<div>
<Container>
<Breadcrumb size='large'>
<Breadcrumb.Section active>Categories</Breadcrumb.Section>
</Breadcrumb>
@ -25,7 +27,8 @@ class Categories extends Component {
</Item>
)}
</Item.Group>
</div>
{user.profile.lockout_admin && <Admin />}
</Container>
);
}
}

View File

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

View File

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