Add a link to auth server for admins
This commit is contained in:
parent
6a448aca85
commit
909a7645ff
29
webclient/src/Admin.js
Normal file
29
webclient/src/Admin.js
Normal 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;
|
|
@ -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 =>
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user