pslockout/webclient/src/Tool.js

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.armed && !status.on) {
			return { msg: 'Off', canArm: true, canDisarm: false, };
		} else if (status.armed && !status.on) {
			return { msg: 'Armed', canArm: false, canDisarm: true, };
		} else if (status.armed && status.on) {
			return { msg: 'On', canArm: false, canDisarm: true, };
		} else if (!status.armed && status.on) {
			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;