79 lines
2.2 KiB
JavaScript
79 lines
2.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Label, Menu, Segment, Table, Input } from 'semantic-ui-react'
|
|
import { Link } from 'react-router-dom';
|
|
|
|
class Tool extends Component {
|
|
render() {
|
|
const data = this.props.data;
|
|
const user = this.props.user;
|
|
const match = this.props.match;
|
|
|
|
const category = data.categories.find((x) =>
|
|
x.slug === match.params.category
|
|
);
|
|
|
|
const tool = category.tools.find((x) =>
|
|
x.id.toString() === match.params.id
|
|
);
|
|
|
|
const approved = user.authorizedTools.includes(tool.id);
|
|
|
|
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>
|
|
|
|
<Segment>
|
|
<Image src={tool.photo} size='medium' centered rounded />
|
|
<Segment textAlign='center' basic>
|
|
<p>Status: Off</p>
|
|
<div>
|
|
<Button color='green' disabled={!approved}>
|
|
<Icon name='lightning' /> Arm
|
|
</Button>
|
|
<Button color='red' disabled={!approved}>
|
|
<Icon name='stop' /> Disarm
|
|
</Button>
|
|
</div>
|
|
{approved || <Label basic color='red' pointing>
|
|
Not authorized! Please take the xyz course.
|
|
</Label>}
|
|
</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>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Tool;
|