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.action == 'arm') {
			return { msg: 'Arming...', canArm: false, canDisarm: true, };
		} else if (status.action == 'disarm') {
			return { msg: 'Disarming...', canArm: false, 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: false, };
		} 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.slug === match.params.slug
		);

		const status = toolStatus[match.params.slug] || null;
		const decodedStatus = this.decodeStatus(status);
		console.log(decodedStatus);

		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>

					<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>
				</Container>
			</div>
		);
	}
}

export default Tool;