111 lines
3.4 KiB
JavaScript
111 lines
3.4 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 {
|
|
decodeStatus = status => {
|
|
if (status === null) {
|
|
return { msg: 'Unknown! Connection error?', canArm: false, canDisarm: false, };
|
|
} else if (status.action == 'arm') {
|
|
return { msg: 'Arming...', canArm: false, canDisarm: true, };
|
|
} else if (status.action == 'disarm') {
|
|
return { msg: 'Disarming...', canArm: true, canDisarm: false, };
|
|
} else if (status.state == 'off') {
|
|
return { msg: 'Off.', canArm: true, canDisarm: false, };
|
|
} else if (status.state == 'armed') {
|
|
return { msg: 'Armed.', canArm: false, canDisarm: true, };
|
|
} else if (status.state == 'on') {
|
|
return { msg: 'On.', canArm: false, canDisarm: true, };
|
|
} else {
|
|
return { msg: 'Error: Impossible state!', canArm: false, canDisarm: false, };
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const data = this.props.data;
|
|
const user = this.props.user;
|
|
const match = this.props.match;
|
|
const toolStatus = this.props.toolStatus || [];
|
|
const requestInterlock = this.props.requestInterlock;
|
|
|
|
const category = data.categories.find(x =>
|
|
x.slug === match.params.category
|
|
);
|
|
|
|
const tool = category.tools.find(x =>
|
|
x.id.toString() === match.params.id
|
|
);
|
|
|
|
const status = toolStatus.find(x =>
|
|
x.id.toString() === match.params.id
|
|
) || null;
|
|
const decodedStatus = this.decodeStatus(status);
|
|
console.log(decodedStatus);
|
|
|
|
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: {decodedStatus.msg}</p>
|
|
<div>
|
|
<Button color='green'
|
|
disabled={!approved || !decodedStatus.canArm}
|
|
onClick={() => requestInterlock({toolId: tool.id, action: 'arm',})}
|
|
>
|
|
<Icon name='lightning' /> Arm
|
|
</Button>
|
|
<Button color='red'
|
|
disabled={!approved || !decodedStatus.canDisarm}
|
|
onClick={() => requestInterlock({toolId: tool.id, action: 'disarm',})}
|
|
>
|
|
<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;
|