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 (
			<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>

					<Header as='h4'>Information</Header>
					<p>{tool.info}</p>
				</Segment>
			</Container>
		);
	}
}

export default Tool;